Hugging Face's logo

Spaces:
vickkey
/
vkk
Running

App Files Community
vickkey commited on
Commit
3bc69fc
·
verified ·
1 Parent(s): 81c8582

creative portfolio for graphic designer - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +944 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vkk
3
- emoji: 📊
4
- colorFrom: blue
5
- colorTo: gray
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: vkk
3
+ emoji: 🐳
4
+ colorFrom: pink
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,944 @@
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>Creative Portfolio | Graphic Designer</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 float {
12
+ 0%, 100% { transform: translateY(0); }
13
+ 50% { transform: translateY(-20px); }
14
+ }
15
+
16
+ .floating {
17
+ animation: float 6s ease-in-out infinite;
18
+ }
19
+
20
+ .project-card {
21
+ transition: all 0.3s ease;
22
+ transform-style: preserve-3d;
23
+ }
24
+
25
+ .project-card:hover {
26
+ transform: translateY(-10px) scale(1.02);
27
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
28
+ }
29
+
30
+ .skill-bar {
31
+ height: 6px;
32
+ border-radius: 3px;
33
+ background: linear-gradient(90deg, #4f46e5 0%, #a855f7 100%);
34
+ transition: width 1s ease-in-out;
35
+ }
36
+
37
+ .nav-link {
38
+ position: relative;
39
+ }
40
+
41
+ .nav-link::after {
42
+ content: '';
43
+ position: absolute;
44
+ width: 0;
45
+ height: 2px;
46
+ bottom: -2px;
47
+ left: 0;
48
+ background-color: #4f46e5;
49
+ transition: width 0.3s ease;
50
+ }
51
+
52
+ .nav-link:hover::after {
53
+ width: 100%;
54
+ }
55
+
56
+ .testimonial-card {
57
+ perspective: 1000px;
58
+ }
59
+
60
+ .testimonial-inner {
61
+ transition: transform 0.6s;
62
+ transform-style: preserve-3d;
63
+ }
64
+
65
+ .testimonial-card:hover .testimonial-inner {
66
+ transform: rotateY(180deg);
67
+ }
68
+
69
+ .testimonial-front, .testimonial-back {
70
+ backface-visibility: hidden;
71
+ position: absolute;
72
+ width: 100%;
73
+ height: 100%;
74
+ }
75
+
76
+ .testimonial-back {
77
+ transform: rotateY(180deg);
78
+ }
79
+ </style>
80
+ </head>
81
+ <body class="bg-gray-50 font-sans text-gray-800">
82
+ <!-- Navigation -->
83
+ <nav class="fixed w-full bg-white bg-opacity-90 shadow-sm z-50">
84
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
85
+ <div class="flex justify-between h-16 items-center">
86
+ <div class="flex-shrink-0 flex items-center">
87
+ <span class="text-2xl font-bold text-indigo-600">DESIGN<span class="text-purple-500">MIND</span></span>
88
+ </div>
89
+ <div class="hidden md:block">
90
+ <div class="ml-10 flex items-center space-x-8">
91
+ <a href="#home" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium">Home</a>
92
+ <a href="#about" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium">About</a>
93
+ <a href="#work" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium">Work</a>
94
+ <a href="#skills" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium">Skills</a>
95
+ <a href="#testimonials" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium">Testimonials</a>
96
+ <a href="#contact" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium">Contact</a>
97
+ </div>
98
+ </div>
99
+ <div class="md:hidden">
100
+ <button id="menu-toggle" class="text-gray-700 hover:text-indigo-600 focus:outline-none">
101
+ <i class="fas fa-bars text-2xl"></i>
102
+ </button>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ <!-- Mobile menu -->
107
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
108
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
109
+ <a href="#home" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-indigo-600">Home</a>
110
+ <a href="#about" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-indigo-600">About</a>
111
+ <a href="#work" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-indigo-600">Work</a>
112
+ <a href="#skills" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-indigo-600">Skills</a>
113
+ <a href="#testimonials" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-indigo-600">Testimonials</a>
114
+ <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-indigo-600">Contact</a>
115
+ </div>
116
+ </div>
117
+ </nav>
118
+
119
+ <!-- Hero Section -->
120
+ <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-r from-indigo-50 to-purple-50">
121
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
122
+ <div class="md:flex items-center justify-between">
123
+ <div class="md:w-1/2 mb-12 md:mb-0">
124
+ <h1 class="text-4xl md:text-6xl font-bold text-gray-800 mb-4">Hi, I'm <span class="text-indigo-600">Alex</span></h1>
125
+ <h2 class="text-2xl md:text-3xl font-semibold text-purple-500 mb-6">Graphic Designer & Visual Storyteller</h2>
126
+ <p class="text-gray-600 mb-8 text-lg leading-relaxed">I create compelling visual experiences that connect brands with their audiences through thoughtful design and creative strategy.</p>
127
+ <div class="flex space-x-4">
128
+ <a href="#work" class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition duration-300 shadow-lg hover:shadow-xl">View My Work</a>
129
+ <a href="#contact" class="px-6 py-3 border-2 border-indigo-600 text-indigo-600 font-medium rounded-lg hover:bg-indigo-50 transition duration-300">Hire Me</a>
130
+ </div>
131
+ </div>
132
+ <div class="md:w-1/2 flex justify-center">
133
+ <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-r from-indigo-400 to-purple-500 p-1 floating">
134
+ <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
135
+ alt="Designer Portrait"
136
+ class="w-full h-full rounded-full object-cover border-4 border-white">
137
+ <div class="absolute -bottom-4 -right-4 bg-white p-3 rounded-full shadow-xl">
138
+ <div class="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center">
139
+ <i class="fas fa-palette text-white text-2xl"></i>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </section>
147
+
148
+ <!-- About Section -->
149
+ <section id="about" class="py-16 md:py-24 bg-white">
150
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
151
+ <div class="text-center mb-16">
152
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">About <span class="text-indigo-600">Me</span></h2>
153
+ <div class="w-20 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto"></div>
154
+ </div>
155
+
156
+ <div class="md:flex items-center">
157
+ <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
158
+ <div class="relative">
159
+ <div class="w-64 h-64 md:w-80 md:h-80 rounded-2xl overflow-hidden shadow-xl">
160
+ <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
161
+ alt="Designer at work"
162
+ class="w-full h-full object-cover">
163
+ </div>
164
+ <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-lg hidden md:block">
165
+ <div class="flex items-center">
166
+ <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-3">
167
+ <i class="fas fa-award text-indigo-600 text-xl"></i>
168
+ </div>
169
+ <div>
170
+ <p class="font-bold text-gray-800">5+ Years</p>
171
+ <p class="text-sm text-gray-600">Experience</p>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <div class="md:w-2/3 md:pl-12">
179
+ <h3 class="text-2xl font-semibold text-gray-800 mb-4">Crafting Visual Stories That Resonate</h3>
180
+ <p class="text-gray-600 mb-6 leading-relaxed">With a passion for visual storytelling and a keen eye for detail, I specialize in creating designs that not only look beautiful but also communicate effectively. My approach combines strategic thinking with creative execution to deliver solutions that make an impact.</p>
181
+
182
+ <div class="grid grid-cols-2 gap-6 mb-8">
183
+ <div class="flex items-start">
184
+ <div class="bg-indigo-100 p-3 rounded-lg mr-4">
185
+ <i class="fas fa-lightbulb text-indigo-600 text-xl"></i>
186
+ </div>
187
+ <div>
188
+ <h4 class="font-semibold text-gray-800 mb-1">Creative Vision</h4>
189
+ <p class="text-gray-600 text-sm">Unique concepts that stand out</p>
190
+ </div>
191
+ </div>
192
+ <div class="flex items-start">
193
+ <div class="bg-purple-100 p-3 rounded-lg mr-4">
194
+ <i class="fas fa-brush text-purple-600 text-xl"></i>
195
+ </div>
196
+ <div>
197
+ <h4 class="font-semibold text-gray-800 mb-1">Artistic Flair</h4>
198
+ <p class="text-gray-600 text-sm">Aesthetic excellence in every detail</p>
199
+ </div>
200
+ </div>
201
+ <div class="flex items-start">
202
+ <div class="bg-indigo-100 p-3 rounded-lg mr-4">
203
+ <i class="fas fa-bullseye text-indigo-600 text-xl"></i>
204
+ </div>
205
+ <div>
206
+ <h4 class="font-semibold text-gray-800 mb-1">Strategic Focus</h4>
207
+ <p class="text-gray-600 text-sm">Designs with purpose and direction</p>
208
+ </div>
209
+ </div>
210
+ <div class="flex items-start">
211
+ <div class="bg-purple-100 p-3 rounded-lg mr-4">
212
+ <i class="fas fa-users text-purple-600 text-xl"></i>
213
+ </div>
214
+ <div>
215
+ <h4 class="font-semibold text-gray-800 mb-1">User-Centric</h4>
216
+ <p class="text-gray-600 text-sm">Solutions tailored to your audience</p>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <div class="flex flex-wrap gap-4">
222
+ <div class="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium">Brand Identity</div>
223
+ <div class="px-4 py-2 bg-purple-100 text-purple-800 rounded-full text-sm font-medium">Print Design</div>
224
+ <div class="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium">Packaging</div>
225
+ <div class="px-4 py-2 bg-purple-100 text-purple-800 rounded-full text-sm font-medium">Illustration</div>
226
+ <div class="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium">Typography</div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </section>
232
+
233
+ <!-- Work/Portfolio Section -->
234
+ <section id="work" class="py-16 md:py-24 bg-gray-50">
235
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
236
+ <div class="text-center mb-16">
237
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">My <span class="text-indigo-600">Portfolio</span></h2>
238
+ <div class="w-20 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto mb-6"></div>
239
+ <p class="text-gray-600 max-w-2xl mx-auto">A selection of my recent design projects showcasing different styles and industries</p>
240
+ </div>
241
+
242
+ <div class="flex justify-center mb-8">
243
+ <div class="inline-flex rounded-md shadow-sm">
244
+ <button type="button" class="filter-btn px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50" data-filter="all">
245
+ All
246
+ </button>
247
+ <button type="button" class="filter-btn px-4 py-2 text-sm font-medium border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50" data-filter="branding">
248
+ Branding
249
+ </button>
250
+ <button type="button" class="filter-btn px-4 py-2 text-sm font-medium border border-gray-300 bg-white text-gray-700 hover:bg-gray-50" data-filter="print">
251
+ Print
252
+ </button>
253
+ <button type="button" class="filter-btn px-4 py-2 text-sm font-medium rounded-r-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50" data-filter="packaging">
254
+ Packaging
255
+ </button>
256
+ </div>
257
+ </div>
258
+
259
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
260
+ <!-- Project 1 -->
261
+ <div class="project-card branding" data-category="branding">
262
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg">
263
+ <div class="relative overflow-hidden h-64">
264
+ <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80"
265
+ alt="Brand Identity Project"
266
+ class="w-full h-full object-cover transition duration-500 hover:scale-110">
267
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
268
+ <div>
269
+ <span class="text-xs text-white bg-indigo-600 px-2 py-1 rounded">Branding</span>
270
+ <h3 class="text-white text-xl font-semibold mt-2">Nova Coffee Branding</h3>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ <div class="p-6">
275
+ <p class="text-gray-600 mb-4">Complete brand identity for an artisanal coffee company, including logo, color palette, and visual language.</p>
276
+ <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 flex items-center">
277
+ View Case Study <i class="fas fa-arrow-right ml-2"></i>
278
+ </a>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- Project 2 -->
284
+ <div class="project-card print" data-category="print">
285
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg">
286
+ <div class="relative overflow-hidden h-64">
287
+ <img src="https://images.unsplash.com/photo-1542621334-a254cf47733d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
288
+ alt="Print Design Project"
289
+ class="w-full h-full object-cover transition duration-500 hover:scale-110">
290
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
291
+ <div>
292
+ <span class="text-xs text-white bg-purple-600 px-2 py-1 rounded">Print</span>
293
+ <h3 class="text-white text-xl font-semibold mt-2">Urban Magazine Layout</h3>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ <div class="p-6">
298
+ <p class="text-gray-600 mb-4">Editorial design for a contemporary lifestyle magazine featuring innovative typography and layout techniques.</p>
299
+ <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 flex items-center">
300
+ View Case Study <i class="fas fa-arrow-right ml-2"></i>
301
+ </a>
302
+ </div>
303
+ </div>
304
+ </div>
305
+
306
+ <!-- Project 3 -->
307
+ <div class="project-card packaging" data-category="packaging">
308
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg">
309
+ <div class="relative overflow-hidden h-64">
310
+ <img src="https://images.unsplash.com/photo-1605000797499-95e51c0df0fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
311
+ alt="Packaging Design Project"
312
+ class="w-full h-full object-cover transition duration-500 hover:scale-110">
313
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
314
+ <div>
315
+ <span class="text-xs text-white bg-indigo-600 px-2 py-1 rounded">Packaging</span>
316
+ <h3 class="text-white text-xl font-semibold mt-2">Organic Skincare Line</h3>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ <div class="p-6">
321
+ <p class="text-gray-600 mb-4">Sustainable packaging design for an organic skincare brand using eco-friendly materials and minimalist aesthetics.</p>
322
+ <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 flex items-center">
323
+ View Case Study <i class="fas fa-arrow-right ml-2"></i>
324
+ </a>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <!-- Project 4 -->
330
+ <div class="project-card branding" data-category="branding">
331
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg">
332
+ <div class="relative overflow-hidden h-64">
333
+ <img src="https://images.unsplash.com/photo-1567443024551-f3e3a7b9d41c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
334
+ alt="Brand Identity Project"
335
+ class="w-full h-full object-cover transition duration-500 hover:scale-110">
336
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
337
+ <div>
338
+ <span class="text-xs text-white bg-purple-600 px-2 py-1 rounded">Branding</span>
339
+ <h3 class="text-white text-xl font-semibold mt-2">Tech Startup Identity</h3>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ <div class="p-6">
344
+ <p class="text-gray-600 mb-4">Modern brand identity for a fintech startup, including logo, iconography, and digital assets.</p>
345
+ <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 flex items-center">
346
+ View Case Study <i class="fas fa-arrow-right ml-2"></i>
347
+ </a>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Project 5 -->
353
+ <div class="project-card print" data-category="print">
354
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg">
355
+ <div class="relative overflow-hidden h-64">
356
+ <img src="https://images.unsplash.com/photo-1583947581924-860bda6a26df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
357
+ alt="Print Design Project"
358
+ class="w-full h-full object-cover transition duration-500 hover:scale-110">
359
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
360
+ <div>
361
+ <span class="text-xs text-white bg-indigo-600 px-2 py-1 rounded">Print</span>
362
+ <h3 class="text-white text-xl font-semibold mt-2">Music Festival Posters</h3>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ <div class="p-6">
367
+ <p class="text-gray-600 mb-4">Series of vibrant concert posters featuring bold typography and psychedelic illustrations.</p>
368
+ <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 flex items-center">
369
+ View Case Study <i class="fas fa-arrow-right ml-2"></i>
370
+ </a>
371
+ </div>
372
+ </div>
373
+ </div>
374
+
375
+ <!-- Project 6 -->
376
+ <div class="project-card packaging" data-category="packaging">
377
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg">
378
+ <div class="relative overflow-hidden h-64">
379
+ <img src="https://images.unsplash.com/photo-1556909212-d5b604d0c90d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
380
+ alt="Packaging Design Project"
381
+ class="w-full h-full object-cover transition duration-500 hover:scale-110">
382
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
383
+ <div>
384
+ <span class="text-xs text-white bg-purple-600 px-2 py-1 rounded">Packaging</span>
385
+ <h3 class="text-white text-xl font-semibold mt-2">Gourmet Chocolate Box</h3>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ <div class="p-6">
390
+ <p class="text-gray-600 mb-4">Luxury packaging for a premium chocolate brand featuring foil stamping and embossing.</p>
391
+ <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 flex items-center">
392
+ View Case Study <i class="fas fa-arrow-right ml-2"></i>
393
+ </a>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </div>
398
+
399
+ <div class="text-center mt-12">
400
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
401
+ View All Projects <i class="fas fa-arrow-right ml-2"></i>
402
+ </a>
403
+ </div>
404
+ </div>
405
+ </section>
406
+
407
+ <!-- Skills Section -->
408
+ <section id="skills" class="py-16 md:py-24 bg-white">
409
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
410
+ <div class="text-center mb-16">
411
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">My <span class="text-indigo-600">Skills</span></h2>
412
+ <div class="w-20 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto mb-6"></div>
413
+ <p class="text-gray-600 max-w-2xl mx-auto">A blend of technical expertise and creative vision to bring your ideas to life</p>
414
+ </div>
415
+
416
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
417
+ <div>
418
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Design Skills</h3>
419
+
420
+ <div class="space-y-6">
421
+ <div>
422
+ <div class="flex justify-between mb-2">
423
+ <span class="text-gray-700 font-medium">Brand Identity</span>
424
+ <span class="text-gray-500">95%</span>
425
+ </div>
426
+ <div class="w-full bg-gray-200 rounded-full h-2">
427
+ <div class="skill-bar h-2 rounded-full" style="width: 95%"></div>
428
+ </div>
429
+ </div>
430
+
431
+ <div>
432
+ <div class="flex justify-between mb-2">
433
+ <span class="text-gray-700 font-medium">Typography</span>
434
+ <span class="text-gray-500">90%</span>
435
+ </div>
436
+ <div class="w-full bg-gray-200 rounded-full h-2">
437
+ <div class="skill-bar h-2 rounded-full" style="width: 90%"></div>
438
+ </div>
439
+ </div>
440
+
441
+ <div>
442
+ <div class="flex justify-between mb-2">
443
+ <span class="text-gray-700 font-medium">Color Theory</span>
444
+ <span class="text-gray-500">92%</span>
445
+ </div>
446
+ <div class="w-full bg-gray-200 rounded-full h-2">
447
+ <div class="skill-bar h-2 rounded-full" style="width: 92%"></div>
448
+ </div>
449
+ </div>
450
+
451
+ <div>
452
+ <div class="flex justify-between mb-2">
453
+ <span class="text-gray-700 font-medium">Layout & Composition</span>
454
+ <span class="text-gray-500">88%</span>
455
+ </div>
456
+ <div class="w-full bg-gray-200 rounded-full h-2">
457
+ <div class="skill-bar h-2 rounded-full" style="width: 88%"></div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </div>
462
+
463
+ <div>
464
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Software Proficiency</h3>
465
+
466
+ <div class="space-y-6">
467
+ <div>
468
+ <div class="flex justify-between mb-2">
469
+ <span class="text-gray-700 font-medium">Adobe Illustrator</span>
470
+ <span class="text-gray-500">98%</span>
471
+ </div>
472
+ <div class="w-full bg-gray-200 rounded-full h-2">
473
+ <div class="skill-bar h-2 rounded-full" style="width: 98%"></div>
474
+ </div>
475
+ </div>
476
+
477
+ <div>
478
+ <div class="flex justify-between mb-2">
479
+ <span class="text-gray-700 font-medium">Adobe Photoshop</span>
480
+ <span class="text-gray-500">85%</span>
481
+ </div>
482
+ <div class="w-full bg-gray-200 rounded-full h-2">
483
+ <div class="skill-bar h-2 rounded-full" style="width: 85%"></div>
484
+ </div>
485
+ </div>
486
+
487
+ <div>
488
+ <div class="flex justify-between mb-2">
489
+ <span class="text-gray-700 font-medium">Adobe InDesign</span>
490
+ <span class="text-gray-500">90%</span>
491
+ </div>
492
+ <div class="w-full bg-gray-200 rounded-full h-2">
493
+ <div class="skill-bar h-2 rounded-full" style="width: 90%"></div>
494
+ </div>
495
+ </div>
496
+
497
+ <div>
498
+ <div class="flex justify-between mb-2">
499
+ <span class="text-gray-700 font-medium">Figma</span>
500
+ <span class="text-gray-500">80%</span>
501
+ </div>
502
+ <div class="w-full bg-gray-200 rounded-full h-2">
503
+ <div class="skill-bar h-2 rounded-full" style="width: 80%"></div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+
510
+ <div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6">
511
+ <div class="bg-indigo-50 p-6 rounded-xl text-center">
512
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
513
+ <i class="fas fa-pen-fancy text-indigo-600 text-2xl"></i>
514
+ </div>
515
+ <h4 class="font-semibold text-gray-800 mb-2">Creative Direction</h4>
516
+ <p class="text-gray-600 text-sm">Developing cohesive visual strategies</p>
517
+ </div>
518
+
519
+ <div class="bg-purple-50 p-6 rounded-xl text-center">
520
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
521
+ <i class="fas fa-pencil-ruler text-purple-600 text-2xl"></i>
522
+ </div>
523
+ <h4 class="font-semibold text-gray-800 mb-2">Concept Development</h4>
524
+ <p class="text-gray-600 text-sm">From initial sketches to final execution</p>
525
+ </div>
526
+
527
+ <div class="bg-indigo-50 p-6 rounded-xl text-center">
528
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
529
+ <i class="fas fa-print text-indigo-600 text-2xl"></i>
530
+ </div>
531
+ <h4 class="font-semibold text-gray-800 mb-2">Print Production</h4>
532
+ <p class="text-gray-600 text-sm">Expertise in preparing files for print</p>
533
+ </div>
534
+
535
+ <div class="bg-purple-50 p-6 rounded-xl text-center">
536
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
537
+ <i class="fas fa-lightbulb text-purple-600 text-2xl"></i>
538
+ </div>
539
+ <h4 class="font-semibold text-gray-800 mb-2">Creative Problem Solving</h4>
540
+ <p class="text-gray-600 text-sm">Innovative solutions to design challenges</p>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ </section>
545
+
546
+ <!-- Testimonials Section -->
547
+ <section id="testimonials" class="py-16 md:py-24 bg-gray-50">
548
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
549
+ <div class="text-center mb-16">
550
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Client <span class="text-indigo-600">Testimonials</span></h2>
551
+ <div class="w-20 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto mb-6"></div>
552
+ <p class="text-gray-600 max-w-2xl mx-auto">What my clients say about working with me</p>
553
+ </div>
554
+
555
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
556
+ <!-- Testimonial 1 -->
557
+ <div class="testimonial-card h-full">
558
+ <div class="testimonial-inner relative h-full">
559
+ <div class="testimonial-front bg-white p-8 rounded-xl shadow-lg h-full">
560
+ <div class="flex items-center mb-6">
561
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
562
+ <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
563
+ alt="Client"
564
+ class="w-full h-full object-cover">
565
+ </div>
566
+ <div>
567
+ <h4 class="font-semibold text-gray-800">Michael Johnson</h4>
568
+ <p class="text-sm text-gray-600">CEO, Nova Coffee</p>
569
+ </div>
570
+ </div>
571
+ <p class="text-gray-600 mb-6">"Alex transformed our brand identity completely. The new design perfectly captures our values and has significantly improved our market presence. The attention to detail was exceptional."</p>
572
+ <div class="flex text-yellow-400">
573
+ <i class="fas fa-star"></i>
574
+ <i class="fas fa-star"></i>
575
+ <i class="fas fa-star"></i>
576
+ <i class="fas fa-star"></i>
577
+ <i class="fas fa-star"></i>
578
+ </div>
579
+ </div>
580
+ <div class="testimonial-back bg-indigo-600 p-8 rounded-xl shadow-lg h-full flex items-center justify-center">
581
+ <div class="text-center text-white">
582
+ <i class="fas fa-quote-left text-3xl mb-4 opacity-50"></i>
583
+ <p class="mb-4">"Working with Alex was a game-changer for our business. The designs exceeded all expectations."</p>
584
+ <div class="w-12 h-1 bg-white mx-auto my-4"></div>
585
+ <p class="text-sm">Michael Johnson</p>
586
+ </div>
587
+ </div>
588
+ </div>
589
+ </div>
590
+
591
+ <!-- Testimonial 2 -->
592
+ <div class="testimonial-card h-full">
593
+ <div class="testimonial-inner relative h-full">
594
+ <div class="testimonial-front bg-white p-8 rounded-xl shadow-lg h-full">
595
+ <div class="flex items-center mb-6">
596
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
597
+ <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80"
598
+ alt="Client"
599
+ class="w-full h-full object-cover">
600
+ </div>
601
+ <div>
602
+ <h4 class="font-semibold text-gray-800">Sarah Williams</h4>
603
+ <p class="text-sm text-gray-600">Marketing Director, Urban Magazine</p>
604
+ </div>
605
+ </div>
606
+ <p class="text-gray-600 mb-6">"The magazine layouts Alex created for us have been praised by both readers and advertisers. The innovative typography and clean design elevated our publication to a new level."</p>
607
+ <div class="flex text-yellow-400">
608
+ <i class="fas fa-star"></i>
609
+ <i class="fas fa-star"></i>
610
+ <i class="fas fa-star"></i>
611
+ <i class="fas fa-star"></i>
612
+ <i class="fas fa-star"></i>
613
+ </div>
614
+ </div>
615
+ <div class="testimonial-back bg-purple-600 p-8 rounded-xl shadow-lg h-full flex items-center justify-center">
616
+ <div class="text-center text-white">
617
+ <i class="fas fa-quote-left text-3xl mb-4 opacity-50"></i>
618
+ <p class="mb-4">"Alex's designs brought a fresh, modern aesthetic that perfectly aligned with our brand vision."</p>
619
+ <div class="w-12 h-1 bg-white mx-auto my-4"></div>
620
+ <p class="text-sm">Sarah Williams</p>
621
+ </div>
622
+ </div>
623
+ </div>
624
+ </div>
625
+
626
+ <!-- Testimonial 3 -->
627
+ <div class="testimonial-card h-full">
628
+ <div class="testimonial-inner relative h-full">
629
+ <div class="testimonial-front bg-white p-8 rounded-xl shadow-lg h-full">
630
+ <div class="flex items-center mb-6">
631
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
632
+ <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
633
+ alt="Client"
634
+ class="w-full h-full object-cover">
635
+ </div>
636
+ <div>
637
+ <h4 class="font-semibold text-gray-800">David Chen</h4>
638
+ <p class="text-sm text-gray-600">Founder, Organic Skincare Co.</p>
639
+ </div>
640
+ </div>
641
+ <p class="text-gray-600 mb-6">"Our packaging design by Alex not only looks stunning but also communicates our commitment to sustainability. Sales have increased by 40% since the redesign."</p>
642
+ <div class="flex text-yellow-400">
643
+ <i class="fas fa-star"></i>
644
+ <i class="fas fa-star"></i>
645
+ <i class="fas fa-star"></i>
646
+ <i class="fas fa-star"></i>
647
+ <i class="fas fa-star-half-alt"></i>
648
+ </div>
649
+ </div>
650
+ <div class="testimonial-back bg-indigo-600 p-8 rounded-xl shadow-lg h-full flex items-center justify-center">
651
+ <div class="text-center text-white">
652
+ <i class="fas fa-quote-left text-3xl mb-4 opacity-50"></i>
653
+ <p class="mb-4">"The packaging design perfectly balanced aesthetics with functionality, exceeding our expectations."</p>
654
+ <div class="w-12 h-1 bg-white mx-auto my-4"></div>
655
+ <p class="text-sm">David Chen</p>
656
+ </div>
657
+ </div>
658
+ </div>
659
+ </div>
660
+ </div>
661
+ </div>
662
+ </section>
663
+
664
+ <!-- Contact Section -->
665
+ <section id="contact" class="py-16 md:py-24 bg-white">
666
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
667
+ <div class="text-center mb-16">
668
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Get In <span class="text-indigo-600">Touch</span></h2>
669
+ <div class="w-20 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto mb-6"></div>
670
+ <p class="text-gray-600 max-w-2xl mx-auto">Have a project in mind or want to discuss potential collaboration? I'd love to hear from you!</p>
671
+ </div>
672
+
673
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
674
+ <div>
675
+ <form class="space-y-6">
676
+ <div>
677
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
678
+ <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="John Doe">
679
+ </div>
680
+
681
+ <div>
682
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
683
+ <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="john@example.com">
684
+ </div>
685
+
686
+ <div>
687
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
688
+ <input type="text" id="subject" name="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Project Inquiry">
689
+ </div>
690
+
691
+ <div>
692
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Your Message</label>
693
+ <textarea id="message" name="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Tell me about your project..."></textarea>
694
+ </div>
695
+
696
+ <div>
697
+ <button type="submit" class="w-full px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition duration-300 shadow-lg hover:shadow-xl">
698
+ Send Message <i class="fas fa-paper-plane ml-2"></i>
699
+ </button>
700
+ </div>
701
+ </form>
702
+ </div>
703
+
704
+ <div>
705
+ <div class="bg-indigo-50 p-8 rounded-xl h-full">
706
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Contact Information</h3>
707
+
708
+ <div class="space-y-6">
709
+ <div class="flex items-start">
710
+ <div class="bg-indigo-100 p-3 rounded-lg mr-4">
711
+ <i class="fas fa-map-marker-alt text-indigo-600"></i>
712
+ </div>
713
+ <div>
714
+ <h4 class="font-medium text-gray-800 mb-1">Location</h4>
715
+ <p class="text-gray-600">123 Design Street, Creative City, CA 90210</p>
716
+ </div>
717
+ </div>
718
+
719
+ <div class="flex items-start">
720
+ <div class="bg-purple-100 p-3 rounded-lg mr-4">
721
+ <i class="fas fa-envelope text-purple-600"></i>
722
+ </div>
723
+ <div>
724
+ <h4 class="font-medium text-gray-800 mb-1">Email</h4>
725
+ <p class="text-gray-600">hello@designmind.com</p>
726
+ </div>
727
+ </div>
728
+
729
+ <div class="flex items-start">
730
+ <div class="bg-indigo-100 p-3 rounded-lg mr-4">
731
+ <i class="fas fa-phone-alt text-indigo-600"></i>
732
+ </div>
733
+ <div>
734
+ <h4 class="font-medium text-gray-800 mb-1">Phone</h4>
735
+ <p class="text-gray-600">+1 (555) 123-4567</p>
736
+ </div>
737
+ </div>
738
+
739
+ <div class="flex items-start">
740
+ <div class="bg-purple-100 p-3 rounded-lg mr-4">
741
+ <i class="fas fa-clock text-purple-600"></i>
742
+ </div>
743
+ <div>
744
+ <h4 class="font-medium text-gray-800 mb-1">Working Hours</h4>
745
+ <p class="text-gray-600">Mon-Fri: 9am - 6pm</p>
746
+ <p class="text-gray-600">Sat: By appointment</p>
747
+ </div>
748
+ </div>
749
+ </div>
750
+
751
+ <div class="mt-8">
752
+ <h4 class="font-medium text-gray-800 mb-4">Follow Me</h4>
753
+ <div class="flex space-x-4">
754
+ <a href="#" class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-md hover:bg-indigo-600 hover:text-white transition duration-300">
755
+ <i class="fab fa-behance"></i>
756
+ </a>
757
+ <a href="#" class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-md hover:bg-indigo-600 hover:text-white transition duration-300">
758
+ <i class="fab fa-dribbble"></i>
759
+ </a>
760
+ <a href="#" class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-md hover:bg-indigo-600 hover:text-white transition duration-300">
761
+ <i class="fab fa-instagram"></i>
762
+ </a>
763
+ <a href="#" class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-md hover:bg-indigo-600 hover:text-white transition duration-300">
764
+ <i class="fab fa-linkedin-in"></i>
765
+ </a>
766
+ </div>
767
+ </div>
768
+ </div>
769
+ </div>
770
+ </div>
771
+ </div>
772
+ </section>
773
+
774
+ <!-- Footer -->
775
+ <footer class="bg-gray-900 text-white py-12">
776
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
777
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
778
+ <div>
779
+ <h3 class="text-xl font-bold mb-4">DESIGN<span class="text-purple-400">MIND</span></h3>
780
+ <p class="text-gray-400 mb-4">Creating meaningful design experiences that connect brands with their audiences.</p>
781
+ <div class="flex space-x-4">
782
+ <a href="#" class="text-gray-400 hover:text-white">
783
+ <i class="fab fa-behance"></i>
784
+ </a>
785
+ <a href="#" class="text-gray-400 hover:text-white">
786
+ <i class="fab fa-dribbble"></i>
787
+ </a>
788
+ <a href="#" class="text-gray-400 hover:text-white">
789
+ <i class="fab fa-instagram"></i>
790
+ </a>
791
+ <a href="#" class="text-gray-400 hover:text-white">
792
+ <i class="fab fa-linkedin-in"></i>
793
+ </a>
794
+ </div>
795
+ </div>
796
+
797
+ <div>
798
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
799
+ <ul class="space-y-2">
800
+ <li><a href="#home" class="text-gray-400 hover:text-white">Home</a></li>
801
+ <li><a href="#about" class="text-gray-400 hover:text-white">About</a></li>
802
+ <li><a href="#work" class="text-gray-400 hover:text-white">Portfolio</a></li>
803
+ <li><a href="#skills" class="text-gray-400 hover:text-white">Skills</a></li>
804
+ <li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li>
805
+ </ul>
806
+ </div>
807
+
808
+ <div>
809
+ <h4 class="text-lg font-semibold mb-4">Services</h4>
810
+ <ul class="space-y-2">
811
+ <li><a href="#" class="text-gray-400 hover:text-white">Brand Identity</a></li>
812
+ <li><a href="#" class="text-gray-400 hover:text-white">Print Design</a></li>
813
+ <li><a href="#" class="text-gray-400 hover:text-white">Packaging</a></li>
814
+ <li><a href="#" class="text-gray-400 hover:text-white">Illustration</a></li>
815
+ <li><a href="#" class="text-gray-400 hover:text-white">Art Direction</a></li>
816
+ </ul>
817
+ </div>
818
+
819
+ <div>
820
+ <h4 class="text-lg font-semibold mb-4">Newsletter</h4>
821
+ <p class="text-gray-400 mb-4">Subscribe to my newsletter for design tips and updates.</p>
822
+ <form class="flex">
823
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full">
824
+ <button type="submit" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-r-lg">
825
+ <i class="fas fa-paper-plane"></i>
826
+ </button>
827
+ </form>
828
+ </div>
829
+ </div>
830
+
831
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
832
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 DESIGNMIND. All rights reserved.</p>
833
+ <div class="flex space-x-6">
834
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
835
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
836
+ </div>
837
+ </div>
838
+ </div>
839
+ </footer>
840
+
841
+ <!-- Back to Top Button -->
842
+ <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-indigo-600 text-white rounded-full shadow-lg hidden">
843
+ <i class="fas fa-arrow-up"></i>
844
+ </button>
845
+
846
+ <script>
847
+ // Mobile menu toggle
848
+ document.getElementById('menu-toggle').addEventListener('click', function() {
849
+ document.getElementById('mobile-menu').classList.toggle('hidden');
850
+ });
851
+
852
+ // Portfolio filtering
853
+ const filterButtons = document.querySelectorAll('.filter-btn');
854
+ const projectCards = document.querySelectorAll('.project-card');
855
+
856
+ filterButtons.forEach(button => {
857
+ button.addEventListener('click', function() {
858
+ // Remove active class from all buttons
859
+ filterButtons.forEach(btn => btn.classList.remove('bg-indigo-600', 'text-white'));
860
+
861
+ // Add active class to clicked button
862
+ this.classList.add('bg-indigo-600', 'text-white');
863
+
864
+ const filterValue = this.getAttribute('data-filter');
865
+
866
+ projectCards.forEach(card => {
867
+ if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) {
868
+ card.style.display = 'block';
869
+ } else {
870
+ card.style.display = 'none';
871
+ }
872
+ });
873
+ });
874
+ });
875
+
876
+ // Back to top button
877
+ const backToTopButton = document.getElementById('back-to-top');
878
+
879
+ window.addEventListener('scroll', function() {
880
+ if (window.pageYOffset > 300) {
881
+ backToTopButton.classList.remove('hidden');
882
+ } else {
883
+ backToTopButton.classList.add('hidden');
884
+ }
885
+ });
886
+
887
+ backToTopButton.addEventListener('click', function() {
888
+ window.scrollTo({ top: 0, behavior: 'smooth' });
889
+ });
890
+
891
+ // Smooth scrolling for navigation links
892
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
893
+ anchor.addEventListener('click', function(e) {
894
+ e.preventDefault();
895
+
896
+ const targetId = this.getAttribute('href');
897
+ const targetElement = document.querySelector(targetId);
898
+
899
+ if (targetElement) {
900
+ window.scrollTo({
901
+ top: targetElement.offsetTop - 80,
902
+ behavior: 'smooth'
903
+ });
904
+
905
+ // Close mobile menu if open
906
+ document.getElementById('mobile-menu').classList.add('hidden');
907
+ }
908
+ });
909
+ });
910
+
911
+ // Animate skill bars on scroll
912
+ function animateSkillBars() {
913
+ const skillBars = document.querySelectorAll('.skill-bar');
914
+
915
+ skillBars.forEach(bar => {
916
+ const width = bar.style.width;
917
+ bar.style.width = '0';
918
+
919
+ setTimeout(() => {
920
+ bar.style.width = width;
921
+ }, 100);
922
+ });
923
+ }
924
+
925
+ // Intersection Observer for scroll animations
926
+ const observer = new IntersectionObserver((entries) => {
927
+ entries.forEach(entry => {
928
+ if (entry.isIntersecting) {
929
+ if (entry.target.id === 'skills') {
930
+ animateSkillBars();
931
+ }
932
+ entry.target.classList.add('animate-fadeIn');
933
+ }
934
+ });
935
+ }, { threshold: 0.1 });
936
+
937
+ // Observe sections
938
+ document.querySelectorAll('section').forEach(section => {
939
+ section.classList.add('opacity-0', 'transition-opacity', 'duration-500');
940
+ observer.observe(section);
941
+ });
942
+ </script>
943
+ <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=vickkey/vkk" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
944
+ </html>