Hugging Face's logo

Spaces:
tpig
/
personal-cv-website
Running

App Files Community
tpig commited on
Commit
16ae82c
·
verified ·
1 Parent(s): 5f7951b

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +510 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Personal Cv Website
3
- emoji: 💻
4
- colorFrom: gray
5
- colorTo: yellow
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: personal-cv-website
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
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,510 @@
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>MS. Nicki Covfefe | Immunofluorescence neurobiologist and stemcell Scientist</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ 'glow-green': '#00ff9d',
15
+ 'dark-green': '#003b2e',
16
+ 'deep-black': '#0a0a0a',
17
+ },
18
+ backgroundImage: {
19
+ 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ @keyframes pulse-glow {
27
+ 0%, 100% {
28
+ text-shadow: 0 0 5px rgba(0, 255, 157, 0.5);
29
+ }
30
+ 50% {
31
+ text-shadow: 0 0 20px rgba(0, 255, 157, 0.8);
32
+ }
33
+ }
34
+
35
+ .glow-text {
36
+ animation: pulse-glow 3s infinite;
37
+ }
38
+
39
+ .cell-bg {
40
+ background-image: url('https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
41
+ background-size: cover;
42
+ background-position: center;
43
+ background-blend-mode: overlay;
44
+ }
45
+
46
+ .nav-link {
47
+ position: relative;
48
+ }
49
+
50
+ .nav-link::after {
51
+ content: '';
52
+ position: absolute;
53
+ width: 0;
54
+ height: 2px;
55
+ bottom: -2px;
56
+ left: 0;
57
+ background-color: #00ff9d;
58
+ transition: width 0.3s ease;
59
+ }
60
+
61
+ .nav-link:hover::after {
62
+ width: 100%;
63
+ }
64
+
65
+ .project-card {
66
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
67
+ }
68
+
69
+ .project-card:hover {
70
+ transform: translateY(-5px);
71
+ box-shadow: 0 10px 25px rgba(0, 255, 157, 0.2);
72
+ }
73
+
74
+ .skill-bar {
75
+ height: 4px;
76
+ background: linear-gradient(90deg, #003b2e 0%, #00ff9d 100%);
77
+ }
78
+
79
+ .publication-item {
80
+ border-left: 3px solid #00ff9d;
81
+ transition: all 0.3s ease;
82
+ }
83
+
84
+ .publication-item:hover {
85
+ background-color: rgba(0, 255, 157, 0.05);
86
+ }
87
+
88
+ .contact-input {
89
+ background-color: rgba(255, 255, 255, 0.05);
90
+ border-bottom: 1px solid rgba(0, 255, 157, 0.3);
91
+ transition: all 0.3s ease;
92
+ }
93
+
94
+ .contact-input:focus {
95
+ border-bottom: 1px solid #00ff9d;
96
+ background-color: rgba(0, 255, 157, 0.05);
97
+ }
98
+ </style>
99
+ </head>
100
+ <body class="bg-deep-black text-gray-300 font-sans">
101
+ <!-- Navigation -->
102
+ <nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-blur-sm">
103
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
104
+ <div class="flex items-center justify-between h-16">
105
+ <div class="flex items-center">
106
+ <div class="flex-shrink-0">
107
+ <span class="text-glow-green text-2xl font-bold">AC</span>
108
+ </div>
109
+ </div>
110
+ <div class="hidden md:block">
111
+ <div class="ml-10 flex items-baseline space-x-8">
112
+ <a href="#home" class="nav-link text-glow-green px-3 py-2 text-sm font-medium">Home</a>
113
+ <a href="#about" class="nav-link text-white hover:text-glow-green px-3 py-2 text-sm font-medium">About</a>
114
+ <a href="#research" class="nav-link text-white hover:text-glow-green px-3 py-2 text-sm font-medium">Research</a>
115
+ <a href="#publications" class="nav-link text-white hover:text-glow-green px-3 py-2 text-sm font-medium">Publications</a>
116
+ <a href="#contact" class="nav-link text-white hover:text-glow-green px-3 py-2 text-sm font-medium">Contact</a>
117
+ </div>
118
+ </div>
119
+ <div class="md:hidden">
120
+ <button class="text-gray-300 hover:text-white focus:outline-none">
121
+ <i class="fas fa-bars text-xl"></i>
122
+ </button>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </nav>
127
+
128
+ <!-- Hero Section -->
129
+ <section id="home" class="cell-bg min-h-screen flex items-center justify-center relative overflow-hidden">
130
+ <div class="absolute inset-0 bg-black bg-opacity-70"></div>
131
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 z-10">
132
+ <div class="text-center">
133
+ <h1 class="text-5xl md:text-7xl font-bold text-white mb-4 glow-text">
134
+ Dr. <span class="text-glow-green">Alex Chen</span>
135
+ </h1>
136
+ <h2 class="text-xl md:text-2xl text-glow-green mb-8">Immunofluorescence & Cell Biology Researcher</h2>
137
+ <p class="text-lg md:text-xl max-w-3xl mx-auto mb-8">
138
+ Exploring the microscopic universe through fluorescence microscopy to unravel cellular mysteries.
139
+ </p>
140
+ <div class="flex justify-center space-x-4">
141
+ <a href="#research" class="px-6 py-3 bg-glow-green text-black font-medium rounded-full hover:bg-opacity-90 transition">
142
+ View Research
143
+ </a>
144
+ <a href="#contact" class="px-6 py-3 border border-glow-green text-glow-green font-medium rounded-full hover:bg-glow-green hover:bg-opacity-10 transition">
145
+ Contact Me
146
+ </a>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ <div class="absolute bottom-10 left-0 right-0 flex justify-center">
151
+ <a href="#about" class="text-glow-green animate-bounce">
152
+ <i class="fas fa-chevron-down text-2xl"></i>
153
+ </a>
154
+ </div>
155
+ </section>
156
+
157
+ <!-- About Section -->
158
+ <section id="about" class="py-20 bg-gradient-to-b from-black to-deep-black">
159
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
160
+ <div class="text-center mb-16">
161
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
162
+ <span class="text-glow-green">About</span> Me
163
+ </h2>
164
+ <div class="w-20 h-1 bg-glow-green mx-auto"></div>
165
+ </div>
166
+
167
+ <div class="flex flex-col md:flex-row items-center">
168
+ <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
169
+ <div class="relative">
170
+ <div class="w-64 h-64 rounded-full overflow-hidden border-4 border-glow-green">
171
+ <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
172
+ alt="Dr. Alex Chen" class="w-full h-full object-cover">
173
+ </div>
174
+ <div class="absolute -bottom-5 -right-5 bg-glow-green text-black px-4 py-2 rounded-full font-bold">
175
+ PhD
176
+ </div>
177
+ </div>
178
+ </div>
179
+ <div class="md:w-2/3 md:pl-12">
180
+ <h3 class="text-2xl font-bold text-white mb-4">Immunofluorescence Specialist & Cell Biologist</h3>
181
+ <p class="text-gray-400 mb-6">
182
+ With over 10 years of experience in fluorescence microscopy and cell biology, I specialize in developing novel immunofluorescence techniques to visualize and quantify cellular components. My research focuses on understanding cellular signaling pathways through advanced imaging techniques.
183
+ </p>
184
+
185
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
186
+ <div>
187
+ <p class="text-gray-400 mb-2"><span class="text-glow-green font-medium">Name:</span> Alex Chen</p>
188
+ <p class="text-gray-400 mb-2"><span class="text-glow-green font-medium">Degree:</span> PhD in Cell Biology</p>
189
+ <p class="text-gray-400 mb-2"><span class="text-glow-green font-medium">Email:</span> alex.chen@researchlab.edu</p>
190
+ </div>
191
+ <div>
192
+ <p class="text-gray-400 mb-2"><span class="text-glow-green font-medium">Institution:</span> Advanced Cell Imaging Center</p>
193
+ <p class="text-gray-400 mb-2"><span class="text-glow-green font-medium">Research Focus:</span> Immunofluorescence, Microscopy</p>
194
+ <p class="text-gray-400 mb-2"><span class="text-glow-green font-medium">Location:</span> Boston, MA</p>
195
+ </div>
196
+ </div>
197
+
198
+ <div class="mb-8">
199
+ <h4 class="text-xl font-bold text-white mb-4">Technical Skills</h4>
200
+ <div class="space-y-4">
201
+ <div>
202
+ <div class="flex justify-between mb-1">
203
+ <span class="text-sm font-medium text-gray-300">Confocal Microscopy</span>
204
+ <span class="text-sm text-glow-green">95%</span>
205
+ </div>
206
+ <div class="w-full bg-gray-800 rounded-full h-2">
207
+ <div class="skill-bar h-2 rounded-full" style="width: 95%"></div>
208
+ </div>
209
+ </div>
210
+ <div>
211
+ <div class="flex justify-between mb-1">
212
+ <span class="text-sm font-medium text-gray-300">Image Analysis</span>
213
+ <span class="text-sm text-glow-green">90%</span>
214
+ </div>
215
+ <div class="w-full bg-gray-800 rounded-full h-2">
216
+ <div class="skill-bar h-2 rounded-full" style="width: 90%"></div>
217
+ </div>
218
+ </div>
219
+ <div>
220
+ <div class="flex justify-between mb-1">
221
+ <span class="text-sm font-medium text-gray-300">Cell Culture</span>
222
+ <span class="text-sm text-glow-green">85%</span>
223
+ </div>
224
+ <div class="w-full bg-gray-800 rounded-full h-2">
225
+ <div class="skill-bar h-2 rounded-full" style="width: 85%"></div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </section>
234
+
235
+ <!-- Research Section -->
236
+ <section id="research" class="py-20 bg-deep-black">
237
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
238
+ <div class="text-center mb-16">
239
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
240
+ My <span class="text-glow-green">Research</span>
241
+ </h2>
242
+ <div class="w-20 h-1 bg-glow-green mx-auto"></div>
243
+ </div>
244
+
245
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
246
+ <!-- Project 1 -->
247
+ <div class="project-card bg-gray-900 rounded-lg overflow-hidden hover:border-glow-green border border-gray-800">
248
+ <div class="h-48 overflow-hidden">
249
+ <img src="https://images.unsplash.com/photo-1579762715458-5a101c0f4cf6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
250
+ alt="Project 1" class="w-full h-full object-cover">
251
+ </div>
252
+ <div class="p-6">
253
+ <h3 class="text-xl font-bold text-white mb-2">Super-resolution Imaging of Cellular Structures</h3>
254
+ <p class="text-gray-400 mb-4">
255
+ Developing novel super-resolution techniques to visualize subcellular structures with unprecedented clarity.
256
+ </p>
257
+ <div class="flex flex-wrap gap-2">
258
+ <span class="px-3 py-1 bg-gray-800 text-glow-green text-xs rounded-full">STED</span>
259
+ <span class="px-3 py-1 bg-gray-800 text-glow-green text-xs rounded-full">PALM</span>
260
+ <span class="px-3 py-1 bg-gray-800 text-glow-green text-xs rounded-full">STORM</span>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- Project 2 -->
266
+ <div class="project-card bg-gray-900 rounded-lg overflow-hidden hover:border-glow-green border border-gray-800">
267
+ <div class="h-48 overflow-hidden">
268
+ <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
269
+ alt="Project 2" class="w-full h-full object-cover">
270
+ </div>
271
+ <div class="p-6">
272
+ <h3 class="text-xl font-bold text-white mb-2">Quantitative Analysis of Protein Localization</h3>
273
+ <p class="text-gray-400 mb-4">
274
+ Creating computational tools to quantify protein distribution patterns in immunofluorescence images.
275
+ </p>
276
+ <div class="flex flex-wrap gap-2">
277
+ <span class="px-3 py-1 bg-gray-800 text-glow-green text-xs rounded-full">ImageJ</span>
278
+ <span class="px-3 py-1 bg-gray-800 text-glow-green text-xs rounded-full">Python</span>
279
+ <span class="px-3 py-1 bg-gray-800 text-glow-green text-xs rounded-full">Machine Learning</span>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Project 3 -->
285
+ <div class="project-card bg-gray-900 rounded-lg overflow-hidden hover:border-glow-green border border-gray-800">
286
+ <div class="h-48 overflow-hidden">
287
+ <img src="https://images.unsplash.com/photo-1581094271901-8022df4466f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
288
+ alt="Project 3" class="w-full h-full object-cover">
289
+ </div>
290
+ <div class="p-6">
291
+ <h3 class="text-xl font-bold text-white mb-2">Live-cell Fluorescence Imaging</h3>
292
+ <p class="text-gray-400 mb-4">
293
+ Developing protocols for long-term live-cell imaging with minimal phototoxicity and photobleaching.
294
+ </p>
295
+ <div class="flex flex-wrap gap-2">
296
+ <span class="px-3 py-1 bg-gray-800 text-glow-green text-xs rounded-full">GFP</span>
297
+ <span class="px-3 py-1 bg-gray-800 text-glow-green text-xs rounded-full">RFP</span>
298
+ <span class="px-3 py-1 bg-gray-800 text-glow-green text-xs rounded-full">Time-lapse</span>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <div class="mt-16 text-center">
305
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-glow-green text-glow-green rounded-full hover:bg-glow-green hover:bg-opacity-10 transition">
306
+ View All Projects
307
+ <i class="fas fa-arrow-right ml-2"></i>
308
+ </a>
309
+ </div>
310
+ </div>
311
+ </section>
312
+
313
+ <!-- Publications Section -->
314
+ <section id="publications" class="py-20 bg-gradient-to-b from-deep-black to-black">
315
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
316
+ <div class="text-center mb-16">
317
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
318
+ Recent <span class="text-glow-green">Publications</span>
319
+ </h2>
320
+ <div class="w-20 h-1 bg-glow-green mx-auto"></div>
321
+ </div>
322
+
323
+ <div class="max-w-4xl mx-auto space-y-6">
324
+ <!-- Publication 1 -->
325
+ <div class="publication-item bg-gray-900 bg-opacity-50 p-6 rounded-lg hover:shadow-lg hover:shadow-glow-green hover:shadow-opacity-10">
326
+ <h3 class="text-xl font-bold text-white mb-2">"Advanced Immunofluorescence Techniques for Subcellular Protein Mapping"</h3>
327
+ <p class="text-glow-green mb-2">Nature Methods, 2023</p>
328
+ <p class="text-gray-400 mb-4">
329
+ We present a novel multiplex immunofluorescence protocol that enables simultaneous visualization of 8 protein targets with minimal spectral overlap.
330
+ </p>
331
+ <div class="flex items-center">
332
+ <a href="#" class="text-glow-green hover:underline mr-4">
333
+ <i class="fas fa-link mr-1"></i> DOI
334
+ </a>
335
+ <a href="#" class="text-glow-green hover:underline">
336
+ <i class="fas fa-file-pdf mr-1"></i> PDF
337
+ </a>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Publication 2 -->
342
+ <div class="publication-item bg-gray-900 bg-opacity-50 p-6 rounded-lg hover:shadow-lg hover:shadow-glow-green hover:shadow-opacity-10">
343
+ <h3 class="text-xl font-bold text-white mb-2">"Quantitative Analysis of Fluorescence Microscopy Images Using Deep Learning"</h3>
344
+ <p class="text-glow-green mb-2">Cell Reports Methods, 2022</p>
345
+ <p class="text-gray-400 mb-4">
346
+ Development of a convolutional neural network for automated segmentation and quantification of fluorescence signals in complex cellular images.
347
+ </p>
348
+ <div class="flex items-center">
349
+ <a href="#" class="text-glow-green hover:underline mr-4">
350
+ <i class="fas fa-link mr-1"></i> DOI
351
+ </a>
352
+ <a href="#" class="text-glow-green hover:underline">
353
+ <i class="fas fa-file-pdf mr-1"></i> PDF
354
+ </a>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- Publication 3 -->
359
+ <div class="publication-item bg-gray-900 bg-opacity-50 p-6 rounded-lg hover:shadow-lg hover:shadow-glow-green hover:shadow-opacity-10">
360
+ <h3 class="text-xl font-bold text-white mb-2">"Live-cell Imaging of Mitochondrial Dynamics with Novel Fluorescent Probes"</h3>
361
+ <p class="text-glow-green mb-2">Journal of Cell Biology, 2021</p>
362
+ <p class="text-gray-400 mb-4">
363
+ Characterization of new fluorescent probes that enable long-term tracking of mitochondrial dynamics with reduced phototoxicity.
364
+ </p>
365
+ <div class="flex items-center">
366
+ <a href="#" class="text-glow-green hover:underline mr-4">
367
+ <i class="fas fa-link mr-1"></i> DOI
368
+ </a>
369
+ <a href="#" class="text-glow-green hover:underline">
370
+ <i class="fas fa-file-pdf mr-1"></i> PDF
371
+ </a>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <div class="mt-16 text-center">
377
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-glow-green text-glow-green rounded-full hover:bg-glow-green hover:bg-opacity-10 transition">
378
+ View All Publications
379
+ <i class="fas fa-arrow-right ml-2"></i>
380
+ </a>
381
+ </div>
382
+ </div>
383
+ </section>
384
+
385
+ <!-- Contact Section -->
386
+ <section id="contact" class="py-20 bg-black">
387
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
388
+ <div class="text-center mb-16">
389
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
390
+ Get In <span class="text-glow-green">Touch</span>
391
+ </h2>
392
+ <div class="w-20 h-1 bg-glow-green mx-auto"></div>
393
+ </div>
394
+
395
+ <div class="flex flex-col md:flex-row">
396
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
397
+ <h3 class="text-2xl font-bold text-white mb-6">Contact Information</h3>
398
+ <p class="text-gray-400 mb-8">
399
+ Interested in collaborating or learning more about my research? Feel free to reach out through any of the channels below.
400
+ </p>
401
+
402
+ <div class="space-y-6">
403
+ <div class="flex items-start">
404
+ <div class="text-glow-green text-xl mr-4 mt-1">
405
+ <i class="fas fa-envelope"></i>
406
+ </div>
407
+ <div>
408
+ <h4 class="text-white font-medium mb-1">Email</h4>
409
+ <p class="text-gray-400">alex.chen@researchlab.edu</p>
410
+ </div>
411
+ </div>
412
+
413
+ <div class="flex items-start">
414
+ <div class="text-glow-green text-xl mr-4 mt-1">
415
+ <i class="fas fa-building"></i>
416
+ </div>
417
+ <div>
418
+ <h4 class="text-white font-medium mb-1">Institution</h4>
419
+ <p class="text-gray-400">Advanced Cell Imaging Center</p>
420
+ <p class="text-gray-400">123 Science Avenue, Boston, MA 02115</p>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="flex items-start">
425
+ <div class="text-glow-green text-xl mr-4 mt-1">
426
+ <i class="fas fa-phone"></i>
427
+ </div>
428
+ <div>
429
+ <h4 class="text-white font-medium mb-1">Phone</h4>
430
+ <p class="text-gray-400">+1 (617) 555-0192</p>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="mt-10">
436
+ <h4 class="text-white font-medium mb-4">Connect With Me</h4>
437
+ <div class="flex space-x-4">
438
+ <a href="#" class="w-10 h-10 rounded-full border border-glow-green text-glow-green flex items-center justify-center hover:bg-glow-green hover:text-black transition">
439
+ <i class="fab fa-linkedin-in"></i>
440
+ </a>
441
+ <a href="#" class="w-10 h-10 rounded-full border border-glow-green text-glow-green flex items-center justify-center hover:bg-glow-green hover:text-black transition">
442
+ <i class="fab fa-twitter"></i>
443
+ </a>
444
+ <a href="#" class="w-10 h-10 rounded-full border border-glow-green text-glow-green flex items-center justify-center hover:bg-glow-green hover:text-black transition">
445
+ <i class="fab fa-researchgate"></i>
446
+ </a>
447
+ <a href="#" class="w-10 h-10 rounded-full border border-glow-green text-glow-green flex items-center justify-center hover:bg-glow-green hover:text-black transition">
448
+ <i class="fab fa-google-scholar"></i>
449
+ </a>
450
+ </div>
451
+ </div>
452
+ </div>
453
+
454
+ <div class="md:w-1/2">
455
+ <form class="space-y-6">
456
+ <div>
457
+ <input type="text" placeholder="Your Name" class="contact-input w-full px-4 py-3 text-white focus:outline-none rounded-lg">
458
+ </div>
459
+ <div>
460
+ <input type="email" placeholder="Your Email" class="contact-input w-full px-4 py-3 text-white focus:outline-none rounded-lg">
461
+ </div>
462
+ <div>
463
+ <input type="text" placeholder="Subject" class="contact-input w-full px-4 py-3 text-white focus:outline-none rounded-lg">
464
+ </div>
465
+ <div>
466
+ <textarea rows="5" placeholder="Your Message" class="contact-input w-full px-4 py-3 text-white focus:outline-none rounded-lg"></textarea>
467
+ </div>
468
+ <div>
469
+ <button type="submit" class="w-full px-6 py-3 bg-glow-green text-black font-medium rounded-full hover:bg-opacity-90 transition">
470
+ Send Message
471
+ </button>
472
+ </div>
473
+ </form>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </section>
478
+
479
+ <!-- Footer -->
480
+ <footer class="py-10 bg-black border-t border-gray-900">
481
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
482
+ <div class="flex flex-col md:flex-row justify-between items-center">
483
+ <div class="mb-6 md:mb-0">
484
+ <span class="text-glow-green text-2xl font-bold">AC</span>
485
+ <p class="text-gray-400 mt-2">Dr. Alex Chen - Immunofluorescence Research</p>
486
+ </div>
487
+ <div class="text-gray-400 text-sm">
488
+ &copy; 2023 Dr. Alex Chen. All rights reserved.
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </footer>
493
+
494
+ <script>
495
+ // Smooth scrolling for navigation links
496
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
497
+ anchor.addEventListener('click', function (e) {
498
+ e.preventDefault();
499
+
500
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
501
+ behavior: 'smooth'
502
+ });
503
+ });
504
+ });
505
+
506
+ // Mobile menu toggle functionality would go here
507
+ // This is a placeholder for actual implementation
508
+ </script>
509
+ <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=tpig/personal-cv-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
510
+ </html>