Hugging Face's logo

Spaces:
bluerayoflight
/
portfolio
Running

App Files Community
bluerayoflight commited on
Commit
ddb7492
·
verified ·
1 Parent(s): 6672535

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +670 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Portfolio
3
- emoji: 📉
4
- colorFrom: green
5
- colorTo: indigo
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: portfolio
3
+ emoji: 🐳
4
+ colorFrom: red
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,670 @@
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 | 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 */
11
+ .gradient-text {
12
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
13
+ -webkit-background-clip: text;
14
+ background-clip: text;
15
+ color: transparent;
16
+ }
17
+
18
+ .project-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
21
+ }
22
+
23
+ .nav-link {
24
+ position: relative;
25
+ }
26
+
27
+ .nav-link::after {
28
+ content: '';
29
+ position: absolute;
30
+ width: 0;
31
+ height: 2px;
32
+ bottom: -2px;
33
+ left: 0;
34
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
35
+ transition: width 0.3s ease;
36
+ }
37
+
38
+ .nav-link:hover::after {
39
+ width: 100%;
40
+ }
41
+
42
+ .hero-pattern {
43
+ background-image: radial-gradient(rgba(59, 130, 246, 0.2) 1px, transparent 1px);
44
+ background-size: 20px 20px;
45
+ }
46
+
47
+ /* Animation */
48
+ @keyframes float {
49
+ 0% { transform: translateY(0px); }
50
+ 50% { transform: translateY(-10px); }
51
+ 100% { transform: translateY(0px); }
52
+ }
53
+
54
+ .floating {
55
+ animation: float 6s ease-in-out infinite;
56
+ }
57
+ </style>
58
+ </head>
59
+ <body class="font-sans bg-gray-50 text-gray-800">
60
+ <!-- Navigation -->
61
+ <nav class="fixed w-full bg-white/80 backdrop-blur-md z-50 shadow-sm">
62
+ <div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
63
+ <a href="#" class="text-2xl font-bold gradient-text">Alex Carter</a>
64
+ <div class="hidden md:flex space-x-8">
65
+ <a href="#home" class="nav-link">Home</a>
66
+ <a href="#about" class="nav-link">About</a>
67
+ <a href="#projects" class="nav-link">Projects</a>
68
+ <a href="#skills" class="nav-link">Skills</a>
69
+ <a href="#contact" class="nav-link">Contact</a>
70
+ </div>
71
+ <button id="mobile-menu-button" class="md:hidden text-gray-700">
72
+ <i class="fas fa-bars text-xl"></i>
73
+ </button>
74
+ </div>
75
+ <!-- Mobile Menu -->
76
+ <div id="mobile-menu" class="hidden md:hidden bg-white px-6 py-4 shadow-lg">
77
+ <div class="flex flex-col space-y-4">
78
+ <a href="#home" class="nav-link">Home</a>
79
+ <a href="#about" class="nav-link">About</a>
80
+ <a href="#projects" class="nav-link">Projects</a>
81
+ <a href="#skills" class="nav-link">Skills</a>
82
+ <a href="#contact" class="nav-link">Contact</a>
83
+ </div>
84
+ </div>
85
+ </nav>
86
+
87
+ <!-- Hero Section -->
88
+ <section id="home" class="hero-pattern min-h-screen flex items-center pt-20">
89
+ <div class="max-w-6xl mx-auto px-6 py-20 flex flex-col md:flex-row items-center">
90
+ <div class="md:w-1/2 mb-12 md:mb-0">
91
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">
92
+ Hi, I'm <span class="gradient-text">Alex Carter</span>
93
+ </h1>
94
+ <h2 class="text-2xl md:text-3xl font-semibold mb-6 text-gray-600">
95
+ Full Stack Developer & UI/UX Designer
96
+ </h2>
97
+ <p class="text-lg mb-8 text-gray-600 max-w-lg">
98
+ I build exceptional digital experiences that are fast, accessible, and visually appealing. Let's create something amazing together!
99
+ </p>
100
+ <div class="flex space-x-4">
101
+ <a href="#contact" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg font-medium hover:shadow-lg transition-all">
102
+ Contact Me
103
+ </a>
104
+ <a href="#projects" class="px-6 py-3 border border-gray-300 rounded-lg font-medium hover:bg-gray-100 transition-all">
105
+ View Work
106
+ </a>
107
+ </div>
108
+ </div>
109
+ <div class="md:w-1/2 flex justify-center">
110
+ <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white shadow-xl floating">
111
+ <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"
112
+ alt="Alex Carter"
113
+ class="w-full h-full object-cover">
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </section>
118
+
119
+ <!-- About Section -->
120
+ <section id="about" class="py-20 bg-white">
121
+ <div class="max-w-6xl mx-auto px-6">
122
+ <h2 class="text-3xl font-bold text-center mb-16">
123
+ <span class="gradient-text">About Me</span>
124
+ </h2>
125
+ <div class="flex flex-col md:flex-row items-center">
126
+ <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
127
+ <div class="w-64 h-64 rounded-lg overflow-hidden shadow-lg">
128
+ <img src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
129
+ alt="Working"
130
+ class="w-full h-full object-cover">
131
+ </div>
132
+ </div>
133
+ <div class="md:w-2/3 md:pl-12">
134
+ <h3 class="text-2xl font-semibold mb-4">Who I Am</h3>
135
+ <p class="text-gray-600 mb-6">
136
+ I'm a passionate full-stack developer with 5+ years of experience creating modern web applications.
137
+ I specialize in JavaScript technologies across the whole stack (React, Node.js, Express, MongoDB).
138
+ </p>
139
+ <p class="text-gray-600 mb-6">
140
+ My approach combines technical expertise with an eye for design, ensuring that the products I build
141
+ are not only functional but also provide an exceptional user experience.
142
+ </p>
143
+ <div class="grid grid-cols-2 gap-4 mb-8">
144
+ <div class="flex items-center">
145
+ <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
146
+ <span>Problem Solver</span>
147
+ </div>
148
+ <div class="flex items-center">
149
+ <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
150
+ <span>Detail Oriented</span>
151
+ </div>
152
+ <div class="flex items-center">
153
+ <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
154
+ <span>Team Player</span>
155
+ </div>
156
+ <div class="flex items-center">
157
+ <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
158
+ <span>Continuous Learner</span>
159
+ </div>
160
+ </div>
161
+ <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800">
162
+ Download Resume
163
+ <i class="fas fa-download ml-2"></i>
164
+ </a>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </section>
169
+
170
+ <!-- Projects Section -->
171
+ <section id="projects" class="py-20 bg-gray-50">
172
+ <div class="max-w-6xl mx-auto px-6">
173
+ <h2 class="text-3xl font-bold text-center mb-4">
174
+ <span class="gradient-text">My Projects</span>
175
+ </h2>
176
+ <p class="text-center text-gray-600 mb-16 max-w-2xl mx-auto">
177
+ Here are some of my recent projects. Each one was built to solve a specific problem or explore new technologies.
178
+ </p>
179
+
180
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
181
+ <!-- Project 1 -->
182
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300">
183
+ <div class="h-48 overflow-hidden">
184
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
185
+ alt="E-commerce Dashboard"
186
+ class="w-full h-full object-cover">
187
+ </div>
188
+ <div class="p-6">
189
+ <h3 class="text-xl font-bold mb-2">E-commerce Dashboard</h3>
190
+ <p class="text-gray-600 mb-4">
191
+ A comprehensive dashboard for e-commerce businesses with analytics, inventory management, and order processing.
192
+ </p>
193
+ <div class="flex flex-wrap gap-2 mb-4">
194
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">React</span>
195
+ <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">Node.js</span>
196
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">MongoDB</span>
197
+ </div>
198
+ <div class="flex justify-between items-center">
199
+ <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
200
+ View Project
201
+ <i class="fas fa-arrow-right ml-1"></i>
202
+ </a>
203
+ <a href="#" class="text-gray-500 hover:text-gray-700">
204
+ <i class="fab fa-github"></i>
205
+ </a>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Project 2 -->
211
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300">
212
+ <div class="h-48 overflow-hidden">
213
+ <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1738&q=80"
214
+ alt="Health Tracker"
215
+ class="w-full h-full object-cover">
216
+ </div>
217
+ <div class="p-6">
218
+ <h3 class="text-xl font-bold mb-2">Health & Fitness Tracker</h3>
219
+ <p class="text-gray-600 mb-4">
220
+ A mobile-first application for tracking workouts, nutrition, and health metrics with data visualization.
221
+ </p>
222
+ <div class="flex flex-wrap gap-2 mb-4">
223
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">React Native</span>
224
+ <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Firebase</span>
225
+ <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">D3.js</span>
226
+ </div>
227
+ <div class="flex justify-between items-center">
228
+ <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
229
+ View Project
230
+ <i class="fas fa-arrow-right ml-1"></i>
231
+ </a>
232
+ <a href="#" class="text-gray-500 hover:text-gray-700">
233
+ <i class="fab fa-github"></i>
234
+ </a>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Project 3 -->
240
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300">
241
+ <div class="h-48 overflow-hidden">
242
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
243
+ alt="Task Manager"
244
+ class="w-full h-full object-cover">
245
+ </div>
246
+ <div class="p-6">
247
+ <h3 class="text-xl font-bold mb-2">Collaborative Task Manager</h3>
248
+ <p class="text-gray-600 mb-4">
249
+ A real-time task management system for teams with drag-and-drop functionality and notifications.
250
+ </p>
251
+ <div class="flex flex-wrap gap-2 mb-4">
252
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Vue.js</span>
253
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Socket.io</span>
254
+ <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">Express</span>
255
+ </div>
256
+ <div class="flex justify-between items-center">
257
+ <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
258
+ View Project
259
+ <i class="fas fa-arrow-right ml-1"></i>
260
+ </a>
261
+ <a href="#" class="text-gray-500 hover:text-gray-700">
262
+ <i class="fab fa-github"></i>
263
+ </a>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="text-center mt-12">
270
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-300 rounded-lg font-medium hover:bg-gray-100 transition-all">
271
+ View All Projects
272
+ <i class="fas fa-chevron-right ml-2"></i>
273
+ </a>
274
+ </div>
275
+ </div>
276
+ </section>
277
+
278
+ <!-- Skills Section -->
279
+ <section id="skills" class="py-20 bg-white">
280
+ <div class="max-w-6xl mx-auto px-6">
281
+ <h2 class="text-3xl font-bold text-center mb-16">
282
+ <span class="gradient-text">My Skills</span>
283
+ </h2>
284
+
285
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
286
+ <!-- Frontend Skills -->
287
+ <div class="bg-gray-50 p-6 rounded-xl">
288
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
289
+ <i class="fas fa-laptop-code text-blue-600 text-xl"></i>
290
+ </div>
291
+ <h3 class="font-bold mb-4">Frontend</h3>
292
+ <ul class="space-y-2">
293
+ <li class="flex items-center">
294
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
295
+ <span>React.js</span>
296
+ </li>
297
+ <li class="flex items-center">
298
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
299
+ <span>Vue.js</span>
300
+ </li>
301
+ <li class="flex items-center">
302
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
303
+ <span>Tailwind CSS</span>
304
+ </li>
305
+ <li class="flex items-center">
306
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
307
+ <span>JavaScript (ES6+)</span>
308
+ </li>
309
+ </ul>
310
+ </div>
311
+
312
+ <!-- Backend Skills -->
313
+ <div class="bg-gray-50 p-6 rounded-xl">
314
+ <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
315
+ <i class="fas fa-server text-purple-600 text-xl"></i>
316
+ </div>
317
+ <h3 class="font-bold mb-4">Backend</h3>
318
+ <ul class="space-y-2">
319
+ <li class="flex items-center">
320
+ <div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div>
321
+ <span>Node.js</span>
322
+ </li>
323
+ <li class="flex items-center">
324
+ <div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div>
325
+ <span>Express</span>
326
+ </li>
327
+ <li class="flex items-center">
328
+ <div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div>
329
+ <span>Python</span>
330
+ </li>
331
+ <li class="flex items-center">
332
+ <div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div>
333
+ <span>REST APIs</span>
334
+ </li>
335
+ </ul>
336
+ </div>
337
+
338
+ <!-- Database Skills -->
339
+ <div class="bg-gray-50 p-6 rounded-xl">
340
+ <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
341
+ <i class="fas fa-database text-green-600 text-xl"></i>
342
+ </div>
343
+ <h3 class="font-bold mb-4">Database</h3>
344
+ <ul class="space-y-2">
345
+ <li class="flex items-center">
346
+ <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
347
+ <span>MongoDB</span>
348
+ </li>
349
+ <li class="flex items-center">
350
+ <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
351
+ <span>PostgreSQL</span>
352
+ </li>
353
+ <li class="flex items-center">
354
+ <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
355
+ <span>Firebase</span>
356
+ </li>
357
+ <li class="flex items-center">
358
+ <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
359
+ <span>Redis</span>
360
+ </li>
361
+ </ul>
362
+ </div>
363
+
364
+ <!-- Tools & Other -->
365
+ <div class="bg-gray-50 p-6 rounded-xl">
366
+ <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
367
+ <i class="fas fa-tools text-yellow-600 text-xl"></i>
368
+ </div>
369
+ <h3 class="font-bold mb-4">Tools & Other</h3>
370
+ <ul class="space-y-2">
371
+ <li class="flex items-center">
372
+ <div class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></div>
373
+ <span>Git & GitHub</span>
374
+ </li>
375
+ <li class="flex items-center">
376
+ <div class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></div>
377
+ <span>Docker</span>
378
+ </li>
379
+ <li class="flex items-center">
380
+ <div class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></div>
381
+ <span>Figma</span>
382
+ </li>
383
+ <li class="flex items-center">
384
+ <div class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></div>
385
+ <span>AWS</span>
386
+ </li>
387
+ </ul>
388
+ </div>
389
+ </div>
390
+
391
+ <!-- Experience Timeline -->
392
+ <div class="mt-20">
393
+ <h3 class="text-2xl font-semibold text-center mb-12">My Journey</h3>
394
+
395
+ <div class="relative">
396
+ <!-- Timeline line -->
397
+ <div class="absolute left-1/2 h-full w-1 bg-gradient-to-b from-blue-500 to-purple-600 transform -translate-x-1/2"></div>
398
+
399
+ <!-- Timeline items -->
400
+ <div class="space-y-8">
401
+ <!-- Item 1 -->
402
+ <div class="relative flex items-center">
403
+ <div class="hidden md:block md:w-1/2"></div>
404
+ <div class="w-full md:w-1/2 pl-12 md:pl-16">
405
+ <div class="bg-white p-6 rounded-xl shadow-md relative">
406
+ <div class="absolute -left-3 top-6 w-6 h-6 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 border-4 border-white"></div>
407
+ <div class="flex justify-between items-start mb-2">
408
+ <h4 class="font-bold">Senior Developer</h4>
409
+ <span class="text-sm text-gray-500">2021 - Present</span>
410
+ </div>
411
+ <p class="text-gray-600 mb-2">TechSolutions Inc.</p>
412
+ <p class="text-gray-600">
413
+ Leading a team of developers to build scalable web applications for enterprise clients.
414
+ </p>
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <!-- Item 2 -->
420
+ <div class="relative flex items-center">
421
+ <div class="w-full md:w-1/2 pr-12 md:pr-16">
422
+ <div class="bg-white p-6 rounded-xl shadow-md relative">
423
+ <div class="absolute -right-3 top-6 w-6 h-6 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 border-4 border-white"></div>
424
+ <div class="flex justify-between items-start mb-2">
425
+ <h4 class="font-bold">Full Stack Developer</h4>
426
+ <span class="text-sm text-gray-500">2018 - 2021</span>
427
+ </div>
428
+ <p class="text-gray-600 mb-2">Digital Creations</p>
429
+ <p class="text-gray-600">
430
+ Developed and maintained multiple client projects using modern JavaScript frameworks.
431
+ </p>
432
+ </div>
433
+ </div>
434
+ <div class="hidden md:block md:w-1/2"></div>
435
+ </div>
436
+
437
+ <!-- Item 3 -->
438
+ <div class="relative flex items-center">
439
+ <div class="hidden md:block md:w-1/2"></div>
440
+ <div class="w-full md:w-1/2 pl-12 md:pl-16">
441
+ <div class="bg-white p-6 rounded-xl shadow-md relative">
442
+ <div class="absolute -left-3 top-6 w-6 h-6 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 border-4 border-white"></div>
443
+ <div class="flex justify-between items-start mb-2">
444
+ <h4 class="font-bold">Frontend Developer</h4>
445
+ <span class="text-sm text-gray-500">2016 - 2018</span>
446
+ </div>
447
+ <p class="text-gray-600 mb-2">WebCraft Studios</p>
448
+ <p class="text-gray-600">
449
+ Built responsive user interfaces and collaborated with designers to implement UI/UX designs.
450
+ </p>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </section>
459
+
460
+ <!-- Contact Section -->
461
+ <section id="contact" class="py-20 bg-gray-50">
462
+ <div class="max-w-6xl mx-auto px-6">
463
+ <h2 class="text-3xl font-bold text-center mb-4">
464
+ <span class="gradient-text">Get In Touch</span>
465
+ </h2>
466
+ <p class="text-center text-gray-600 mb-16 max-w-2xl mx-auto">
467
+ Have a project in mind or want to discuss potential opportunities? Feel free to reach out!
468
+ </p>
469
+
470
+ <div class="flex flex-col md:flex-row gap-12">
471
+ <div class="w-full md:w-1/2">
472
+ <form class="space-y-6">
473
+ <div>
474
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
475
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
476
+ </div>
477
+ <div>
478
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
479
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
480
+ </div>
481
+ <div>
482
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
483
+ <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
484
+ </div>
485
+ <div>
486
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
487
+ <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"></textarea>
488
+ </div>
489
+ <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg font-medium hover:shadow-lg transition-all">
490
+ Send Message
491
+ </button>
492
+ </form>
493
+ </div>
494
+
495
+ <div class="w-full md:w-1/2">
496
+ <div class="bg-white p-8 rounded-xl shadow-md h-full">
497
+ <h3 class="text-xl font-bold mb-6">Contact Information</h3>
498
+
499
+ <div class="space-y-6">
500
+ <div class="flex items-start">
501
+ <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
502
+ <i class="fas fa-envelope text-blue-600"></i>
503
+ </div>
504
+ <div>
505
+ <h4 class="font-medium text-gray-900">Email</h4>
506
+ <a href="mailto:[email protected]" class="text-blue-600 hover:text-blue-800">[email protected]</a>
507
+ </div>
508
+ </div>
509
+
510
+ <div class="flex items-start">
511
+ <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
512
+ <i class="fas fa-phone-alt text-purple-600"></i>
513
+ </div>
514
+ <div>
515
+ <h4 class="font-medium text-gray-900">Phone</h4>
516
+ <a href="tel:+1234567890" class="text-blue-600 hover:text-blue-800">+1 (234) 567-890</a>
517
+ </div>
518
+ </div>
519
+
520
+ <div class="flex items-start">
521
+ <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-4">
522
+ <i class="fas fa-map-marker-alt text-green-600"></i>
523
+ </div>
524
+ <div>
525
+ <h4 class="font-medium text-gray-900">Location</h4>
526
+ <p class="text-gray-600">San Francisco, CA</p>
527
+ </div>
528
+ </div>
529
+ </div>
530
+
531
+ <div class="mt-10">
532
+ <h4 class="font-medium text-gray-900 mb-4">Follow Me</h4>
533
+ <div class="flex space-x-4">
534
+ <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-blue-100 transition-all">
535
+ <i class="fab fa-linkedin-in text-gray-700"></i>
536
+ </a>
537
+ <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-blue-100 transition-all">
538
+ <i class="fab fa-github text-gray-700"></i>
539
+ </a>
540
+ <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-pink-100 transition-all">
541
+ <i class="fab fa-dribbble text-gray-700"></i>
542
+ </a>
543
+ <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-blue-100 transition-all">
544
+ <i class="fab fa-twitter text-gray-700"></i>
545
+ </a>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+ </div>
552
+ </section>
553
+
554
+ <!-- Footer -->
555
+ <footer class="bg-gray-900 text-white py-12">
556
+ <div class="max-w-6xl mx-auto px-6">
557
+ <div class="flex flex-col md:flex-row justify-between items-center">
558
+ <div class="mb-6 md:mb-0">
559
+ <a href="#" class="text-2xl font-bold gradient-text">Alex Carter</a>
560
+ <p class="text-gray-400 mt-2">Building digital experiences that matter.</p>
561
+ </div>
562
+ <div class="flex flex-col md:flex-row md:space-x-12 space-y-4 md:space-y-0">
563
+ <div>
564
+ <h4 class="font-semibold mb-3">Quick Links</h4>
565
+ <ul class="space-y-2">
566
+ <li><a href="#home" class="text-gray-400 hover:text-white transition-colors">Home</a></li>
567
+ <li><a href="#about" class="text-gray-400 hover:text-white transition-colors">About</a></li>
568
+ <li><a href="#projects" class="text-gray-400 hover:text-white transition-colors">Projects</a></li>
569
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">Contact</a></li>
570
+ </ul>
571
+ </div>
572
+ <div>
573
+ <h4 class="font-semibold mb-3">Services</h4>
574
+ <ul class="space-y-2">
575
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Web Development</a></li>
576
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">UI/UX Design</a></li>
577
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Consulting</a></li>
578
+ </ul>
579
+ </div>
580
+ </div>
581
+ </div>
582
+ <div class="border-t border-gray-800 mt-10 pt-8 flex flex-col md:flex-row justify-between items-center">
583
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Alex Carter. All rights reserved.</p>
584
+ <div class="flex space-x-6">
585
+ <a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Privacy Policy</a>
586
+ <a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Terms of Service</a>
587
+ </div>
588
+ </div>
589
+ </div>
590
+ </footer>
591
+
592
+ <!-- Back to Top Button -->
593
+ <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all">
594
+ <i class="fas fa-arrow-up"></i>
595
+ </button>
596
+
597
+ <script>
598
+ // Mobile menu toggle
599
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
600
+ const mobileMenu = document.getElementById('mobile-menu');
601
+
602
+ mobileMenuButton.addEventListener('click', () => {
603
+ mobileMenu.classList.toggle('hidden');
604
+ });
605
+
606
+ // Smooth scrolling for navigation links
607
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
608
+ anchor.addEventListener('click', function (e) {
609
+ e.preventDefault();
610
+
611
+ const targetId = this.getAttribute('href');
612
+ const targetElement = document.querySelector(targetId);
613
+
614
+ if (targetElement) {
615
+ window.scrollTo({
616
+ top: targetElement.offsetTop - 80,
617
+ behavior: 'smooth'
618
+ });
619
+
620
+ // Close mobile menu if open
621
+ mobileMenu.classList.add('hidden');
622
+ }
623
+ });
624
+ });
625
+
626
+ // Back to top button
627
+ const backToTopButton = document.getElementById('back-to-top');
628
+
629
+ window.addEventListener('scroll', () => {
630
+ if (window.pageYOffset > 300) {
631
+ backToTopButton.classList.remove('opacity-0', 'invisible');
632
+ backToTopButton.classList.add('opacity-100', 'visible');
633
+ } else {
634
+ backToTopButton.classList.remove('opacity-100', 'visible');
635
+ backToTopButton.classList.add('opacity-0', 'invisible');
636
+ }
637
+ });
638
+
639
+ backToTopButton.addEventListener('click', () => {
640
+ window.scrollTo({
641
+ top: 0,
642
+ behavior: 'smooth'
643
+ });
644
+ });
645
+
646
+ // Form submission
647
+ const contactForm = document.querySelector('form');
648
+ if (contactForm) {
649
+ contactForm.addEventListener('submit', (e) => {
650
+ e.preventDefault();
651
+
652
+ // Get form values
653
+ const name = document.getElementById('name').value;
654
+ const email = document.getElementById('email').value;
655
+ const subject = document.getElementById('subject').value;
656
+ const message = document.getElementById('message').value;
657
+
658
+ // Here you would typically send the data to a server
659
+ console.log({ name, email, subject, message });
660
+
661
+ // Show success message
662
+ alert('Thank you for your message! I will get back to you soon.');
663
+
664
+ // Reset form
665
+ contactForm.reset();
666
+ });
667
+ }
668
+ </script>
669
+ <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=bluerayoflight/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
670
+ </html>
prompts.txt ADDED
File without changes