The portfolio landing page — first impression. Contains a full-height hero with profile photo, 4 animated stat counters, categorized skill progress bars, and a vertical journey timeline from 2021 to 2025.
Visitor সবার আগে এই page দেখে। Hero, counters, skills, timeline — সব এখানে। Lenis smooth scroll এবং AOS animation ব্যবহার করা হয়েছে।
The hero takes up 100vh. Left side: animated heading with typewriter-style text, subtitle in Bangla, and two CTA buttons (View Projects + Download CV). Right side: circular profile photo in a glowing red ring.
Full-height hero section। Left-এ animated heading, subtitle, দুটো CTA button। Right-এ circular profile photo এবং animated tech chip strip।
4 glassmorphism cards with number counters that animate from 0 when the section scrolls into view. IntersectionObserver triggers the count-up animation with ease-out timing.
৪টি animated counter card যেগুলো scroll করলে 0 থেকে count করা শুরু হয়। IntersectionObserver দিয়ে trigger হয়।
animateCounter(el, target) with IntersectionObserver — triggers once as section enters viewport4 categories of technical skills displayed as labeled progress bars. Each bar fills from left to right with a gradient animation triggered by scroll. Categories: CAD/Modeling, Programming, Simulation/Analysis, Web Development.
৪টি category-তে skills। Scroll করলে progress bar fill হয়। প্রতিটি bar-এ skill name + percentage label।
A vertical timeline showing key milestones from 2021 to 2025+. Each node has year, event, and brief description. AOS makes each item fade-in-right as it scrolls into view.
২০২১ থেকে ২০২৫+ পর্যন্ত journey। Vertical timeline — প্রতিটি milestone AOS animation দিয়ে scroll-এ appear হয়।
The Home page is the PWA entry point. It handles mobile detection (redirects to /mobile/home/), shows the PWA install banner, and loads the Service Worker for offline support.
Home page-ই PWA-র entry point। Mobile detect করে redirect করে। Install banner show করে। Service Worker register করে।
navigator.userAgent check — if mobile, redirects to /mobile/home/beforeinstallprompt event — shows custom banner with install buttonOptimization/service-worker.js — caches pages for offline useসব libraries, files, এবং systems যা Home page-এ ব্যবহার হয়।
| File / Library | Type | Purpose |
|---|---|---|
| Home/index.html | Core | Main landing page — all sections live here |
| Optimization/styles.css | CSS | Global reset, base typography, CSS variables |
| Optimization/navbar-autohide.css | CSS | Desktop navbar — hides on scroll-down, shows on scroll-up |
| Optimization/Background/background-system.css | CSS | Engineering grid + particle + orb background animations |
| Optimization/global-scrollbar.css | CSS | Custom red-on-black 6px webkit scrollbar |
| Optimization/script.js | JS | Counters, mobile redirect, AOS init, scroll cue, PWA prompt |
| Optimization/pwa-init.js | JS | PWA install prompt handler (beforeinstallprompt) |
| Optimization/service-worker.js | SW | Caches assets, intercepts fetch for offline support |
| Optimization/update-notifier.js | JS | Detects new SW version → shows update toast |
| Optimization/realtime-github-sync.js | JS | Checks GitHub API for new commits → version tracking |
| Optimization/navbar-autohide.js | JS | Scroll event listener for navbar show/hide |
| AOS (CDN) | Library | Scroll-triggered entry animations (fade-up, zoom-in) |
| Lenis (CDN) | Library | Smooth momentum scrolling library |
| Font Awesome 6 (CDN) | Icons | All icon usage across the page |
| Google Fonts (CDN) | Fonts | Inter (400,500,600,700,800) + Sora (500,600,700,800) + Rajdhani (600,700) |