Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
503 lines (460 loc) · 28.3 KB
/
Copy pathindex.html
File metadata and controls
503 lines (460 loc) · 28.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enock Malcom | Digital Architect</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Outfit', 'sans-serif'],
},
colors: {
brand: {
50: '#f0f9ff',
100: '#e0f2fe',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
900: '#0c4a6e',
},
dark: {
900: '#050505',
800: '#0a0a0a',
700: '#121212',
600: '#1c1c1c'
}
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
}
}
}
}
</script>
<style>
body {
background-color: #050505;
color: #ffffff;
overflow-x: hidden;
}
.glass-nav {
background: rgba(5, 5, 5, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.glass-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
backdrop-filter: blur(5px);
transition: all 0.4s ease;
}
.glass-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.06);
border-color: rgba(56, 189, 248, 0.3);
box-shadow: 0 10px 40px -10px rgba(14, 165, 233, 0.2);
}
.text-gradient {
background: linear-gradient(to right, #38bdf8, #818cf8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: #38bdf8;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.hero-glow {
position: absolute;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
pointer-events: none;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
.floating {
animation: float 6s ease-in-out infinite;
}
input, textarea {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.1);
color: white;
transition: all 0.3s;
}
input:focus, textarea:focus {
outline: none;
border-color: #38bdf8;
background: rgba(255,255,255,0.05);
}
</style>
</head>
<body class="antialiased selection:bg-brand-500 selection:text-white">
<nav class="fixed w-full z-50 glass-nav">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex-shrink-0 cursor-pointer" onclick="window.scrollTo(0,0)">
<span class="text-2xl font-bold tracking-tighter">EM<span class="text-brand-400">.</span></span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a href="#home" class="nav-link text-sm font-medium hover:text-white text-gray-300">Home</a>
<a href="#projects" class="nav-link text-sm font-medium hover:text-white text-gray-300">Work</a>
<a href="#skills" class="nav-link text-sm font-medium hover:text-white text-gray-300">Skills</a>
<a href="#about" class="nav-link text-sm font-medium hover:text-white text-gray-300">About</a>
<a href="#contact" class="px-5 py-2.5 rounded-full bg-white text-black text-sm font-bold hover:bg-brand-400 hover:text-white transition-all duration-300">Let's Talk</a>
</div>
</div>
<div class="md:hidden">
<button id="mobile-menu-btn" class="text-gray-300 hover:text-white focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="md:hidden hidden bg-black border-b border-gray-800 absolute w-full">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#home" class="mobile-link block px-3 py-2 text-base font-medium text-gray-300 hover:text-white hover:bg-gray-900 rounded-md">Home</a>
<a href="#projects" class="mobile-link block px-3 py-2 text-base font-medium text-gray-300 hover:text-white hover:bg-gray-900 rounded-md">Work</a>
<a href="#skills" class="mobile-link block px-3 py-2 text-base font-medium text-gray-300 hover:text-white hover:bg-gray-900 rounded-md">Skills</a>
<a href="#about" class="mobile-link block px-3 py-2 text-base font-medium text-gray-300 hover:text-white hover:bg-gray-900 rounded-md">About</a>
<a href="#contact" class="mobile-link block px-3 py-2 text-base font-medium text-brand-400">Contact Me</a>
</div>
</div>
</nav>
<section id="home" class="min-h-screen flex items-center justify-center relative pt-20 overflow-hidden">
<div class="hero-glow"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="reveal active z-10">
<div class="inline-block px-4 py-1.5 rounded-full border border-gray-800 bg-gray-900/50 backdrop-blur-sm mb-6">
<span class="text-brand-400 text-sm font-semibold tracking-wide uppercase">Available for Hire</span>
</div>
<h1 class="text-5xl md:text-7xl lg:text-8xl font-bold leading-tight mb-6">
I build <br>
<span class="text-gradient">digital grandeur.</span>
</h1>
<p class="text-gray-400 text-lg md:text-xl max-w-lg mb-10 leading-relaxed">
Hi, I'm <span class="text-white font-semibold">Enock Malcom</span>. A creative developer focused on crafting immersive, scalable, and high-performance web experiences.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#projects" class="px-8 py-4 rounded-full bg-brand-500 text-white font-semibold hover:bg-brand-600 transition-colors text-center shadow-[0_0_20px_rgba(14,165,233,0.3)]">
View My Work
</a>
<a href="#contact" class="px-8 py-4 rounded-full border border-gray-700 hover:border-white hover:bg-white hover:text-black transition-all text-center">
Contact Me
</a>
</div>
</div>
<div class="relative z-0 hidden lg:block reveal active" style="transition-delay: 200ms;">
<div class="relative w-full aspect-square max-w-lg mx-auto">
<div class="absolute inset-0 bg-gradient-to-tr from-brand-500 to-purple-500 rounded-full blur-[100px] opacity-20"></div>
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1000&auto=format&fit=crop"
alt="Enock Malcom"
class="floating relative w-full h-full object-cover rounded-[2rem] shadow-2xl border border-gray-800 grayscale hover:grayscale-0 transition-all duration-500">
<div class="absolute -bottom-10 -left-10 glass-card p-6 rounded-2xl floating" style="animation-delay: 1s;">
<div class="flex items-center gap-4">
<div class="h-12 w-12 rounded-full bg-brand-500 flex items-center justify-center text-xl">
💻
</div>
<div>
<p class="text-xs text-gray-400">Experience</p>
<p class="text-xl font-bold">5+ Years</p>
</div>
</div>
</div>
<div class="absolute top-10 -right-5 glass-card p-6 rounded-2xl floating" style="animation-delay: 2s;">
<div class="flex items-center gap-4">
<div class="h-12 w-12 rounded-full bg-purple-500 flex items-center justify-center text-xl">
🚀
</div>
<div>
<p class="text-xs text-gray-400">Projects</p>
<p class="text-xl font-bold">40+ Done</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-10 border-y border-gray-900 bg-dark-900">
<div class="max-w-7xl mx-auto px-4 overflow-hidden">
<div class="flex justify-between items-center opacity-40 grayscale hover:grayscale-0 transition-all duration-500 flex-wrap gap-8 md:gap-0">
<i class="fab fa-react text-4xl hover:text-brand-400"></i>
<i class="fab fa-aws text-4xl hover:text-brand-400"></i>
<i class="fab fa-google text-4xl hover:text-brand-400"></i>
<i class="fab fa-apple text-4xl hover:text-brand-400"></i>
<i class="fab fa-stripe text-4xl hover:text-brand-400"></i>
</div>
</div>
</section>
<section id="projects" class="py-32 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="mb-20 reveal">
<h2 class="text-4xl md:text-5xl font-bold mb-6">Selected <span class="text-gradient">Projects</span></h2>
<p class="text-gray-400 max-w-2xl text-lg">A showcase of technical elegance. Full-stack applications built with modern architectures.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="glass-card rounded-2xl overflow-hidden group reveal">
<div class="h-64 overflow-hidden relative">
<img src="https://images.unsplash.com/photo-1555421689-492633762719?q=80&w=800&auto=format&fit=crop" alt="E-Commerce" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<a href="#" class="h-14 w-14 bg-white rounded-full flex items-center justify-center hover:scale-110 transition-transform">
<i class="fas fa-arrow-right text-black text-xl"></i>
</a>
</div>
</div>
<div class="p-8">
<h3 class="text-2xl font-bold mb-2 text-white">Neon Commerce</h3>
<p class="text-gray-400 mb-4 text-sm leading-relaxed">A headless Shopify implementation with 3D product rendering.</p>
<div class="flex gap-2 flex-wrap">
<span class="px-3 py-1 text-xs rounded-full bg-gray-800 text-gray-300 border border-gray-700">Next.js</span>
<span class="px-3 py-1 text-xs rounded-full bg-gray-800 text-gray-300 border border-gray-700">WebGL</span>
<span class="px-3 py-1 text-xs rounded-full bg-gray-800 text-gray-300 border border-gray-700">Stripe</span>
</div>
</div>
</div>
<div class="glass-card rounded-2xl overflow-hidden group reveal" style="transition-delay: 100ms;">
<div class="h-64 overflow-hidden relative">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=800&auto=format&fit=crop" alt="Fintech Dashboard" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<a href="#" class="h-14 w-14 bg-white rounded-full flex items-center justify-center hover:scale-110 transition-transform">
<i class="fas fa-arrow-right text-black text-xl"></i>
</a>
</div>
</div>
<div class="p-8">
<h3 class="text-2xl font-bold mb-2 text-white">Vault Dashboard</h3>
<p class="text-gray-400 mb-4 text-sm leading-relaxed">Real-time cryptocurrency analytics platform with AI forecasting.</p>
<div class="flex gap-2 flex-wrap">
<span class="px-3 py-1 text-xs rounded-full bg-gray-800 text-gray-300 border border-gray-700">React</span>
<span class="px-3 py-1 text-xs rounded-full bg-gray-800 text-gray-300 border border-gray-700">D3.js</span>
<span class="px-3 py-1 text-xs rounded-full bg-gray-800 text-gray-300 border border-gray-700">Python</span>
</div>
</div>
</div>
<div class="glass-card rounded-2xl overflow-hidden group reveal" style="transition-delay: 200ms;">
<div class="h-64 overflow-hidden relative">
<img src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?q=80&w=800&auto=format&fit=crop" alt="Travel App" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<a href="#" class="h-14 w-14 bg-white rounded-full flex items-center justify-center hover:scale-110 transition-transform">
<i class="fas fa-arrow-right text-black text-xl"></i>
</a>
</div>
</div>
<div class="p-8">
<h3 class="text-2xl font-bold mb-2 text-white">Wanderlust</h3>
<p class="text-gray-400 mb-4 text-sm leading-relaxed">AI-powered travel itinerary generator for global nomads.</p>
<div class="flex gap-2 flex-wrap">
<span class="px-3 py-1 text-xs rounded-full bg-gray-800 text-gray-300 border border-gray-700">Vue</span>
<span class="px-3 py-1 text-xs rounded-full bg-gray-800 text-gray-300 border border-gray-700">Node</span>
<span class="px-3 py-1 text-xs rounded-full bg-gray-800 text-gray-300 border border-gray-700">OpenAI</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="skills" class="py-20 bg-dark-800 relative overflow-hidden">
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500 rounded-full mix-blend-multiply filter blur-[128px] opacity-10"></div>
<div class="absolute bottom-0 left-0 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-[128px] opacity-10"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="flex flex-col md:flex-row gap-16">
<div class="md:w-1/3 reveal">
<h2 class="text-4xl font-bold mb-6">My <span class="text-gradient">Arsenal</span></h2>
<p class="text-gray-400 mb-8 text-lg">I don't just write code; I design systems. My stack is optimized for speed, scalability, and maintainability.</p>
<a href="#projects" class="text-brand-400 hover:text-white font-medium inline-flex items-center gap-2 group">
Check repositories <i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i>
</a>
</div>
<div class="md:w-2/3 grid grid-cols-2 sm:grid-cols-4 gap-6">
<div class="glass-card p-6 rounded-xl flex flex-col items-center justify-center hover:bg-brand-900/20 transition-colors reveal">
<i class="fab fa-js text-4xl text-yellow-400 mb-3"></i>
<span class="font-semibold">JavaScript</span>
</div>
<div class="glass-card p-6 rounded-xl flex flex-col items-center justify-center hover:bg-brand-900/20 transition-colors reveal" style="transition-delay: 50ms">
<i class="fab fa-react text-4xl text-blue-400 mb-3"></i>
<span class="font-semibold">React</span>
</div>
<div class="glass-card p-6 rounded-xl flex flex-col items-center justify-center hover:bg-brand-900/20 transition-colors reveal" style="transition-delay: 100ms">
<i class="fas fa-database text-4xl text-green-400 mb-3"></i>
<span class="font-semibold">Node.js</span>
</div>
<div class="glass-card p-6 rounded-xl flex flex-col items-center justify-center hover:bg-brand-900/20 transition-colors reveal" style="transition-delay: 150ms">
<i class="fab fa-python text-4xl text-blue-300 mb-3"></i>
<span class="font-semibold">Python</span>
</div>
<div class="glass-card p-6 rounded-xl flex flex-col items-center justify-center hover:bg-brand-900/20 transition-colors reveal" style="transition-delay: 200ms">
<i class="fab fa-html5 text-4xl text-orange-500 mb-3"></i>
<span class="font-semibold">HTML5</span>
</div>
<div class="glass-card p-6 rounded-xl flex flex-col items-center justify-center hover:bg-brand-900/20 transition-colors reveal" style="transition-delay: 250ms">
<i class="fab fa-css3-alt text-4xl text-blue-500 mb-3"></i>
<span class="font-semibold">CSS3</span>
</div>
<div class="glass-card p-6 rounded-xl flex flex-col items-center justify-center hover:bg-brand-900/20 transition-colors reveal" style="transition-delay: 300ms">
<i class="fab fa-git-alt text-4xl text-red-500 mb-3"></i>
<span class="font-semibold">Git</span>
</div>
<div class="glass-card p-6 rounded-xl flex flex-col items-center justify-center hover:bg-brand-900/20 transition-colors reveal" style="transition-delay: 350ms">
<i class="fab fa-docker text-4xl text-blue-600 mb-3"></i>
<span class="font-semibold">Docker</span>
</div>
</div>
</div>
</div>
</section>
<section id="about" class="py-32">
<div class="max-w-4xl mx-auto px-4 text-center reveal">
<h2 class="text-4xl font-bold mb-8">About <span class="text-gradient">Enock</span></h2>
<div class="glass-card p-10 rounded-3xl relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-brand-500 to-purple-500"></div>
<p class="text-xl md:text-2xl text-gray-300 leading-relaxed font-light">
"I believe in the intersection of logic and creativity. With a background in software engineering and a passion for UI/UX, I bridge the gap between complex backend systems and intuitive frontend interfaces. I don't just build websites; I build solutions that drive growth."
</p>
<div class="mt-8 pt-8 border-t border-gray-800 flex justify-center gap-10">
<div>
<span class="block text-3xl font-bold text-white">50+</span>
<span class="text-sm text-gray-500">Clients</span>
</div>
<div>
<span class="block text-3xl font-bold text-white">100%</span>
<span class="text-sm text-gray-500">Success Rate</span>
</div>
<div>
<span class="block text-3xl font-bold text-white">24/7</span>
<span class="text-sm text-gray-500">Support</span>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="py-32 relative overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
<div class="reveal">
<h2 class="text-5xl font-bold mb-6">Let's start a <br><span class="text-gradient">Project together.</span></h2>
<p class="text-gray-400 text-lg mb-10">Have an idea? I am ready to help you build it. Reach out for collaborations or just a friendly hello.</p>
<div class="space-y-6">
<div class="flex items-center gap-4">
<div class="h-12 w-12 rounded-full bg-dark-800 border border-gray-800 flex items-center justify-center">
<i class="fas fa-envelope text-brand-400"></i>
</div>
<div>
<p class="text-sm text-gray-500">Mail me at</p>
<p class="text-lg font-medium">hello@enockmalcom.dev</p>
</div>
</div>
<div class="flex items-center gap-4">
<div class="h-12 w-12 rounded-full bg-dark-800 border border-gray-800 flex items-center justify-center">
<i class="fas fa-phone text-brand-400"></i>
</div>
<div>
<p class="text-sm text-gray-500">Call me at</p>
<p class="text-lg font-medium">+1 (555) 000-0000</p>
</div>
</div>
<div class="flex items-center gap-4 pt-4">
<a href="#" class="h-10 w-10 rounded-full border border-gray-700 flex items-center justify-center hover:bg-white hover:text-black transition-all"><i class="fab fa-github"></i></a>
<a href="#" class="h-10 w-10 rounded-full border border-gray-700 flex items-center justify-center hover:bg-blue-600 hover:border-blue-600 transition-all"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="h-10 w-10 rounded-full border border-gray-700 flex items-center justify-center hover:bg-sky-400 hover:border-sky-400 transition-all"><i class="fab fa-twitter"></i></a>
<a href="#" class="h-10 w-10 rounded-full border border-gray-700 flex items-center justify-center hover:bg-pink-500 hover:border-pink-500 transition-all"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="glass-card p-8 md:p-10 rounded-3xl reveal" style="transition-delay: 200ms;">
<form onsubmit="event.preventDefault(); alert('Message sent successfully!');">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
<div class="flex flex-col gap-2">
<label class="text-sm text-gray-400">Name</label>
<input type="text" class="w-full px-4 py-3 rounded-lg text-sm" placeholder="John Doe">
</div>
<div class="flex flex-col gap-2">
<label class="text-sm text-gray-400">Email</label>
<input type="email" class="w-full px-4 py-3 rounded-lg text-sm" placeholder="john@example.com">
</div>
</div>
<div class="flex flex-col gap-2 mb-6">
<label class="text-sm text-gray-400">Subject</label>
<input type="text" class="w-full px-4 py-3 rounded-lg text-sm" placeholder="Project Inquiry">
</div>
<div class="flex flex-col gap-2 mb-8">
<label class="text-sm text-gray-400">Message</label>
<textarea rows="4" class="w-full px-4 py-3 rounded-lg text-sm" placeholder="Tell me about your project..."></textarea>
</div>
<button class="w-full py-4 rounded-lg bg-gradient-to-r from-brand-500 to-brand-600 font-bold hover:shadow-lg hover:shadow-brand-500/30 transition-all transform hover:-translate-y-1">
Send Message
</button>
</form>
</div>
</div>
</div>
</section>
<footer class="py-8 border-t border-gray-900 bg-black text-center">
<p class="text-gray-500 text-sm">© <span id="year"></span> Enock Malcom. All rights reserved.</p>
</footer>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
const menuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
const mobileLinks = document.querySelectorAll('.mobile-link');
menuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
mobileLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
const revealElements = document.querySelectorAll('.reveal');
const revealOnScroll = () => {
const windowHeight = window.innerHeight;
const elementVisible = 100;
revealElements.forEach((reveal) => {
const elementTop = reveal.getBoundingClientRect().top;
if (elementTop < windowHeight - elementVisible) {
reveal.classList.add('active');
}
});
};
window.addEventListener('scroll', revealOnScroll);
revealOnScroll();
</script>
</body>
</html>