Hugging Face's logo

Spaces:
zerobugs001
/
pixelportfolio-pro
Running

App Files Community
zerobugs001 commited on
Commit
0aa62f9
·
verified ·
1 Parent(s): ac1dae2

Create a web apps like this: https://alineajava.co.id/

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +597 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Pixelportfolio Pro
3
- emoji: 📚
4
- colorFrom: gray
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: blue
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,598 @@
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 | Creative Developer Portfolio</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: 'class',
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: '#6366f1',
19
+ secondary: '#8b5cf6',
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .hero-text {
27
+ background-clip: text;
28
+ -webkit-background-clip: text;
29
+ color: transparent;
30
+ background-image: linear-gradient(90deg, #6366f1, #8b5cf6);
31
+ }
32
+ .project-card:hover {
33
+ transform: translateY(-5px);
34
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
35
+ }
36
+ .section-divider {
37
+ height: 150px;
38
+ width: 100%;
39
+ background: linear-gradient(to bottom right, transparent 49%, white 50%), linear-gradient(to top right, transparent 49%, white 50%);
40
+ background-size: 50% 100%;
41
+ background-repeat: no-repeat;
42
+ background-position: left, right;
43
+ }
44
+ .dark .section-divider {
45
+ background: linear-gradient(to bottom right, transparent 49%, #1e293b 50%), linear-gradient(to top right, transparent 49%, #1e293b 50%);
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-white dark:bg-slate-800 transition-colors duration-300">
50
+ <!-- Navigation -->
51
+ <nav class="fixed w-full z-50 bg-white/80 dark:bg-slate-800/80 backdrop-blur-md border-b border-gray-200 dark:border-slate-700">
52
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
53
+ <div class="flex justify-between h-16">
54
+ <div class="flex items-center">
55
+ <a href="#" class="text-xl font-bold text-gray-900 dark:text-white flex items-center">
56
+ <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">PixelPortfolio</span>
57
+ </a>
58
+ </div>
59
+ <div class="hidden md:flex items-center space-x-8">
60
+ <a href="#home" class="text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition">Home</a>
61
+ <a href="#about" class="text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition">About</a>
62
+ <a href="#work" class="text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition">Work</a>
63
+ <a href="#contact" class="text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition">Contact</a>
64
+ <button id="theme-toggle" class="p-2 rounded-full bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-gray-300">
65
+ <i data-feather="moon" class="hidden dark:block"></i>
66
+ <i data-feather="sun" class="dark:hidden"></i>
67
+ </button>
68
+ </div>
69
+ <div class="md:hidden flex items-center">
70
+ <button id="mobile-menu-button" class="p-2 rounded-md text-gray-700 dark:text-gray-300">
71
+ <i data-feather="menu"></i>
72
+ </button>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ <!-- Mobile menu -->
77
+ <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-slate-800 border-t border-gray-200 dark:border-slate-700">
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 text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary">Home</a>
80
+ <a href="#about" class="block px-3 py-2 text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary">About</a>
81
+ <a href="#work" class="block px-3 py-2 text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary">Work</a>
82
+ <a href="#contact" class="block px-3 py-2 text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary">Contact</a>
83
+ <button class="block px-3 py-2 text-left text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary flex items-center">
84
+ <span class="mr-2">Toggle Theme</span>
85
+ <i data-feather="moon" class="hidden dark:block w-4 h-4"></i>
86
+ <i data-feather="sun" class="dark:hidden w-4 h-4"></i>
87
+ </button>
88
+ </div>
89
+ </div>
90
+ </nav>
91
+
92
+ <!-- Hero Section -->
93
+ <section id="home" class="relative pt-24 pb-12 md:pt-32 md:pb-24">
94
+ <div id="vanta-bg" class="absolute inset-0"></div>
95
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
96
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
97
+ <div class="text-center md:text-left">
98
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">
99
+ <span class="hero-text">Creative Solutions</span><br>
100
+ <span class="text-gray-900 dark:text-white">For Your Digital Needs</span>
101
+ </h1>
102
+ <p class="text-lg text-gray-600 dark:text-gray-300 mb-8 max-w-lg">
103
+ I craft beautiful, functional digital experiences that help businesses stand out and achieve their goals.
104
+ </p>
105
+ <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
106
+ <a href="#work" class="px-6 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-lg font-medium hover:opacity-90 transition shadow-lg">
107
+ View My Work
108
+ </a>
109
+ <a href="#contact" class="px-6 py-3 border border-primary text-primary dark:text-white rounded-lg font-medium hover:bg-primary hover:text-white transition">
110
+ Contact Me
111
+ </a>
112
+ </div>
113
+ </div>
114
+ <div class="flex justify-center">
115
+ <div class="relative">
116
+ <div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-r from-primary to-secondary p-1">
117
+ <div class="w-full h-full rounded-full bg-white dark:bg-slate-800 overflow-hidden">
118
+ <img src="http://static.photos/people/640x360/42" alt="Profile" class="w-full h-full object-cover">
119
+ </div>
120
+ </div>
121
+ <div class="absolute -bottom-4 -right-4 bg-white dark:bg-slate-700 p-3 rounded-lg shadow-lg border border-gray-200 dark:border-slate-600">
122
+ <div class="text-primary font-bold text-xl">5+</div>
123
+ <div class="text-gray-500 dark:text-gray-300 text-sm">Years Experience</div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </section>
130
+
131
+ <!-- Clients Section -->
132
+ <section class="py-12 bg-gray-50 dark:bg-slate-700">
133
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
134
+ <h2 class="text-center text-gray-500 dark:text-gray-300 text-sm uppercase tracking-wider mb-8">Trusted by innovative companies</h2>
135
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-8">
136
+ <div class="flex items-center justify-center">
137
+ <img src="https://via.placeholder.com/150x80?text=Company+1" alt="Company Logo" class="h-8 opacity-70 hover:opacity-100 transition">
138
+ </div>
139
+ <div class="flex items-center justify-center">
140
+ <img src="https://via.placeholder.com/150x80?text=Company+2" alt="Company Logo" class="h-8 opacity-70 hover:opacity-100 transition">
141
+ </div>
142
+ <div class="flex items-center justify-center">
143
+ <img src="https://via.placeholder.com/150x80?text=Company+3" alt="Company Logo" class="h-8 opacity-70 hover:opacity-100 transition">
144
+ </div>
145
+ <div class="flex items-center justify-center">
146
+ <img src="https://via.placeholder.com/150x80?text=Company+4" alt="Company Logo" class="h-8 opacity-70 hover:opacity-100 transition">
147
+ </div>
148
+ <div class="flex items-center justify-center">
149
+ <img src="https://via.placeholder.com/150x80?text=Company+5" alt="Company Logo" class="h-8 opacity-70 hover:opacity-100 transition">
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </section>
154
+
155
+ <!-- About Section -->
156
+ <section id="about" class="py-20 relative">
157
+ <div class="section-divider absolute -top-px left-0"></div>
158
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
159
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
160
+ <div>
161
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
162
+ About <span class="hero-text">Me</span>
163
+ </h2>
164
+ <p class="text-gray-600 dark:text-gray-300 mb-6">
165
+ I'm a passionate UI/UX Designer and Front-End Developer with 5+ years of experience creating digital products that users love.
166
+ </p>
167
+ <p class="text-gray-600 dark:text-gray-300 mb-8">
168
+ My approach combines aesthetic sensibility with technical expertise to deliver solutions that are not only beautiful but also functional and user-friendly. I believe in the power of design to solve problems and create meaningful experiences.
169
+ </p>
170
+ <div class="flex flex-wrap gap-4 mb-8">
171
+ <div class="flex items-center">
172
+ <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
173
+ <i data-feather="check" class="text-primary"></i>
174
+ </div>
175
+ <span class="text-gray-700 dark:text-gray-300">UI/UX Design</span>
176
+ </div>
177
+ <div class="flex items-center">
178
+ <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
179
+ <i data-feather="check" class="text-primary"></i>
180
+ </div>
181
+ <span class="text-gray-700 dark:text-gray-300">Front-End Dev</span>
182
+ </div>
183
+ <div class="flex items-center">
184
+ <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
185
+ <i data-feather="check" class="text-primary"></i>
186
+ </div>
187
+ <span class="text-gray-700 dark:text-gray-300">Responsive Design</span>
188
+ </div>
189
+ <div class="flex items-center">
190
+ <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
191
+ <i data-feather="check" class="text-primary"></i>
192
+ </div>
193
+ <span class="text-gray-700 dark:text-gray-300">Web Animation</span>
194
+ </div>
195
+ </div>
196
+ <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
197
+ Download CV
198
+ <i data-feather="download" class="ml-2 w-4 h-4"></i>
199
+ </a>
200
+ </div>
201
+ <div class="relative">
202
+ <div class="bg-gradient-to-r from-primary to-secondary p-1 rounded-lg">
203
+ <div class="bg-white dark:bg-slate-800 rounded-lg overflow-hidden">
204
+ <img src="http://static.photos/workspace/640x360/23" alt="Working" class="w-full h-auto">
205
+ </div>
206
+ </div>
207
+ <div class="absolute -bottom-6 -left-6 bg-white dark:bg-slate-700 p-4 rounded-lg shadow-lg border border-gray-200 dark:border-slate-600">
208
+ <div class="text-primary font-bold text-2xl">100%</div>
209
+ <div class="text-gray-500 dark:text-gray-300 text-sm">Satisfaction Rate</div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </section>
215
+
216
+ <!-- Work Section -->
217
+ <section id="work" class="py-20 bg-gray-50 dark:bg-slate-700/50">
218
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
219
+ <div class="text-center mb-16">
220
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
221
+ Featured <span class="hero-text">Projects</span>
222
+ </h2>
223
+ <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
224
+ Here are some of my recent projects that showcase my skills and expertise.
225
+ </p>
226
+ </div>
227
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
228
+ <!-- Project 1 -->
229
+ <div class="project-card bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-md transition duration-300">
230
+ <div class="h-48 overflow-hidden">
231
+ <img src="http://static.photos/technology/640x360/1" alt="Project 1" class="w-full h-full object-cover">
232
+ </div>
233
+ <div class="p-6">
234
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">E-commerce Platform</h3>
235
+ <p class="text-gray-600 dark:text-gray-300 mb-4">A modern e-commerce solution with seamless checkout experience.</p>
236
+ <div class="flex flex-wrap gap-2 mb-4">
237
+ <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded">UI/UX</span>
238
+ <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded">React</span>
239
+ <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded">Node.js</span>
240
+ </div>
241
+ <a href="#" class="text-primary font-medium hover:underline flex items-center">
242
+ View Project
243
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
244
+ </a>
245
+ </div>
246
+ </div>
247
+ <!-- Project 2 -->
248
+ <div class="project-card bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-md transition duration-300">
249
+ <div class="h-48 overflow-hidden">
250
+ <img src="http://static.photos/finance/640x360/2" alt="Project 2" class="w-full h-full object-cover">
251
+ </div>
252
+ <div class="p-6">
253
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Banking Dashboard</h3>
254
+ <p class="text-gray-600 dark:text-gray-300 mb-4">A comprehensive financial dashboard for personal banking.</p>
255
+ <div class="flex flex-wrap gap-2 mb-4">
256
+ <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded">Dashboard</span>
257
+ <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded">Vue.js</span>
258
+ <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded">D3.js</span>
259
+ </div>
260
+ <a href="#" class="text-primary font-medium hover:underline flex items-center">
261
+ View Project
262
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
263
+ </a>
264
+ </div>
265
+ </div>
266
+ <!-- Project 3 -->
267
+ <div class="project-card bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-md transition duration-300">
268
+ <div class="h-48 overflow-hidden">
269
+ <img src="http://static.photos/education/640x360/3" alt="Project 3" class="w-full h-full object-cover">
270
+ </div>
271
+ <div class="p-6">
272
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Learning Platform</h3>
273
+ <p class="text-gray-600 dark:text-gray-300 mb-4">An interactive online learning platform with video courses.</p>
274
+ <div class="flex flex-wrap gap-2 mb-4">
275
+ <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded">Education</span>
276
+ <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded">React</span>
277
+ <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded">Firebase</span>
278
+ </div>
279
+ <a href="#" class="text-primary font-medium hover:underline flex items-center">
280
+ View Project
281
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
282
+ </a>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ <div class="text-center mt-12">
287
+ <a href="#" class="px-6 py-3 border border-primary text-primary dark:text-white rounded-lg font-medium hover:bg-primary hover:text-white transition inline-flex items-center">
288
+ View All Projects
289
+ <i data-feather="chevron-right" class="ml-2 w-4 h-4"></i>
290
+ </a>
291
+ </div>
292
+ </div>
293
+ </section>
294
+
295
+ <!-- Testimonials -->
296
+ <section class="py-20">
297
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
298
+ <div class="text-center mb-16">
299
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
300
+ Client <span class="hero-text">Testimonials</span>
301
+ </h2>
302
+ <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
303
+ What my clients say about working with me.
304
+ </p>
305
+ </div>
306
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
307
+ <!-- Testimonial 1 -->
308
+ <div class="bg-white dark:bg-slate-800 p-8 rounded-xl shadow-md">
309
+ <div class="flex items-center mb-4">
310
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
311
+ <img src="http://static.photos/people/200x200/1" alt="Client" class="w-full h-full object-cover">
312
+ </div>
313
+ <div>
314
+ <h4 class="font-bold text-gray-900 dark:text-white">Sarah Johnson</h4>
315
+ <p class="text-gray-500 dark:text-gray-400 text-sm">CEO, TechStart</p>
316
+ </div>
317
+ </div>
318
+ <p class="text-gray-600 dark:text-gray-300">
319
+ "Working with this designer was a game-changer for our product. They understood our vision immediately and delivered beyond our expectations."
320
+ </p>
321
+ <div class="flex mt-4">
322
+ <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>
323
+ <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>
324
+ <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>
325
+ <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>
326
+ <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>
327
+ </div>
328
+ </div>
329
+ <!-- Testimonial 2 -->
330
+ <div class="bg-white dark:bg-slate-800 p-8 rounded-xl shadow-md">
331
+ <div class="flex items-center mb-4">
332
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
333
+ <img src="http://static.photos/people/200x200/2" alt="Client" class="w-full h-full object-cover">
334
+ </div>
335
+ <div>
336
+ <h4 class="font-bold text-gray-900 dark:text-white">Michael Chen</h4>
337
+ <p class="text-gray-500 dark:text-gray-400 text-sm">Product Manager, FinCorp</p>
338
+ </div>
339
+ </div>
340
+ <p class="text-gray-600 dark:text-gray-300">
341
+ "The attention to detail and user experience focus was exceptional. Our conversion rates improved by 35% after the redesign."
342
+ </p>
343
+ <div class="flex mt-4">
344
+ <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>
345
+ <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>
346
+ <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>
347
+ <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>
348
+ <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>
349
+ </div>
350
+ </div>
351
+ <!-- Testimonial 3 -->
352
+ <div class="bg-white dark:bg-slate-800 p-8 rounded-xl shadow-md">
353
+ <div class="flex items-center mb-4">
354
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
355
+ <img src="http://static.photos/people/200x200/3" alt="Client" class="w-full h-full object-cover">
356
+ </div>
357
+ <div>
358
+ <h4 class="font-bold text-gray-900 dark:text-white">Emma Rodriguez</h4>
359
+ <p class="text-gray-500 dark:text-gray-400 text-sm">Marketing Director, EduLearn</p>
360
+ </div>
361
+ </div>
362
+ <p class="text-gray-600 dark:text-gray-300">
363
+ "From concept to execution, the process was smooth and professional. The final product exceeded all our expectations."
364
+ </p>
365
+ <div class="flex mt-4">
366
+ <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>
367
+ <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>
368
+ <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>
369
+ <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>
370
+ <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </section>
376
+
377
+ <!-- Contact Section -->
378
+ <section id="contact" class="py-20 bg-gray-50 dark:bg-slate-700/50 relative">
379
+ <div class="section-divider absolute -top-px left-0 rotate-180"></div>
380
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
381
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
382
+ <div>
383
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
384
+ Get In <span class="hero-text">Touch</span>
385
+ </h2>
386
+ <p class="text-gray-600 dark:text-gray-300 mb-8 max-w-lg">
387
+ Have a project in mind or want to discuss potential opportunities? Feel free to reach out and I'll get back to you as soon as possible.
388
+ </p>
389
+ <div class="space-y-4">
390
+ <div class="flex items-center">
391
+ <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4">
392
+ <i data-feather="mail" class="text-primary"></i>
393
+ </div>
394
+ <div>
395
+ <h4 class="font-medium text-gray-700 dark:text-gray-300">Email</h4>
396
+ <a href="mailto:hello@example.com" class="text-gray-600 dark:text-gray-400 hover:text-primary transition">hello@example.com</a>
397
+ </div>
398
+ </div>
399
+ <div class="flex items-center">
400
+ <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4">
401
+ <i data-feather="phone" class="text-primary"></i>
402
+ </div>
403
+ <div>
404
+ <h4 class="font-medium text-gray-700 dark:text-gray-300">Phone</h4>
405
+ <a href="tel:+1234567890" class="text-gray-600 dark:text-gray-400 hover:text-primary transition">+1 (234) 567-890</a>
406
+ </div>
407
+ </div>
408
+ <div class="flex items-center">
409
+ <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4">
410
+ <i data-feather="map-pin" class="text-primary"></i>
411
+ </div>
412
+ <div>
413
+ <h4 class="font-medium text-gray-700 dark:text-gray-300">Location</h4>
414
+ <p class="text-gray-600 dark:text-gray-400">San Francisco, CA</p>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ <div class="mt-8 flex space-x-4">
419
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-slate-700 flex items-center justify-center text-gray-700 dark:text-gray-300 hover:text-primary transition">
420
+ <i data-feather="twitter"></i>
421
+ </a>
422
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-slate-700 flex items-center justify-center text-gray-700 dark:text-gray-300 hover:text-primary transition">
423
+ <i data-feather="linkedin"></i>
424
+ </a>
425
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-slate-700 flex items-center justify-center text-gray-700 dark:text-gray-300 hover:text-primary transition">
426
+ <i data-feather="dribbble"></i>
427
+ </a>
428
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-slate-700 flex items-center justify-center text-gray-700 dark:text-gray-300 hover:text-primary transition">
429
+ <i data-feather="github"></i>
430
+ </a>
431
+ </div>
432
+ </div>
433
+ <div class="bg-white dark:bg-slate-800 p-8 rounded-xl shadow-md">
434
+ <form>
435
+ <div class="mb-6">
436
+ <label for="name" class="block text-gray-700 dark:text-gray-300 mb-2">Your Name</label>
437
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition">
438
+ </div>
439
+ <div class="mb-6">
440
+ <label for="email" class="block text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
441
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition">
442
+ </div>
443
+ <div class="mb-6">
444
+ <label for="message" class="block text-gray-700 dark:text-gray-300 mb-2">Your Message</label>
445
+ <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition"></textarea>
446
+ </div>
447
+ <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-lg font-medium hover:opacity-90 transition shadow-lg">
448
+ Send Message
449
+ </button>
450
+ </form>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </section>
455
+
456
+ <!-- Footer -->
457
+ <footer class="bg-white dark:bg-slate-800 border-t border-gray-200 dark:border-slate-700">
458
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
459
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
460
+ <div>
461
+ <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">PixelPortfolio</h3>
462
+ <p class="text-gray-600 dark:text-gray-300">
463
+ Creating beautiful digital experiences that make an impact.
464
+ </p>
465
+ </div>
466
+ <div>
467
+ <h4 class="text-gray-900 dark:text-white font-medium mb-4">Quick Links</h4>
468
+ <ul class="space-y-2">
469
+ <li><a href="#home" class="text-gray-600 dark:text-gray-300 hover:text-primary transition">Home</a></li>
470
+ <li><a href="#about" class="text-gray-600 dark:text-gray-300 hover:text-primary transition">About</a></li>
471
+ <li><a href="#work" class="text-gray-600 dark:text-gray-300 hover:text-primary transition">Work</a></li>
472
+ <li><a href="#contact" class="text-gray-600 dark:text-gray-300 hover:text-primary transition">Contact</a></li>
473
+ </ul>
474
+ </div>
475
+ <div>
476
+ <h4 class="text-gray-900 dark:text-white font-medium mb-4">Services</h4>
477
+ <ul class="space-y-2">
478
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition">UI/UX Design</a></li>
479
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition">Web Development</a></li>
480
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition">Mobile Design</a></li>
481
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition">Branding</a></li>
482
+ </ul>
483
+ </div>
484
+ <div>
485
+ <h4 class="text-gray-900 dark:text-white font-medium mb-4">Connect</h4>
486
+ <div class="flex space-x-4">
487
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-slate-700 flex items-center justify-center text-gray-700 dark:text-gray-300 hover:text-primary transition">
488
+ <i data-feather="twitter"></i>
489
+ </a>
490
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-slate-700 flex items-center justify-center text-gray-700 dark:text-gray-300 hover:text-primary transition">
491
+ <i data-feather="linkedin"></i>
492
+ </a>
493
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-slate-700 flex items-center justify-center text-gray-700 dark:text-gray-300 hover:text-primary transition">
494
+ <i data-feather="dribbble"></i>
495
+ </a>
496
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-slate-700 flex items-center justify-center text-gray-700 dark:text-gray-300 hover:text-primary transition">
497
+ <i data-feather="github"></i>
498
+ </a>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ <div class="border-t border-gray-200 dark:border-slate-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
503
+ <p class="text-gray-500 dark:text-gray-400 text-sm">
504
+ © 2023 PixelPortfolio. All rights reserved.
505
+ </p>
506
+ <div class="flex space-x-6 mt-4 md:mt-0">
507
+ <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-primary transition text-sm">Privacy Policy</a>
508
+ <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-primary transition text-sm">Terms of Service</a>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </footer>
513
+
514
+ <script>
515
+ // Mobile menu toggle
516
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
517
+ const mobileMenu = document.getElementById('mobile-menu');
518
+
519
+ mobileMenuButton.addEventListener('click', () => {
520
+ mobileMenu.classList.toggle('hidden');
521
+ });
522
+
523
+ // Theme toggle
524
+ const themeToggle = document.getElementById('theme-toggle');
525
+ const mobileThemeToggle = document.querySelector('#mobile-menu button');
526
+
527
+ function toggleTheme() {
528
+ if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
529
+ document.documentElement.classList.remove('dark');
530
+ localStorage.theme = 'light';
531
+ } else {
532
+ document.documentElement.classList.add('dark');
533
+ localStorage.theme = 'dark';
534
+ }
535
+ }
536
+
537
+ themeToggle.addEventListener('click', toggleTheme);
538
+ mobileThemeToggle.addEventListener('click', toggleTheme);
539
+
540
+ // Set initial theme
541
+ if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
542
+ document.documentElement.classList.add('dark');
543
+ } else {
544
+ document.documentElement.classList.remove('dark');
545
+ }
546
+
547
+ // Vanta.js background
548
+ VANTA.NET({
549
+ el: "#vanta-bg",
550
+ mouseControls: true,
551
+ touchControls: true,
552
+ gyroControls: false,
553
+ minHeight: 200.00,
554
+ minWidth: 200.00,
555
+ scale: 1.00,
556
+ scaleMobile: 1.00,
557
+ color: 0x6366f1,
558
+ backgroundColor: 0xffffff,
559
+ points: 12.00,
560
+ maxDistance: 22.00,
561
+ spacing: 18.00
562
+ });
563
+
564
+ // Smooth scrolling for anchor links
565
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
566
+ anchor.addEventListener('click', function (e) {
567
+ e.preventDefault();
568
+
569
+ const targetId = this.getAttribute('href');
570
+ if (targetId === '#') return;
571
+
572
+ const targetElement = document.querySelector(targetId);
573
+ if (targetElement) {
574
+ window.scrollTo({
575
+ top: targetElement.offsetTop - 80,
576
+ behavior: 'smooth'
577
+ });
578
+
579
+ // Close mobile menu if open
580
+ if (!mobileMenu.classList.contains('hidden')) {
581
+ mobileMenu.classList.add('hidden');
582
+ }
583
+ }
584
+ });
585
+ });
586
+
587
+ // Close mobile menu when clicking outside
588
+ document.addEventListener('click', (e) => {
589
+ if (!mobileMenu.contains(e.target) && e.target !== mobileMenuButton) {
590
+ mobileMenu.classList.add('hidden');
591
+ }
592
+ });
593
+ </script>
594
+ <script>
595
+ feather.replace();
596
+ </script>
597
+ </body>
598
  </html>