-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
710 lines (646 loc) · 32.1 KB
/
index.html
File metadata and controls
710 lines (646 loc) · 32.1 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
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Md Fahim Imtiaz Khan – AI & Software Engineer specializing in on-device LLMs, computer vision, and Android development.">
<meta name="keywords" content="AI Engineer, On-device LLM, YOLOv8, Android Developer, Software Engineer Portfolio">
<meta name="author" content="Md Fahim Imtiaz Khan">
<title>Md Fahim Imtiaz Khan | AI & Software Engineer</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="favicon.png">
<!-- TailwindCSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Fonts & Icons -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@500;700&display=swap"
rel="stylesheet" />
<!-- tsParticles CDN bundle -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3.5.0/tsparticles.bundle.min.js"></script>
<style>
:root {
--bg: #02040a;
--glass: rgba(15, 23, 60, 0.5);
--accent: #22d3ee;
--violet: #a78bfa;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background: var(--bg);
color: #e0f2fe;
overflow-x: hidden;
}
.font-orbitron {
font-family: 'Orbitron', system-ui, sans-serif;
}
.glass {
background: var(--glass);
-webkit-backdrop-filter: blur(28px);
backdrop-filter: blur(28px);
border: 1px solid rgba(167, 139, 250, 0.25);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}
.hero-bg {
background: radial-gradient(ellipse at 30% 20%, #1e293b 0%, #0f172a 70%, #02040a 100%);
}
/* Avatar and cards */
.crystal-avatar {
box-shadow: 0 0 70px rgba(34, 211, 238, 0.6);
transition: all 0.6s ease;
animation: float-slow 6s ease-in-out infinite;
}
.crystal-avatar img { object-position: center 20%; }
.crystal-avatar:hover {
box-shadow: 0 0 110px rgba(167, 139, 250, 0.8);
transform: scale(1.05);
}
.card-hover {
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
animation: float-card 10s ease-in-out infinite alternate;
}
.card-hover:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 30px 80px rgba(34, 211, 238, 0.35);
}
/* Scroll reveal */
.section-reveal {
opacity: 0;
transform: translateY(40px);
scroll-margin-top: 6rem; /* offset anchor scroll for fixed navbar */
}
#top {
scroll-margin-top: 6rem;
}
.section-reveal.visible {
opacity: 1;
transform: translateY(0);
transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
/* Animated gradient glow behind hero title */
.hero-glow {
position: absolute;
inset: -80px;
background: conic-gradient(
from 180deg,
rgba(34, 211, 238, 0.12),
rgba(167, 139, 250, 0.16),
rgba(56, 189, 248, 0.2),
rgba(129, 140, 248, 0.18),
rgba(34, 211, 238, 0.12)
);
filter: blur(46px);
opacity: 0.9;
animation: spin-slow 18s linear infinite;
z-index: -1;
}
/* Keyframes */
@keyframes spin-slow {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes float-slow {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
@keyframes float-card {
0% { transform: translateY(0); }
100% { transform: translateY(-6px); }
}
</style>
</head>
<body class="hero-bg min-h-screen relative">
<!-- Splash Screen -->
<div id="splash-screen"
class="fixed inset-0 flex flex-col items-center justify-center bg-[#02040a] z-[9999] transition-opacity duration-1000">
<div class="text-center px-6">
<!-- Robot Icon -->
<div class="mb-8">
<div class="w-20 h-20 md:w-24 md:h-24 rounded-2xl flex items-center justify-center
bg-gradient-to-tr from-cyan-500/20 to-violet-500/20
border border-cyan-400/40 shadow-[0_0_40px_rgba(34,211,238,0.4)] mx-auto">
<span class="text-4xl md:text-5xl">🤖</span>
</div>
</div>
<!-- Title -->
<h1 class="font-orbitron text-3xl sm:text-4xl md:text-5xl
bg-gradient-to-r from-cyan-300 to-violet-300
bg-clip-text text-transparent font-bold mb-4">
Welcome to Fahim's Portfolio
</h1>
<!-- Subtitle -->
<p class="text-sm sm:text-base md:text-lg text-cyan-100/80 max-w-xl mx-auto leading-relaxed">
Exploring AI innovation, intelligent systems, and software engineering excellence.
</p>
</div>
</div>
<!-- Particles -->
<div id="tsparticles" class="fixed inset-0 -z-10 pointer-events-none"></div>
<!-- Navbar -->
<nav class="fixed top-0 w-full z-40 bg-gray-950/80 backdrop-blur-xl border-b border-violet-900/40">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<a href="#top" class="flex items-center gap-3">
<span class="h-9 w-9 rounded-full bg-cyan-500/10 border border-cyan-400/50 flex items-center justify-center text-cyan-300">
<i class="fa-solid fa-code"></i>
</span>
<span class="text-2xl md:text-3xl font-bold font-orbitron bg-gradient-to-r from-violet-300 to-cyan-300 bg-clip-text text-transparent">
Fahim Imtiaz
</span>
</a>
<!-- Desktop links -->
<div class="hidden md:flex space-x-8 text-sm lg:text-base font-medium">
<a href="#about" class="hover:text-cyan-400 transition-colors">About</a>
<a href="#education" class="hover:text-cyan-400 transition-colors">Education</a>
<a href="#skills" class="hover:text-cyan-400 transition-colors">Skills</a>
<a href="#research" class="hover:text-cyan-400 transition-colors">Research</a>
<a href="#projects" class="hover:text-cyan-400 transition-colors">Projects</a>
<a href="#contact" class="hover:text-cyan-400 transition-colors">Contact</a>
</div>
<!-- Mobile menu button -->
<button id="nav-toggle" class="md:hidden inline-flex items-center justify-center p-2 rounded-lg border border-cyan-500/50 text-cyan-300 hover:bg-cyan-500/10 focus:outline-none">
<i class="fa-solid fa-bars text-xl" id="nav-toggle-icon"></i>
</button>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="md:hidden hidden border-t border-violet-900/40 bg-gray-950/95">
<div class="max-w-7xl mx-auto px-6 py-4 flex flex-col space-y-3 text-sm font-medium">
<a href="#about" class="py-1 hover:text-cyan-400">About</a>
<a href="#education" class="py-1 hover:text-cyan-400">Education</a>
<a href="#skills" class="py-1 hover:text-cyan-400">Skills</a>
<a href="#research" class="py-1 hover:text-cyan-400">Research</a>
<a href="#projects" class="py-1 hover:text-cyan-400">Projects</a>
<a href="#contact" class="py-1 hover:text-cyan-400">Contact</a>
</div>
</div>
</nav>
<!-- Hero -->
<section id="top" class="min-h-screen flex items-center pt-28 md:pt-32 pb-20 relative">
<div class="max-w-7xl mx-auto px-5 sm:px-6 grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
<div class="relative space-y-6 text-center lg:text-left">
<div class="hero-glow hidden md:block"></div>
<p class="text-xs sm:text-sm tracking-[0.3em] uppercase text-cyan-300/80">
AI • Software Engineering • Research
</p>
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold leading-tight bg-gradient-to-r from-violet-200 via-cyan-200 to-indigo-200 bg-clip-text text-transparent">
Md Fahim Imtiaz Khan
</h1>
<p class="text-lg sm:text-xl md:text-2xl text-cyan-200/90 font-light">
Software Engineer & On-Device AI Researcher
</p>
<p class="text-sm sm:text-base md:text-lg max-w-xl mx-auto lg:mx-0 text-gray-300/90">
Building privacy-preserving AI systems and intelligent computer vision pipelines for the real world —
from on-device LLMs to multi-task warehouse automation.
</p>
<div class="flex flex-col sm:flex-row justify-center lg:justify-start gap-4 pt-2">
<a href="#projects"
class="px-6 py-3 rounded-full bg-cyan-500 text-gray-950 font-medium hover:bg-cyan-400 transition text-sm sm:text-base">
View Projects
</a>
<a href="https://dl.dropboxusercontent.com/scl/fi/q67h1ylsgbth77v5oz153/my-cv.pdf?rlkey=8n1w8kyrlsz4ymwvfbyrafedd&st=h8g9lqyw" download="Md_Fahim_Imtiaz_Khan_CV" class="px-6 py-3 rounded-full bg-cyan-500 text-gray-950 font-medium hover:bg-cyan-400 transition text-sm sm:text-base">
Download CV
</a>
<a href="#contact"
class="px-6 py-3 rounded-full border border-cyan-400/70 text-cyan-200 font-medium hover:bg-cyan-500/10 transition text-sm sm:text-base">
Contact Me
</a>
</div>
</div>
<!-- Avatar -->
<div class="flex justify-center lg:justify-end mt-10 lg:mt-0">
<div class="relative w-56 h-56 sm:w-64 sm:h-64 md:w-80 md:h-80 lg:w-96 lg:h-96 rounded-full overflow-hidden crystal-avatar glass border border-cyan-400/30">
<img src="profile.png" alt="Md Fahim Imtiaz Khan" class="w-full h-full object-cover" />
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="py-16 md:py-20 section-reveal">
<div class="max-w-5xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-10 text-cyan-300">About Me</h2>
<div class="glass p-8 md:p-10 rounded-3xl text-base md:text-lg leading-relaxed text-center md:text-left">
I am a Software Engineering student with a strong focus on applied AI, on‑device intelligence, modern backend development, and Android application development with Java. I enjoy transforming research ideas into robust, production‑ready systems, ranging from privacy‑preserving mobile LLMs to vision‑based warehouse automation platforms and real‑world Android apps.
<br><br>
My core strengths include writing clean, maintainable code, designing efficient data models, and collaborating effectively with cross‑functional teams to deliver reliable software. Recently, I have been concentrating on on‑device LLM optimization, multi‑task YOLOv8 pipelines, Android development in Java, and building practical tools that make AI safer and more accessible for real users. I am actively seeking opportunities to contribute to impactful AI products while continuously growing under strong engineering leadership.
</div>
</div>
</section>
<!-- Education -->
<section id="education" class="py-16 md:py-20 bg-gradient-to-b from-gray-950 to-gray-900 section-reveal">
<div class="max-w-5xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-10 text-cyan-300">Education</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="glass p-6 md:p-8 rounded-3xl text-center flex flex-col justify-center">
<p class="text-lg font-semibold mb-1">B.S. Software Engineering</p>
<p class="text-cyan-400 mb-1">Chengdu Neusoft University</p>
<p class="text-sm text-gray-300">2024 – Present</p>
</div>
<div class="glass p-6 md:p-8 rounded-3xl text-center flex flex-col justify-center">
<p class="text-lg font-semibold mb-1">HSC</p>
<p class="text-cyan-400 mb-1">BAF Shaheen College</p>
<p class="text-sm text-gray-300">GPA 4.92 (2022)</p>
</div>
<div class="glass p-6 md:p-8 rounded-3xl text-center flex flex-col justify-center">
<p class="text-lg font-semibold mb-1">SSC</p>
<p class="text-cyan-400 mb-1">Laksam Govt Pilot High School</p>
<p class="text-sm text-gray-300">GPA 4.89 (2020)</p>
</div>
</div>
</div>
</section>
<!-- Skills -->
<section id="skills" class="py-20 section-reveal">
<div class="max-w-5xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4 text-cyan-300">Skills</h2>
<p class="text-center text-sm text-cyan-100/70 mb-10">
A blend of software engineering fundamentals, Android development, applied AI, and real‑world product work.
</p>
<div class="glass p-6 md:p-8 rounded-3xl space-y-8">
<!-- Programming & Android -->
<div class="space-y-3">
<div class="flex items-center gap-3">
<div class="h-8 w-8 rounded-2xl bg-cyan-500/15 border border-cyan-400/40 flex items-center justify-center text-cyan-300">
<i class="fa-solid fa-code"></i>
</div>
<h3 class="text-lg font-semibold text-cyan-200">Programming & Android</h3>
</div>
<div class="flex flex-wrap gap-2">
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-cyan-400/30 text-sm hover:bg-cyan-500/10 transition">
Java
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-cyan-400/30 text-sm hover:bg-cyan-500/10 transition">
Android Development (Java)
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-cyan-400/30 text-sm hover:bg-cyan-500/10 transition">
Python
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-cyan-400/30 text-sm hover:bg-cyan-500/10 transition">
C / C++
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-cyan-400/30 text-sm hover:bg-cyan-500/10 transition">
Data Structures & Algorithms
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-cyan-400/30 text-sm hover:bg-cyan-500/10 transition">
Object‑Oriented Design
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-cyan-400/30 text-sm hover:bg-cyan-500/10 transition">
Design Patterns
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-cyan-400/30 text-sm hover:bg-cyan-500/10 transition">
Git & GitHub
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-cyan-400/30 text-sm hover:bg-cyan-500/10 transition">
Linux & CLI
</span>
</div>
</div>
<hr class="border-slate-800/80">
<!-- AI, ML & Data -->
<div class="space-y-3">
<div class="flex items-center gap-3">
<div class="h-8 w-8 rounded-2xl bg-violet-500/15 border border-violet-400/40 flex items-center justify-center text-violet-200">
<i class="fa-solid fa-brain"></i>
</div>
<h3 class="text-lg font-semibold text-cyan-200">AI, ML & Data</h3>
</div>
<div class="flex flex-wrap gap-2">
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-violet-400/30 text-sm hover:bg-violet-500/10 transition">
Machine Learning
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-violet-400/30 text-sm hover:bg-violet-500/10 transition">
Deep Learning Basics
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-violet-400/30 text-sm hover:bg-violet-500/10 transition">
Computer Vision (YOLOv8)
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-violet-400/30 text-sm hover:bg-violet-500/10 transition">
On‑Device / Edge AI
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-violet-400/30 text-sm hover:bg-violet-500/10 transition">
Pandas & NumPy
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-violet-400/30 text-sm hover:bg-violet-500/10 transition">
Model Evaluation & Metrics
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-violet-400/30 text-sm hover:bg-violet-500/10 transition">
Data Modeling
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-violet-400/30 text-sm hover:bg-violet-500/10 transition">
Prompt Engineering (LLMs)
</span>
</div>
</div>
<hr class="border-slate-800/80">
<!-- Android, Backend & Databases -->
<div class="space-y-3">
<div class="flex items-center gap-3">
<div class="h-8 w-8 rounded-2xl bg-emerald-500/15 border border-emerald-400/40 flex items-center justify-center text-emerald-200">
<i class="fa-solid fa-database"></i>
</div>
<h3 class="text-lg font-semibold text-cyan-200">Android, Backend & Databases</h3>
</div>
<div class="flex flex-wrap gap-2">
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-emerald-400/30 text-sm hover:bg-emerald-500/10 transition">
Android Development (Java)
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-emerald-400/30 text-sm hover:bg-emerald-500/10 transition">
Android Studio
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-emerald-400/30 text-sm hover:bg-emerald-500/10 transition">
MySQL
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-emerald-400/30 text-sm hover:bg-emerald-500/10 transition">
SQL Query Design
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-emerald-400/30 text-sm hover:bg-emerald-500/10 transition">
RESTful APIs (Basics)
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-emerald-400/30 text-sm hover:bg-emerald-500/10 transition">
Auth & Security (Basics)
</span>
</div>
</div>
<hr class="border-slate-800/80">
<!-- Tools, UI & Collaboration -->
<div class="space-y-3">
<div class="flex items-center gap-3">
<div class="h-8 w-8 rounded-2xl bg-cyan-500/15 border border-cyan-400/40 flex items-center justify-center text-cyan-200">
<i class="fa-solid fa-users-gear"></i>
</div>
<h3 class="text-lg font-semibold text-cyan-200">Tools, UI & Collaboration</h3>
</div>
<div class="flex flex-wrap gap-2">
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-cyan-400/30 text-sm hover:bg-cyan-500/10 transition">
JavaFX
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-cyan-400/30 text-sm hover:bg-cyan-500/10 transition">
HTML & Tailwind CSS
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-cyan-400/30 text-sm hover:bg-cyan-500/10 transition">
API Integration
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-cyan-400/30 text-sm hover:bg-cyan-500/10 transition">
Agile & Scrum (Projects)
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-cyan-400/30 text-sm hover:bg-cyan-500/10 transition">
Technical Writing
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-cyan-400/30 text-sm hover:bg-cyan-500/10 transition">
Team Leadership
</span>
<span class="px-4 py-2 rounded-full bg-slate-900/70 border border-cyan-400/30 text-sm hover:bg-cyan-500/10 transition">
Code Review & Collaboration
</span>
</div>
</div>
</div>
</div>
</section>
<!-- Projects -->
<section id="projects" class="py-20 bg-gradient-to-b from-gray-950 to-gray-900 section-reveal">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-10 text-cyan-300">
Projects
</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="glass p-7 rounded-3xl card-hover flex flex-col h-full">
<h3 class="text-xl font-semibold text-cyan-300 mb-2">PersonaMQA</h3>
<p class="text-sm text-gray-300 flex-1">
Privacy‑first on‑device LLM auto‑reply system for mobile messaging, designed to infer persona and context
without sending raw message content to the cloud.
</p>
</div>
<div class="glass p-7 rounded-3xl card-hover flex flex-col h-full">
<h3 class="text-xl font-semibold text-cyan-300 mb-2">Supermarket Billing System</h3>
<p class="text-sm text-gray-300 flex-1">
POS, inventory, and receipt management system with structured product catalog, discount logic, and sales reporting.
</p>
</div>
<div class="glass p-7 rounded-3xl card-hover flex flex-col h-full">
<h3 class="text-xl font-semibold text-cyan-300 mb-2">Student Management System</h3>
<p class="text-sm text-gray-300 flex-1">
Academic administration portal supporting student profiles, grades, courses, and attendance tracking.
</p>
</div>
<div class="glass p-7 rounded-3xl card-hover flex flex-col h-full">
<h3 class="text-xl font-semibold text-cyan-300 mb-2">Central Advert Agency Website</h3>
<p class="text-sm text-gray-300 flex-1">
Responsive marketing site for a digital agency with service sections, portfolio highlights, and contact funnels.
</p>
</div>
<div class="glass p-7 rounded-3xl card-hover flex flex-col h-full">
<h3 class="text-xl font-semibold text-cyan-300 mb-2">Library Management System</h3>
<p class="text-sm text-gray-300 flex-1">
Desktop application to manage books, members, loans, and returns with fine calculation and simple analytics dashboard.
</p>
</div>
<div class="glass p-7 rounded-3xl card-hover flex flex-col h-full">
<h3 class="text-xl font-semibold text-cyan-300 mb-2">Task & Habit Tracker</h3>
<p class="text-sm text-gray-300 flex-1">
Personal productivity tool with streak tracking, reminders, and simple data visualization to build consistent study and coding habits.
</p>
</div>
</div>
</div>
</section>
<!-- Research -->
<section id="research" class="py-20 section-reveal">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-10 text-cyan-300">
Research
</h2>
<div class="grid lg:grid-cols-2 gap-8">
<!-- PersonaMQA -->
<div class="glass p-8 lg:p-10 rounded-3xl card-hover flex flex-col">
<div class="flex items-start justify-between gap-4 mb-4">
<h3 class="text-2xl font-semibold text-cyan-300">
PersonaMQA
</h3>
<span class="inline-flex items-center px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-300 text-xs border border-emerald-400/40">
On‑Device LLM
</span>
</div>
<p class="text-sm md:text-base text-gray-300 mb-6">
Context‑Aware Persona Inference Engine for Privacy‑Preserving Mobile Messaging Automation.
The system runs directly on user devices, keeping raw message content local while learning preferences and reply styles.
</p>
<a href="https://www.techrxiv.org/doi/10.36227/techrxiv.177015933.33204191"
target="_blank"
rel="noopener noreferrer"
class="text-cyan-400 hover:text-cyan-300 flex items-center gap-2 font-medium text-sm md:text-base">
View Preprint
<i class="fa-solid fa-arrow-up-right-from-square text-xs"></i>
</a>
</div>
<!-- YOLOv8 Warehouse -->
<div class="glass p-8 lg:p-10 rounded-3xl card-hover flex flex-col">
<div class="flex items-start justify-between gap-4 mb-4">
<h3 class="text-2xl font-semibold text-cyan-300">
Multi‑Task YOLOv8 Warehouse System
</h3>
<span class="inline-flex items-center px-3 py-1 rounded-full bg-violet-500/10 text-violet-200 text-xs border border-violet-400/40">
Computer Vision
</span>
</div>
<p class="text-sm md:text-base text-gray-300 mb-6">
Multi‑Task YOLOv8x + YOLOv8s pipeline for warehouse box damage detection, severity classification, inventory counting,
and sustainability‑oriented optimization, enhanced with domain adaptation for real‑world deployment.
</p>
<a href="#"
class="text-cyan-400 hover:text-cyan-300 flex items-center gap-2 font-medium text-sm md:text-base">
View Preprint / Code
<i class="fa-solid fa-code-branch text-xs"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="py-20 bg-gradient-to-b from-gray-950 to-gray-900 section-reveal">
<div class="max-w-5xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-8 text-cyan-300">
Let's Connect
</h2>
<div class="glass p-8 md:p-10 rounded-3xl max-w-3xl mx-auto">
<p class="text-lg md:text-xl mb-8 text-gray-100">
Open to internships, research collaborations, and roles in AI & software engineering.
</p>
<div class="flex flex-col md:flex-row justify-center gap-6 md:gap-10 text-sm md:text-lg">
<a href="mailto:fahimimtiaz992@gmail.com"
class="flex items-center justify-center gap-3 hover:text-cyan-400 transition">
<i class="fas fa-envelope text-cyan-300"></i>
<span>fahimimtiaz992@gmail.com</span>
</a>
<a href="tel:+8613183887731"
class="flex items-center justify-center gap-3 hover:text-cyan-400 transition">
<i class="fas fa-phone text-cyan-300"></i>
<span>+86 131 8388 7731</span>
</a>
</div>
<div class="mt-10 flex justify-center gap-8 text-3xl">
<a href="https://github.com/fahimimtiaz12" target="_blank" rel="noopener noreferrer" title="GitHub" aria-label="GitHub" class="hover:text-cyan-400 transition social-icon">
<i class="fab fa-github"></i>
<span class="sr-only">GitHub</span>
</a>
<a href="https://www.linkedin.com/in/md-fahim-imtiaz-khan-7558782ab/" target="_blank" rel="noopener noreferrer" title="LinkedIn" aria-label="LinkedIn" class="hover:text-cyan-400 transition social-icon">
<i class="fab fa-linkedin"></i>
<span class="sr-only">LinkedIn</span>
</a>
<a href="https://www.instagram.com/exquisite_demon_3/" target="_blank" rel="noopener noreferrer" title="Instagram" aria-label="Instagram" class="hover:text-cyan-400 transition social-icon">
<i class="fab fa-instagram"></i>
<span class="sr-only">Instagram</span>
</a>
</div>
</div>
</div>
</section>
<footer class="relative py-16 border-t border-gray-800 bg-gray-950 text-center"
style="font-family: 'Space Grotesk', sans-serif;">
<div class="max-w-5xl mx-auto px-6">
<!-- Name -->
<h2 class="text-3xl font-bold bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400
bg-clip-text text-transparent tracking-wide animate-pulse">
Md Fahim Imtiaz Khan
</h2>
<!-- Tagline -->
<p class="mt-4 text-gray-400 text-sm tracking-wider">
© 2026 • Crafted with precision & passion
</p>
<!-- Social Links -->
<div class="flex justify-center gap-8 mt-8 text-gray-400 text-sm">
<a href="https://github.com/fahimimtiaz12" target="_blank" rel="noopener noreferrer" class="hover:text-indigo-400 transition duration-300 hover:scale-110 transform">
GitHub
</a>
<a href="https://www.linkedin.com/in/md-fahim-imtiaz-khan-7558782ab/" target="_blank" rel="noopener noreferrer" class="hover:text-purple-400 transition duration-300 hover:scale-110 transform">
LinkedIn
</a>
<a href="https://www.facebook.com/fahim.imtiaz.sami.2025" target="_blank" rel="noopener noreferrer" class="hover:text-blue-400 transition duration-300 hover:scale-110 transform">
Facebook
</a>
<a href="mailto:24320120002@stu.nsu.edu.cn" class="hover:text-pink-400 transition duration-300 hover:scale-110 transform">
Email
</a>
</div>
<!-- Decorative Divider -->
<div class="mt-10 h-[1px] w-32 mx-auto bg-gradient-to-r from-transparent via-gray-600 to-transparent"></div>
</div>
</footer>
<!-- Scroll Animation -->
<script>
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
},
{ threshold: 0.18 }
);
document.querySelectorAll('.section-reveal').forEach((el, index) => {
el.style.transitionDelay = `${index * 80}ms`;
observer.observe(el);
});
</script>
<!-- Mobile nav toggle -->
<script>
const navToggle = document.getElementById('nav-toggle');
const navIcon = document.getElementById('nav-toggle-icon');
const mobileMenu = document.getElementById('mobile-menu');
navToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
if (mobileMenu.classList.contains('hidden')) {
navIcon.classList.remove('fa-xmark');
navIcon.classList.add('fa-bars');
} else {
navIcon.classList.remove('fa-bars');
navIcon.classList.add('fa-xmark');
}
});
// Close mobile menu on link click
mobileMenu.querySelectorAll('a').forEach((link) => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
navIcon.classList.remove('fa-xmark');
navIcon.classList.add('fa-bars');
});
});
</script>
<!-- Subtle Particles -->
<script>
tsParticles.load("tsparticles", {
particles: {
number: { value: 35 },
color: { value: "#22d3ee" },
opacity: { value: 0.25 },
size: { value: 2 },
move: { enable: true, speed: 0.4 },
links: {
enable: true,
color: "#22d3ee",
distance: 150,
opacity: 0.15,
width: 1
}
},
background: {
color: "#02040a"
},
detectRetina: true
});
</script>
<script>
window.addEventListener("load", () => {
const splash = document.getElementById("splash-screen");
// Show splash for 1.8 seconds
setTimeout(() => {
splash.style.opacity = "0";
// Remove from DOM after fade
setTimeout(() => {
splash.style.display = "none";
}, 800); // fade duration
}, 1800); // visible duration
});
</script>
</body>
</html>