Hugging Face's logo

Spaces:
shukdevdatta123
/
Dr-Ratul-Roy-Web
Running

App Files Community
shukdevdatta123 commited on
Commit
a88a714
·
verified ·
1 Parent(s): 3d5a135

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1316 -19
index.html CHANGED
@@ -1,19 +1,1316 @@
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>Dr. Ratul Roy - Elite Dental Surgeon</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
13
+ --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
14
+ --dark-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
15
+ --glass-bg: rgba(255, 255, 255, 0.1);
16
+ --glass-border: rgba(255, 255, 255, 0.2);
17
+ --text-primary: #2c3e50;
18
+ --text-secondary: #7f8c8d;
19
+ --bg-light: #f8fafc;
20
+ --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.1);
21
+ --shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.2);
22
+ }
23
+
24
+ * {
25
+ margin: 0;
26
+ padding: 0;
27
+ box-sizing: border-box;
28
+ }
29
+
30
+ body {
31
+ font-family: 'Inter', sans-serif;
32
+ line-height: 1.7;
33
+ color: var(--text-primary);
34
+ overflow-x: hidden;
35
+ scroll-behavior: smooth;
36
+ }
37
+
38
+ /* Custom Scrollbar */
39
+ ::-webkit-scrollbar {
40
+ width: 8px;
41
+ }
42
+
43
+ ::-webkit-scrollbar-track {
44
+ background: #f1f1f1;
45
+ }
46
+
47
+ ::-webkit-scrollbar-thumb {
48
+ background: linear-gradient(135deg, #667eea, #764ba2);
49
+ border-radius: 10px;
50
+ }
51
+
52
+ /* Navigation */
53
+ .navbar {
54
+ position: fixed;
55
+ top: 0;
56
+ width: 100%;
57
+ background: rgba(255, 255, 255, 0.95);
58
+ backdrop-filter: blur(20px);
59
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
60
+ z-index: 1000;
61
+ transition: all 0.3s ease;
62
+ padding: 15px 0;
63
+ }
64
+
65
+ .navbar.scrolled {
66
+ padding: 10px 0;
67
+ box-shadow: var(--shadow-soft);
68
+ }
69
+
70
+ .nav-container {
71
+ max-width: 1200px;
72
+ margin: 0 auto;
73
+ display: flex;
74
+ justify-content: space-between;
75
+ align-items: center;
76
+ padding: 0 20px;
77
+ }
78
+
79
+ .nav-logo {
80
+ font-family: 'Playfair Display', serif;
81
+ font-size: 1.8rem;
82
+ font-weight: 700;
83
+ background: var(--primary-gradient);
84
+ -webkit-background-clip: text;
85
+ background-clip: text;
86
+ -webkit-text-fill-color: transparent;
87
+ }
88
+
89
+ .nav-menu {
90
+ display: flex;
91
+ list-style: none;
92
+ gap: 30px;
93
+ }
94
+
95
+ .nav-link {
96
+ text-decoration: none;
97
+ color: var(--text-primary);
98
+ font-weight: 500;
99
+ position: relative;
100
+ transition: all 0.3s ease;
101
+ }
102
+
103
+ .nav-link::after {
104
+ content: '';
105
+ position: absolute;
106
+ bottom: -5px;
107
+ left: 0;
108
+ width: 0;
109
+ height: 2px;
110
+ background: var(--primary-gradient);
111
+ transition: width 0.3s ease;
112
+ }
113
+
114
+ .nav-link:hover::after {
115
+ width: 100%;
116
+ }
117
+
118
+ .nav-toggle {
119
+ display: none;
120
+ flex-direction: column;
121
+ cursor: pointer;
122
+ }
123
+
124
+ .nav-toggle span {
125
+ width: 25px;
126
+ height: 3px;
127
+ background: var(--text-primary);
128
+ margin: 3px 0;
129
+ transition: 0.3s;
130
+ }
131
+
132
+ /* Hero Section */
133
+ .hero {
134
+ min-height: 100vh;
135
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
136
+ display: flex;
137
+ align-items: center;
138
+ position: relative;
139
+ overflow: hidden;
140
+ }
141
+
142
+ .hero::before {
143
+ content: '';
144
+ position: absolute;
145
+ top: 0;
146
+ left: 0;
147
+ right: 0;
148
+ bottom: 0;
149
+ background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="300" fill="url(%23a)"/><circle cx="800" cy="800" r="400" fill="url(%23a)"/></svg>');
150
+ animation: float 20s ease-in-out infinite;
151
+ }
152
+
153
+ @keyframes float {
154
+ 0%, 100% { transform: translateY(0px); }
155
+ 50% { transform: translateY(-20px); }
156
+ }
157
+
158
+ .hero-container {
159
+ max-width: 1200px;
160
+ margin: 0 auto;
161
+ padding: 0 20px;
162
+ display: grid;
163
+ grid-template-columns: 1fr 1fr;
164
+ gap: 60px;
165
+ align-items: center;
166
+ position: relative;
167
+ z-index: 2;
168
+ }
169
+
170
+ .hero-content {
171
+ animation: slideInLeft 1s ease-out;
172
+ }
173
+
174
+ .hero-title {
175
+ font-family: 'Playfair Display', serif;
176
+ font-size: 3.5rem;
177
+ font-weight: 700;
178
+ color: white;
179
+ margin-bottom: 20px;
180
+ line-height: 1.2;
181
+ }
182
+
183
+ .hero-subtitle {
184
+ font-size: 1.5rem;
185
+ color: rgba(255, 255, 255, 0.9);
186
+ margin-bottom: 15px;
187
+ font-weight: 300;
188
+ }
189
+
190
+ .hero-description {
191
+ font-size: 1.1rem;
192
+ color: rgba(255, 255, 255, 0.8);
193
+ margin-bottom: 40px;
194
+ line-height: 1.6;
195
+ }
196
+
197
+ .hero-buttons {
198
+ display: flex;
199
+ gap: 20px;
200
+ flex-wrap: wrap;
201
+ }
202
+
203
+ .btn {
204
+ padding: 15px 30px;
205
+ border: none;
206
+ border-radius: 50px;
207
+ font-weight: 600;
208
+ text-decoration: none;
209
+ transition: all 0.3s ease;
210
+ cursor: pointer;
211
+ position: relative;
212
+ overflow: hidden;
213
+ display: inline-flex;
214
+ align-items: center;
215
+ gap: 10px;
216
+ }
217
+
218
+ .btn-primary {
219
+ background: rgba(255, 255, 255, 0.2);
220
+ color: white;
221
+ border: 2px solid rgba(255, 255, 255, 0.3);
222
+ backdrop-filter: blur(20px);
223
+ }
224
+
225
+ .btn-primary:hover {
226
+ background: rgba(255, 255, 255, 0.3);
227
+ transform: translateY(-3px);
228
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
229
+ }
230
+
231
+ .btn-secondary {
232
+ background: white;
233
+ color: var(--text-primary);
234
+ }
235
+
236
+ .btn-secondary:hover {
237
+ transform: translateY(-3px);
238
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
239
+ }
240
+
241
+ .hero-image {
242
+ position: relative;
243
+ animation: slideInRight 1s ease-out;
244
+ }
245
+
246
+ .hero-photo {
247
+ width: 400px;
248
+ height: 400px;
249
+ border-radius: 50%;
250
+ object-fit: cover;
251
+ border: 8px solid rgba(255, 255, 255, 0.2);
252
+ box-shadow: var(--shadow-strong);
253
+ position: relative;
254
+ z-index: 2;
255
+ animation: pulse 3s ease-in-out infinite;
256
+ }
257
+
258
+ @keyframes pulse {
259
+ 0%, 100% { transform: scale(1); }
260
+ 50% { transform: scale(1.05); }
261
+ }
262
+
263
+ .floating-elements {
264
+ position: absolute;
265
+ width: 100%;
266
+ height: 100%;
267
+ pointer-events: none;
268
+ }
269
+
270
+ .floating-element {
271
+ position: absolute;
272
+ background: rgba(255, 255, 255, 0.1);
273
+ border-radius: 50%;
274
+ animation: floatRandom 15s ease-in-out infinite;
275
+ }
276
+
277
+ .floating-element:nth-child(1) {
278
+ width: 80px;
279
+ height: 80px;
280
+ top: 20%;
281
+ right: 10%;
282
+ animation-delay: -2s;
283
+ }
284
+
285
+ .floating-element:nth-child(2) {
286
+ width: 60px;
287
+ height: 60px;
288
+ top: 60%;
289
+ right: 20%;
290
+ animation-delay: -5s;
291
+ }
292
+
293
+ .floating-element:nth-child(3) {
294
+ width: 40px;
295
+ height: 40px;
296
+ top: 80%;
297
+ right: 30%;
298
+ animation-delay: -8s;
299
+ }
300
+
301
+ @keyframes floatRandom {
302
+ 0%, 100% { transform: translateY(0px) rotate(0deg); }
303
+ 33% { transform: translateY(-30px) rotate(120deg); }
304
+ 66% { transform: translateY(30px) rotate(240deg); }
305
+ }
306
+
307
+ /* Section Styles */
308
+ .section {
309
+ padding: 100px 0;
310
+ position: relative;
311
+ }
312
+
313
+ .container {
314
+ max-width: 1200px;
315
+ margin: 0 auto;
316
+ padding: 0 20px;
317
+ }
318
+
319
+ .section-header {
320
+ text-align: center;
321
+ margin-bottom: 80px;
322
+ animation: fadeInUp 1s ease-out;
323
+ }
324
+
325
+ .section-title {
326
+ font-family: 'Playfair Display', serif;
327
+ font-size: 3rem;
328
+ font-weight: 600;
329
+ margin-bottom: 20px;
330
+ background: var(--primary-gradient);
331
+ -webkit-background-clip: text;
332
+ background-clip: text;
333
+ -webkit-text-fill-color: transparent;
334
+ }
335
+
336
+ .section-subtitle {
337
+ font-size: 1.2rem;
338
+ color: var(--text-secondary);
339
+ max-width: 600px;
340
+ margin: 0 auto;
341
+ }
342
+
343
+ /* About Section */
344
+ .about {
345
+ background: var(--bg-light);
346
+ }
347
+
348
+ .about-content {
349
+ display: grid;
350
+ grid-template-columns: 1fr 1fr;
351
+ gap: 60px;
352
+ align-items: center;
353
+ }
354
+
355
+ .about-text {
356
+ font-size: 1.1rem;
357
+ line-height: 1.8;
358
+ }
359
+
360
+ .about-text p {
361
+ margin-bottom: 25px;
362
+ }
363
+
364
+ .about-stats {
365
+ display: grid;
366
+ grid-template-columns: repeat(2, 1fr);
367
+ gap: 30px;
368
+ }
369
+
370
+ .stat-card {
371
+ background: white;
372
+ padding: 30px;
373
+ border-radius: 20px;
374
+ box-shadow: var(--shadow-soft);
375
+ text-align: center;
376
+ transition: all 0.3s ease;
377
+ position: relative;
378
+ overflow: hidden;
379
+ }
380
+
381
+ .stat-card::before {
382
+ content: '';
383
+ position: absolute;
384
+ top: 0;
385
+ left: 0;
386
+ right: 0;
387
+ height: 4px;
388
+ background: var(--primary-gradient);
389
+ }
390
+
391
+ .stat-card:hover {
392
+ transform: translateY(-10px);
393
+ box-shadow: var(--shadow-strong);
394
+ }
395
+
396
+ .stat-number {
397
+ font-size: 2.5rem;
398
+ font-weight: 800;
399
+ background: var(--primary-gradient);
400
+ -webkit-background-clip: text;
401
+ background-clip: text;
402
+ -webkit-text-fill-color: transparent;
403
+ margin-bottom: 10px;
404
+ }
405
+
406
+ .stat-label {
407
+ color: var(--text-secondary);
408
+ font-weight: 500;
409
+ }
410
+
411
+ /* Education & Experience */
412
+ .timeline {
413
+ position: relative;
414
+ padding-left: 30px;
415
+ }
416
+
417
+ .timeline::before {
418
+ content: '';
419
+ position: absolute;
420
+ left: 0;
421
+ top: 0;
422
+ bottom: 0;
423
+ width: 2px;
424
+ background: var(--primary-gradient);
425
+ }
426
+
427
+ .timeline-item {
428
+ position: relative;
429
+ margin-bottom: 40px;
430
+ padding-left: 40px;
431
+ }
432
+
433
+ .timeline-item::before {
434
+ content: '';
435
+ position: absolute;
436
+ left: -35px;
437
+ top: 0;
438
+ width: 12px;
439
+ height: 12px;
440
+ border-radius: 50%;
441
+ background: var(--primary-gradient);
442
+ }
443
+
444
+ .timeline-card {
445
+ background: white;
446
+ padding: 30px;
447
+ border-radius: 15px;
448
+ box-shadow: var(--shadow-soft);
449
+ transition: all 0.3s ease;
450
+ border-left: 4px solid transparent;
451
+ background-clip: padding-box;
452
+ }
453
+
454
+ .timeline-card:hover {
455
+ transform: translateX(10px);
456
+ border-left: 4px solid #667eea;
457
+ box-shadow: var(--shadow-strong);
458
+ }
459
+
460
+ .timeline-title {
461
+ font-size: 1.3rem;
462
+ font-weight: 600;
463
+ margin-bottom: 10px;
464
+ color: var(--text-primary);
465
+ }
466
+
467
+ .timeline-subtitle {
468
+ color: var(--text-secondary);
469
+ margin-bottom: 15px;
470
+ font-weight: 500;
471
+ }
472
+
473
+ .timeline-description {
474
+ color: var(--text-secondary);
475
+ line-height: 1.6;
476
+ }
477
+
478
+ /* Skills Section */
479
+ .skills {
480
+ background: var(--bg-light);
481
+ }
482
+
483
+ .skills-grid {
484
+ display: grid;
485
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
486
+ gap: 30px;
487
+ }
488
+
489
+ .skill-card {
490
+ background: white;
491
+ padding: 40px 30px;
492
+ border-radius: 20px;
493
+ box-shadow: var(--shadow-soft);
494
+ text-align: center;
495
+ transition: all 0.3s ease;
496
+ position: relative;
497
+ overflow: hidden;
498
+ }
499
+
500
+ .skill-card:hover {
501
+ transform: translateY(-10px);
502
+ box-shadow: var(--shadow-strong);
503
+ }
504
+
505
+ .skill-icon {
506
+ width: 80px;
507
+ height: 80px;
508
+ margin: 0 auto 20px;
509
+ background: var(--primary-gradient);
510
+ border-radius: 50%;
511
+ display: flex;
512
+ align-items: center;
513
+ justify-content: center;
514
+ font-size: 2rem;
515
+ color: white;
516
+ }
517
+
518
+ .skill-title {
519
+ font-size: 1.2rem;
520
+ font-weight: 600;
521
+ margin-bottom: 15px;
522
+ color: var(--text-primary);
523
+ }
524
+
525
+ .skill-description {
526
+ color: var(--text-secondary);
527
+ line-height: 1.6;
528
+ }
529
+
530
+ /* Contact Section */
531
+ .contact {
532
+ background: var(--primary-gradient);
533
+ color: white;
534
+ position: relative;
535
+ }
536
+
537
+ .contact::before {
538
+ content: '';
539
+ position: absolute;
540
+ top: 0;
541
+ left: 0;
542
+ right: 0;
543
+ bottom: 0;
544
+ background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="b" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.05"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="100" cy="100" r="200" fill="url(%23b)"/><circle cx="900" cy="900" r="300" fill="url(%23b)"/></svg>');
545
+ }
546
+
547
+ .contact-content {
548
+ display: grid;
549
+ grid-template-columns: 1fr 1fr;
550
+ gap: 60px;
551
+ align-items: start;
552
+ position: relative;
553
+ z-index: 2;
554
+ }
555
+
556
+ .contact-info h3 {
557
+ font-size: 1.5rem;
558
+ margin-bottom: 30px;
559
+ color: white;
560
+ }
561
+
562
+ .contact-item {
563
+ display: flex;
564
+ align-items: center;
565
+ margin-bottom: 25px;
566
+ padding: 20px;
567
+ background: rgba(255, 255, 255, 0.1);
568
+ border-radius: 15px;
569
+ backdrop-filter: blur(20px);
570
+ transition: all 0.3s ease;
571
+ }
572
+
573
+ .contact-item:hover {
574
+ background: rgba(255, 255, 255, 0.2);
575
+ transform: translateX(10px);
576
+ }
577
+
578
+ .contact-item i {
579
+ font-size: 1.5rem;
580
+ margin-right: 20px;
581
+ color: rgba(255, 255, 255, 0.8);
582
+ }
583
+
584
+ .contact-form {
585
+ background: rgba(255, 255, 255, 0.1);
586
+ padding: 40px;
587
+ border-radius: 20px;
588
+ backdrop-filter: blur(20px);
589
+ border: 1px solid rgba(255, 255, 255, 0.2);
590
+ }
591
+
592
+ .form-group {
593
+ margin-bottom: 25px;
594
+ }
595
+
596
+ .form-group label {
597
+ display: block;
598
+ margin-bottom: 8px;
599
+ font-weight: 500;
600
+ color: rgba(255, 255, 255, 0.9);
601
+ }
602
+
603
+ .form-control {
604
+ width: 100%;
605
+ padding: 15px 20px;
606
+ border: 2px solid rgba(255, 255, 255, 0.2);
607
+ border-radius: 10px;
608
+ background: rgba(255, 255, 255, 0.1);
609
+ color: white;
610
+ font-size: 1rem;
611
+ transition: all 0.3s ease;
612
+ backdrop-filter: blur(20px);
613
+ }
614
+
615
+ .form-control::placeholder {
616
+ color: rgba(255, 255, 255, 0.6);
617
+ }
618
+
619
+ .form-control:focus {
620
+ outline: none;
621
+ border-color: rgba(255, 255, 255, 0.5);
622
+ background: rgba(255, 255, 255, 0.2);
623
+ }
624
+
625
+ .btn-submit {
626
+ width: 100%;
627
+ padding: 18px;
628
+ background: rgba(255, 255, 255, 0.2);
629
+ color: white;
630
+ border: 2px solid rgba(255, 255, 255, 0.3);
631
+ border-radius: 10px;
632
+ font-size: 1.1rem;
633
+ font-weight: 600;
634
+ cursor: pointer;
635
+ transition: all 0.3s ease;
636
+ backdrop-filter: blur(20px);
637
+ }
638
+
639
+ .btn-submit:hover {
640
+ background: rgba(255, 255, 255, 0.3);
641
+ transform: translateY(-2px);
642
+ }
643
+
644
+ /* Footer */
645
+ .footer {
646
+ background: #1a1a1a;
647
+ color: white;
648
+ padding: 40px 0;
649
+ text-align: center;
650
+ }
651
+
652
+ .footer p {
653
+ margin-bottom: 20px;
654
+ color: rgba(255, 255, 255, 0.7);
655
+ }
656
+
657
+ .social-links {
658
+ display: flex;
659
+ justify-content: center;
660
+ gap: 20px;
661
+ }
662
+
663
+ .social-link {
664
+ width: 50px;
665
+ height: 50px;
666
+ background: var(--primary-gradient);
667
+ border-radius: 50%;
668
+ display: flex;
669
+ align-items: center;
670
+ justify-content: center;
671
+ color: white;
672
+ text-decoration: none;
673
+ transition: all 0.3s ease;
674
+ }
675
+
676
+ .social-link:hover {
677
+ transform: translateY(-5px) scale(1.1);
678
+ box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
679
+ }
680
+
681
+ /* Animations */
682
+ @keyframes slideInLeft {
683
+ from {
684
+ opacity: 0;
685
+ transform: translateX(-50px);
686
+ }
687
+ to {
688
+ opacity: 1;
689
+ transform: translateX(0);
690
+ }
691
+ }
692
+
693
+ @keyframes slideInRight {
694
+ from {
695
+ opacity: 0;
696
+ transform: translateX(50px);
697
+ }
698
+ to {
699
+ opacity: 1;
700
+ transform: translateX(0);
701
+ }
702
+ }
703
+
704
+ @keyframes fadeInUp {
705
+ from {
706
+ opacity: 0;
707
+ transform: translateY(30px);
708
+ }
709
+ to {
710
+ opacity: 1;
711
+ transform: translateY(0);
712
+ }
713
+ }
714
+
715
+ /* Scroll Animations */
716
+ .animate-on-scroll {
717
+ opacity: 0;
718
+ transform: translateY(30px);
719
+ transition: all 0.8s ease;
720
+ }
721
+
722
+ .animate-on-scroll.animated {
723
+ opacity: 1;
724
+ transform: translateY(0);
725
+ }
726
+
727
+ /* Responsive Design */
728
+ @media (max-width: 1024px) {
729
+ .hero-container {
730
+ grid-template-columns: 1fr;
731
+ text-align: center;
732
+ gap: 40px;
733
+ }
734
+
735
+ .hero-title {
736
+ font-size: 3rem;
737
+ }
738
+
739
+ .about-content,
740
+ .contact-content {
741
+ grid-template-columns: 1fr;
742
+ gap: 40px;
743
+ }
744
+
745
+ .hero-photo {
746
+ width: 300px;
747
+ height: 300px;
748
+ }
749
+ }
750
+
751
+ @media (max-width: 768px) {
752
+ .nav-menu {
753
+ position: fixed;
754
+ top: 80px;
755
+ left: -100%;
756
+ width: 100%;
757
+ height: calc(100vh - 80px);
758
+ background: rgba(255, 255, 255, 0.95);
759
+ backdrop-filter: blur(20px);
760
+ flex-direction: column;
761
+ justify-content: center;
762
+ align-items: center;
763
+ transition: left 0.3s ease;
764
+ }
765
+
766
+ .nav-menu.active {
767
+ left: 0;
768
+ }
769
+
770
+ .nav-toggle {
771
+ display: flex;
772
+ }
773
+
774
+ .hero-title {
775
+ font-size: 2.5rem;
776
+ }
777
+
778
+ .section-title {
779
+ font-size: 2.5rem;
780
+ }
781
+
782
+ .hero-buttons {
783
+ justify-content: center;
784
+ }
785
+
786
+ .about-stats {
787
+ grid-template-columns: 1fr;
788
+ }
789
+
790
+ .skills-grid {
791
+ grid-template-columns: 1fr;
792
+ }
793
+
794
+ .hero-photo {
795
+ width: 250px;
796
+ height: 250px;
797
+ }
798
+ }
799
+
800
+ @media (max-width: 480px) {
801
+ .section {
802
+ padding: 60px 0;
803
+ }
804
+
805
+ .hero-title {
806
+ font-size: 2rem;
807
+ }
808
+
809
+ .section-title {
810
+ font-size: 2rem;
811
+ }
812
+
813
+ .contact-form {
814
+ padding: 30px 20px;
815
+ }
816
+ }
817
+ </style>
818
+ </head>
819
+ <body>
820
+ <!-- Navigation -->
821
+ <nav class="navbar">
822
+ <div class="nav-container">
823
+ <div class="nav-logo">Dr. Ratul Roy</div>
824
+ <ul class="nav-menu">
825
+ <li><a href="#hero" class="nav-link">Home</a></li>
826
+ <li><a href="#about" class="nav-link">About</a></li>
827
+ <li><a href="#education" class="nav-link">Education</a></li>
828
+ <li><a href="#experience" class="nav-link">Experience</a></li>
829
+ <li><a href="#skills" class="nav-link">Skills</a></li>
830
+ <li><a href="#contact" class="nav-link">Contact</a></li>
831
+ </ul>
832
+ <div class="nav-toggle">
833
+ <span></span>
834
+ <span></span>
835
+ <span></span>
836
+ </div>
837
+ </div>
838
+ </nav>
839
+
840
+ <!-- Hero Section -->
841
+ <section id="hero" class="hero">
842
+ <div class="floating-elements">
843
+ <div class="floating-element"></div>
844
+ <div class="floating-element"></div>
845
+ <div class="floating-element"></div>
846
+ </div>
847
+ <div class="hero-container">
848
+ <div class="hero-content">
849
+ <h1 class="hero-title">Dr. Ratul Roy</h1>
850
+ <p class="hero-subtitle">Elite Dental Surgeon</p>
851
+ <p class="hero-description">Transforming smiles with precision, care, and cutting-edge dental technology. Your journey to optimal oral health begins here.</p>
852
+ <div class="hero-buttons">
853
+ <a href="#about" class="btn btn-primary">
854
+ <i class="fas fa-user-md"></i>
855
+ Discover My Story
856
+ </a>
857
+ <a href="#contact" class="btn btn-secondary">
858
+ <i class="fas fa-calendar-alt"></i>
859
+ Book Consultation
860
+ </a>
861
+ </div>
862
+ </div>
863
+ <div class="hero-image">
864
+ <img src="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?w=400&h=400&fit=crop&crop=face" alt="Dr. Ratul Roy" class="hero-photo">
865
+ </div>
866
+ </div>
867
+ </section>
868
+
869
+ <!-- About Section -->
870
+ <section id="about" class="section about">
871
+ <div class="container">
872
+ <div class="section-header animate-on-scroll">
873
+ <h2 class="section-title">About Dr. Ratul Roy</h2>
874
+ <p class="section-subtitle">Committed to excellence in dental care with a passion for transforming lives through advanced dentistry</p>
875
+ </div>
876
+ <div class="about-content">
877
+ <div class="about-text animate-on-scroll">
878
+ <p>Dr. Ratul Roy is a distinguished dental surgeon with an unwavering commitment to providing exceptional dental care. With extensive training and years of dedicated practice, he has established himself as a trusted professional in the field of dentistry.</p>
879
+ <p>His approach combines state-of-the-art technology with compassionate care, ensuring each patient receives personalized treatment tailored to their unique needs. Dr. Roy's expertise spans across various dental specialties, with a particular focus on prosthodontics and advanced dental procedures.</p>
880
+ <p><strong>Mission:</strong> To build a career as a renowned dental surgeon and educator, practicing with the highest ethical standards while contributing to the advancement of dental medicine and mentoring the next generation of dental professionals.</p>
881
+ </div>
882
+ <div class="about-stats animate-on-scroll">
883
+ <div class="stat-card">
884
+ <div class="stat-number">10+</div>
885
+ <div class="stat-label">Years Experience</div>
886
+ </div>
887
+ <div class="stat-card">
888
+ <div class="stat-number">1000+</div>
889
+ <div class="stat-label">Happy Patients</div>
890
+ </div>
891
+ <div class="stat-card">
892
+ <div class="stat-number">5+</div>
893
+ <div class="stat-label">Specializations</div>
894
+ </div>
895
+ <div class="stat-card">
896
+ <div class="stat-number">100%</div>
897
+ <div class="stat-label">Satisfaction Rate</div>
898
+ </div>
899
+ </div>
900
+ </div>
901
+ </div>
902
+ </section>
903
+
904
+ <!-- Education Section -->
905
+ <section id="education" class="section">
906
+ <div class="container">
907
+ <div class="section-header animate-on-scroll">
908
+ <h2 class="section-title">Educational Excellence</h2>
909
+ <p class="section-subtitle">A foundation built on rigorous academic achievement and continuous learning</p>
910
+ </div>
911
+ <div class="timeline animate-on-scroll">
912
+ <div class="timeline-item">
913
+ <div class="timeline-card">
914
+ <h3 class="timeline-title">M.S. in Prosthodontics</h3>
915
+ <p class="timeline-subtitle">Bangabandhu Sheikh Mujib Medical University (BSMMU) • 2023</p>
916
+ <p class="timeline-description">Advanced specialization in prosthodontics, focusing on the restoration and replacement of teeth to improve oral function and aesthetics.</p>
917
+ </div>
918
+ </div>
919
+ <div class="timeline-item">
920
+ <div class="timeline-card">
921
+ <h3 class="timeline-title">Bachelor of Dental Surgery (B.D.S.)</h3>
922
+ <p class="timeline-subtitle">Dhaka Dental College • 2013</p>
923
+ <p class="timeline-description">Comprehensive dental education covering all aspects of oral health, diagnosis, and treatment planning.</p>
924
+ </div>
925
+ </div>
926
+ <div class="timeline-item">
927
+ <div class="timeline-card">
928
+ <h3 class="timeline-title">Higher Secondary Certificate (H.S.C.)</h3>
929
+ <p class="timeline-subtitle">Shaheed Sayed Nazrul Islam College, Mymensingh • GPA 5.00</p>
930
+ <p class="timeline-description">Achieved perfect academic performance in science stream, laying the foundation for medical studies.</p>
931
+ </div>
932
+ </div>
933
+ <div class="timeline-item">
934
+ <div class="timeline-card">
935
+ <h3 class="timeline-title">Secondary School Certificate (S.S.C.)</h3>
936
+ <p class="timeline-subtitle">Mymensingh Zilla School, Dhaka Board • GPA 5.00</p>
937
+ <p class="timeline-description">Excellent academic achievement demonstrating early commitment to educational excellence.</p>
938
+ </div>
939
+ </div>
940
+ </div>
941
+ </div>
942
+ </section>
943
+
944
+ <!-- Experience Section -->
945
+ <section id="experience" class="section">
946
+ <div class="container">
947
+ <div class="section-header animate-on-scroll">
948
+ <h2 class="section-title">Professional Journey</h2>
949
+ <p class="section-subtitle">A diverse career spanning clinical practice, research, and specialized dental care</p>
950
+ </div>
951
+ <div class="timeline animate-on-scroll">
952
+ <div class="timeline-item">
953
+ <div class="timeline-card">
954
+ <h3 class="timeline-title">Consultant Dental Surgeon</h3>
955
+ <p class="timeline-subtitle">Crescent Dental Center, Shamoli, Dhaka • Current</p>
956
+ <p class="timeline-description">Providing comprehensive dental care with focus on prosthodontics and advanced restorative procedures.</p>
957
+ </div>
958
+ </div>
959
+ <div class="timeline-item">
960
+ <div class="timeline-card">
961
+ <h3 class="timeline-title">Consultant Surgeon</h3>
962
+ <p class="timeline-subtitle">Podma Diagnostic Center, Netrakona • Current</p>
963
+ <p class="timeline-description">Delivering specialized dental services to the community with emphasis on preventive and therapeutic care.</p>
964
+ </div>
965
+ </div>
966
+ <div class="timeline-item">
967
+ <div class="timeline-card">
968
+ <h3 class="timeline-title">Resident Doctor of Prosthodontics</h3>
969
+ <p class="timeline-subtitle">BSMMU • March 2018 - March 2023</p>
970
+ <p class="timeline-description">Intensive training in prosthodontics, gaining expertise in complex dental reconstructions and prosthetic rehabilitation.</p>
971
+ </div>
972
+ </div>
973
+ <div class="timeline-item">
974
+ <div class="timeline-card">
975
+ <h3 class="timeline-title">Consultant Dental Surgeon</h3>
976
+ <p class="timeline-subtitle">Crescent Dental Center • 6 months</p>
977
+ <p class="timeline-description">Provided comprehensive dental care services and built strong patient relationships.</p>
978
+ </div>
979
+ </div>
980
+ <div class="timeline-item">
981
+ <div class="timeline-card">
982
+ <h3 class="timeline-title">Consultant Surgeon</h3>
983
+ <p class="timeline-subtitle">Hitech Dental Surgery • 2 months</p>
984
+ <p class="timeline-description">Gained experience in advanced dental surgical procedures and modern dental technologies.</p>
985
+ </div>
986
+ </div>
987
+ <div class="timeline-item">
988
+ <div class="timeline-card">
989
+ <h3 class="timeline-title">Consultant Surgeon</h3>
990
+ <p class="timeline-subtitle">Ratan's Dental • 2 months</p>
991
+ <p class="timeline-description">Early career experience in general dental practice and patient care management.</p>
992
+ </div>
993
+ </div>
994
+ <div class="timeline-item">
995
+ <div class="timeline-card">
996
+ <h3 class="timeline-title">Internship</h3>
997
+ <p class="timeline-subtitle">Dhaka Dental College Hospital • July 2013 - July 2014</p>
998
+ <p class="timeline-description">Comprehensive hands-on training across all dental specialties, building foundational clinical skills.</p>
999
+ </div>
1000
+ </div>
1001
+ </div>
1002
+ </div>
1003
+ </section>
1004
+
1005
+ <!-- Skills Section -->
1006
+ <section id="skills" class="section skills">
1007
+ <div class="container">
1008
+ <div class="section-header animate-on-scroll">
1009
+ <h2 class="section-title">Professional Excellence</h2>
1010
+ <p class="section-subtitle">Combining technical expertise with compassionate care and modern technology</p>
1011
+ </div>
1012
+ <div class="skills-grid">
1013
+ <div class="skill-card animate-on-scroll">
1014
+ <div class="skill-icon">
1015
+ <i class="fas fa-tooth"></i>
1016
+ </div>
1017
+ <h3 class="skill-title">Prosthodontics</h3>
1018
+ <p class="skill-description">Specialized expertise in dental prosthetics, crowns, bridges, and complete oral rehabilitation.</p>
1019
+ </div>
1020
+ <div class="skill-card animate-on-scroll">
1021
+ <div class="skill-icon">
1022
+ <i class="fas fa-user-md"></i>
1023
+ </div>
1024
+ <h3 class="skill-title">Patient Care</h3>
1025
+ <p class="skill-description">Compassionate approach to patient care with focus on comfort and comprehensive treatment planning.</p>
1026
+ </div>
1027
+ <div class="skill-card animate-on-scroll">
1028
+ <div class="skill-icon">
1029
+ <i class="fas fa-laptop-medical"></i>
1030
+ </div>
1031
+ <h3 class="skill-title">Digital Dentistry</h3>
1032
+ <p class="skill-description">Proficient in modern dental software and digital imaging technologies for precise diagnostics.</p>
1033
+ </div>
1034
+ <div class="skill-card animate-on-scroll">
1035
+ <div class="skill-icon">
1036
+ <i class="fas fa-microscope"></i>
1037
+ </div>
1038
+ <h3 class="skill-title">Research & Innovation</h3>
1039
+ <p class="skill-description">Committed to staying current with latest dental research and implementing innovative treatment methods.</p>
1040
+ </div>
1041
+ <div class="skill-card animate-on-scroll">
1042
+ <div class="skill-icon">
1043
+ <i class="fas fa-users"></i>
1044
+ </div>
1045
+ <h3 class="skill-title">Team Leadership</h3>
1046
+ <p class="skill-description">Excellent collaborative skills and experience in leading dental teams for optimal patient outcomes.</p>
1047
+ </div>
1048
+ <div class="skill-card animate-on-scroll">
1049
+ <div class="skill-icon">
1050
+ <i class="fas fa-graduation-cap"></i>
1051
+ </div>
1052
+ <h3 class="skill-title">Continuous Learning</h3>
1053
+ <p class="skill-description">Dedicated to professional development through seminars, workshops, and advanced training programs.</p>
1054
+ </div>
1055
+ </div>
1056
+ </div>
1057
+ </section>
1058
+
1059
+ <!-- Contact Section -->
1060
+ <section id="contact" class="section contact">
1061
+ <div class="container">
1062
+ <div class="section-header animate-on-scroll">
1063
+ <h2 class="section-title" style="color: white;">Get In Touch</h2>
1064
+ <p class="section-subtitle" style="color: rgba(255, 255, 255, 0.8);">Ready to transform your smile? Let's discuss your dental care needs</p>
1065
+ </div>
1066
+ <div class="contact-content">
1067
+ <div class="contact-info animate-on-scroll">
1068
+ <h3>Contact Information</h3>
1069
+ <div class="contact-item">
1070
+ <i class="fas fa-phone"></i>
1071
+ <div>
1072
+ <strong>Phone</strong><br>
1073
+ +88-01735760941
1074
+ </div>
1075
+ </div>
1076
+ <div class="contact-item">
1077
+ <i class="fas fa-envelope"></i>
1078
+ <div>
1079
+ <strong>Email</strong><br>
1080
+ [email protected]
1081
+ </div>
1082
+ </div>
1083
+ <div class="contact-item">
1084
+ <i class="fas fa-map-marker-alt"></i>
1085
+ <div>
1086
+ <strong>Address</strong><br>
1087
+ Village: Rambhodropur, Post: Harulia<br>
1088
+ Thana: Barhatta, Dist: Netrokona
1089
+ </div>
1090
+ </div>
1091
+ <div class="contact-item">
1092
+ <i class="fas fa-clinic-medical"></i>
1093
+ <div>
1094
+ <strong>Clinics</strong><br>
1095
+ Crescent Dental Center, Shamoli, Dhaka<br>
1096
+ Podma Diagnostic Center, Netrakona
1097
+ </div>
1098
+ </div>
1099
+ </div>
1100
+ <form class="contact-form animate-on-scroll" action="https://formspree.io/f/xeojkqke" method="POST">
1101
+ <div class="form-group">
1102
+ <label for="name">Full Name</label>
1103
+ <input type="text" id="name" name="name" class="form-control" placeholder="Enter your full name" required>
1104
+ </div>
1105
+ <div class="form-group">
1106
+ <label for="email">Email Address</label>
1107
+ <input type="email" id="email" name="email" class="form-control" placeholder="Enter your email address" required>
1108
+ </div>
1109
+ <div class="form-group">
1110
+ <label for="phone">Phone Number</label>
1111
+ <input type="tel" id="phone" name="phone" class="form-control" placeholder="Enter your phone number">
1112
+ </div>
1113
+ <div class="form-group">
1114
+ <label for="subject">Subject</label>
1115
+ <input type="text" id="subject" name="subject" class="form-control" placeholder="What is this regarding?" required>
1116
+ </div>
1117
+ <div class="form-group">
1118
+ <label for="message">Message</label>
1119
+ <textarea id="message" name="message" class="form-control" rows="5" placeholder="Tell me about your dental care needs or questions..." required></textarea>
1120
+ </div>
1121
+ <button type="submit" class="btn-submit">
1122
+ <i class="fas fa-paper-plane"></i>
1123
+ Send Message
1124
+ </button>
1125
+ </form>
1126
+ </div>
1127
+ </div>
1128
+ </section>
1129
+
1130
+ <!-- Footer -->
1131
+ <footer class="footer">
1132
+ <div class="container">
1133
+ <p>© 2025 Dr. Ratul Roy. All rights reserved. Transforming smiles, changing lives.</p>
1134
+ <div class="social-links">
1135
+ <a href="#" class="social-link">
1136
+ <i class="fab fa-facebook-f"></i>
1137
+ </a>
1138
+ <a href="#" class="social-link">
1139
+ <i class="fab fa-linkedin-in"></i>
1140
+ </a>
1141
+ <a href="#" class="social-link">
1142
+ <i class="fab fa-twitter"></i>
1143
+ </a>
1144
+ <a href="mailto:[email protected]" class="social-link">
1145
+ <i class="fas fa-envelope"></i>
1146
+ </a>
1147
+ </div>
1148
+ </div>
1149
+ </footer>
1150
+
1151
+ <script>
1152
+ // Navigation functionality
1153
+ const navToggle = document.querySelector('.nav-toggle');
1154
+ const navMenu = document.querySelector('.nav-menu');
1155
+ const navbar = document.querySelector('.navbar');
1156
+
1157
+ navToggle.addEventListener('click', () => {
1158
+ navMenu.classList.toggle('active');
1159
+ });
1160
+
1161
+ // Close menu when clicking on a link
1162
+ document.querySelectorAll('.nav-link').forEach(link => {
1163
+ link.addEventListener('click', () => {
1164
+ navMenu.classList.remove('active');
1165
+ });
1166
+ });
1167
+
1168
+ // Navbar scroll effect
1169
+ window.addEventListener('scroll', () => {
1170
+ if (window.scrollY > 100) {
1171
+ navbar.classList.add('scrolled');
1172
+ } else {
1173
+ navbar.classList.remove('scrolled');
1174
+ }
1175
+ });
1176
+
1177
+ // Smooth scrolling for navigation links
1178
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1179
+ anchor.addEventListener('click', function(e) {
1180
+ e.preventDefault();
1181
+ const target = document.querySelector(this.getAttribute('href'));
1182
+ if (target) {
1183
+ const offsetTop = target.offsetTop - 80;
1184
+ window.scrollTo({
1185
+ top: offsetTop,
1186
+ behavior: 'smooth'
1187
+ });
1188
+ }
1189
+ });
1190
+ });
1191
+
1192
+ // Intersection Observer for scroll animations
1193
+ const animateOnScrollElements = document.querySelectorAll('.animate-on-scroll');
1194
+
1195
+ const observer = new IntersectionObserver((entries) => {
1196
+ entries.forEach(entry => {
1197
+ if (entry.isIntersecting) {
1198
+ entry.target.classList.add('animated');
1199
+ }
1200
+ });
1201
+ }, {
1202
+ threshold: 0.1,
1203
+ rootMargin: '0px 0px -50px 0px'
1204
+ });
1205
+
1206
+ animateOnScrollElements.forEach(element => {
1207
+ observer.observe(element);
1208
+ });
1209
+
1210
+ // Counter animation for stats
1211
+ const statNumbers = document.querySelectorAll('.stat-number');
1212
+
1213
+ const animateCounter = (element, target) => {
1214
+ let current = 0;
1215
+ const increment = target / 100;
1216
+ const timer = setInterval(() => {
1217
+ current += increment;
1218
+ if (current >= target) {
1219
+ current = target;
1220
+ clearInterval(timer);
1221
+ }
1222
+ element.textContent = Math.floor(current) + (target >= 100 ? '+' : '');
1223
+ }, 20);
1224
+ };
1225
+
1226
+ const statsObserver = new IntersectionObserver((entries) => {
1227
+ entries.forEach(entry => {
1228
+ if (entry.isIntersecting) {
1229
+ const target = parseInt(entry.target.textContent);
1230
+ animateCounter(entry.target, target);
1231
+ statsObserver.unobserve(entry.target);
1232
+ }
1233
+ });
1234
+ });
1235
+
1236
+ statNumbers.forEach(stat => {
1237
+ statsObserver.observe(stat);
1238
+ });
1239
+
1240
+ // Form submission handling
1241
+ const contactForm = document.querySelector('.contact-form');
1242
+
1243
+ contactForm.addEventListener('submit', function(e) {
1244
+ const submitBtn = this.querySelector('.btn-submit');
1245
+ const originalText = submitBtn.innerHTML;
1246
+
1247
+ submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
1248
+ submitBtn.style.opacity = '0.7';
1249
+
1250
+ // Reset button after 2 seconds (Formspree will handle the actual submission)
1251
+ setTimeout(() => {
1252
+ submitBtn.innerHTML = '<i class="fas fa-check"></i> Message Sent!';
1253
+ setTimeout(() => {
1254
+ submitBtn.innerHTML = originalText;
1255
+ submitBtn.style.opacity = '1';
1256
+ }, 2000);
1257
+ }, 1000);
1258
+ });
1259
+
1260
+ // Floating animation for hero elements
1261
+ const floatingElements = document.querySelectorAll('.floating-element');
1262
+
1263
+ floatingElements.forEach((element, index) => {
1264
+ element.style.animationDelay = `${index * 2}s`;
1265
+ });
1266
+
1267
+ // Parallax effect for hero section
1268
+ window.addEventListener('scroll', () => {
1269
+ const scrolled = window.pageYOffset;
1270
+ const heroContent = document.querySelector('.hero-content');
1271
+ const heroImage = document.querySelector('.hero-image');
1272
+
1273
+ if (heroContent && heroImage) {
1274
+ heroContent.style.transform = `translateY(${scrolled * 0.5}px)`;
1275
+ heroImage.style.transform = `translateY(${scrolled * 0.3}px)`;
1276
+ }
1277
+ });
1278
+
1279
+ // Add loading animation
1280
+ window.addEventListener('load', () => {
1281
+ document.body.classList.add('loaded');
1282
+ });
1283
+
1284
+ // Add cursor glow effect
1285
+ const cursor = document.createElement('div');
1286
+ cursor.className = 'cursor-glow';
1287
+ cursor.style.cssText = `
1288
+ position: fixed;
1289
+ width: 20px;
1290
+ height: 20px;
1291
+ background: radial-gradient(circle, rgba(102, 126, 234, 0.3) 0%, transparent 70%);
1292
+ border-radius: 50%;
1293
+ pointer-events: none;
1294
+ z-index: 9999;
1295
+ transition: transform 0.1s ease;
1296
+ `;
1297
+ document.body.appendChild(cursor);
1298
+
1299
+ document.addEventListener('mousemove', (e) => {
1300
+ cursor.style.left = e.clientX - 10 + 'px';
1301
+ cursor.style.top = e.clientY - 10 + 'px';
1302
+ });
1303
+
1304
+ // Enhanced hover effects
1305
+ document.querySelectorAll('.skill-card, .timeline-card, .stat-card').forEach(card => {
1306
+ card.addEventListener('mouseenter', function() {
1307
+ this.style.transform = 'translateY(-10px) scale(1.02)';
1308
+ });
1309
+
1310
+ card.addEventListener('mouseleave', function() {
1311
+ this.style.transform = 'translateY(0) scale(1)';
1312
+ });
1313
+ });
1314
+ </script>
1315
+ </body>
1316
+ </html>