Hugging Face's logo

Spaces:
dschandra
/
my-portfolio
Running

App Files Community
dschandra commited on
Commit
c83db5e
·
verified ·
1 Parent(s): 25878e8

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +595 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My Portfolio
3
- emoji: 🏃
4
- colorFrom: purple
5
- colorTo: blue
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: my-portfolio
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
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,595 @@
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>My Portfolio</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .gradient-text {
18
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
19
+ -webkit-background-clip: text;
20
+ background-clip: text;
21
+ color: transparent;
22
+ }
23
+
24
+ .nav-link {
25
+ position: relative;
26
+ }
27
+
28
+ .nav-link::after {
29
+ content: '';
30
+ position: absolute;
31
+ width: 0;
32
+ height: 2px;
33
+ bottom: -2px;
34
+ left: 0;
35
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
36
+ transition: width 0.3s ease;
37
+ }
38
+
39
+ .nav-link:hover::after {
40
+ width: 100%;
41
+ }
42
+
43
+ .project-card {
44
+ transition: all 0.3s ease;
45
+ transform: translateY(0);
46
+ }
47
+
48
+ .project-card:hover {
49
+ transform: translateY(-10px);
50
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
51
+ }
52
+
53
+ .skill-pill {
54
+ transition: all 0.3s ease;
55
+ }
56
+
57
+ .skill-pill:hover {
58
+ transform: scale(1.05);
59
+ }
60
+
61
+ .floating {
62
+ animation: floating 3s ease-in-out infinite;
63
+ }
64
+
65
+ @keyframes floating {
66
+ 0% { transform: translateY(0px); }
67
+ 50% { transform: translateY(-15px); }
68
+ 100% { transform: translateY(0px); }
69
+ }
70
+
71
+ .section {
72
+ opacity: 0;
73
+ transform: translateY(20px);
74
+ transition: all 0.6s ease;
75
+ }
76
+
77
+ .section.visible {
78
+ opacity: 1;
79
+ transform: translateY(0);
80
+ }
81
+ </style>
82
+ </head>
83
+ <body class="bg-gray-50 text-gray-800">
84
+ <!-- Navigation -->
85
+ <nav class="fixed w-full bg-white/80 backdrop-blur-md shadow-sm z-50">
86
+ <div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
87
+ <a href="#" class="text-2xl font-bold gradient-text">Portfolio</a>
88
+ <div class="hidden md:flex space-x-8">
89
+ <a href="#home" class="nav-link">Home</a>
90
+ <a href="#about" class="nav-link">About</a>
91
+ <a href="#projects" class="nav-link">Projects</a>
92
+ <a href="#skills" class="nav-link">Skills</a>
93
+ <a href="#contact" class="nav-link">Contact</a>
94
+ </div>
95
+ <button id="mobile-menu-button" class="md:hidden text-gray-600">
96
+ <i class="fas fa-bars text-2xl"></i>
97
+ </button>
98
+ </div>
99
+ <!-- Mobile Menu -->
100
+ <div id="mobile-menu" class="hidden md:hidden bg-white px-6 py-4 shadow-lg">
101
+ <div class="flex flex-col space-y-4">
102
+ <a href="#home" class="nav-link">Home</a>
103
+ <a href="#about" class="nav-link">About</a>
104
+ <a href="#projects" class="nav-link">Projects</a>
105
+ <a href="#skills" class="nav-link">Skills</a>
106
+ <a href="#contact" class="nav-link">Contact</a>
107
+ </div>
108
+ </div>
109
+ </nav>
110
+
111
+ <!-- Hero Section -->
112
+ <section id="home" class="min-h-screen flex items-center pt-16">
113
+ <div class="max-w-6xl mx-auto px-6 py-20 flex flex-col md:flex-row items-center">
114
+ <div class="md:w-1/2 mb-12 md:mb-0">
115
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Hi, I'm <span class="gradient-text">Alex</span></h1>
116
+ <h2 class="text-2xl md:text-3xl font-semibold mb-6">Frontend Developer</h2>
117
+ <p class="text-gray-600 mb-8 max-w-lg">I create beautiful, responsive websites and web applications with modern technologies and best practices.</p>
118
+ <div class="flex space-x-4">
119
+ <a href="#projects" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full font-medium hover:shadow-lg transition-all">View My Work</a>
120
+ <a href="#contact" class="px-6 py-3 border border-gray-300 rounded-full font-medium hover:bg-gray-100 transition-all">Contact Me</a>
121
+ </div>
122
+ </div>
123
+ <div class="md:w-1/2 flex justify-center">
124
+ <div class="relative w-64 h-64 md:w-80 md:h-80">
125
+ <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full blur-xl opacity-30"></div>
126
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"
127
+ alt="Profile"
128
+ class="relative w-full h-full rounded-full object-cover border-4 border-white shadow-xl floating">
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </section>
133
+
134
+ <!-- About Section -->
135
+ <section id="about" class="py-20 bg-white">
136
+ <div class="max-w-6xl mx-auto px-6">
137
+ <h2 class="text-3xl font-bold text-center mb-4">About <span class="gradient-text">Me</span></h2>
138
+ <p class="text-gray-500 text-center max-w-2xl mx-auto mb-16">Get to know me better</p>
139
+
140
+ <div class="flex flex-col md:flex-row items-center gap-12">
141
+ <div class="md:w-1/3 flex justify-center">
142
+ <div class="relative w-64 h-64">
143
+ <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl rotate-6"></div>
144
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"
145
+ alt="About"
146
+ class="relative w-full h-full rounded-2xl object-cover border-4 border-white shadow-lg">
147
+ </div>
148
+ </div>
149
+ <div class="md:w-2/3">
150
+ <h3 class="text-2xl font-semibold mb-4">Who am I?</h3>
151
+ <p class="text-gray-600 mb-6">I'm a passionate frontend developer with 3 years of experience creating modern web applications. I specialize in React, Vue.js, and responsive design principles.</p>
152
+
153
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
154
+ <div>
155
+ <h4 class="font-medium mb-2 flex items-center">
156
+ <i class="fas fa-user mr-2 text-blue-500"></i> Name
157
+ </h4>
158
+ <p class="text-gray-600">Alex Johnson</p>
159
+ </div>
160
+ <div>
161
+ <h4 class="font-medium mb-2 flex items-center">
162
+ <i class="fas fa-envelope mr-2 text-purple-500"></i> Email
163
+ </h4>
164
+ <p class="text-gray-600">[email protected]</p>
165
+ </div>
166
+ <div>
167
+ <h4 class="font-medium mb-2 flex items-center">
168
+ <i class="fas fa-phone mr-2 text-blue-500"></i> Phone
169
+ </h4>
170
+ <p class="text-gray-600">+1 (555) 123-4567</p>
171
+ </div>
172
+ <div>
173
+ <h4 class="font-medium mb-2 flex items-center">
174
+ <i class="fas fa-map-marker-alt mr-2 text-purple-500"></i> Location
175
+ </h4>
176
+ <p class="text-gray-600">San Francisco, CA</p>
177
+ </div>
178
+ </div>
179
+
180
+ <div class="flex space-x-4">
181
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-500 hover:text-white transition-all">
182
+ <i class="fab fa-github"></i>
183
+ </a>
184
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-500 hover:text-white transition-all">
185
+ <i class="fab fa-linkedin-in"></i>
186
+ </a>
187
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-500 hover:text-white transition-all">
188
+ <i class="fab fa-twitter"></i>
189
+ </a>
190
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-500 hover:text-white transition-all">
191
+ <i class="fab fa-instagram"></i>
192
+ </a>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </section>
198
+
199
+ <!-- Projects Section -->
200
+ <section id="projects" class="py-20 bg-gray-50">
201
+ <div class="max-w-6xl mx-auto px-6">
202
+ <h2 class="text-3xl font-bold text-center mb-4">My <span class="gradient-text">Projects</span></h2>
203
+ <p class="text-gray-500 text-center max-w-2xl mx-auto mb-16">Some of my recent work</p>
204
+
205
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
206
+ <!-- Project 1 -->
207
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-md">
208
+ <div class="h-48 overflow-hidden">
209
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
210
+ alt="Project 1"
211
+ class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
212
+ </div>
213
+ <div class="p-6">
214
+ <h3 class="text-xl font-semibold mb-2">E-commerce Platform</h3>
215
+ <p class="text-gray-600 mb-4">A full-featured online store with cart functionality, user authentication, and payment processing.</p>
216
+ <div class="flex flex-wrap gap-2 mb-4">
217
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">React</span>
218
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Node.js</span>
219
+ <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">MongoDB</span>
220
+ </div>
221
+ <a href="#" class="text-blue-500 font-medium flex items-center hover:text-blue-700">
222
+ View Project <i class="fas fa-arrow-right ml-2"></i>
223
+ </a>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Project 2 -->
228
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-md">
229
+ <div class="h-48 overflow-hidden">
230
+ <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80"
231
+ alt="Project 2"
232
+ class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
233
+ </div>
234
+ <div class="p-6">
235
+ <h3 class="text-xl font-semibold mb-2">Task Management App</h3>
236
+ <p class="text-gray-600 mb-4">A productivity application for organizing tasks with drag-and-drop functionality and team collaboration.</p>
237
+ <div class="flex flex-wrap gap-2 mb-4">
238
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Vue.js</span>
239
+ <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">Firebase</span>
240
+ <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">Tailwind CSS</span>
241
+ </div>
242
+ <a href="#" class="text-blue-500 font-medium flex items-center hover:text-blue-700">
243
+ View Project <i class="fas fa-arrow-right ml-2"></i>
244
+ </a>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Project 3 -->
249
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-md">
250
+ <div class="h-48 overflow-hidden">
251
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
252
+ alt="Project 3"
253
+ class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
254
+ </div>
255
+ <div class="p-6">
256
+ <h3 class="text-xl font-semibold mb-2">Portfolio Website</h3>
257
+ <p class="text-gray-600 mb-4">A custom portfolio website with animations, dark mode, and contact form integration.</p>
258
+ <div class="flex flex-wrap gap-2 mb-4">
259
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">HTML/CSS</span>
260
+ <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">JavaScript</span>
261
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">GSAP</span>
262
+ </div>
263
+ <a href="#" class="text-blue-500 font-medium flex items-center hover:text-blue-700">
264
+ View Project <i class="fas fa-arrow-right ml-2"></i>
265
+ </a>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <div class="text-center mt-12">
271
+ <a href="#" class="px-6 py-3 border border-gray-300 rounded-full font-medium hover:bg-gray-100 transition-all inline-flex items-center">
272
+ View All Projects <i class="fas fa-arrow-right ml-2"></i>
273
+ </a>
274
+ </div>
275
+ </div>
276
+ </section>
277
+
278
+ <!-- Skills Section -->
279
+ <section id="skills" class="py-20 bg-white">
280
+ <div class="max-w-6xl mx-auto px-6">
281
+ <h2 class="text-3xl font-bold text-center mb-4">My <span class="gradient-text">Skills</span></h2>
282
+ <p class="text-gray-500 text-center max-w-2xl mx-auto mb-16">Technologies I work with</p>
283
+
284
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 mb-12">
285
+ <div class="skill-pill flex flex-col items-center p-6 bg-gray-50 rounded-xl hover:shadow-md">
286
+ <i class="fab fa-html5 text-5xl text-orange-500 mb-3"></i>
287
+ <span class="font-medium">HTML5</span>
288
+ </div>
289
+ <div class="skill-pill flex flex-col items-center p-6 bg-gray-50 rounded-xl hover:shadow-md">
290
+ <i class="fab fa-css3-alt text-5xl text-blue-500 mb-3"></i>
291
+ <span class="font-medium">CSS3</span>
292
+ </div>
293
+ <div class="skill-pill flex flex-col items-center p-6 bg-gray-50 rounded-xl hover:shadow-md">
294
+ <i class="fab fa-js text-5xl text-yellow-500 mb-3"></i>
295
+ <span class="font-medium">JavaScript</span>
296
+ </div>
297
+ <div class="skill-pill flex flex-col items-center p-6 bg-gray-50 rounded-xl hover:shadow-md">
298
+ <i class="fab fa-react text-5xl text-blue-400 mb-3"></i>
299
+ <span class="font-medium">React</span>
300
+ </div>
301
+ <div class="skill-pill flex flex-col items-center p-6 bg-gray-50 rounded-xl hover:shadow-md">
302
+ <i class="fab fa-vuejs text-5xl text-green-500 mb-3"></i>
303
+ <span class="font-medium">Vue.js</span>
304
+ </div>
305
+ <div class="skill-pill flex flex-col items-center p-6 bg-gray-50 rounded-xl hover:shadow-md">
306
+ <i class="fab fa-node-js text-5xl text-green-600 mb-3"></i>
307
+ <span class="font-medium">Node.js</span>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="bg-gray-50 rounded-xl p-8">
312
+ <h3 class="text-xl font-semibold mb-6">My Experience</h3>
313
+
314
+ <div class="space-y-8">
315
+ <!-- Experience 1 -->
316
+ <div class="flex flex-col md:flex-row">
317
+ <div class="md:w-1/4 mb-4 md:mb-0">
318
+ <h4 class="font-medium text-gray-700">2021 - Present</h4>
319
+ </div>
320
+ <div class="md:w-3/4">
321
+ <h4 class="font-semibold text-lg mb-2">Senior Frontend Developer</h4>
322
+ <p class="text-gray-600 mb-2">Tech Solutions Inc.</p>
323
+ <p class="text-gray-600">Led a team of 5 developers to build responsive web applications using React and TypeScript. Implemented CI/CD pipelines and improved performance by 40%.</p>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Experience 2 -->
328
+ <div class="flex flex-col md:flex-row">
329
+ <div class="md:w-1/4 mb-4 md:mb-0">
330
+ <h4 class="font-medium text-gray-700">2019 - 2021</h4>
331
+ </div>
332
+ <div class="md:w-3/4">
333
+ <h4 class="font-semibold text-lg mb-2">Frontend Developer</h4>
334
+ <p class="text-gray-600 mb-2">Digital Creations</p>
335
+ <p class="text-gray-600">Developed and maintained e-commerce platforms using Vue.js. Collaborated with designers to implement pixel-perfect UIs.</p>
336
+ </div>
337
+ </div>
338
+
339
+ <!-- Experience 3 -->
340
+ <div class="flex flex-col md:flex-row">
341
+ <div class="md:w-1/4 mb-4 md:mb-0">
342
+ <h4 class="font-medium text-gray-700">2017 - 2019</h4>
343
+ </div>
344
+ <div class="md:w-3/4">
345
+ <h4 class="font-semibold text-lg mb-2">Junior Web Developer</h4>
346
+ <p class="text-gray-600 mb-2">WebStart Agency</p>
347
+ <p class="text-gray-600">Built responsive websites for small businesses using HTML, CSS, and JavaScript. Learned modern frameworks and best practices.</p>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </section>
354
+
355
+ <!-- Contact Section -->
356
+ <section id="contact" class="py-20 bg-gray-50">
357
+ <div class="max-w-6xl mx-auto px-6">
358
+ <h2 class="text-3xl font-bold text-center mb-4">Get In <span class="gradient-text">Touch</span></h2>
359
+ <p class="text-gray-500 text-center max-w-2xl mx-auto mb-16">Feel free to reach out for collaborations or just a friendly hello</p>
360
+
361
+ <div class="flex flex-col lg:flex-row gap-12">
362
+ <div class="lg:w-1/2">
363
+ <form id="contact-form" class="space-y-6">
364
+ <div>
365
+ <label for="name" class="block text-gray-700 mb-2">Your Name</label>
366
+ <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
367
+ </div>
368
+ <div>
369
+ <label for="email" class="block text-gray-700 mb-2">Your Email</label>
370
+ <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
371
+ </div>
372
+ <div>
373
+ <label for="subject" class="block text-gray-700 mb-2">Subject</label>
374
+ <input type="text" id="subject" name="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
375
+ </div>
376
+ <div>
377
+ <label for="message" class="block text-gray-700 mb-2">Your Message</label>
378
+ <textarea id="message" name="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required></textarea>
379
+ </div>
380
+ <button type="submit" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg font-medium hover:shadow-lg transition-all w-full">
381
+ Send Message <i class="fas fa-paper-plane ml-2"></i>
382
+ </button>
383
+ </form>
384
+ </div>
385
+
386
+ <div class="lg:w-1/2">
387
+ <div class="bg-white p-8 rounded-xl shadow-md h-full">
388
+ <h3 class="text-xl font-semibold mb-6">Contact Information</h3>
389
+
390
+ <div class="space-y-6">
391
+ <div class="flex items-start">
392
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
393
+ <i class="fas fa-map-marker-alt text-blue-500"></i>
394
+ </div>
395
+ <div>
396
+ <h4 class="font-medium mb-1">Location</h4>
397
+ <p class="text-gray-600">San Francisco, California</p>
398
+ </div>
399
+ </div>
400
+
401
+ <div class="flex items-start">
402
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
403
+ <i class="fas fa-envelope text-purple-500"></i>
404
+ </div>
405
+ <div>
406
+ <h4 class="font-medium mb-1">Email</h4>
407
+ <p class="text-gray-600">[email protected]</p>
408
+ </div>
409
+ </div>
410
+
411
+ <div class="flex items-start">
412
+ <div class="bg-green-100 p-3 rounded-full mr-4">
413
+ <i class="fas fa-phone text-green-500"></i>
414
+ </div>
415
+ <div>
416
+ <h4 class="font-medium mb-1">Phone</h4>
417
+ <p class="text-gray-600">+1 (555) 123-4567</p>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="flex items-start">
422
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
423
+ <i class="fas fa-clock text-yellow-500"></i>
424
+ </div>
425
+ <div>
426
+ <h4 class="font-medium mb-1">Working Hours</h4>
427
+ <p class="text-gray-600">Mon-Fri: 9AM - 5PM</p>
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <div class="mt-8">
433
+ <h4 class="font-medium mb-4">Follow Me</h4>
434
+ <div class="flex space-x-4">
435
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-500 hover:text-white transition-all">
436
+ <i class="fab fa-github"></i>
437
+ </a>
438
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-500 hover:text-white transition-all">
439
+ <i class="fab fa-linkedin-in"></i>
440
+ </a>
441
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-500 hover:text-white transition-all">
442
+ <i class="fab fa-twitter"></i>
443
+ </a>
444
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-500 hover:text-white transition-all">
445
+ <i class="fab fa-instagram"></i>
446
+ </a>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </div>
453
+ </section>
454
+
455
+ <!-- Footer -->
456
+ <footer class="bg-gray-800 text-white py-12">
457
+ <div class="max-w-6xl mx-auto px-6">
458
+ <div class="flex flex-col md:flex-row justify-between items-center">
459
+ <div class="mb-6 md:mb-0">
460
+ <a href="#" class="text-2xl font-bold gradient-text">Portfolio</a>
461
+ <p class="text-gray-400 mt-2">Creating digital experiences that matter.</p>
462
+ </div>
463
+
464
+ <div class="flex flex-col md:flex-row md:space-x-12 space-y-4 md:space-y-0">
465
+ <div>
466
+ <h4 class="font-semibold mb-3">Quick Links</h4>
467
+ <ul class="space-y-2">
468
+ <li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li>
469
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">About</a></li>
470
+ <li><a href="#projects" class="text-gray-400 hover:text-white transition">Projects</a></li>
471
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
472
+ </ul>
473
+ </div>
474
+
475
+ <div>
476
+ <h4 class="font-semibold mb-3">Services</h4>
477
+ <ul class="space-y-2">
478
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Web Development</a></li>
479
+ <li><a href="#" class="text-gray-400 hover:text-white transition">UI/UX Design</a></li>
480
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Mobile Apps</a></li>
481
+ <li><a href="#" class="text-gray-400 hover:text-white transition">SEO</a></li>
482
+ </ul>
483
+ </div>
484
+
485
+ <div>
486
+ <h4 class="font-semibold mb-3">Connect</h4>
487
+ <div class="flex space-x-4">
488
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-500 transition">
489
+ <i class="fab fa-github"></i>
490
+ </a>
491
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-500 transition">
492
+ <i class="fab fa-linkedin-in"></i>
493
+ </a>
494
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-500 transition">
495
+ <i class="fab fa-twitter"></i>
496
+ </a>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </div>
501
+
502
+ <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
503
+ <p>&copy; 2023 Portfolio. All rights reserved.</p>
504
+ </div>
505
+ </div>
506
+ </footer>
507
+
508
+ <!-- Back to Top Button -->
509
+ <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all">
510
+ <i class="fas fa-arrow-up"></i>
511
+ </button>
512
+
513
+ <script>
514
+ // Mobile Menu Toggle
515
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
516
+ const mobileMenu = document.getElementById('mobile-menu');
517
+
518
+ mobileMenuButton.addEventListener('click', () => {
519
+ mobileMenu.classList.toggle('hidden');
520
+ });
521
+
522
+ // Smooth Scrolling for Navigation Links
523
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
524
+ anchor.addEventListener('click', function (e) {
525
+ e.preventDefault();
526
+
527
+ // Close mobile menu if open
528
+ mobileMenu.classList.add('hidden');
529
+
530
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
531
+ behavior: 'smooth'
532
+ });
533
+ });
534
+ });
535
+
536
+ // Back to Top Button
537
+ const backToTopButton = document.getElementById('back-to-top');
538
+
539
+ window.addEventListener('scroll', () => {
540
+ if (window.pageYOffset > 300) {
541
+ backToTopButton.classList.remove('opacity-0', 'invisible');
542
+ backToTopButton.classList.add('opacity-100', 'visible');
543
+ } else {
544
+ backToTopButton.classList.remove('opacity-100', 'visible');
545
+ backToTopButton.classList.add('opacity-0', 'invisible');
546
+ }
547
+ });
548
+
549
+ backToTopButton.addEventListener('click', () => {
550
+ window.scrollTo({
551
+ top: 0,
552
+ behavior: 'smooth'
553
+ });
554
+ });
555
+
556
+ // Form Submission
557
+ const contactForm = document.getElementById('contact-form');
558
+
559
+ contactForm.addEventListener('submit', (e) => {
560
+ e.preventDefault();
561
+
562
+ // Get form values
563
+ const name = document.getElementById('name').value;
564
+ const email = document.getElementById('email').value;
565
+ const subject = document.getElementById('subject').value;
566
+ const message = document.getElementById('message').value;
567
+
568
+ // Here you would typically send the form data to a server
569
+ // For this example, we'll just show an alert
570
+ alert(`Thank you, ${name}! Your message has been sent. I'll get back to you soon.`);
571
+
572
+ // Reset form
573
+ contactForm.reset();
574
+ });
575
+
576
+ // Scroll Animation
577
+ const sections = document.querySelectorAll('.section');
578
+
579
+ const observer = new IntersectionObserver((entries) => {
580
+ entries.forEach(entry => {
581
+ if (entry.isIntersecting) {
582
+ entry.target.classList.add('visible');
583
+ }
584
+ });
585
+ }, {
586
+ threshold: 0.1
587
+ });
588
+
589
+ sections.forEach(section => {
590
+ observer.observe(section);
591
+ section.classList.add('section');
592
+ });
593
+ </script>
594
+ <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=dschandra/my-portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
595
+ </html>
prompts.txt ADDED
File without changes