-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
328 lines (301 loc) · 20.9 KB
/
Copy pathindex.html
File metadata and controls
328 lines (301 loc) · 20.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - Academic Homepage</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
background: '#fefffe',
foreground: '#0f172a',
primary: '#1e293b',
accent: '#d4a562',
'accent-dark': '#b88a4d',
muted: '#64748b',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
serif: ['Crimson Text', 'serif'],
}
}
}
}
</script>
</head>
<body class="bg-background text-foreground antialiased font-sans">
<!-- Top Navigation -->
<nav class="top-nav glass fixed top-0 left-0 right-0 z-50 transition-all duration-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16 lg:h-20">
<!-- Logo/Name -->
<div class="flex-shrink-0">
<a href="#" class="text-xl lg:text-2xl font-serif font-semibold text-primary hover:text-accent transition-colors duration-200">
Your Name
</a>
</div>
<!-- Desktop Navigation -->
<div class="hidden lg:block">
<div class="ml-10 flex items-center space-x-8">
<ul class="nav-links flex space-x-8">
<li><a href="#homepage" class="nav-item">Homepage</a></li>
<li><a href="#about" class="nav-item">About Me</a></li>
<li><a href="#latest-news" class="nav-item">News</a></li>
<li><a href="#publications" class="nav-item">Publications</a></li>
<li><a href="#honors" class="nav-item">Honors</a></li>
<li><a href="#services" class="nav-item">Service</a></li>
<li><a href="#educations" class="nav-item">Education</a></li>
<li><a href="#contact" class="nav-item">Contact</a></li>
</ul>
</div>
</div>
<!-- Mobile Menu Button -->
<div class="lg:hidden flex items-center">
<button class="mobile-menu-btn p-2 rounded-md text-neutral-600 hover:text-primary">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div class="mobile-menu hidden lg:hidden absolute top-16 left-0 w-full bg-white/95 backdrop-blur-md border-b border-neutral-200 shadow-lg" id="mobile-menu">
<ul class="flex flex-col py-4 px-4 space-y-4">
<li><a href="#homepage" class="mobile-nav-item block text-neutral-600 hover:text-primary font-medium">Homepage</a></li>
<li><a href="#about" class="mobile-nav-item block text-neutral-600 hover:text-primary font-medium">About Me</a></li>
<li><a href="#latest-news" class="mobile-nav-item block text-neutral-600 hover:text-primary font-medium">News</a></li>
<li><a href="#publications" class="mobile-nav-item block text-neutral-600 hover:text-primary font-medium">Publications</a></li>
<li><a href="#honors" class="mobile-nav-item block text-neutral-600 hover:text-primary font-medium">Honors</a></li>
<li><a href="#services" class="mobile-nav-item block text-neutral-600 hover:text-primary font-medium">Service</a></li>
<li><a href="#educations" class="mobile-nav-item block text-neutral-600 hover:text-primary font-medium">Education</a></li>
<li><a href="#contact" class="mobile-nav-item block text-neutral-600 hover:text-primary font-medium">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Main Content Grid -->
<main class="min-h-screen pt-20 lg:pt-28 pb-12">
<div class="w-full max-w-[1380px] mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid-layout">
<!-- Left Column - Profile (Sticky) -->
<div class="profile-column">
<div class="profile-card sticky top-24">
<!-- Profile Image -->
<div class="profile-image-container mb-6 mx-auto max-w-[180px]">
<img src="assets/profile.jpg" id="profile-img" alt="Your Name" class="w-full h-auto rounded-xl shadow-sm bg-gray-200">
</div>
<!-- Name and Title -->
<div class="text-center mb-6">
<h1 class="text-3xl font-serif font-bold text-primary mb-2">Yichao Liu</h1>
<p class="text-lg text-accent font-medium mb-1">Your Role / Position</p>
<p class="text-neutral-600 mb-2">Your University / Organization</p>
</div>
<!-- Contact Links -->
<div class="social-links flex flex-wrap justify-center gap-3 mb-6">
<a href="mailto:your.email@example.com" class="social-btn" title="Email"><i class="fas fa-envelope"></i></a>
<a href="#" target="_blank" class="social-btn" title="CV"><i class="fas fa-file-pdf"></i></a>
<a href="#" target="_blank" class="social-btn" title="Google Scholar"><i class="fas fa-graduation-cap"></i></a>
<a href="#" target="_blank" class="social-btn" title="GitHub"><i class="fab fa-github"></i></a>
<a href="#" target="_blank" class="social-btn" title="ResearchGate"><i class="fab fa-researchgate"></i></a>
<a href="#" target="_blank" class="social-btn" title="Blog"><i class="fas fa-blog"></i></a>
</div>
<!-- Research Interests -->
<div class="research-interests-card bg-neutral-100 rounded-xl p-5 mb-6">
<h3 class="font-serif font-bold text-lg text-primary mb-4 pb-2 border-b border-neutral-200 flex items-center">
<i class="fas fa-lightbulb text-accent mr-2 text-base"></i> Research Interests
</h3>
<ul class="space-y-3">
<li class="flex items-center text-neutral-700 hover:text-primary transition-colors">
<i class="fas fa-star text-accent/80 mr-3 w-5 text-center text-sm"></i>
<span class="text-sm font-medium">Interest 1</span>
</li>
<li class="flex items-center text-neutral-700 hover:text-primary transition-colors">
<i class="fas fa-star text-accent/80 mr-3 w-5 text-center text-sm"></i>
<span class="text-sm font-medium">Interest 2</span>
</li>
<li class="flex items-center text-neutral-700 hover:text-primary transition-colors">
<i class="fas fa-star text-accent/80 mr-3 w-5 text-center text-sm"></i>
<span class="text-sm font-medium">Interest 3</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Right Column - Content -->
<div class="content-column space-y-12">
<!-- About Section -->
<section id="homepage" class="scroll-mt-24">
<span id="about"></span> <!-- Anchor for About link -->
<div class="section-header mb-6">
<h2 class="text-3xl font-serif font-bold text-primary">About Me</h2>
</div>
<div class="prose max-w-none text-neutral-600 text-justify formal-font">
<p class="mb-4">This is your biography section. You can introduce your background, education, and current research focus here. For example: "I received my B.S. degree from [University Name] in [Year]. Currently, I am a [Position] at [University Name], advised by [Advisor Name]. My research focuses on [Topic 1] and [Topic 2]."</p>
<div class="highlight-box bg-accent/10 border-l-4 border-accent p-4 rounded-r-lg text-left font-sans">
<p><strong><i class="fas fa-lightbulb text-accent mr-2"></i>I am actively seeking collaborators/students.</strong> If you are interested in my work, please feel free to contact me via email: <a href="mailto:your.email@example.com" class="link-highlight">your.email@example.com</a>.</p>
</div>
</div>
</section>
<!-- Research Thrust Section -->
<section id="research-thrust" class="scroll-mt-24">
<div class="section-header mb-6">
<h2 class="text-3xl font-serif font-bold text-primary">🚀 Research Thrust</h2>
</div>
<div class="prose max-w-none text-neutral-600 text-justify formal-font">
<blockquote class="pl-4 border-l-4 border-accent/30 italic text-neutral-600 bg-neutral-50/50 p-4 rounded-r-lg mb-6">
"Your research vision statement goes here. Describe your high-level goals and the impact you hope to achieve with your work."
</blockquote>
<p class="mb-8">Describe your research methodology or framework here. You can highlight key concepts using <b>bold text</b> or <span class="text-primary italic border-b border-primary/30 pb-0.5">styled spans</span> to draw attention to important terms.</p>
<div class="grid md:grid-cols-2 gap-6">
<!-- Thrust 1 -->
<div class="thrust-card bg-neutral-50 rounded-xl p-5 border border-neutral-100 hover:shadow-md transition-all duration-300 group flex flex-col h-full">
<h3 class="font-serif font-bold text-lg text-primary mb-4 flex items-center group-hover:text-accent transition-colors">
<i class="fas fa-project-diagram text-accent mr-2 group-hover:scale-110 transition-transform"></i> Research Direction A
</h3>
<p class="text-sm leading-relaxed text-justify text-neutral-600 flex-grow">
Description of your first research direction. Explain the challenges, your approach, and the significance of this area.
</p>
</div>
<!-- Thrust 2 -->
<div class="thrust-card bg-neutral-50 rounded-xl p-5 border border-neutral-100 hover:shadow-md transition-all duration-300 group flex flex-col h-full">
<h3 class="font-serif font-bold text-lg text-primary mb-4 flex items-center group-hover:text-accent transition-colors">
<i class="fas fa-brain text-accent mr-2 group-hover:scale-110 transition-transform"></i> Research Direction B
</h3>
<p class="text-sm leading-relaxed text-justify text-neutral-600 flex-grow">
Description of your second research direction. Highlight how it complements the first one or addresses a different aspect of the problem.
</p>
</div>
</div>
</div>
</section>
<!-- News Section -->
<section id="latest-news" class="scroll-mt-24">
<div class="section-header mb-6 flex justify-between items-center">
<h2 class="text-3xl font-serif font-bold text-primary">🔥 News</h2>
<a href="pages/all-news.html" class="text-sm font-medium text-accent hover:text-accent-dark transition-colors">View All <i class="fas fa-arrow-right ml-1"></i></a>
</div>
<div id="news-container" class="news-list space-y-4">
<!-- Dynamic Content loaded from data/news.json -->
</div>
</section>
<!-- Publications Section -->
<section id="publications" class="scroll-mt-24">
<div class="section-header mb-6">
<h2 class="text-3xl font-serif font-bold text-primary">📄 Publications</h2>
<p class="text-sm text-neutral-500 mt-1">(* means equal contribution)</p>
</div>
<div class="publications-list space-y-6">
<!-- Dynamic Content loaded from data/publications.json -->
</div>
</section>
<!-- Honors Section -->
<section id="honors" class="scroll-mt-24">
<div class="section-header mb-6 flex justify-between items-center">
<h2 class="text-3xl font-serif font-bold text-primary">🏆 Honors & Awards</h2>
<a href="pages/all-honors.html" class="text-sm font-medium text-accent hover:text-accent-dark transition-colors">View All <i class="fas fa-arrow-right ml-1"></i></a>
</div>
<div id="honors-container" class="honors-list space-y-4">
<!-- Dynamic Content loaded from data/honors.json -->
</div>
</section>
<!-- Academic Service Section -->
<section id="services" class="scroll-mt-24">
<div class="section-header mb-6">
<h2 class="text-3xl font-serif font-bold text-primary">💼 Academic Service</h2>
</div>
<div class="timeline space-y-6">
<!-- Reviewer -->
<div class="timeline-item flex gap-4">
<div class="school-logo-container w-16 h-16 flex-shrink-0 bg-white rounded-lg shadow-sm p-2 flex items-center justify-center border border-neutral-100 text-2xl text-accent">
<i class="fas fa-edit"></i>
</div>
<div class="timeline-content">
<h3 class="font-semibold text-primary">Conference Reviewer</h3>
<p class="text-sm text-accent font-medium">CVPR, ICCV, ECCV, NeurIPS, ICLR</p>
<p class="text-sm text-neutral-600 mt-1 leading-relaxed">
Served as a program committee member and reviewer for top-tier computer vision and machine learning conferences since 2023.
</p>
</div>
</div>
<!-- Teaching Assistant -->
<div class="timeline-item flex gap-4">
<div class="school-logo-container w-16 h-16 flex-shrink-0 bg-white rounded-lg shadow-sm p-2 flex items-center justify-center border border-neutral-100 text-2xl text-accent">
<i class="fas fa-chalkboard-teacher"></i>
</div>
<div class="timeline-content">
<h3 class="font-semibold text-primary">Teaching Assistant</h3>
<p class="text-sm text-accent font-medium">Your University</p>
<p class="text-sm text-neutral-600 mt-1 leading-relaxed">
Course: CS101 Introduction to Computer Science (Fall 2024).
</p>
</div>
</div>
</div>
</section>
<!-- Education Section -->
<section id="educations" class="scroll-mt-24">
<div class="section-header mb-6">
<h2 class="text-3xl font-serif font-bold text-primary">🎓 Education</h2>
</div>
<div class="timeline space-y-6">
<!-- Example Education Item -->
<div class="timeline-item flex gap-4">
<div class="school-logo-container w-16 h-16 flex-shrink-0 bg-white rounded-lg shadow-sm p-2 flex items-center justify-center border border-neutral-100">
<i class="fas fa-graduation-cap text-3xl text-neutral-300"></i>
</div>
<div class="timeline-content">
<h3 class="font-semibold text-primary">Ph.D. in Computer Science</h3>
<p class="text-sm text-accent font-medium">Your University</p>
<p class="text-sm text-neutral-500">2023 - Present</p>
<p class="text-sm text-neutral-600 mt-1">
Thesis: Advanced Topics in Artificial Intelligence
</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="scroll-mt-24 mb-12">
<div class="section-header mb-6">
<h2 class="text-3xl font-serif font-bold text-primary">📬 Contact</h2>
</div>
<div class="contact-card bg-neutral-50 rounded-xl p-6 border border-neutral-100">
<div class="grid md:grid-cols-2 gap-6">
<div>
<h3 class="font-serif font-bold text-lg text-primary mb-3">Contact Information</h3>
<ul class="space-y-3 text-neutral-600">
<li class="flex items-start">
<i class="fas fa-envelope mt-1 w-5 text-accent"></i>
<span class="ml-2">your.email@example.com</span>
</li>
<li class="flex items-start">
<i class="fas fa-map-marker-alt mt-1 w-5 text-accent"></i>
<span class="ml-2">Your Office Location<br>University Name<br>City, Country</span>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-white border-t border-neutral-200 py-8 mt-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<p class="text-neutral-500 text-sm">
© 2024 Your Name. All rights reserved. <br>
Powered by <a href="#" class="text-accent hover:text-accent-dark">AcaNova-X Template</a>
</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>