Skip to content

Commit b4cd39b

Browse files
asudehasudeh
committed
--
1 parent 21e3a1a commit b4cd39b

10 files changed

Lines changed: 714 additions & 0 deletions

File tree

projects.htm renamed to __projects.htm

File renamed without changes.

‎genai4dm/.DS_Store‎

6 KB
Binary file not shown.

‎genai4dm/imgs/chameleon.jpg‎

194 KB
Loading

‎genai4dm/imgs/needle.jpg‎

112 KB
Loading

‎genai4dm/imgs/needledb.jpg‎

171 KB
Loading

‎genai4dm/index.html‎

Lines changed: 315 additions & 0 deletions
Large diffs are not rendered by default.

‎genai4dm/script.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const tocLinks = Array.from(document.querySelectorAll('.toc-inner a'));
2+
const sections = tocLinks
3+
.map(link => document.querySelector(link.getAttribute('href')))
4+
.filter(Boolean);
5+
6+
const setActiveLink = () => {
7+
const y = window.scrollY + 120;
8+
let activeId = sections[0]?.id;
9+
10+
sections.forEach(section => {
11+
if (section.offsetTop <= y) activeId = section.id;
12+
});
13+
14+
tocLinks.forEach(link => {
15+
const isActive = link.getAttribute('href') === `#${activeId}`;
16+
link.classList.toggle('active', isActive);
17+
});
18+
};
19+
20+
window.addEventListener('scroll', setActiveLink, { passive: true });
21+
window.addEventListener('load', setActiveLink);

‎genai4dm/style.css‎

Lines changed: 374 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,374 @@
1+
:root {
2+
--bg: #f7f9fc;
3+
--surface: #ffffff;
4+
--surface-2: #eef3fa;
5+
--text: #18212f;
6+
--muted: #5d6b82;
7+
--line: #d8e0ec;
8+
--accent: #0d5cab;
9+
--accent-dark: #084987;
10+
--shadow: 0 16px 40px rgba(18, 34, 61, 0.08);
11+
--radius: 18px;
12+
--container: 1120px;
13+
}
14+
15+
* { box-sizing: border-box; }
16+
html { scroll-behavior: smooth; }
17+
body {
18+
margin: 0;
19+
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
20+
color: var(--text);
21+
background: var(--bg);
22+
line-height: 1.7;
23+
}
24+
25+
a {
26+
color: var(--accent);
27+
text-decoration: none;
28+
}
29+
30+
a:hover { color: var(--accent-dark); }
31+
32+
.container {
33+
width: min(calc(100% - 2rem), var(--container));
34+
margin: 0 auto;
35+
}
36+
37+
.hero {
38+
background: radial-gradient(circle at top left, rgba(29, 111, 196, 0.16), transparent 38%), linear-gradient(180deg, #ffffff 0%, #eef4fb 100%);
39+
border-bottom: 1px solid var(--line);
40+
}
41+
42+
.hero-inner {
43+
padding: 5.5rem 0 4rem;
44+
}
45+
46+
.hero-layout {
47+
display: grid;
48+
grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr);
49+
gap: 2rem;
50+
align-items: start;
51+
}
52+
53+
.hero-main {
54+
min-width: 0;
55+
}
56+
57+
.hero-toc {
58+
background: var(--surface);
59+
border: 1px solid var(--line);
60+
border-radius: var(--radius);
61+
box-shadow: var(--shadow);
62+
padding: 1.25rem;
63+
}
64+
65+
.eyebrow,
66+
.section-label,
67+
.paper-tag {
68+
text-transform: uppercase;
69+
letter-spacing: 0.12em;
70+
font-size: 0.78rem;
71+
font-weight: 700;
72+
color: var(--accent);
73+
}
74+
75+
h1, h2, h3 {
76+
line-height: 1.15;
77+
margin: 0 0 0.75rem;
78+
}
79+
80+
h1 {
81+
font-size: clamp(2.3rem, 4vw, 4rem);
82+
max-width: 14ch;
83+
}
84+
85+
h2 {
86+
font-size: clamp(1.7rem, 2.5vw, 2.5rem);
87+
}
88+
89+
h3 {
90+
font-size: 1.1rem;
91+
}
92+
93+
.subtitle {
94+
font-size: 1.08rem;
95+
color: var(--muted);
96+
font-weight: 600;
97+
margin-bottom: 1rem;
98+
}
99+
100+
.hero-text {
101+
max-width: 760px;
102+
font-size: 1.08rem;
103+
color: #243248;
104+
}
105+
106+
.hero-actions {
107+
display: flex;
108+
gap: 0.9rem;
109+
flex-wrap: wrap;
110+
margin: 1.75rem 0 2rem;
111+
}
112+
113+
.button {
114+
display: inline-flex;
115+
align-items: center;
116+
justify-content: center;
117+
border-radius: 999px;
118+
padding: 0.82rem 1.2rem;
119+
font-weight: 700;
120+
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
121+
}
122+
123+
.button:hover {
124+
transform: translateY(-1px);
125+
}
126+
127+
.button-primary {
128+
background: var(--accent);
129+
color: white;
130+
box-shadow: var(--shadow);
131+
}
132+
133+
.button-primary:hover { color: white; background: var(--accent-dark); }
134+
135+
.button-secondary {
136+
background: white;
137+
color: var(--text);
138+
border: 1px solid var(--line);
139+
}
140+
141+
.award-meta {
142+
display: grid;
143+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
144+
gap: 0.75rem;
145+
margin-top: 1.5rem;
146+
}
147+
148+
.award-meta div,
149+
.team-item,
150+
.card,
151+
.paper-card,
152+
.pub-toc {
153+
background: var(--surface);
154+
border: 1px solid var(--line);
155+
border-radius: var(--radius);
156+
box-shadow: var(--shadow);
157+
}
158+
159+
.award-meta div {
160+
padding: 1rem 1.1rem;
161+
font-weight: 600;
162+
}
163+
164+
.award-meta span {
165+
display: block;
166+
color: var(--muted);
167+
font-size: 0.86rem;
168+
font-weight: 700;
169+
text-transform: uppercase;
170+
letter-spacing: 0.08em;
171+
margin-bottom: 0.2rem;
172+
}
173+
174+
.toc-inner {
175+
display: grid;
176+
gap: 0.7rem;
177+
padding-top: 0.25rem;
178+
}
179+
180+
.toc-inner a {
181+
color: var(--muted);
182+
font-weight: 700;
183+
padding: 0.15rem 0;
184+
border-bottom: 2px solid transparent;
185+
}
186+
187+
.toc-inner a.active,
188+
.toc-inner a:hover {
189+
color: var(--accent);
190+
border-color: var(--accent);
191+
}
192+
193+
.section {
194+
padding: 4.8rem 0;
195+
}
196+
197+
.section.alt {
198+
background: linear-gradient(180deg, rgba(238, 243, 250, 0.7) 0%, rgba(247, 249, 252, 0.95) 100%);
199+
}
200+
201+
.two-col {
202+
display: grid;
203+
grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.6fr);
204+
gap: 2rem;
205+
align-items: start;
206+
}
207+
208+
.card-grid {
209+
display: grid;
210+
gap: 1.2rem;
211+
}
212+
213+
.three-up {
214+
grid-template-columns: repeat(3, minmax(0, 1fr));
215+
}
216+
217+
.card,
218+
.paper-card,
219+
.team-item,
220+
.pub-toc {
221+
padding: 1.35rem;
222+
}
223+
224+
.section-intro {
225+
max-width: 760px;
226+
color: var(--muted);
227+
}
228+
229+
.paper-meta {
230+
color: var(--muted);
231+
font-size: 0.97rem;
232+
margin-top: -0.15rem;
233+
}
234+
235+
.paper-links {
236+
display: flex;
237+
flex-wrap: wrap;
238+
gap: 0.9rem;
239+
margin-top: 0.2rem;
240+
}
241+
242+
.paper-links a {
243+
font-weight: 700;
244+
}
245+
246+
.paper-feature {
247+
display: grid;
248+
gap: 1.25rem;
249+
}
250+
251+
.paper-feature-copy > :first-child {
252+
margin-top: 0;
253+
}
254+
255+
.paper-points {
256+
margin: 0.5rem 0 1rem 1.15rem;
257+
padding: 0;
258+
}
259+
260+
.paper-points li + li {
261+
margin-top: 0.45rem;
262+
}
263+
264+
.paper-citation {
265+
color: var(--muted);
266+
font-size: 0.97rem;
267+
}
268+
269+
.paper-figure {
270+
margin: 0;
271+
}
272+
273+
.paper-figure img {
274+
display: block;
275+
width: 50%;
276+
max-width: 380px;
277+
margin: 0 auto;
278+
border-radius: 14px;
279+
border: 1px solid var(--line);
280+
box-shadow: var(--shadow);
281+
}
282+
283+
.pub-layout {
284+
display: grid;
285+
grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.6fr);
286+
gap: 1.4rem;
287+
align-items: start;
288+
margin-top: 1.5rem;
289+
}
290+
291+
.pub-toc {
292+
position: sticky;
293+
top: 4.8rem;
294+
}
295+
296+
.pub-toc ol {
297+
padding-left: 1.15rem;
298+
margin-bottom: 0.5rem;
299+
}
300+
301+
.pub-toc li + li { margin-top: 0.55rem; }
302+
.toc-note { color: var(--muted); font-size: 0.94rem; }
303+
304+
.pub-content {
305+
display: grid;
306+
gap: 1rem;
307+
}
308+
309+
.pub-group-heading {
310+
font-size: 1.1rem;
311+
font-weight: 800;
312+
letter-spacing: 0.02em;
313+
color: var(--accent-dark);
314+
padding-top: 0.25rem;
315+
}
316+
317+
.team-list {
318+
display: grid;
319+
gap: 1rem;
320+
}
321+
322+
.site-footer {
323+
border-top: 1px solid var(--line);
324+
background: #fff;
325+
}
326+
327+
.footer-inner {
328+
display: flex;
329+
flex-wrap: wrap;
330+
justify-content: space-between;
331+
gap: 1rem;
332+
padding: 1.5rem 0 2rem;
333+
color: var(--muted);
334+
font-size: 0.96rem;
335+
}
336+
337+
code {
338+
background: #eef3fa;
339+
padding: 0.15rem 0.4rem;
340+
border-radius: 8px;
341+
border: 1px solid var(--line);
342+
}
343+
344+
@media (max-width: 900px) {
345+
.hero-layout,
346+
.two-col,
347+
.pub-layout,
348+
.three-up {
349+
grid-template-columns: 1fr;
350+
}
351+
352+
.pub-toc {
353+
position: static;
354+
}
355+
356+
.hero-inner {
357+
padding-top: 4.2rem;
358+
}
359+
}
360+
361+
@media (max-width: 640px) {
362+
.section {
363+
padding: 3.8rem 0;
364+
}
365+
366+
.hero-actions {
367+
flex-direction: column;
368+
align-items: stretch;
369+
}
370+
371+
.button {
372+
width: 100%;
373+
}
374+
}

0 commit comments

Comments
 (0)