PWA mobile landing page. Full-height hero with avatar, tech chips, animated stats counter, 6 quick-link cards, and skill progress bars — all touch-optimized.
Mobile-এর প্রথম পাতা। Hero, 6টি quick-link, animated counter, skill bars — সব touch-first design।
Mobile home-এ ৬টি distinct section — প্রতিটিতে আলাদা animation এবং interaction।
navigator.vibrate(40)) then navigates. Cards: Projects, About, Content, Contact, Portfolio Guide, CV.animateCount() function ease-out cubic দিয়ে count করে।width .8s ease।Home page-এর most-used feature — quick navigation cards। Haptic feedback + smooth transition।
if(navigator.vibrate) navigator.vibrate(40); — এই এক line-এ haptic শুরু + শেষ। 40ms ছোট vibration gives physical confirmation of tap। Android Chrome-এ কাজ করে, iOS Safari-তে navigator.vibrate support নেই।| Feature | Implementation | Notes |
|---|---|---|
| Haptic feedback | navigator.vibrate(40) | Android only; silently skipped on iOS |
| Counter animation | IntersectionObserver + animateCount() | Runs once on first scroll-into-view |
| Progress bars | CSS width: 0 → X% transition | JS adds class to trigger transition |
| PWA install prompt | beforeinstallprompt event | Shows custom install card above footer |
| Bottom nav active | URL path matching | window.location.pathname compare |
| Background | Shared background-system.css | Same as desktop but lighter particle count |