-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
487 lines (451 loc) · 32.4 KB
/
index.html
File metadata and controls
487 lines (451 loc) · 32.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@300;400;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<title>Md. Al Mamun | Portfolio</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<link rel="stylesheet" href="styles/more-btn.css" />
<link rel="stylesheet" href="styles/index.css" />
<link rel="stylesheet" href="styles/animation.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body class="bg-gradient-to-br from-gray-900 via-purple-900 to-indigo-900 text-white font-sans antialiased">
<div id="app">
<!-- Animated background elements -->
<div class="fixed inset-0 z-0 overflow-hidden">
<div class="absolute w-96 h-96 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full opacity-5 -top-48 -left-48 pulse-animation"></div>
<div class="absolute w-80 h-80 bg-gradient-to-r from-blue-400 to-cyan-400 rounded-full opacity-5 top-1/4 right-0 bounce-animation"></div>
<div class="absolute w-64 h-64 bg-gradient-to-r from-green-400 to-blue-400 rounded-full opacity-5 bottom-0 left-1/4 ping-animation"></div>
<div class="absolute w-72 h-72 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full opacity-5 bottom-1/4 right-1/4 pulse-animation"></div>
</div>
<!-- Header Section -->
<header class="relative text-center h-screen flex items-center justify-center bg-cover bg-center z-10"
:style="{ backgroundImage: `url('images/hero-banner/${currBanner}.jpg')` }"
>
<!-- Navbar -->
<nav class="absolute top-0 left-0 w-full flex items-center justify-between py-6 px-6 md:px-8 text-white bg-black bg-opacity-20 backdrop-blur-sm border-b border-white border-opacity-10 z-20">
<div class="text-xl md:text-3xl font-black bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
MyPortfolio
</div>
<ul class="flex space-x-6 text-sm md:text-lg font-medium">
<li><a href="#about" class="hover:text-purple-300 transition-colors duration-300 hover:underline">About</a></li>
<li><a href="#projects" class="hover:text-purple-300 transition-colors duration-300 hover:underline">Projects</a></li>
<li><a href="#contact" class="hover:text-purple-300 transition-colors duration-300 hover:underline">Contact</a></li>
</ul>
</nav>
<!-- Enhanced Overlay -->
<div class="absolute inset-0 bg-gradient-to-b from-black via-purple-900 to-black opacity-70"></div>
<!-- Content -->
<div class="relative text-white text-md md:text-2xl font-bold p-6 z-10 max-w-4xl mx-auto">
<div class="relative mb-8">
<img src="images/profile.jpg" alt="Profile Picture" class="relative mx-auto w-40 h-40 md:w-48 md:h-48 rounded-full border-4 border-gradient-to-r from-purple-400 to-pink-400 shadow-2xl">
</div>
<h1 class="text-4xl md:text-6xl font-black mb-4 animated-gradient">
Md. Al Mamun
</h1>
<p class="text-lg md:text-2xl mt-4 text-gray-200 font-medium">
Passionate Developer from Bangladesh
<span class="inline-block bounce-animation text-2xl">🚀</span>
</p>
<div class="mt-6 flex flex-wrap justify-center gap-4">
<a href="https://github.com/mdalmamunDev" target="_blank" class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full hover:from-purple-600 hover:to-pink-600 transition-all duration-300 transform hover:scale-105 hover:shadow-xl">
GitHub
</a>
<a href="https://www.linkedin.com/in/mdalmamunDev/" target="_blank" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full hover:from-blue-600 hover:to-cyan-600 transition-all duration-300 transform hover:scale-105 hover:shadow-xl">
LinkedIn
</a>
<a href="https://leetcode.com/u/madalmamun53/" target="_blank" class="px-6 py-3 bg-gradient-to-r from-green-500 to-teal-500 rounded-full hover:from-green-600 hover:to-teal-600 transition-all duration-300 transform hover:scale-105 hover:shadow-xl">
LeetCode
</a>
</div>
<div class="glass mt-8 p-6">
<p class="text-lg md:text-xl font-mono">{{ heroText }}</p>
</div>
</div>
</header>
<!-- About Me Section -->
<!-- <section id="about" class="relative max-w-6xl mx-auto py-20 px-6 z-10">
<div class="flex flex-col lg:flex-row items-center space-y-8 lg:space-y-0 lg:space-x-12">
<div class="relative">
<div class="absolute -inset-6 bg-gradient-to-r from-purple-400 to-pink-400 rounded-3xl opacity-20 blur-xl"></div>
<img src="images/about-me.gif" alt="Md. Al Mamun" class="relative w-64 h-64 lg:w-80 lg:h-80 rounded-3xl border-4 border-gradient-to-r from-purple-400 to-pink-400 shadow-2xl transform hover:scale-105 transition-transform duration-300">
</div>
<div class="flex-1 text-center lg:text-left bg-gray-900 bg-opacity-40 backdrop-blur-lg rounded-3xl p-8 border border-white border-opacity-10 shadow-2xl">
<h2 class="text-4xl md:text-5xl font-black bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent mb-6">
About Me
</h2>
<p class="text-gray-300 text-lg leading-relaxed mb-4">
Hello, I'm <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 font-bold">Md. Al Mamun</span>, born on August 10, 2002, in Porsha, Naogaon.
I am a passionate and motivated developer skilled in web and mobile development. With expertise in
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400 font-bold">MERN Stack</span>,
<span class="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-teal-400 font-bold">Laravel</span> and
<span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-400 font-bold">Vue.js</span>
for backend and frontend solutions, as well as
<span class="text-transparent bg-clip-text bg-gradient-to-r from-red-400 to-pink-400 font-bold">Android Studio</span>
for mobile applications, I focus on creating innovative and efficient applications.
</p>
<p class="text-gray-300 text-lg leading-relaxed mb-6">
You can also checkout my <a href="assets/Resume - Md Al Mamun.pdf" target="_blank" class="text-purple-400 hover:text-purple-300 underline font-semibold">Resume (CV)</a> for more details about my skills and experiences.
</p>
<div class="flex flex-wrap justify-center lg:justify-start gap-4">
<a href="https://github.com/mdalmamunDev" target="_blank" class="px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full hover:from-purple-600 hover:to-pink-600 transition-all duration-300 transform hover:scale-105">
GitHub
</a>
<a href="https://www.linkedin.com/in/mdalmamunDev/" target="_blank" class="px-4 py-2 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full hover:from-blue-600 hover:to-cyan-600 transition-all duration-300 transform hover:scale-105">
LinkedIn
</a>
<a href="https://leetcode.com/u/madalmamun53/" target="_blank" class="px-4 py-2 bg-gradient-to-r from-green-500 to-teal-500 rounded-full hover:from-green-600 hover:to-teal-600 transition-all duration-300 transform hover:scale-105">
LeetCode
</a>
</div>
</div>
</div>
</section> -->
<section id="about" ref="aboutSection" class="about-section">
<div
v-for="(section, index) in sections"
:key="index"
class="about-item w-full h-screen flex flex-col md:flex-row"
>
<!-- Left - Image -->
<div class="about-left w-full md:w-1/2 h-1/2 md:h-full relative overflow-hidden bg-black">
<div class="number-badge">{{ String(index + 1).padStart(2, '0') }}</div>
<img
:src="section.image"
:alt="section.title"
class="w-full h-full object-cover"
/>
<div class="image-overlay"></div>
</div>
<!-- Right - Content -->
<div
:class="`about-right gradient-bg w-full md:w-1/2 h-1/2 md:h-full flex items-center justify-center bg-gradient-to-br ${section.gradient} p-6 sm:p-8 md:p-12 lg:p-16 xl:p-24`"
>
<div class="max-w-2xl relative z-10">
<div class="mb-8 md:mb-12">
<span class="decorative-dot"></span>
<span class="text-white text-opacity-70 text-sm md:text-base uppercase tracking-widest font-medium" style="font-family: 'Space Grotesk', sans-serif;">
{{ section.category }}
</span>
</div>
<h2 class="title-main text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl mb-6 sm:mb-8 md:mb-10">
{{ section.title }}
</h2>
<div class="glass-effect" v-html="section.description"></div>
<div class="mt-8 md:mt-12 flex items-center gap-4">
<div class="w-16 h-0.5 bg-white opacity-30"></div>
<span class="text-white text-opacity-50 text-sm" style="font-family: 'Inter', sans-serif;">
{{ section.stat }}
</span>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="relative bg-black bg-opacity-30 backdrop-blur-sm py-20 z-10">
<div class="max-w-7xl mx-auto px-6">
<h2 class="text-4xl md:text-5xl font-black text-center bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent mb-12">
Featured Projects
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
<div v-for="project in projects" :key="project.key" class="group glass rounded-2xl shadow-2xl overflow-hidden border border-white border-opacity-10 hover:border-purple-400 hover:border-opacity-50 transition-all duration-300 transform hover:scale-105">
<div class="relative overflow-hidden">
<img :src="'projects/'+ (project.image ? `${project.key}/${project.image}` : 'def.png')" alt="Project Image" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-white mb-3 group-hover:text-purple-300 transition-colors">{{ project.name }}</h3>
<p class="text-gray-300 mb-2 text-sm leading-relaxed">{{ project.description }}</p>
<p class="text-gray-400 text-xs mb-4">{{ project.duration }}</p>
<div class="flex flex-wrap gap-3">
<a :href="project.repo || '#'" target="_blank" class="px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 transform hover:scale-105"
:class="{
'bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white': project.repo,
'bg-gray-600 text-gray-400 cursor-not-allowed': !project.repo
}"
>
GitHub
</a>
<template v-if="project.link">
<a :href="project.link" class="px-4 py-2 bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white rounded-full text-sm font-medium transition-all duration-300 transform hover:scale-105">
{{ project.type === TYPE_ANDROID ? 'Get APK' : 'View' }}
</a>
</template>
<template v-if="project.about">
<a :href="'project.html?key='+project.key" class="px-4 py-2 bg-gradient-to-r from-green-500 to-teal-500 hover:from-green-600 hover:to-teal-600 text-white rounded-full text-sm font-medium transition-all duration-300 transform hover:scale-105">
More
</a>
</template>
</div>
</div>
</div>
</div>
</div>
<div class="more-btn mt-12">
<div class="btn"><a href="https://github.com/mdalmamunDev?tab=repositories" target="_blank">Show More</a></div>
</div>
</section>
<!-- Information Section -->
<section class="relative max-w-7xl mx-auto py-20 px-6 z-10">
<h2 class="text-4xl md:text-5xl font-black text-center bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent mb-12">
My Journey
</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Education Column -->
<div class="bg-gray-900 bg-opacity-60 backdrop-blur-lg glass rounded-3xl p-8 shadow-2xl border border-white border-opacity-10 hover:border-purple-400 hover:border-opacity-50 transition-all duration-300 transform hover:scale-105">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-graduation-cap text-white text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-white">Education</h3>
</div>
<div class="space-y-6">
<div class="border-l-4 border-purple-400 pl-4">
<p class="text-sm text-purple-400 font-semibold">2020 - 2025</p>
<h4 class="font-bold text-white text-lg">Computer Science & Tech.(CST)</h4>
<p class="text-gray-300 font-medium">TMSS Institute of Science and ICT</p>
<p class="text-gray-400 text-sm mt-2">Gained practical knowledge in software development, programming languages, and system analysis.</p>
</div>
<div class="border-l-4 border-blue-400 pl-4">
<p class="text-sm text-blue-400 font-semibold">2018 - 2020</p>
<h4 class="font-bold text-white text-lg">Secondary School Certificate(SSC)</h4>
<p class="text-gray-300 font-medium">Shariyala Islamia Dakhil Madrasha</p>
<p class="text-gray-400 text-sm mt-2">Achieved comprehensive education with a focus on mathematics and science.</p>
</div>
</div>
</div>
<!-- Experiences Column -->
<div class="bg-gray-900 bg-opacity-60 backdrop-blur-lg glass rounded-3xl p-8 shadow-2xl border border-white border-opacity-10 hover:border-blue-400 hover:border-opacity-50 transition-all duration-300 transform hover:scale-105">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-briefcase text-white text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-white">Experience</h3>
</div>
<div class="space-y-6">
<div class="border-l-4 border-yellow-400 pl-4">
<p class="text-sm text-green-400 font-semibold">04/2025 - Present</p>
<h4 class="font-bold text-white text-lg">Betopia Group</h4>
<p class="text-gray-400 text-sm mt-2"> During my time there, I gained extensive experience in areas such as system design, improving user experience (UX), and developing scalable solutions.</p>
</div>
<div class="border-l-4 border-green-400 pl-4">
<p class="text-sm text-yellow-400 font-semibold">06/2024 - 04/2025</p>
<h4 class="font-bold text-white text-lg">Intern on TMSS ICT</h4>
<p class="text-gray-400 text-sm mt-2">Completed an industry attachment at TMSS ICT, contributing to design team projects and innovative solutions.</p>
</div>
</div>
</div>
<!-- Interests Column -->
<div class="bg-gray-900 bg-opacity-60 backdrop-blur-lg glass rounded-3xl p-8 shadow-2xl border border-white border-opacity-10 hover:border-green-400 hover:border-opacity-50 transition-all duration-300 transform hover:scale-105">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-gradient-to-r from-green-500 to-teal-500 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-heart text-white text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-white">Interests</h3>
</div>
<div class="space-y-6">
<div class="border-l-4 border-red-400 pl-4">
<p class="text-sm text-red-400 font-semibold">Coding Challenges</p>
<h4 class="font-bold text-white text-lg">Problem-Solving</h4>
<p class="text-gray-400 text-sm mt-2">Actively participating in coding challenges on platforms like LeetCode and HackerRank.</p>
</div>
<div class="border-l-4 border-purple-400 pl-4">
<p class="text-sm text-purple-400 font-semibold">New Technologies</p>
<h4 class="font-bold text-white text-lg">Exploration</h4>
<p class="text-gray-400 text-sm mt-2">Consistently staying updated with the latest trends in web and mobile development.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Technologies Section -->
<section class="relative bg-black bg-opacity-30 backdrop-blur-sm py-20 z-10">
<div class="max-w-5xl mx-auto text-center px-6">
<h2 class="text-4xl md:text-5xl font-black bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent mb-12">
Technologies & Tools
</h2>
<div class="flex flex-wrap justify-center gap-4">
<span v-for="skill in skills" :key="skill" class="px-6 py-3 bg-gradient-to-r from-gray-800 to-gray-700 backdrop-blur-sm rounded-full shadow-xl border border-white border-opacity-20 hover:border-purple-400 hover:border-opacity-50 transition-all duration-300 transform hover:scale-110 hover:shadow-2xl font-medium">
{{ skill }}
</span>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="relative pt-20 pb-12 z-10">
<div class="max-w-5xl mx-auto text-center px-6">
<h2 class="text-4xl md:text-5xl font-black bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent mb-6">
Get in Touch
</h2>
<p class="text-xl text-gray-300 mb-8">Feel free to reach out through social media!</p>
<div class="flex justify-center space-x-6">
<a href="mailto:mamun.dev.pro@gmail.com" title="Email" class="group w-16 h-16 bg-gradient-to-r from-red-500 to-pink-500 rounded-full flex items-center justify-center hover:from-red-600 hover:to-pink-600 transition-all duration-300 transform hover:scale-110 hover:shadow-xl">
<i class="fa-solid fa-envelope text-2xl text-white group-hover:scale-110 transition-transform"></i>
</a>
<a href="https://github.com/mdalmamunDev" title="Github" target="_blank" class="group w-16 h-16 bg-gradient-to-r from-gray-700 to-gray-600 rounded-full flex items-center justify-center hover:from-gray-600 hover:to-gray-500 transition-all duration-300 transform hover:scale-110 hover:shadow-xl">
<i class="fab fa-github text-2xl text-white group-hover:scale-110 transition-transform"></i>
</a>
<a href="https://www.linkedin.com/in/mdalmamunDev/" title="Linkedin" target="_blank" class="group w-16 h-16 bg-gradient-to-r from-blue-600 to-blue-500 rounded-full flex items-center justify-center hover:from-blue-500 hover:to-blue-400 transition-all duration-300 transform hover:scale-110 hover:shadow-xl">
<i class="fab fa-linkedin text-2xl text-white group-hover:scale-110 transition-transform"></i>
</a>
<a href="https://leetcode.com/u/madalmamun53/" title="LeetCode" target="_blank" class="group w-16 h-16 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-full flex items-center justify-center hover:from-orange-400 hover:to-yellow-400 transition-all duration-300 transform hover:scale-110 hover:shadow-xl">
<i class="fab fa-leanpub text-2xl text-white group-hover:scale-110 transition-transform"></i>
</a>
<a href="https://www.facebook.com/mdalmamun.dev" title="Facebook" target="_blank" class="group w-16 h-16 bg-gradient-to-r from-blue-600 to-blue-700 rounded-full flex items-center justify-center hover:from-blue-500 hover:to-blue-600 transition-all duration-300 transform hover:scale-110 hover:shadow-xl">
<i class="fab fa-facebook text-2xl text-white group-hover:scale-110 transition-transform"></i>
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="relative text-center py-8 border-t border-white border-opacity-10 z-10">
<p class="text-gray-400 text-lg">© {{ new Date().getFullYear() }}
<span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 font-bold">Md. Al Mamun</span>
</p>
</footer>
</div>
<script src="scripts/projects.js"></script>
<script>
new Vue({
el: '#app',
data: {
heroText: '',
currBanner: 1,
totalBanners: 11,
bannerDelay: 10000,
skills: [
"MERN Stack", "Laravel", "Vue.js", "Android Studio", "Java", "JavaScript", "PHP", "Python", "DSA", "Git", "MySQL", "React", "MongoDB", "Express", "Node.js"
],
projects: projects,
TYPE_ANDROID: TYPE_ANDROID,
TYPE_WEB: TYPE_WEB,
// about me scroll
sections: [
{
category: "Introduction",
title: "About Me",
// description: "Hello, I'm Md. Al Mamun, born on August 10, 2002, in Porsha, Naogaon. I am a passionate and motivated developer skilled in web and mobile development.",
description: `
<p class="text-gray-300 text-lg leading-relaxed mb-4">
Hello, I'm Md. Al Mamun, born on August 10, 2002, in Porsha, Naogaon. I am a passionate and motivated developer skilled in web and mobile development.
</p>
<p class="text-gray-300 text-lg leading-relaxed mb-6">
You can also checkout my <a href="assets/Resume - Md Al Mamun.pdf" target="_blank" class="text-purple-400 hover:text-purple-300 underline font-semibold">Resume (CV)</a> for more details about my skills and experiences.
</p>
<div class="flex flex-wrap justify-center lg:justify-start gap-4">
<a href="https://github.com/mdalmamunDev" target="_blank" class="px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full hover:from-purple-600 hover:to-pink-600 transition-all duration-300 transform hover:scale-105">
GitHub
</a>
<a href="https://www.linkedin.com/in/mdalmamunDev/" target="_blank" class="px-4 py-2 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full hover:from-blue-600 hover:to-cyan-600 transition-all duration-300 transform hover:scale-105">
LinkedIn
</a>
<a href="https://leetcode.com/u/madalmamun53/" target="_blank" class="px-4 py-2 bg-gradient-to-r from-green-500 to-teal-500 rounded-full hover:from-green-600 hover:to-teal-600 transition-all duration-300 transform hover:scale-105">
LeetCode
</a>
</div>
`,
image: "https://miro.medium.com/1*gReLR6hZjwyBxHmfLN1AVw.gif",
gradient: "from-black via-gray-900 to-black",
stat: "Born Aug 10, 2002"
},
{
category: "Backend Expertise",
title: "MERN Stack",
description: `<p class="description-text text-base sm:text-lg md:text-xl lg:text-2xl text-white text-opacity-90">
Building powerful full-stack applications with MongoDB, Express.js, React, and Node.js. Creating scalable and efficient backend solutions with modern JavaScript technologies.
</p>`,
image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?w=1200&q=80",
gradient: "from-teal-600 via-cyan-600 to-blue-600",
stat: "Full-Stack Developer"
},
{
category: "Backend Framework",
title: "Laravel",
description: `<p class="description-text text-base sm:text-lg md:text-xl lg:text-2xl text-white text-opacity-90">
Developing robust and elegant backend solutions using Laravel's powerful PHP framework. Building RESTful APIs and complex web applications with clean architecture.
</p>`,
image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=1200&q=80",
gradient: "from-black via-gray-900 to-black",
stat: "PHP Expert"
},
{
category: "Frontend Framework",
title: "Vue.js",
description: `<p class="description-text text-base sm:text-lg md:text-xl lg:text-2xl text-white text-opacity-90">
Crafting interactive and dynamic user interfaces with Vue.js. Creating seamless frontend experiences with component-based architecture and reactive data flow.
</p>`,
image: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=1200&q=80",
gradient: "from-teal-600 via-cyan-600 to-blue-600",
stat: "UI/UX Focused"
},
{
category: "Mobile Development",
title: "Android Studio",
description: `<p class="description-text text-base sm:text-lg md:text-xl lg:text-2xl text-white text-opacity-90">
Developing native Android applications with Android Studio. Bringing ideas to life on mobile platforms with focus on creating innovative and efficient mobile solutions.
</p>`,
image: "https://images.unsplash.com/photo-1607252650355-f7fd0460ccdb?w=1200&q=80",
gradient: "from-black via-gray-900 to-black",
stat: "Mobile Developer"
}
],
},
computed: {
//
},
mounted() {
const text = 'Full-Stack Developer | MERN Stack | Laravel | Vue.js | Android Enthusiast | Algorithms | DSA | Android Studio';
const phrases = text.split(' | ');
let index = 0;
const typingSpeed = 1000;
const typeWriter = () => {
if (index < phrases.length) {
if (index !== 0)
this.heroText += ' | ';
this.heroText += phrases[index];
index++;
setTimeout(typeWriter, typingSpeed);
}
};
typeWriter();
setInterval(this.setRandomBanner, this.bannerDelay);
this.setRandomBanner();
this.setupScrollObserver();
},
methods: {
setRandomBanner() {
let banner;
do {
banner = Math.ceil(Math.random() * this.totalBanners);
} while (banner === this.currBanner);
const newImage = new Image();
newImage.src = `images/hero-banner/${banner}.jpg`;
newImage.onload = () => {
this.currBanner = banner;
};
},
setupScrollObserver() {
const observerOptions = {
threshold: 0.3,
rootMargin: '0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
const items = this.$refs.aboutSection.querySelectorAll('.about-item');
items.forEach(item => observer.observe(item));
}
},
});
</script>
</body>
</html>