Hugging Face's logo

Spaces:
jaskaransingh
/
rupinder
Running

App Files Community
jaskaransingh commited on
Commit
6dc51a5
·
verified ·
1 Parent(s): 92f1e7a

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +534 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Rupinder
3
- emoji: 🦀
4
- colorFrom: red
5
- colorTo: green
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: rupinder
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: yellow
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,534 @@
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>Rupinder Kaur | Web Developer 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
+ background-color: #f8fafc;
15
+ color: #1e293b;
16
+ }
17
+
18
+ .gradient-text {
19
+ background: linear-gradient(90deg, #6366f1, #8b5cf6);
20
+ -webkit-background-clip: text;
21
+ background-clip: text;
22
+ color: transparent;
23
+ }
24
+
25
+ .gradient-bg {
26
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
27
+ }
28
+
29
+ .glass-card {
30
+ background: rgba(255, 255, 255, 0.8);
31
+ backdrop-filter: blur(10px);
32
+ border: 1px solid rgba(255, 255, 255, 0.2);
33
+ }
34
+
35
+ .project-card {
36
+ transition: all 0.3s ease;
37
+ transform-style: preserve-3d;
38
+ }
39
+
40
+ .project-card:hover {
41
+ transform: translateY(-10px) scale(1.02);
42
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
43
+ }
44
+
45
+ .skill-pill {
46
+ transition: all 0.3s ease;
47
+ }
48
+
49
+ .skill-pill:hover {
50
+ transform: scale(1.05);
51
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
52
+ }
53
+
54
+ .nav-link {
55
+ position: relative;
56
+ }
57
+
58
+ .nav-link::after {
59
+ content: '';
60
+ position: absolute;
61
+ width: 0;
62
+ height: 2px;
63
+ bottom: -2px;
64
+ left: 0;
65
+ background: linear-gradient(90deg, #6366f1, #8b5cf6);
66
+ transition: width 0.3s ease;
67
+ }
68
+
69
+ .nav-link:hover::after {
70
+ width: 100%;
71
+ }
72
+
73
+ .hero-image {
74
+ animation: float 6s ease-in-out infinite;
75
+ }
76
+
77
+ @keyframes float {
78
+ 0% { transform: translateY(0px); }
79
+ 50% { transform: translateY(-20px); }
80
+ 100% { transform: translateY(0px); }
81
+ }
82
+
83
+ .section-title {
84
+ position: relative;
85
+ display: inline-block;
86
+ }
87
+
88
+ .section-title::after {
89
+ content: '';
90
+ position: absolute;
91
+ width: 60%;
92
+ height: 4px;
93
+ bottom: -8px;
94
+ left: 0;
95
+ background: linear-gradient(90deg, #6366f1, #8b5cf6);
96
+ border-radius: 2px;
97
+ }
98
+ </style>
99
+ </head>
100
+ <body class="antialiased">
101
+ <!-- Navigation -->
102
+ <nav class="fixed w-full z-50 glass-card py-4 px-6 md:px-12">
103
+ <div class="container mx-auto flex justify-between items-center">
104
+ <a href="#" class="text-2xl font-bold gradient-text">Rupinder.</a>
105
+ <div class="hidden md:flex space-x-8">
106
+ <a href="#home" class="nav-link font-medium">Home</a>
107
+ <a href="#about" class="nav-link font-medium">About</a>
108
+ <a href="#skills" class="nav-link font-medium">Skills</a>
109
+ <a href="#projects" class="nav-link font-medium">Projects</a>
110
+ <a href="#contact" class="nav-link font-medium">Contact</a>
111
+ </div>
112
+ <button class="md:hidden text-xl">
113
+ <i class="fas fa-bars"></i>
114
+ </button>
115
+ </div>
116
+ </nav>
117
+
118
+ <!-- Hero Section -->
119
+ <section id="home" class="min-h-screen flex items-center pt-20 pb-16 px-6 md:px-12">
120
+ <div class="container mx-auto grid md:grid-cols-2 gap-12 items-center">
121
+ <div class="order-2 md:order-1">
122
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Hi, I'm <span class="gradient-text">Rupinder Kaur</span></h1>
123
+ <h2 class="text-2xl md:text-3xl font-semibold mb-6 text-slate-600">Frontend Developer</h2>
124
+ <p class="text-lg text-slate-500 mb-8 max-w-lg">
125
+ I build exceptional digital experiences with modern web technologies.
126
+ Passionate about creating intuitive, responsive, and visually appealing interfaces.
127
+ </p>
128
+ <div class="flex flex-wrap gap-4">
129
+ <a href="#contact" class="gradient-bg text-white px-6 py-3 rounded-lg font-medium hover:shadow-lg transition">
130
+ Get In Touch
131
+ </a>
132
+ <a href="#projects" class="border border-slate-300 px-6 py-3 rounded-lg font-medium hover:bg-slate-50 transition">
133
+ View My Work
134
+ </a>
135
+ </div>
136
+ <div class="mt-8 flex space-x-4">
137
+ <a href="#" class="text-xl text-slate-600 hover:text-indigo-500 transition">
138
+ <i class="fab fa-linkedin"></i>
139
+ </a>
140
+ <a href="#" class="text-xl text-slate-600 hover:text-indigo-500 transition">
141
+ <i class="fab fa-github"></i>
142
+ </a>
143
+ <a href="#" class="text-xl text-slate-600 hover:text-indigo-500 transition">
144
+ <i class="fab fa-twitter"></i>
145
+ </a>
146
+ </div>
147
+ </div>
148
+ <div class="order-1 md:order-2 flex justify-center">
149
+ <div class="hero-image relative w-64 h-64 md:w-80 md:h-80 rounded-full gradient-bg flex items-center justify-center">
150
+ <div class="absolute inset-0 rounded-full bg-white/10 backdrop-blur-sm"></div>
151
+ <i class="fas fa-laptop-code text-6xl md:text-8xl text-white opacity-90"></i>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </section>
156
+
157
+ <!-- About Section -->
158
+ <section id="about" class="py-16 px-6 md:px-12 bg-white">
159
+ <div class="container mx-auto">
160
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 section-title">About Me</h2>
161
+
162
+ <div class="grid md:grid-cols-2 gap-12 items-center">
163
+ <div>
164
+ <p class="text-lg text-slate-600 mb-6">
165
+ I'm a passionate web developer with expertise in modern frontend technologies.
166
+ With a strong foundation in computer science and years of hands-on experience,
167
+ I create digital solutions that are both beautiful and functional.
168
+ </p>
169
+ <p class="text-lg text-slate-600 mb-6">
170
+ My journey in web development started during my master's program, and since then
171
+ I've been constantly learning and adapting to new technologies to build better
172
+ user experiences.
173
+ </p>
174
+ <div class="grid grid-cols-2 gap-4">
175
+ <div class="bg-slate-50 p-4 rounded-lg">
176
+ <h3 class="font-bold text-indigo-600 mb-2">Education</h3>
177
+ <p class="text-sm text-slate-600">Master in IT</p>
178
+ <p class="text-xs text-slate-500">Guru Nanak Dev University</p>
179
+ </div>
180
+ <div class="bg-slate-50 p-4 rounded-lg">
181
+ <h3 class="font-bold text-indigo-600 mb-2">Experience</h3>
182
+ <p class="text-sm text-slate-600">Frontend Developer</p>
183
+ <p class="text-xs text-slate-500">Since 2015</p>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ <div class="bg-slate-50 rounded-xl p-8">
188
+ <h3 class="text-xl font-bold mb-6 text-center">My Tech Stack</h3>
189
+ <div class="grid grid-cols-3 gap-4">
190
+ <div class="flex flex-col items-center">
191
+ <div class="w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center mb-2">
192
+ <i class="fab fa-html5 text-3xl text-orange-500"></i>
193
+ </div>
194
+ <span class="text-sm font-medium">HTML5</span>
195
+ </div>
196
+ <div class="flex flex-col items-center">
197
+ <div class="w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center mb-2">
198
+ <i class="fab fa-css3-alt text-3xl text-blue-500"></i>
199
+ </div>
200
+ <span class="text-sm font-medium">CSS3</span>
201
+ </div>
202
+ <div class="flex flex-col items-center">
203
+ <div class="w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center mb-2">
204
+ <i class="fab fa-js text-3xl text-yellow-500"></i>
205
+ </div>
206
+ <span class="text-sm font-medium">JavaScript</span>
207
+ </div>
208
+ <div class="flex flex-col items-center">
209
+ <div class="w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center mb-2">
210
+ <i class="fab fa-react text-3xl text-blue-400"></i>
211
+ </div>
212
+ <span class="text-sm font-medium">React</span>
213
+ </div>
214
+ <div class="flex flex-col items-center">
215
+ <div class="w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center mb-2">
216
+ <i class="fab fa-git-alt text-3xl text-red-500"></i>
217
+ </div>
218
+ <span class="text-sm font-medium">Git</span>
219
+ </div>
220
+ <div class="flex flex-col items-center">
221
+ <div class="w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center mb-2">
222
+ <i class="fas fa-code text-3xl text-purple-500"></i>
223
+ </div>
224
+ <span class="text-sm font-medium">VS Code</span>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </section>
231
+
232
+ <!-- Skills Section -->
233
+ <section id="skills" class="py-16 px-6 md:px-12 bg-slate-50">
234
+ <div class="container mx-auto">
235
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 section-title">My Skills</h2>
236
+
237
+ <div class="grid md:grid-cols-2 gap-8">
238
+ <!-- Technical Skills -->
239
+ <div class="bg-white p-8 rounded-xl shadow-sm">
240
+ <h3 class="text-xl font-bold mb-6 flex items-center">
241
+ <i class="fas fa-code text-indigo-500 mr-3"></i>
242
+ <span>Technical Skills</span>
243
+ </h3>
244
+ <div class="space-y-4">
245
+ <div>
246
+ <div class="flex justify-between mb-1">
247
+ <span class="font-medium">HTML/CSS</span>
248
+ <span class="text-slate-500">95%</span>
249
+ </div>
250
+ <div class="w-full bg-slate-200 rounded-full h-2">
251
+ <div class="gradient-bg h-2 rounded-full" style="width: 95%"></div>
252
+ </div>
253
+ </div>
254
+ <div>
255
+ <div class="flex justify-between mb-1">
256
+ <span class="font-medium">JavaScript</span>
257
+ <span class="text-slate-500">90%</span>
258
+ </div>
259
+ <div class="w-full bg-slate-200 rounded-full h-2">
260
+ <div class="gradient-bg h-2 rounded-full" style="width: 90%"></div>
261
+ </div>
262
+ </div>
263
+ <div>
264
+ <div class="flex justify-between mb-1">
265
+ <span class="font-medium">React.js</span>
266
+ <span class="text-slate-500">85%</span>
267
+ </div>
268
+ <div class="w-full bg-slate-200 rounded-full h-2">
269
+ <div class="gradient-bg h-2 rounded-full" style="width: 85%"></div>
270
+ </div>
271
+ </div>
272
+ <div>
273
+ <div class="flex justify-between mb-1">
274
+ <span class="font-medium">Git/GitHub</span>
275
+ <span class="text-slate-500">80%</span>
276
+ </div>
277
+ <div class="w-full bg-slate-200 rounded-full h-2">
278
+ <div class="gradient-bg h-2 rounded-full" style="width: 80%"></div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Professional Skills -->
285
+ <div class="bg-white p-8 rounded-xl shadow-sm">
286
+ <h3 class="text-xl font-bold mb-6 flex items-center">
287
+ <i class="fas fa-user-tie text-indigo-500 mr-3"></i>
288
+ <span>Professional Skills</span>
289
+ </h3>
290
+ <div class="flex flex-wrap gap-3">
291
+ <span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Problem Solving</span>
292
+ <span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Teamwork</span>
293
+ <span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Creativity</span>
294
+ <span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Communication</span>
295
+ <span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Time Management</span>
296
+ <span class="skill-pill bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Adaptability</span>
297
+ </div>
298
+
299
+ <h3 class="text-xl font-bold mt-8 mb-6 flex items-center">
300
+ <i class="fas fa-certificate text-indigo-500 mr-3"></i>
301
+ <span>Certifications</span>
302
+ </h3>
303
+ <div class="bg-indigo-50 p-4 rounded-lg">
304
+ <h4 class="font-bold text-indigo-700">JavaScript and React.js Certification</h4>
305
+ <p class="text-sm text-slate-600">SimbaQuartz IT Company - June 2024</p>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </section>
311
+
312
+ <!-- Projects Section -->
313
+ <section id="projects" class="py-16 px-6 md:px-12 bg-white">
314
+ <div class="container mx-auto">
315
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 section-title">Featured Projects</h2>
316
+
317
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
318
+ <!-- Chat App -->
319
+ <div class="project-card bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
320
+ <div class="relative h-48 overflow-hidden">
321
+ <img src="https://images.unsplash.com/photo-1633356122544-f134324a6cee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
322
+ alt="Chat App" class="w-full h-full object-cover">
323
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
324
+ <div class="absolute bottom-4 left-4">
325
+ <span class="bg-indigo-500 text-white text-xs px-2 py-1 rounded">React.js</span>
326
+ <span class="bg-purple-500 text-white text-xs px-2 py-1 rounded ml-1">Firebase</span>
327
+ </div>
328
+ </div>
329
+ <div class="p-6">
330
+ <h3 class="text-xl font-bold mb-2">Real-time Chat App</h3>
331
+ <p class="text-slate-600 mb-4">
332
+ Built a real-time chat application with user registration, login, online user management, and one-to-one messaging.
333
+ </p>
334
+ <div class="flex justify-between items-center">
335
+ <a href="https://free-api-chat.vercel.app" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
336
+ View Project <i class="fas fa-external-link-alt ml-2"></i>
337
+ </a>
338
+ <a href="#" class="text-slate-400 hover:text-indigo-600">
339
+ <i class="fab fa-github"></i>
340
+ </a>
341
+ </div>
342
+ </div>
343
+ </div>
344
+
345
+ <!-- Rider App -->
346
+ <div class="project-card bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
347
+ <div class="relative h-48 overflow-hidden">
348
+ <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
349
+ alt="Rider App" class="w-full h-full object-cover">
350
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
351
+ <div class="absolute bottom-4 left-4">
352
+ <span class="bg-indigo-500 text-white text-xs px-2 py-1 rounded">React.js</span>
353
+ <span class="bg-green-500 text-white text-xs px-2 py-1 rounded ml-1">Context API</span>
354
+ </div>
355
+ </div>
356
+ <div class="p-6">
357
+ <h3 class="text-xl font-bold mb-2">Food Delivery App</h3>
358
+ <p class="text-slate-600 mb-4">
359
+ Designed an app with React.js for ordering food and drinks, with a dynamic list showing selected items and quantities.
360
+ </p>
361
+ <div class="flex justify-between items-center">
362
+ <a href="https://rider-app-ebf3.vercel.app" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
363
+ View Project <i class="fas fa-external-link-alt ml-2"></i>
364
+ </a>
365
+ <a href="#" class="text-slate-400 hover:text-indigo-600">
366
+ <i class="fab fa-github"></i>
367
+ </a>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Weather App -->
373
+ <div class="project-card bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
374
+ <div class="relative h-48 overflow-hidden">
375
+ <img src="https://images.unsplash.com/photo-1601134467661-268d69453fae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
376
+ alt="Weather App" class="w-full h-full object-cover">
377
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
378
+ <div class="absolute bottom-4 left-4">
379
+ <span class="bg-blue-500 text-white text-xs px-2 py-1 rounded">JavaScript</span>
380
+ <span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded ml-1">API Integration</span>
381
+ </div>
382
+ </div>
383
+ <div class="p-6">
384
+ <h3 class="text-xl font-bold mb-2">Weather Application</h3>
385
+ <p class="text-slate-600 mb-4">
386
+ Developed a weather application using HTML, CSS, and JavaScript integrated with a third-party weather API.
387
+ </p>
388
+ <div class="flex justify-between items-center">
389
+ <a href="https://weather-app-e62t.vercel.app" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
390
+ View Project <i class="fas fa-external-link-alt ml-2"></i>
391
+ </a>
392
+ <a href="#" class="text-slate-400 hover:text-indigo-600">
393
+ <i class="fab fa-github"></i>
394
+ </a>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+
400
+ <div class="mt-12 text-center">
401
+ <a href="#" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium">
402
+ View All Projects <i class="fas fa-arrow-right ml-2"></i>
403
+ </a>
404
+ </div>
405
+ </div>
406
+ </section>
407
+
408
+ <!-- Contact Section -->
409
+ <section id="contact" class="py-16 px-6 md:px-12 gradient-bg text-white">
410
+ <div class="container mx-auto">
411
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 section-title text-white">Get In Touch</h2>
412
+
413
+ <div class="grid md:grid-cols-2 gap-12">
414
+ <div>
415
+ <h3 class="text-2xl font-bold mb-6">Let's work together!</h3>
416
+ <p class="text-lg mb-8 opacity-90">
417
+ I'm currently looking for new opportunities. Whether you have a project in mind or just want to say hello,
418
+ I'll do my best to respond as soon as possible.
419
+ </p>
420
+
421
+ <div class="space-y-4">
422
+ <div class="flex items-center">
423
+ <i class="fas fa-envelope text-xl mr-4 opacity-80"></i>
424
+ <a href="mailto:[email protected]" class="hover:underline">[email protected]</a>
425
+ </div>
426
+ <div class="flex items-center">
427
+ <i class="fas fa-phone text-xl mr-4 opacity-80"></i>
428
+ <a href="tel:9815742397" class="hover:underline">+91 9815742397</a>
429
+ </div>
430
+ <div class="flex items-center">
431
+ <i class="fas fa-map-marker-alt text-xl mr-4 opacity-80"></i>
432
+ <span>Batala, Gurdaspur, Punjab</span>
433
+ </div>
434
+ </div>
435
+
436
+ <div class="mt-8 flex space-x-4">
437
+ <a href="#" class="text-2xl hover:opacity-80 transition">
438
+ <i class="fab fa-linkedin"></i>
439
+ </a>
440
+ <a href="#" class="text-2xl hover:opacity-80 transition">
441
+ <i class="fab fa-github"></i>
442
+ </a>
443
+ <a href="#" class="text-2xl hover:opacity-80 transition">
444
+ <i class="fab fa-twitter"></i>
445
+ </a>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="bg-white/10 backdrop-blur-sm rounded-xl p-8 border border-white/20">
450
+ <form>
451
+ <div class="mb-6">
452
+ <label for="name" class="block mb-2 font-medium">Your Name</label>
453
+ <input type="text" id="name" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-white">
454
+ </div>
455
+ <div class="mb-6">
456
+ <label for="email" class="block mb-2 font-medium">Email Address</label>
457
+ <input type="email" id="email" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-white">
458
+ </div>
459
+ <div class="mb-6">
460
+ <label for="message" class="block mb-2 font-medium">Your Message</label>
461
+ <textarea id="message" rows="4" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-white"></textarea>
462
+ </div>
463
+ <button type="submit" class="w-full bg-white text-indigo-600 px-6 py-3 rounded-lg font-bold hover:bg-opacity-90 transition">
464
+ Send Message
465
+ </button>
466
+ </form>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </section>
471
+
472
+ <!-- Footer -->
473
+ <footer class="py-8 px-6 bg-slate-900 text-white">
474
+ <div class="container mx-auto">
475
+ <div class="flex flex-col md:flex-row justify-between items-center">
476
+ <div class="mb-4 md:mb-0">
477
+ <a href="#" class="text-2xl font-bold gradient-text">Rupinder.</a>
478
+ <p class="text-sm text-slate-400 mt-1">Web Developer & UI Enthusiast</p>
479
+ </div>
480
+ <div class="flex space-x-6">
481
+ <a href="#home" class="text-slate-400 hover:text-white transition">Home</a>
482
+ <a href="#about" class="text-slate-400 hover:text-white transition">About</a>
483
+ <a href="#skills" class="text-slate-400 hover:text-white transition">Skills</a>
484
+ <a href="#projects" class="text-slate-400 hover:text-white transition">Projects</a>
485
+ <a href="#contact" class="text-slate-400 hover:text-white transition">Contact</a>
486
+ </div>
487
+ </div>
488
+ <hr class="border-slate-800 my-6">
489
+ <div class="flex flex-col md:flex-row justify-between items-center text-sm text-slate-400">
490
+ <p>© 2024 Rupinder Kaur. All rights reserved.</p>
491
+ <div class="mt-4 md:mt-0">
492
+ <a href="#" class="hover:text-white transition">Privacy Policy</a>
493
+ <span class="mx-2">•</span>
494
+ <a href="#" class="hover:text-white transition">Terms of Service</a>
495
+ </div>
496
+ </div>
497
+ </div>
498
+ </footer>
499
+
500
+ <script>
501
+ // Smooth scrolling for navigation links
502
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
503
+ anchor.addEventListener('click', function (e) {
504
+ e.preventDefault();
505
+
506
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
507
+ behavior: 'smooth'
508
+ });
509
+ });
510
+ });
511
+
512
+ // Animation for project cards on scroll
513
+ const observerOptions = {
514
+ threshold: 0.1
515
+ };
516
+
517
+ const observer = new IntersectionObserver((entries) => {
518
+ entries.forEach(entry => {
519
+ if (entry.isIntersecting) {
520
+ entry.target.style.opacity = '1';
521
+ entry.target.style.transform = 'translateY(0)';
522
+ }
523
+ });
524
+ }, observerOptions);
525
+
526
+ document.querySelectorAll('.project-card').forEach(card => {
527
+ card.style.opacity = '0';
528
+ card.style.transform = 'translateY(20px)';
529
+ card.style.transition = 'all 0.6s ease';
530
+ observer.observe(card);
531
+ });
532
+ </script>
533
+ <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=jaskaransingh/rupinder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
534
+ </html>