Hugging Face's logo

Spaces:
Aedelon
/
deepsite-t1
Running

App Files Community
Aedelon commited on
Commit
b0ce623
·
verified ·
1 Parent(s): a6750b4

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +732 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite T1
3
- emoji: 📚
4
- colorFrom: red
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: deepsite-t1
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,732 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dr. Alex Chen | AI Researcher</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ scroll-behavior: smooth;
15
+ background-color: #f8fafc;
16
+ }
17
+
18
+ .gradient-text {
19
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
20
+ -webkit-background-clip: text;
21
+ background-clip: text;
22
+ color: transparent;
23
+ }
24
+
25
+ .hero-bg {
26
+ background: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.1) 0%, rgba(255, 255, 255, 0) 30%),
27
+ radial-gradient(circle at 90% 20%, rgba(139, 92, 246, 0.1) 0%, rgba(255, 255, 255, 0) 30%);
28
+ }
29
+
30
+ .card-hover {
31
+ transition: all 0.3s ease;
32
+ }
33
+
34
+ .card-hover:hover {
35
+ transform: translateY(-5px);
36
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
37
+ }
38
+
39
+ .timeline-item:not(:last-child)::after {
40
+ content: '';
41
+ position: absolute;
42
+ left: 24px;
43
+ top: 32px;
44
+ height: calc(100% - 32px);
45
+ width: 2px;
46
+ background-color: #e2e8f0;
47
+ }
48
+
49
+ .animate-float {
50
+ animation: float 6s ease-in-out infinite;
51
+ }
52
+
53
+ @keyframes float {
54
+ 0% { transform: translateY(0px); }
55
+ 50% { transform: translateY(-20px); }
56
+ 100% { transform: translateY(0px); }
57
+ }
58
+
59
+ .animate-pulse-slow {
60
+ animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
61
+ }
62
+
63
+ @keyframes pulse {
64
+ 0%, 100% { opacity: 1; }
65
+ 50% { opacity: 0.5; }
66
+ }
67
+
68
+ .tech-icon {
69
+ transition: all 0.3s ease;
70
+ }
71
+
72
+ .tech-icon:hover {
73
+ transform: scale(1.2);
74
+ }
75
+
76
+ .project-card {
77
+ perspective: 1000px;
78
+ }
79
+
80
+ .project-inner {
81
+ transition: transform 0.6s;
82
+ transform-style: preserve-3d;
83
+ }
84
+
85
+ .project-card:hover .project-inner {
86
+ transform: rotateY(180deg);
87
+ }
88
+
89
+ .project-front, .project-back {
90
+ backface-visibility: hidden;
91
+ position: absolute;
92
+ width: 100%;
93
+ height: 100%;
94
+ }
95
+
96
+ .project-back {
97
+ transform: rotateY(180deg);
98
+ }
99
+ </style>
100
+ </head>
101
+ <body class="text-gray-800">
102
+ <!-- Navigation -->
103
+ <nav class="fixed w-full bg-white bg-opacity-90 backdrop-filter backdrop-blur-lg z-50 shadow-sm">
104
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
105
+ <div class="flex justify-between h-16 items-center">
106
+ <div class="flex-shrink-0 flex items-center">
107
+ <span class="text-xl font-bold gradient-text">Dr. Alex Chen</span>
108
+ </div>
109
+ <div class="hidden md:block">
110
+ <div class="ml-10 flex items-baseline space-x-8">
111
+ <a href="#home" class="text-gray-900 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Home</a>
112
+ <a href="#about" class="text-gray-900 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">About</a>
113
+ <a href="#research" class="text-gray-900 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Research</a>
114
+ <a href="#publications" class="text-gray-900 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Publications</a>
115
+ <a href="#contact" class="text-gray-900 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Contact</a>
116
+ </div>
117
+ </div>
118
+ <div class="md:hidden">
119
+ <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-blue-600 focus:outline-none">
120
+ <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
121
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
122
+ </svg>
123
+ </button>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Mobile menu -->
129
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
130
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
131
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600">Home</a>
132
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600">About</a>
133
+ <a href="#research" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600">Research</a>
134
+ <a href="#publications" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600">Publications</a>
135
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600">Contact</a>
136
+ </div>
137
+ </div>
138
+ </nav>
139
+
140
+ <!-- Hero Section -->
141
+ <section id="home" class="hero-bg pt-32 pb-20 px-4 sm:px-6 lg:px-8">
142
+ <div class="max-w-7xl mx-auto">
143
+ <div class="lg:flex lg:items-center lg:justify-between">
144
+ <div class="lg:w-1/2">
145
+ <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6">
146
+ <span class="gradient-text">Dr. Alex Chen</span><br>
147
+ <span class="text-gray-800">AI Researcher & Machine Learning Expert</span>
148
+ </h1>
149
+ <p class="text-lg text-gray-600 mb-8 max-w-lg">
150
+ Pioneering research at the intersection of deep learning, computer vision, and natural language processing.
151
+ Committed to advancing AI for social good.
152
+ </p>
153
+ <div class="flex flex-wrap gap-4">
154
+ <a href="#research" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-lg hover:shadow-lg transition-all duration-300">
155
+ Explore Research
156
+ </a>
157
+ <a href="#contact" class="px-6 py-3 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-all duration-300">
158
+ Contact Me
159
+ </a>
160
+ </div>
161
+ </div>
162
+ <div class="lg:w-1/2 mt-12 lg:mt-0 flex justify-center">
163
+ <div class="relative w-64 h-64 sm:w-80 sm:h-80">
164
+ <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full opacity-20 blur-xl animate-pulse-slow"></div>
165
+ <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"
166
+ alt="Dr. Alex Chen"
167
+ class="relative w-full h-full rounded-full object-cover border-4 border-white shadow-xl animate-float">
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </section>
173
+
174
+ <!-- About Section -->
175
+ <section id="about" class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
176
+ <div class="max-w-7xl mx-auto">
177
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">About Me</h2>
178
+
179
+ <div class="lg:flex lg:items-center lg:space-x-12">
180
+ <div class="lg:w-1/2 mb-12 lg:mb-0">
181
+ <h3 class="text-2xl font-semibold text-gray-800 mb-6">Biography</h3>
182
+ <p class="text-gray-600 mb-6">
183
+ I am an AI researcher with a passion for developing innovative machine learning solutions to complex real-world problems.
184
+ My research focuses on advancing the frontiers of artificial intelligence through interdisciplinary approaches.
185
+ </p>
186
+ <p class="text-gray-600 mb-6">
187
+ Currently, I lead the AI Research Lab at Stanford University, where my team explores novel architectures for
188
+ multimodal learning, interpretable AI, and robust machine learning systems.
189
+ </p>
190
+ <p class="text-gray-600">
191
+ My work has been recognized with several awards including the NSF CAREER Award and the AAAI Outstanding Paper Award.
192
+ I'm committed to mentoring the next generation of AI researchers and promoting ethical AI development.
193
+ </p>
194
+
195
+ <div class="mt-8">
196
+ <h4 class="text-lg font-semibold text-gray-800 mb-4">Research Interests</h4>
197
+ <div class="flex flex-wrap gap-3">
198
+ <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm">Deep Learning</span>
199
+ <span class="px-3 py-1 bg-purple-50 text-purple-600 rounded-full text-sm">Computer Vision</span>
200
+ <span class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm">NLP</span>
201
+ <span class="px-3 py-1 bg-yellow-50 text-yellow-600 rounded-full text-sm">Multimodal Learning</span>
202
+ <span class="px-3 py-1 bg-red-50 text-red-600 rounded-full text-sm">Interpretable AI</span>
203
+ <span class="px-3 py-1 bg-indigo-50 text-indigo-600 rounded-full text-sm">Robust ML</span>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <div class="lg:w-1/2">
209
+ <h3 class="text-2xl font-semibold text-gray-800 mb-6">Education & Experience</h3>
210
+
211
+ <div class="space-y-8 relative">
212
+ <!-- Timeline items -->
213
+ <div class="timeline-item relative pl-12">
214
+ <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
215
+ <i class="fas fa-graduation-cap"></i>
216
+ </div>
217
+ <h4 class="text-lg font-semibold text-gray-800">PhD in Computer Science</h4>
218
+ <p class="text-gray-600">Stanford University | 2015-2019</p>
219
+ <p class="text-gray-500 mt-1">Thesis: "Advancing Multimodal Learning Through Neural Architecture Search"</p>
220
+ </div>
221
+
222
+ <div class="timeline-item relative pl-12">
223
+ <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white">
224
+ <i class="fas fa-briefcase"></i>
225
+ </div>
226
+ <h4 class="text-lg font-semibold text-gray-800">AI Research Scientist</h4>
227
+ <p class="text-gray-600">Google Brain | 2019-2021</p>
228
+ <p class="text-gray-500 mt-1">Led research on self-supervised learning for computer vision applications</p>
229
+ </div>
230
+
231
+ <div class="timeline-item relative pl-12">
232
+ <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white">
233
+ <i class="fas fa-university"></i>
234
+ </div>
235
+ <h4 class="text-lg font-semibold text-gray-800">Assistant Professor</h4>
236
+ <p class="text-gray-600">Stanford University | 2021-Present</p>
237
+ <p class="text-gray-500 mt-1">Director of the AI Research Lab, focusing on interpretable and robust AI systems</p>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Skills -->
244
+ <div class="mt-20">
245
+ <h3 class="text-2xl font-semibold text-center text-gray-800 mb-8">Technical Expertise</h3>
246
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
247
+ <div class="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
248
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" class="w-12 h-12 tech-icon" alt="Python">
249
+ <span class="mt-2 text-sm font-medium text-gray-700">Python</span>
250
+ </div>
251
+ <div class="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
252
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/pytorch/pytorch-original.svg" class="w-12 h-12 tech-icon" alt="PyTorch">
253
+ <span class="mt-2 text-sm font-medium text-gray-700">PyTorch</span>
254
+ </div>
255
+ <div class="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
256
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tensorflow/tensorflow-original.svg" class="w-12 h-12 tech-icon" alt="TensorFlow">
257
+ <span class="mt-2 text-sm font-medium text-gray-700">TensorFlow</span>
258
+ </div>
259
+ <div class="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
260
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/numpy/numpy-original.svg" class="w-12 h-12 tech-icon" alt="NumPy">
261
+ <span class="mt-2 text-sm font-medium text-gray-700">NumPy</span>
262
+ </div>
263
+ <div class="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
264
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/pandas/pandas-original.svg" class="w-12 h-12 tech-icon" alt="Pandas">
265
+ <span class="mt-2 text-sm font-medium text-gray-700">Pandas</span>
266
+ </div>
267
+ <div class="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
268
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg" class="w-12 h-12 tech-icon" alt="Docker">
269
+ <span class="mt-2 text-sm font-medium text-gray-700">Docker</span>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </section>
275
+
276
+ <!-- Research Section -->
277
+ <section id="research" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
278
+ <div class="max-w-7xl mx-auto">
279
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Research Areas</h2>
280
+
281
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
282
+ <!-- Research Card 1 -->
283
+ <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
284
+ <div class="h-48 bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center">
285
+ <i class="fas fa-brain text-white text-6xl"></i>
286
+ </div>
287
+ <div class="p-6">
288
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Multimodal Learning</h3>
289
+ <p class="text-gray-600 mb-4">
290
+ Developing novel architectures that effectively combine vision, language, and other modalities
291
+ for more comprehensive AI understanding.
292
+ </p>
293
+ <a href="#" class="text-blue-600 font-medium inline-flex items-center">
294
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
295
+ </a>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- Research Card 2 -->
300
+ <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
301
+ <div class="h-48 bg-gradient-to-r from-purple-400 to-purple-600 flex items-center justify-center">
302
+ <i class="fas fa-eye text-white text-6xl"></i>
303
+ </div>
304
+ <div class="p-6">
305
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Interpretable AI</h3>
306
+ <p class="text-gray-600 mb-4">
307
+ Creating methods to make complex neural networks more transparent and explainable
308
+ without sacrificing performance.
309
+ </p>
310
+ <a href="#" class="text-purple-600 font-medium inline-flex items-center">
311
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
312
+ </a>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Research Card 3 -->
317
+ <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
318
+ <div class="h-48 bg-gradient-to-r from-green-400 to-green-600 flex items-center justify-center">
319
+ <i class="fas fa-shield-alt text-white text-6xl"></i>
320
+ </div>
321
+ <div class="p-6">
322
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Robust ML</h3>
323
+ <p class="text-gray-600 mb-4">
324
+ Building machine learning systems that maintain performance under distribution shifts,
325
+ adversarial attacks, and real-world noise.
326
+ </p>
327
+ <a href="#" class="text-green-600 font-medium inline-flex items-center">
328
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
329
+ </a>
330
+ </div>
331
+ </div>
332
+
333
+ <!-- Research Card 4 -->
334
+ <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
335
+ <div class="h-48 bg-gradient-to-r from-yellow-400 to-yellow-600 flex items-center justify-center">
336
+ <i class="fas fa-language text-white text-6xl"></i>
337
+ </div>
338
+ <div class="p-6">
339
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Language Understanding</h3>
340
+ <p class="text-gray-600 mb-4">
341
+ Advancing neural language models with better contextual understanding,
342
+ reasoning capabilities, and multilingual performance.
343
+ </p>
344
+ <a href="#" class="text-yellow-600 font-medium inline-flex items-center">
345
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
346
+ </a>
347
+ </div>
348
+ </div>
349
+
350
+ <!-- Research Card 5 -->
351
+ <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
352
+ <div class="h-48 bg-gradient-to-r from-red-400 to-red-600 flex items-center justify-center">
353
+ <i class="fas fa-robot text-white text-6xl"></i>
354
+ </div>
355
+ <div class="p-6">
356
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Embodied AI</h3>
357
+ <p class="text-gray-600 mb-4">
358
+ Developing AI systems that learn through interaction with physical environments,
359
+ bridging the gap between virtual and real-world learning.
360
+ </p>
361
+ <a href="#" class="text-red-600 font-medium inline-flex items-center">
362
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
363
+ </a>
364
+ </div>
365
+ </div>
366
+
367
+ <!-- Research Card 6 -->
368
+ <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
369
+ <div class="h-48 bg-gradient-to-r from-indigo-400 to-indigo-600 flex items-center justify-center">
370
+ <i class="fas fa-heartbeat text-white text-6xl"></i>
371
+ </div>
372
+ <div class="p-6">
373
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">AI for Social Good</h3>
374
+ <p class="text-gray-600 mb-4">
375
+ Applying cutting-edge AI techniques to address global challenges in healthcare,
376
+ education, environmental sustainability, and more.
377
+ </p>
378
+ <a href="#" class="text-indigo-600 font-medium inline-flex items-center">
379
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
380
+ </a>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ </section>
386
+
387
+ <!-- Publications Section -->
388
+ <section id="publications" class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
389
+ <div class="max-w-7xl mx-auto">
390
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Selected Publications</h2>
391
+
392
+ <div class="grid md:grid-cols-2 gap-8">
393
+ <!-- Publication 1 -->
394
+ <div class="project-card relative h-64">
395
+ <div class="project-inner relative w-full h-full">
396
+ <div class="project-front absolute w-full h-full bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl p-6 shadow-md flex flex-col justify-between">
397
+ <div>
398
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Cross-Modal Attention for Vision-Language Integration</h3>
399
+ <p class="text-gray-600 text-sm">NeurIPS 2022</p>
400
+ </div>
401
+ <div class="flex justify-between items-center">
402
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">Computer Vision</span>
403
+ <span class="text-gray-500 text-sm">Citations: 142</span>
404
+ </div>
405
+ </div>
406
+ <div class="project-back absolute w-full h-full bg-gradient-to-br from-blue-100 to-purple-100 rounded-xl p-6 shadow-md">
407
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Cross-Modal Attention for Vision-Language Integration</h3>
408
+ <p class="text-gray-600 text-sm mb-4">
409
+ We propose a novel attention mechanism that dynamically learns to attend to relevant
410
+ information across vision and language modalities, achieving state-of-the-art results
411
+ on multiple benchmarks.
412
+ </p>
413
+ <a href="#" class="text-blue-600 font-medium inline-flex items-center text-sm">
414
+ Read Paper <i class="fas fa-external-link-alt ml-2"></i>
415
+ </a>
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
+ <!-- Publication 2 -->
421
+ <div class="project-card relative h-64">
422
+ <div class="project-inner relative w-full h-full">
423
+ <div class="project-front absolute w-full h-full bg-gradient-to-br from-green-50 to-blue-50 rounded-xl p-6 shadow-md flex flex-col justify-between">
424
+ <div>
425
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Interpretable Neural Architecture Search</h3>
426
+ <p class="text-gray-600 text-sm">ICML 2021</p>
427
+ </div>
428
+ <div class="flex justify-between items-center">
429
+ <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">NAS</span>
430
+ <span class="text-gray-500 text-sm">Citations: 89</span>
431
+ </div>
432
+ </div>
433
+ <div class="project-back absolute w-full h-full bg-gradient-to-br from-green-100 to-blue-100 rounded-xl p-6 shadow-md">
434
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Interpretable Neural Architecture Search</h3>
435
+ <p class="text-gray-600 text-sm mb-4">
436
+ This work introduces a novel NAS framework that not only discovers high-performing architectures
437
+ but also provides interpretable insights into why certain architectural choices perform better.
438
+ </p>
439
+ <a href="#" class="text-green-600 font-medium inline-flex items-center text-sm">
440
+ Read Paper <i class="fas fa-external-link-alt ml-2"></i>
441
+ </a>
442
+ </div>
443
+ </div>
444
+ </div>
445
+
446
+ <!-- Publication 3 -->
447
+ <div class="project-card relative h-64">
448
+ <div class="project-inner relative w-full h-full">
449
+ <div class="project-front absolute w-full h-full bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-6 shadow-md flex flex-col justify-between">
450
+ <div>
451
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Robust Self-Supervised Learning</h3>
452
+ <p class="text-gray-600 text-sm">CVPR 2020</p>
453
+ </div>
454
+ <div class="flex justify-between items-center">
455
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-xs font-medium">Self-Supervised</span>
456
+ <span class="text-gray-500 text-sm">Citations: 210</span>
457
+ </div>
458
+ </div>
459
+ <div class="project-back absolute w-full h-full bg-gradient-to-br from-purple-100 to-pink-100 rounded-xl p-6 shadow-md">
460
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Robust Self-Supervised Learning</h3>
461
+ <p class="text-gray-600 text-sm mb-4">
462
+ We present a new framework for self-supervised learning that is robust to distribution shifts
463
+ and adversarial perturbations, significantly outperforming previous approaches in challenging
464
+ real-world scenarios.
465
+ </p>
466
+ <a href="#" class="text-purple-600 font-medium inline-flex items-center text-sm">
467
+ Read Paper <i class="fas fa-external-link-alt ml-2"></i>
468
+ </a>
469
+ </div>
470
+ </div>
471
+ </div>
472
+
473
+ <!-- Publication 4 -->
474
+ <div class="project-card relative h-64">
475
+ <div class="project-inner relative w-full h-full">
476
+ <div class="project-front absolute w-full h-full bg-gradient-to-br from-yellow-50 to-orange-50 rounded-xl p-6 shadow-md flex flex-col justify-between">
477
+ <div>
478
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Dynamic Neural Networks for Efficient Inference</h3>
479
+ <p class="text-gray-600 text-sm">AAAI 2019</p>
480
+ </div>
481
+ <div class="flex justify-between items-center">
482
+ <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">Efficiency</span>
483
+ <span class="text-gray-500 text-sm">Citations: 76</span>
484
+ </div>
485
+ </div>
486
+ <div class="project-back absolute w-full h-full bg-gradient-to-br from-yellow-100 to-orange-100 rounded-xl p-6 shadow-md">
487
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Dynamic Neural Networks for Efficient Inference</h3>
488
+ <p class="text-gray-600 text-sm mb-4">
489
+ This paper introduces a new class of dynamic neural networks that adapt their computation
490
+ based on input complexity, achieving significant efficiency gains without sacrificing accuracy.
491
+ </p>
492
+ <a href="#" class="text-yellow-600 font-medium inline-flex items-center text-sm">
493
+ Read Paper <i class="fas fa-external-link-alt ml-2"></i>
494
+ </a>
495
+ </div>
496
+ </div>
497
+ </div>
498
+ </div>
499
+
500
+ <div class="text-center mt-12">
501
+ <a href="#" class="px-6 py-3 bg-gray-800 text-white font-medium rounded-lg hover:bg-gray-700 transition-colors duration-300 inline-flex items-center">
502
+ View All Publications <i class="fas fa-list ml-2"></i>
503
+ </a>
504
+ </div>
505
+ </div>
506
+ </section>
507
+
508
+ <!-- Contact Section -->
509
+ <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
510
+ <div class="max-w-7xl mx-auto">
511
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Get In Touch</h2>
512
+
513
+ <div class="lg:flex lg:space-x-12">
514
+ <div class="lg:w-1/2 mb-12 lg:mb-0">
515
+ <div class="bg-white rounded-xl shadow-md p-8 h-full">
516
+ <h3 class="text-2xl font-semibold text-gray-800 mb-6">Contact Information</h3>
517
+
518
+ <div class="space-y-6">
519
+ <div class="flex items-start">
520
+ <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3">
521
+ <i class="fas fa-envelope text-blue-600"></i>
522
+ </div>
523
+ <div class="ml-4">
524
+ <h4 class="text-sm font-medium text-gray-500">Email</h4>
525
+ <a href="mailto:[email protected]" class="text-base text-gray-800 hover:text-blue-600">[email protected]</a>
526
+ </div>
527
+ </div>
528
+
529
+ <div class="flex items-start">
530
+ <div class="flex-shrink-0 bg-purple-100 rounded-lg p-3">
531
+ <i class="fas fa-building text-purple-600"></i>
532
+ </div>
533
+ <div class="ml-4">
534
+ <h4 class="text-sm font-medium text-gray-500">Office</h4>
535
+ <p class="text-base text-gray-800">Gates Computer Science Building, Room 392</p>
536
+ </div>
537
+ </div>
538
+
539
+ <div class="flex items-start">
540
+ <div class="flex-shrink-0 bg-green-100 rounded-lg p-3">
541
+ <i class="fas fa-map-marker-alt text-green-600"></i>
542
+ </div>
543
+ <div class="ml-4">
544
+ <h4 class="text-sm font-medium text-gray-500">Address</h4>
545
+ <p class="text-base text-gray-800">353 Serra Mall, Stanford, CA 94305</p>
546
+ </div>
547
+ </div>
548
+
549
+ <div class="flex items-start">
550
+ <div class="flex-shrink-0 bg-yellow-100 rounded-lg p-3">
551
+ <i class="fas fa-phone-alt text-yellow-600"></i>
552
+ </div>
553
+ <div class="ml-4">
554
+ <h4 class="text-sm font-medium text-gray-500">Phone</h4>
555
+ <p class="text-base text-gray-800">(650) 725-1234</p>
556
+ </div>
557
+ </div>
558
+ </div>
559
+
560
+ <div class="mt-8">
561
+ <h4 class="text-lg font-semibold text-gray-800 mb-4">Connect With Me</h4>
562
+ <div class="flex space-x-4">
563
+ <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:bg-blue-100 hover:text-blue-600">
564
+ <i class="fab fa-twitter"></i>
565
+ </a>
566
+ <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:bg-blue-700 hover:text-white">
567
+ <i class="fab fa-linkedin-in"></i>
568
+ </a>
569
+ <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:bg-gray-800 hover:text-white">
570
+ <i class="fab fa-github"></i>
571
+ </a>
572
+ <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:bg-blue-600 hover:text-white">
573
+ <i class="fab fa-facebook-f"></i>
574
+ </a>
575
+ <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:bg-red-600 hover:text-white">
576
+ <i class="fab fa-google"></i>
577
+ </a>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ </div>
582
+
583
+ <div class="lg:w-1/2">
584
+ <div class="bg-white rounded-xl shadow-md p-8 h-full">
585
+ <h3 class="text-2xl font-semibold text-gray-800 mb-6">Send Me a Message</h3>
586
+
587
+ <form>
588
+ <div class="grid grid-cols-1 gap-6">
589
+ <div>
590
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
591
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
592
+ </div>
593
+
594
+ <div>
595
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
596
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
597
+ </div>
598
+
599
+ <div>
600
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
601
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
602
+ </div>
603
+
604
+ <div>
605
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
606
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
607
+ </div>
608
+
609
+ <div>
610
+ <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-lg hover:shadow-lg transition-all duration-300">
611
+ Send Message
612
+ </button>
613
+ </div>
614
+ </div>
615
+ </form>
616
+ </div>
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </section>
621
+
622
+ <!-- Footer -->
623
+ <footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
624
+ <div class="max-w-7xl mx-auto">
625
+ <div class="flex flex-col md:flex-row justify-between items-center">
626
+ <div class="mb-6 md:mb-0">
627
+ <span class="text-xl font-bold gradient-text">Dr. Alex Chen</span>
628
+ <p class="text-gray-400 mt-2">Advancing AI Research for a Better Future</p>
629
+ </div>
630
+
631
+ <div class="flex flex-wrap gap-6">
632
+ <a href="#home" class="text-gray-400 hover:text-white transition-colors">Home</a>
633
+ <a href="#about" class="text-gray-400 hover:text-white transition-colors">About</a>
634
+ <a href="#research" class="text-gray-400 hover:text-white transition-colors">Research</a>
635
+ <a href="#publications" class="text-gray-400 hover:text-white transition-colors">Publications</a>
636
+ <a href="#contact" class="text-gray-400 hover:text-white transition-colors">Contact</a>
637
+ </div>
638
+ </div>
639
+
640
+ <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
641
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 Dr. Alex Chen. All rights reserved.</p>
642
+
643
+ <div class="flex space-x-6">
644
+ <a href="#" class="text-gray-500 hover:text-white transition-colors">
645
+ <i class="fab fa-twitter"></i>
646
+ </a>
647
+ <a href="#" class="text-gray-500 hover:text-white transition-colors">
648
+ <i class="fab fa-linkedin-in"></i>
649
+ </a>
650
+ <a href="#" class="text-gray-500 hover:text-white transition-colors">
651
+ <i class="fab fa-github"></i>
652
+ </a>
653
+ <a href="#" class="text-gray-500 hover:text-white transition-colors">
654
+ <i class="fab fa-google-scholar"></i>
655
+ </a>
656
+ </div>
657
+ </div>
658
+ </div>
659
+ </footer>
660
+
661
+ <script>
662
+ // Mobile menu toggle
663
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
664
+ const menu = document.getElementById('mobile-menu');
665
+ menu.classList.toggle('hidden');
666
+ });
667
+
668
+ // Smooth scrolling for navigation links
669
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
670
+ anchor.addEventListener('click', function(e) {
671
+ e.preventDefault();
672
+
673
+ const targetId = this.getAttribute('href');
674
+ const targetElement = document.querySelector(targetId);
675
+
676
+ if (targetElement) {
677
+ window.scrollTo({
678
+ top: targetElement.offsetTop - 80,
679
+ behavior: 'smooth'
680
+ });
681
+
682
+ // Close mobile menu if open
683
+ const mobileMenu = document.getElementById('mobile-menu');
684
+ mobileMenu.classList.add('hidden');
685
+ }
686
+ });
687
+ });
688
+
689
+ // Add shadow to navbar on scroll
690
+ window.addEventListener('scroll', function() {
691
+ const nav = document.querySelector('nav');
692
+ if (window.scrollY > 10) {
693
+ nav.classList.add('shadow-lg');
694
+ nav.classList.remove('shadow-sm');
695
+ } else {
696
+ nav.classList.remove('shadow-lg');
697
+ nav.classList.add('shadow-sm');
698
+ }
699
+ });
700
+
701
+ // Animate elements when they come into view
702
+ const observerOptions = {
703
+ threshold: 0.1
704
+ };
705
+
706
+ const observer = new IntersectionObserver((entries) => {
707
+ entries.forEach(entry => {
708
+ if (entry.isIntersecting) {
709
+ entry.target.classList.add('animate-fadeIn');
710
+ }
711
+ });
712
+ }, observerOptions);
713
+
714
+ document.querySelectorAll('.timeline-item, .tech-icon, .card-hover, .project-card').forEach(el => {
715
+ observer.observe(el);
716
+ });
717
+
718
+ // Add fade-in animation to elements
719
+ const style = document.createElement('style');
720
+ style.textContent = `
721
+ @keyframes fadeIn {
722
+ from { opacity: 0; transform: translateY(20px); }
723
+ to { opacity: 1; transform: translateY(0); }
724
+ }
725
+ .animate-fadeIn {
726
+ animation: fadeIn 0.6s ease-out forwards;
727
+ }
728
+ `;
729
+ document.head.appendChild(style);
730
+ </script>
731
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Aedelon/deepsite-t1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
732
+ </html>