Hugging Face's logo

Spaces:
pagezyhf
/
pixelportfolio-pro
Running

App Files Community
pagezyhf HF Staff commited on
Commit
7945574
·
verified ·
1 Parent(s): 5e45102

Build me a clean, modern personal portfolio website using HTML, CSS, and JavaScript (or React if supported). The website should include:

Browse files

- Homepage / About section
- Project section with my latest projects. A short description, redirect links, etc...
- A blog section with my latest articles

Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +501 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Pixelportfolio Pro
3
- emoji: 📈
4
- colorFrom: yellow
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: PixelPortfolio Pro ✨
3
+ colorFrom: red
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,502 @@
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>PixelPortfolio Pro | Modern Portfolio</title>
7
+ <meta name="description" content="Professional portfolio showcasing my work and blog">
8
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
14
+
15
+ body {
16
+ font-family: 'Inter', sans-serif;
17
+ scroll-behavior: smooth;
18
+ }
19
+
20
+ .hero-gradient {
21
+ background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);
22
+ }
23
+
24
+ .project-card:hover {
25
+ transform: translateY(-5px);
26
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
27
+ }
28
+
29
+ .blog-card:hover .blog-image {
30
+ transform: scale(1.05);
31
+ }
32
+
33
+ .tag {
34
+ transition: all 0.3s ease;
35
+ }
36
+
37
+ .tag:hover {
38
+ transform: translateY(-2px);
39
+ }
40
+
41
+ #vanta-bg {
42
+ position: absolute;
43
+ top: 0;
44
+ left: 0;
45
+ width: 100%;
46
+ height: 100%;
47
+ z-index: 0;
48
+ }
49
+ </style>
50
+ </head>
51
+ <body class="bg-white text-gray-800">
52
+ <!-- Navigation -->
53
+ <nav class="fixed w-full bg-white/90 backdrop-blur-md z-50 shadow-sm">
54
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
55
+ <div class="flex justify-between h-16 items-center">
56
+ <div class="flex-shrink-0 flex items-center">
57
+ <span class="text-xl font-bold text-indigo-600">PixelPortfolio</span>
58
+ </div>
59
+ <div class="hidden md:block">
60
+ <div class="ml-10 flex items-center space-x-4">
61
+ <a href="#home" class="px-3 py-2 rounded-md text-sm font-medium text-indigo-600">Home</a>
62
+ <a href="#projects" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-indigo-600">Projects</a>
63
+ <a href="#blog" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-indigo-600">Blog</a>
64
+ <a href="#contact" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-indigo-600">Contact</a>
65
+ </div>
66
+ </div>
67
+ <div class="md:hidden">
68
+ <button class="mobile-menu-button p-2 rounded-md text-gray-700 hover:text-indigo-600">
69
+ <i data-feather="menu"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </nav>
75
+
76
+ <!-- Mobile Menu -->
77
+ <div class="mobile-menu hidden md:hidden fixed inset-0 z-40 bg-white pt-16">
78
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
79
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-indigo-600">Home</a>
80
+ <a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600">Projects</a>
81
+ <a href="#blog" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600">Blog</a>
82
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600">Contact</a>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Hero Section -->
87
+ <section id="home" class="relative hero-gradient pt-24 pb-20 md:pt-32 md:pb-28">
88
+ <div id="vanta-bg"></div>
89
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
90
+ <div class="flex flex-col md:flex-row items-center">
91
+ <div class="md:w-1/2 mb-10 md:mb-0">
92
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-4">
93
+ Hi, I'm <span class="text-indigo-600">Alex</span>
94
+ </h1>
95
+ <h2 class="text-2xl md:text-3xl text-gray-600 mb-6">
96
+ Full Stack Developer & UI Designer
97
+ </h2>
98
+ <p class="text-lg text-gray-600 mb-8 max-w-lg">
99
+ I build exceptional digital experiences that are fast, accessible, and visually appealing.
100
+ Currently focused on React, Next.js, and modern web technologies.
101
+ </p>
102
+ <div class="flex space-x-4">
103
+ <a href="#projects" class="px-6 py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition duration-300">
104
+ View My Work
105
+ </a>
106
+ <a href="#contact" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition duration-300">
107
+ Contact Me
108
+ </a>
109
+ </div>
110
+ </div>
111
+ <div class="md:w-1/2 flex justify-center">
112
+ <div class="relative">
113
+ <div class="w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white shadow-xl">
114
+ <img src="http://static.photos/people/640x360/1" alt="Profile" class="w-full h-full object-cover">
115
+ </div>
116
+ <div class="absolute -bottom-5 -right-5 bg-white p-3 rounded-full shadow-lg">
117
+ <span class="text-xs font-semibold bg-indigo-600 text-white px-2 py-1 rounded-full">AVAILABLE</span>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </section>
124
+
125
+ <!-- About Section -->
126
+ <section class="py-20 bg-gray-50">
127
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
128
+ <div class="text-center mb-16">
129
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">About Me</h2>
130
+ <div class="w-20 h-1 bg-indigo-600 mx-auto"></div>
131
+ </div>
132
+
133
+ <div class="flex flex-col md:flex-row items-center">
134
+ <div class="md:w-1/3 mb-10 md:mb-0 flex justify-center">
135
+ <div class="bg-white p-6 rounded-xl shadow-lg max-w-sm">
136
+ <h3 class="text-xl font-bold mb-4">My Skills</h3>
137
+ <div class="flex flex-wrap gap-2">
138
+ <span class="tag px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">React</span>
139
+ <span class="tag px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Next.js</span>
140
+ <span class="tag px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Node.js</span>
141
+ <span class="tag px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">TypeScript</span>
142
+ <span class="tag px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Tailwind CSS</span>
143
+ <span class="tag px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">GraphQL</span>
144
+ <span class="tag px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Figma</span>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <div class="md:w-2/3 md:pl-12">
150
+ <h3 class="text-2xl font-bold mb-6">Professional Background</h3>
151
+ <p class="text-gray-600 mb-6">
152
+ With over 5 years of experience in web development, I've worked with startups and established companies to build scalable, performant web applications. My passion lies in creating intuitive user interfaces and robust backend systems.
153
+ </p>
154
+ <p class="text-gray-600 mb-8">
155
+ When I'm not coding, you can find me hiking, reading sci-fi novels, or experimenting with new cooking recipes. I believe in continuous learning and sharing knowledge through my blog and open-source contributions.
156
+ </p>
157
+
158
+ <div class="flex space-x-6">
159
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
160
+ <i data-feather="github"></i>
161
+ </a>
162
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
163
+ <i data-feather="twitter"></i>
164
+ </a>
165
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
166
+ <i data-feather="linkedin"></i>
167
+ </a>
168
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
169
+ <i data-feather="dribbble"></i>
170
+ </a>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- Projects Section -->
178
+ <section id="projects" class="py-20 bg-white">
179
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
180
+ <div class="text-center mb-16">
181
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Featured Projects</h2>
182
+ <div class="w-20 h-1 bg-indigo-600 mx-auto"></div>
183
+ </div>
184
+
185
+ <!-- Project Filters -->
186
+ <div class="flex justify-center mb-12">
187
+ <div class="flex flex-wrap justify-center gap-2">
188
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-full text-sm font-medium">All</button>
189
+ <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm font-medium hover:bg-gray-200">React</button>
190
+ <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm font-medium hover:bg-gray-200">Next.js</button>
191
+ <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm font-medium hover:bg-gray-200">Node.js</button>
192
+ <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm font-medium hover:bg-gray-200">UI/UX</button>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Projects Grid -->
197
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
198
+ <!-- Project 1 -->
199
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300">
200
+ <div class="h-48 overflow-hidden">
201
+ <img src="http://static.photos/technology/640x360/1" alt="Project" class="w-full h-full object-cover">
202
+ </div>
203
+ <div class="p-6">
204
+ <h3 class="text-xl font-bold mb-2">E-commerce Platform</h3>
205
+ <p class="text-gray-600 mb-4">A full-featured online store with cart functionality and payment processing.</p>
206
+ <div class="flex flex-wrap gap-2 mb-4">
207
+ <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">React</span>
208
+ <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">Node.js</span>
209
+ <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">MongoDB</span>
210
+ </div>
211
+ <div class="flex space-x-3">
212
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Live Demo</a>
213
+ <a href="#" class="text-gray-600 hover:text-gray-800 font-medium">GitHub</a>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Project 2 -->
219
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300">
220
+ <div class="h-48 overflow-hidden">
221
+ <img src="http://static.photos/technology/640x360/2" alt="Project" class="w-full h-full object-cover">
222
+ </div>
223
+ <div class="p-6">
224
+ <h3 class="text-xl font-bold mb-2">Task Management App</h3>
225
+ <p class="text-gray-600 mb-4">A productivity application for teams to collaborate on projects.</p>
226
+ <div class="flex flex-wrap gap-2 mb-4">
227
+ <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">Next.js</span>
228
+ <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">TypeScript</span>
229
+ <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">Tailwind CSS</span>
230
+ </div>
231
+ <div class="flex space-x-3">
232
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Live Demo</a>
233
+ <a href="#" class="text-gray-600 hover:text-gray-800 font-medium">GitHub</a>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Project 3 -->
239
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300">
240
+ <div class="h-48 overflow-hidden">
241
+ <img src="http://static.photos/technology/640x360/3" alt="Project" class="w-full h-full object-cover">
242
+ </div>
243
+ <div class="p-6">
244
+ <h3 class="text-xl font-bold mb-2">Weather Dashboard</h3>
245
+ <p class="text-gray-600 mb-4">Real-time weather information with 5-day forecasts.</p>
246
+ <div class="flex flex-wrap gap-2 mb-4">
247
+ <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">React</span>
248
+ <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">OpenWeather API</span>
249
+ <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">Chart.js</span>
250
+ </div>
251
+ <div class="flex space-x-3">
252
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Live Demo</a>
253
+ <a href="#" class="text-gray-600 hover:text-gray-800 font-medium">GitHub</a>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <div class="text-center mt-12">
260
+ <a href="#" class="inline-block px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition duration-300">
261
+ View All Projects
262
+ </a>
263
+ </div>
264
+ </div>
265
+ </section>
266
+
267
+ <!-- Blog Section -->
268
+ <section id="blog" class="py-20 bg-gray-50">
269
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
270
+ <div class="text-center mb-16">
271
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Latest Articles</h2>
272
+ <div class="w-20 h-1 bg-indigo-600 mx-auto"></div>
273
+ </div>
274
+
275
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
276
+ <!-- Blog Post 1 -->
277
+ <div class="blog-card bg-white rounded-xl overflow-hidden shadow-lg">
278
+ <div class="h-48 overflow-hidden">
279
+ <img src="http://static.photos/technology/640x360/4" alt="Blog Post" class="blog-image w-full h-full object-cover transition duration-500">
280
+ </div>
281
+ <div class="p-6">
282
+ <div class="flex items-center text-sm text-gray-500 mb-2">
283
+ <span>May 15, 2023</span>
284
+ <span class="mx-2">•</span>
285
+ <span>5 min read</span>
286
+ </div>
287
+ <h3 class="text-xl font-bold mb-3">Building Scalable React Components</h3>
288
+ <p class="text-gray-600 mb-4">Learn how to structure your React components for maximum reusability and maintainability.</p>
289
+ <div class="flex flex-wrap gap-2 mb-4">
290
+ <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">React</span>
291
+ <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">Best Practices</span>
292
+ </div>
293
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
294
+ Read More
295
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
296
+ </a>
297
+ </div>
298
+ </div>
299
+
300
+ <!-- Blog Post 2 -->
301
+ <div class="blog-card bg-white rounded-xl overflow-hidden shadow-lg">
302
+ <div class="h-48 overflow-hidden">
303
+ <img src="http://static.photos/technology/640x360/5" alt="Blog Post" class="blog-image w-full h-full object-cover transition duration-500">
304
+ </div>
305
+ <div class="p-6">
306
+ <div class="flex items-center text-sm text-gray-500 mb-2">
307
+ <span>April 28, 2023</span>
308
+ <span class="mx-2">•</span>
309
+ <span>8 min read</span>
310
+ </div>
311
+ <h3 class="text-xl font-bold mb-3">The Future of CSS with Tailwind</h3>
312
+ <p class="text-gray-600 mb-4">Exploring how utility-first CSS is changing the way we style modern web applications.</p>
313
+ <div class="flex flex-wrap gap-2 mb-4">
314
+ <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">CSS</span>
315
+ <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">Tailwind</span>
316
+ </div>
317
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
318
+ Read More
319
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
320
+ </a>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- Blog Post 3 -->
325
+ <div class="blog-card bg-white rounded-xl overflow-hidden shadow-lg">
326
+ <div class="h-48 overflow-hidden">
327
+ <img src="http://static.photos/technology/640x360/6" alt="Blog Post" class="blog-image w-full h-full object-cover transition duration-500">
328
+ </div>
329
+ <div class="p-6">
330
+ <div class="flex items-center text-sm text-gray-500 mb-2">
331
+ <span>March 10, 2023</span>
332
+ <span class="mx-2">•</span>
333
+ <span>6 min read</span>
334
+ </div>
335
+ <h3 class="text-xl font-bold mb-3">Optimizing Next.js Performance</h3>
336
+ <p class="text-gray-600 mb-4">Practical tips and techniques to make your Next.js applications blazing fast.</p>
337
+ <div class="flex flex-wrap gap-2 mb-4">
338
+ <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">Next.js</span>
339
+ <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">Performance</span>
340
+ </div>
341
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
342
+ Read More
343
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
344
+ </a>
345
+ </div>
346
+ </div>
347
+ </div>
348
+
349
+ <div class="text-center mt-12">
350
+ <a href="#" class="inline-block px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition duration-300">
351
+ View All Articles
352
+ </a>
353
+ </div>
354
+ </div>
355
+ </section>
356
+
357
+ <!-- Contact Section -->
358
+ <section id="contact" class="py-20 bg-white">
359
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
360
+ <div class="text-center mb-16">
361
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Get In Touch</h2>
362
+ <div class="w-20 h-1 bg-indigo-600 mx-auto"></div>
363
+ </div>
364
+
365
+ <div class="flex flex-col md:flex-row">
366
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
367
+ <h3 class="text-2xl font-bold mb-6">Let's Work Together</h3>
368
+ <p class="text-gray-600 mb-8">
369
+ Have a project in mind or want to discuss potential opportunities?
370
+ Feel free to reach out through the form or connect with me on social media.
371
+ </p>
372
+
373
+ <div class="space-y-4">
374
+ <div class="flex items-center">
375
+ <i data-feather="mail" class="w-5 h-5 text-indigo-600 mr-3"></i>
376
+ <span>[email protected]</span>
377
+ </div>
378
+ <div class="flex items-center">
379
+ <i data-feather="map-pin" class="w-5 h-5 text-indigo-600 mr-3"></i>
380
+ <span>San Francisco, CA</span>
381
+ </div>
382
+ </div>
383
+
384
+ <div class="mt-8 flex space-x-6">
385
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
386
+ <i data-feather="github"></i>
387
+ </a>
388
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
389
+ <i data-feather="twitter"></i>
390
+ </a>
391
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
392
+ <i data-feather="linkedin"></i>
393
+ </a>
394
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
395
+ <i data-feather="dribbble"></i>
396
+ </a>
397
+ </div>
398
+ </div>
399
+
400
+ <div class="md:w-1/2">
401
+ <form class="space-y-6">
402
+ <div>
403
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
404
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-600 focus:border-indigo-600">
405
+ </div>
406
+ <div>
407
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
408
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-600 focus:border-indigo-600">
409
+ </div>
410
+ <div>
411
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
412
+ <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-600 focus:border-indigo-600"></textarea>
413
+ </div>
414
+ <button type="submit" class="w-full px-6 py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition duration-300">
415
+ Send Message
416
+ </button>
417
+ </form>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </section>
422
+
423
+ <!-- Footer -->
424
+ <footer class="bg-gray-900 text-white py-12">
425
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
426
+ <div class="flex flex-col md:flex-row justify-between items-center">
427
+ <div class="mb-6 md:mb-0">
428
+ <span class="text-xl font-bold text-white">PixelPortfolio</span>
429
+ <p class="text-gray-400 mt-2">© 2023 All rights reserved.</p>
430
+ </div>
431
+
432
+ <div class="flex space-x-6">
433
+ <a href="#" class="text-gray-400 hover:text-white">
434
+ <i data-feather="github"></i>
435
+ </a>
436
+ <a href="#" class="text-gray-400 hover:text-white">
437
+ <i data-feather="twitter"></i>
438
+ </a>
439
+ <a href="#" class="text-gray-400 hover:text-white">
440
+ <i data-feather="linkedin"></i>
441
+ </a>
442
+ <a href="#" class="text-gray-400 hover:text-white">
443
+ <i data-feather="dribbble"></i>
444
+ </a>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </footer>
449
+
450
+ <script>
451
+ // Initialize Feather Icons
452
+ feather.replace();
453
+
454
+ // Mobile menu toggle
455
+ document.querySelector('.mobile-menu-button').addEventListener('click', function() {
456
+ document.querySelector('.mobile-menu').classList.toggle('hidden');
457
+ });
458
+
459
+ // Vanta.js background animation
460
+ VANTA.GLOBE({
461
+ el: "#vanta-bg",
462
+ mouseControls: true,
463
+ touchControls: true,
464
+ gyroControls: false,
465
+ minHeight: 200.00,
466
+ minWidth: 200.00,
467
+ scale: 1.00,
468
+ scaleMobile: 1.00,
469
+ color: "#6366f1",
470
+ backgroundColor: "#f5f7fa",
471
+ size: 0.8
472
+ });
473
+
474
+ // Smooth scrolling for anchor links
475
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
476
+ anchor.addEventListener('click', function (e) {
477
+ e.preventDefault();
478
+
479
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
480
+ behavior: 'smooth'
481
+ });
482
+
483
+ // Close mobile menu if open
484
+ document.querySelector('.mobile-menu').classList.add('hidden');
485
+ });
486
+ });
487
+
488
+ // Simple animation on scroll
489
+ const observer = new IntersectionObserver((entries) => {
490
+ entries.forEach(entry => {
491
+ if (entry.isIntersecting) {
492
+ entry.target.classList.add('animate-fadeIn');
493
+ }
494
+ });
495
+ }, { threshold: 0.1 });
496
+
497
+ document.querySelectorAll('.reveal-up').forEach((el) => {
498
+ observer.observe(el);
499
+ });
500
+ </script>
501
+ </body>
502
  </html>