Hugging Face's logo

Spaces:
NambAnand
/
website
Running

App Files Community
NambAnand commited on
Commit
0b003f0
·
verified ·
1 Parent(s): 9e7ef92

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +685 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Website
3
- emoji: 👁
4
- colorFrom: gray
5
- colorTo: green
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: website
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: purple
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,685 @@
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>Alex Carter | Undergraduate Portfolio</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
+ /* Custom CSS for animations and effects */
11
+ @keyframes fadeIn {
12
+ from { opacity: 0; transform: translateY(20px); }
13
+ to { opacity: 1; transform: translateY(0); }
14
+ }
15
+
16
+ .fade-in {
17
+ animation: fadeIn 1s ease-out forwards;
18
+ }
19
+
20
+ .delay-1 { animation-delay: 0.2s; }
21
+ .delay-2 { animation-delay: 0.4s; }
22
+ .delay-3 { animation-delay: 0.6s; }
23
+ .delay-4 { animation-delay: 0.8s; }
24
+
25
+ .card-hover {
26
+ transition: all 0.3s ease;
27
+ }
28
+
29
+ .card-hover:hover {
30
+ transform: translateY(-5px);
31
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
32
+ }
33
+
34
+ .nav-link {
35
+ position: relative;
36
+ }
37
+
38
+ .nav-link::after {
39
+ content: '';
40
+ position: absolute;
41
+ width: 0;
42
+ height: 2px;
43
+ bottom: 0;
44
+ left: 0;
45
+ background-color: #3b82f6;
46
+ transition: width 0.3s ease;
47
+ }
48
+
49
+ .nav-link:hover::after {
50
+ width: 100%;
51
+ }
52
+
53
+ .active-nav::after {
54
+ width: 100%;
55
+ }
56
+
57
+ /* Custom scrollbar */
58
+ ::-webkit-scrollbar {
59
+ width: 8px;
60
+ }
61
+
62
+ ::-webkit-scrollbar-track {
63
+ background: #f1f1f1;
64
+ }
65
+
66
+ ::-webkit-scrollbar-thumb {
67
+ background: #3b82f6;
68
+ border-radius: 4px;
69
+ }
70
+
71
+ ::-webkit-scrollbar-thumb:hover {
72
+ background: #2563eb;
73
+ }
74
+ </style>
75
+ </head>
76
+ <body class="bg-gray-50 font-sans text-gray-800">
77
+ <!-- Navigation -->
78
+ <nav class="fixed w-full bg-white shadow-md z-50">
79
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
80
+ <div class="flex justify-between h-16">
81
+ <div class="flex items-center">
82
+ <a href="#home" class="text-xl font-bold text-blue-500">Alex Carter</a>
83
+ </div>
84
+ <div class="hidden md:flex items-center space-x-8">
85
+ <a href="#home" class="nav-link text-gray-700 hover:text-blue-500 px-3 py-2 text-sm font-medium">Home</a>
86
+ <a href="#about" class="nav-link text-gray-700 hover:text-blue-500 px-3 py-2 text-sm font-medium">About</a>
87
+ <a href="#projects" class="nav-link text-gray-700 hover:text-blue-500 px-3 py-2 text-sm font-medium">Projects</a>
88
+ <a href="#skills" class="nav-link text-gray-700 hover:text-blue-500 px-3 py-2 text-sm font-medium">Skills</a>
89
+ <a href="#contact" class="nav-link text-gray-700 hover:text-blue-500 px-3 py-2 text-sm font-medium">Contact</a>
90
+ </div>
91
+ <div class="md:hidden flex items-center">
92
+ <button id="menu-btn" class="text-gray-700 hover:text-blue-500 focus:outline-none">
93
+ <i class="fas fa-bars text-xl"></i>
94
+ </button>
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- Mobile menu -->
100
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
101
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
102
+ <a href="#home" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-500 hover:bg-gray-100">Home</a>
103
+ <a href="#about" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-500 hover:bg-gray-100">About</a>
104
+ <a href="#projects" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-500 hover:bg-gray-100">Projects</a>
105
+ <a href="#skills" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-500 hover:bg-gray-100">Skills</a>
106
+ <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-500 hover:bg-gray-100">Contact</a>
107
+ </div>
108
+ </div>
109
+ </nav>
110
+
111
+ <!-- Hero Section -->
112
+ <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-r from-blue-50 to-indigo-50">
113
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
114
+ <div class="flex flex-col md:flex-row items-center">
115
+ <div class="md:w-1/2 mb-8 md:mb-0 fade-in">
116
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Hi, I'm <span class="text-blue-500">Alex Carter</span></h1>
117
+ <h2 class="text-2xl md:text-3xl font-semibold text-gray-700 mb-6">Computer Science Student</h2>
118
+ <p class="text-gray-600 mb-8 text-lg">Passionate about building innovative solutions and exploring the intersection of technology and human needs.</p>
119
+ <div class="flex space-x-4">
120
+ <a href="#projects" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition duration-300">View My Work</a>
121
+ <a href="#contact" class="border-2 border-blue-500 text-blue-500 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition duration-300">Contact Me</a>
122
+ </div>
123
+ </div>
124
+ <div class="md:w-1/2 flex justify-center fade-in delay-1">
125
+ <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white shadow-xl">
126
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"
127
+ alt="Alex Carter"
128
+ class="w-full h-full object-cover">
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </section>
134
+
135
+ <!-- About Section -->
136
+ <section id="about" class="py-16 bg-white">
137
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
138
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12 fade-in">About Me</h2>
139
+
140
+ <div class="flex flex-col md:flex-row items-center gap-8">
141
+ <div class="md:w-1/3 mb-8 md:mb-0 fade-in delay-1">
142
+ <div class="bg-gray-100 p-6 rounded-xl shadow-md">
143
+ <h3 class="text-xl font-semibold text-blue-500 mb-4">Education</h3>
144
+ <div class="space-y-4">
145
+ <div>
146
+ <h4 class="font-medium text-gray-800">Bachelor of Science in Computer Science</h4>
147
+ <p class="text-gray-600">University of Technology, 2021 - Present</p>
148
+ <p class="text-gray-600 mt-1">GPA: 3.8/4.0</p>
149
+ </div>
150
+ <div>
151
+ <h4 class="font-medium text-gray-800">Relevant Coursework</h4>
152
+ <ul class="list-disc list-inside text-gray-600 space-y-1">
153
+ <li>Data Structures & Algorithms</li>
154
+ <li>Database Systems</li>
155
+ <li>Web Development</li>
156
+ <li>Machine Learning</li>
157
+ <li>Software Engineering</li>
158
+ </ul>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <div class="md:w-1/3 fade-in delay-2">
165
+ <div class="bg-gray-100 p-6 rounded-xl shadow-md">
166
+ <h3 class="text-xl font-semibold text-blue-500 mb-4">Experience</h3>
167
+ <div class="space-y-4">
168
+ <div>
169
+ <h4 class="font-medium text-gray-800">Software Development Intern</h4>
170
+ <p class="text-gray-600">TechSolutions Inc., Summer 2023</p>
171
+ <ul class="list-disc list-inside text-gray-600 mt-1 space-y-1">
172
+ <li>Developed REST APIs for customer portal</li>
173
+ <li>Implemented automated testing framework</li>
174
+ <li>Collaborated with cross-functional teams</li>
175
+ </ul>
176
+ </div>
177
+ <div>
178
+ <h4 class="font-medium text-gray-800">Teaching Assistant</h4>
179
+ <p class="text-gray-600">University of Technology, 2022 - Present</p>
180
+ <ul class="list-disc list-inside text-gray-600 mt-1 space-y-1">
181
+ <li>Assist students with programming concepts</li>
182
+ <li>Grade assignments and provide feedback</li>
183
+ <li>Conduct weekly lab sessions</li>
184
+ </ul>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <div class="md:w-1/3 fade-in delay-3">
191
+ <div class="bg-gray-100 p-6 rounded-xl shadow-md h-full">
192
+ <h3 class="text-xl font-semibold text-blue-500 mb-4">Personal</h3>
193
+ <p class="text-gray-600 mb-4">
194
+ I'm a passionate computer science student with a strong interest in full-stack development and machine learning.
195
+ When I'm not coding, you can find me hiking, reading sci-fi novels, or contributing to open-source projects.
196
+ </p>
197
+ <div class="mt-6">
198
+ <h4 class="font-medium text-gray-800 mb-2">Hobbies & Interests</h4>
199
+ <div class="flex flex-wrap gap-2">
200
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Photography</span>
201
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Chess</span>
202
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Open Source</span>
203
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Travel</span>
204
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">AI Ethics</span>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </section>
212
+
213
+ <!-- Projects Section -->
214
+ <section id="projects" class="py-16 bg-gray-50">
215
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
216
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-4 fade-in">My Projects</h2>
217
+ <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto fade-in delay-1">Here are some of my recent projects that showcase my skills and interests.</p>
218
+
219
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
220
+ <!-- Project 1 -->
221
+ <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover fade-in delay-2">
222
+ <div class="h-48 bg-gradient-to-r from-blue-400 to-indigo-500 flex items-center justify-center">
223
+ <i class="fas fa-graduation-cap text-white text-6xl"></i>
224
+ </div>
225
+ <div class="p-6">
226
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Student Portal</h3>
227
+ <p class="text-gray-600 mb-4">A comprehensive portal for students to manage courses, assignments, and grades.</p>
228
+ <div class="flex flex-wrap gap-2 mb-4">
229
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">React</span>
230
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Node.js</span>
231
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">MongoDB</span>
232
+ </div>
233
+ <div class="flex space-x-3">
234
+ <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-github"></i> Code</a>
235
+ <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fas fa-external-link-alt"></i> Live Demo</a>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Project 2 -->
241
+ <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover fade-in delay-3">
242
+ <div class="h-48 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center">
243
+ <i class="fas fa-robot text-white text-6xl"></i>
244
+ </div>
245
+ <div class="p-6">
246
+ <h3 class="text-xl font-bold text-gray-800 mb-2">AI Chatbot</h3>
247
+ <p class="text-gray-600 mb-4">A conversational AI assistant trained to answer university-related queries.</p>
248
+ <div class="flex flex-wrap gap-2 mb-4">
249
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Python</span>
250
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">TensorFlow</span>
251
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">NLP</span>
252
+ </div>
253
+ <div class="flex space-x-3">
254
+ <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-github"></i> Code</a>
255
+ <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fas fa-external-link-alt"></i> Live Demo</a>
256
+ </div>
257
+ </div>
258
+ </div>
259
+
260
+ <!-- Project 3 -->
261
+ <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover fade-in delay-4">
262
+ <div class="h-48 bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center">
263
+ <i class="fas fa-shopping-cart text-white text-6xl"></i>
264
+ </div>
265
+ <div class="p-6">
266
+ <h3 class="text-xl font-bold text-gray-800 mb-2">E-commerce Platform</h3>
267
+ <p class="text-gray-600 mb-4">A full-featured online store with payment integration and admin dashboard.</p>
268
+ <div class="flex flex-wrap gap-2 mb-4">
269
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Vue.js</span>
270
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Express</span>
271
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">PostgreSQL</span>
272
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Stripe API</span>
273
+ </div>
274
+ <div class="flex space-x-3">
275
+ <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-github"></i> Code</a>
276
+ <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fas fa-external-link-alt"></i> Live Demo</a>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <div class="text-center mt-12 fade-in delay-4">
283
+ <a href="#" class="inline-flex items-center text-blue-500 hover:text-blue-700 font-medium">
284
+ View All Projects <i class="fas fa-arrow-right ml-2"></i>
285
+ </a>
286
+ </div>
287
+ </div>
288
+ </section>
289
+
290
+ <!-- Skills Section -->
291
+ <section id="skills" class="py-16 bg-white">
292
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
293
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-4 fade-in">My Skills</h2>
294
+ <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto fade-in delay-1">Technologies and tools I'm proficient in.</p>
295
+
296
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
297
+ <!-- Programming Languages -->
298
+ <div class="bg-gray-50 p-6 rounded-xl fade-in delay-2">
299
+ <h3 class="text-lg font-semibold text-blue-500 mb-4 flex items-center">
300
+ <i class="fas fa-code mr-2"></i> Languages
301
+ </h3>
302
+ <ul class="space-y-3">
303
+ <li class="flex items-center">
304
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
305
+ <span>JavaScript/TypeScript</span>
306
+ </li>
307
+ <li class="flex items-center">
308
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
309
+ <span>Python</span>
310
+ </li>
311
+ <li class="flex items-center">
312
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
313
+ <span>Java</span>
314
+ </li>
315
+ <li class="flex items-center">
316
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
317
+ <span>C++</span>
318
+ </li>
319
+ <li class="flex items-center">
320
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
321
+ <span>SQL</span>
322
+ </li>
323
+ </ul>
324
+ </div>
325
+
326
+ <!-- Frontend -->
327
+ <div class="bg-gray-50 p-6 rounded-xl fade-in delay-3">
328
+ <h3 class="text-lg font-semibold text-blue-500 mb-4 flex items-center">
329
+ <i class="fas fa-paint-brush mr-2"></i> Frontend
330
+ </h3>
331
+ <ul class="space-y-3">
332
+ <li class="flex items-center">
333
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
334
+ <span>React</span>
335
+ </li>
336
+ <li class="flex items-center">
337
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
338
+ <span>Vue.js</span>
339
+ </li>
340
+ <li class="flex items-center">
341
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
342
+ <span>HTML5/CSS3</span>
343
+ </li>
344
+ <li class="flex items-center">
345
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
346
+ <span>Tailwind CSS</span>
347
+ </li>
348
+ <li class="flex items-center">
349
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
350
+ <span>Redux</span>
351
+ </li>
352
+ </ul>
353
+ </div>
354
+
355
+ <!-- Backend -->
356
+ <div class="bg-gray-50 p-6 rounded-xl fade-in delay-4">
357
+ <h3 class="text-lg font-semibold text-blue-500 mb-4 flex items-center">
358
+ <i class="fas fa-server mr-2"></i> Backend
359
+ </h3>
360
+ <ul class="space-y-3">
361
+ <li class="flex items-center">
362
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
363
+ <span>Node.js</span>
364
+ </li>
365
+ <li class="flex items-center">
366
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
367
+ <span>Express</span>
368
+ </li>
369
+ <li class="flex items-center">
370
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
371
+ <span>Django</span>
372
+ </li>
373
+ <li class="flex items-center">
374
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
375
+ <span>Flask</span>
376
+ </li>
377
+ <li class="flex items-center">
378
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
379
+ <span>REST APIs</span>
380
+ </li>
381
+ </ul>
382
+ </div>
383
+
384
+ <!-- Tools & Other -->
385
+ <div class="bg-gray-50 p-6 rounded-xl fade-in delay-4">
386
+ <h3 class="text-lg font-semibold text-blue-500 mb-4 flex items-center">
387
+ <i class="fas fa-tools mr-2"></i> Tools & Other
388
+ </h3>
389
+ <ul class="space-y-3">
390
+ <li class="flex items-center">
391
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
392
+ <span>Git/GitHub</span>
393
+ </li>
394
+ <li class="flex items-center">
395
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
396
+ <span>Docker</span>
397
+ </li>
398
+ <li class="flex items-center">
399
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
400
+ <span>PostgreSQL</span>
401
+ </li>
402
+ <li class="flex items-center">
403
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
404
+ <span>MongoDB</span>
405
+ </li>
406
+ <li class="flex items-center">
407
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
408
+ <span>AWS Basics</span>
409
+ </li>
410
+ </ul>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- Skill bars -->
415
+ <div class="mt-12 max-w-3xl mx-auto fade-in delay-4">
416
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Proficiency Levels</h3>
417
+
418
+ <div class="space-y-4">
419
+ <div>
420
+ <div class="flex justify-between mb-1">
421
+ <span class="text-sm font-medium text-gray-700">JavaScript/React</span>
422
+ <span class="text-sm font-medium text-gray-500">90%</span>
423
+ </div>
424
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
425
+ <div class="bg-blue-500 h-2.5 rounded-full" style="width: 90%"></div>
426
+ </div>
427
+ </div>
428
+
429
+ <div>
430
+ <div class="flex justify-between mb-1">
431
+ <span class="text-sm font-medium text-gray-700">Python</span>
432
+ <span class="text-sm font-medium text-gray-500">85%</span>
433
+ </div>
434
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
435
+ <div class="bg-blue-500 h-2.5 rounded-full" style="width: 85%"></div>
436
+ </div>
437
+ </div>
438
+
439
+ <div>
440
+ <div class="flex justify-between mb-1">
441
+ <span class="text-sm font-medium text-gray-700">Node.js/Express</span>
442
+ <span class="text-sm font-medium text-gray-500">80%</span>
443
+ </div>
444
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
445
+ <div class="bg-blue-500 h-2.5 rounded-full" style="width: 80%"></div>
446
+ </div>
447
+ </div>
448
+
449
+ <div>
450
+ <div class="flex justify-between mb-1">
451
+ <span class="text-sm font-medium text-gray-700">Database Design</span>
452
+ <span class="text-sm font-medium text-gray-500">75%</span>
453
+ </div>
454
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
455
+ <div class="bg-blue-500 h-2.5 rounded-full" style="width: 75%"></div>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </section>
462
+
463
+ <!-- Contact Section -->
464
+ <section id="contact" class="py-16 bg-gray-50">
465
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
466
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-4 fade-in">Get In Touch</h2>
467
+ <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto fade-in delay-1">Feel free to reach out for collaborations or just to say hello!</p>
468
+
469
+ <div class="flex flex-col md:flex-row gap-8">
470
+ <div class="md:w-1/2 fade-in delay-2">
471
+ <form class="space-y-6">
472
+ <div>
473
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
474
+ <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
475
+ </div>
476
+ <div>
477
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
478
+ <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
479
+ </div>
480
+ <div>
481
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
482
+ <input type="text" id="subject" name="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
483
+ </div>
484
+ <div>
485
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
486
+ <textarea id="message" name="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"></textarea>
487
+ </div>
488
+ <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition duration-300 w-full">Send Message</button>
489
+ </form>
490
+ </div>
491
+
492
+ <div class="md:w-1/2 fade-in delay-3">
493
+ <div class="bg-white p-8 rounded-xl shadow-md h-full">
494
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Contact Information</h3>
495
+
496
+ <div class="space-y-6">
497
+ <div class="flex items-start">
498
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg">
499
+ <i class="fas fa-envelope text-blue-500"></i>
500
+ </div>
501
+ <div class="ml-4">
502
+ <h4 class="text-sm font-medium text-gray-500">Email</h4>
503
+ <a href="mailto:[email protected]" class="text-base text-gray-800 hover:text-blue-500">[email protected]</a>
504
+ </div>
505
+ </div>
506
+
507
+ <div class="flex items-start">
508
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg">
509
+ <i class="fas fa-phone-alt text-blue-500"></i>
510
+ </div>
511
+ <div class="ml-4">
512
+ <h4 class="text-sm font-medium text-gray-500">Phone</h4>
513
+ <a href="tel:+1234567890" class="text-base text-gray-800 hover:text-blue-500">+1 (234) 567-890</a>
514
+ </div>
515
+ </div>
516
+
517
+ <div class="flex items-start">
518
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg">
519
+ <i class="fas fa-map-marker-alt text-blue-500"></i>
520
+ </div>
521
+ <div class="ml-4">
522
+ <h4 class="text-sm font-medium text-gray-500">Location</h4>
523
+ <p class="text-base text-gray-800">San Francisco, CA</p>
524
+ </div>
525
+ </div>
526
+
527
+ <div class="pt-4">
528
+ <h4 class="text-sm font-medium text-gray-500 mb-4">Connect with me</h4>
529
+ <div class="flex space-x-4">
530
+ <a href="#" class="bg-gray-100 hover:bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
531
+ <i class="fab fa-linkedin-in text-gray-700 hover:text-blue-700"></i>
532
+ </a>
533
+ <a href="#" class="bg-gray-100 hover:bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
534
+ <i class="fab fa-github text-gray-700 hover:text-blue-700"></i>
535
+ </a>
536
+ <a href="#" class="bg-gray-100 hover:bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
537
+ <i class="fab fa-twitter text-gray-700 hover:text-blue-700"></i>
538
+ </a>
539
+ <a href="#" class="bg-gray-100 hover:bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
540
+ <i class="fab fa-instagram text-gray-700 hover:text-blue-700"></i>
541
+ </a>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ </section>
550
+
551
+ <!-- Footer -->
552
+ <footer class="bg-gray-800 text-white py-8">
553
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
554
+ <div class="flex flex-col md:flex-row justify-between items-center">
555
+ <div class="mb-4 md:mb-0">
556
+ <a href="#home" class="text-xl font-bold text-white">Alex Carter</a>
557
+ <p class="text-gray-400 mt-1">Computer Science Student & Developer</p>
558
+ </div>
559
+ <div class="flex space-x-6">
560
+ <a href="#home" class="text-gray-400 hover:text-white">Home</a>
561
+ <a href="#about" class="text-gray-400 hover:text-white">About</a>
562
+ <a href="#projects" class="text-gray-400 hover:text-white">Projects</a>
563
+ <a href="#contact" class="text-gray-400 hover:text-white">Contact</a>
564
+ </div>
565
+ </div>
566
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
567
+ <p>&copy; 2023 Alex Carter. All rights reserved.</p>
568
+ </div>
569
+ </div>
570
+ </footer>
571
+
572
+ <!-- Back to top button -->
573
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-500 text-white w-12 h-12 rounded-full shadow-lg hidden items-center justify-center">
574
+ <i class="fas fa-arrow-up"></i>
575
+ </button>
576
+
577
+ <script>
578
+ // Mobile menu toggle
579
+ const menuBtn = document.getElementById('menu-btn');
580
+ const mobileMenu = document.getElementById('mobile-menu');
581
+
582
+ menuBtn.addEventListener('click', () => {
583
+ mobileMenu.classList.toggle('hidden');
584
+ });
585
+
586
+ // Smooth scrolling for navigation links
587
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
588
+ anchor.addEventListener('click', function(e) {
589
+ e.preventDefault();
590
+
591
+ const targetId = this.getAttribute('href');
592
+ const targetElement = document.querySelector(targetId);
593
+
594
+ if (targetElement) {
595
+ // Close mobile menu if open
596
+ mobileMenu.classList.add('hidden');
597
+
598
+ // Scroll to target
599
+ window.scrollTo({
600
+ top: targetElement.offsetTop - 80,
601
+ behavior: 'smooth'
602
+ });
603
+
604
+ // Update active nav link
605
+ document.querySelectorAll('.nav-link').forEach(link => {
606
+ link.classList.remove('active-nav');
607
+ });
608
+
609
+ // Add active class to clicked link
610
+ if (this.classList.contains('nav-link')) {
611
+ this.classList.add('active-nav');
612
+ }
613
+ }
614
+ });
615
+ });
616
+
617
+ // Back to top button
618
+ const backToTopBtn = document.getElementById('back-to-top');
619
+
620
+ window.addEventListener('scroll', () => {
621
+ if (window.pageYOffset > 300) {
622
+ backToTopBtn.classList.remove('hidden');
623
+ backToTopBtn.classList.add('flex');
624
+ } else {
625
+ backToTopBtn.classList.add('hidden');
626
+ backToTopBtn.classList.remove('flex');
627
+ }
628
+ });
629
+
630
+ backToTopBtn.addEventListener('click', () => {
631
+ window.scrollTo({
632
+ top: 0,
633
+ behavior: 'smooth'
634
+ });
635
+ });
636
+
637
+ // Highlight active nav link on scroll
638
+ const sections = document.querySelectorAll('section');
639
+ const navLinks = document.querySelectorAll('.nav-link');
640
+
641
+ window.addEventListener('scroll', () => {
642
+ let current = '';
643
+
644
+ sections.forEach(section => {
645
+ const sectionTop = section.offsetTop;
646
+ const sectionHeight = section.clientHeight;
647
+
648
+ if (pageYOffset >= sectionTop - 100) {
649
+ current = section.getAttribute('id');
650
+ }
651
+ });
652
+
653
+ navLinks.forEach(link => {
654
+ link.classList.remove('active-nav');
655
+ if (link.getAttribute('href') === `#${current}`) {
656
+ link.classList.add('active-nav');
657
+ }
658
+ });
659
+ });
660
+
661
+ // Form submission
662
+ const contactForm = document.querySelector('form');
663
+ if (contactForm) {
664
+ contactForm.addEventListener('submit', (e) => {
665
+ e.preventDefault();
666
+
667
+ // Get form values
668
+ const name = document.getElementById('name').value;
669
+ const email = document.getElementById('email').value;
670
+ const subject = document.getElementById('subject').value;
671
+ const message = document.getElementById('message').value;
672
+
673
+ // Here you would typically send the data to a server
674
+ console.log({ name, email, subject, message });
675
+
676
+ // Show success message
677
+ alert('Thank you for your message! I will get back to you soon.');
678
+
679
+ // Reset form
680
+ contactForm.reset();
681
+ });
682
+ }
683
+ </script>
684
+ <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=NambAnand/website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
685
+ </html>