10 shared systems powering every desktop page — background animations, navbar with autohide, PWA service-worker, real-time GitHub sync, offline manager, update notifier, and custom scrollbar.
সব desktop page-এর পেছনে এই 10টি shared system কাজ করে। `Optimization/` folder-এ সব file থাকে — একবার বুঝলে পুরো site বোঝা সহজ।
The animated backdrop used on every single desktop page — layered CSS geometric shapes, radial gradient orbs, and a canvas-based particle system producing the signature dark-red atmosphere.
সব page-এ একই background system। CSS geometric shapes, gradient orb, আর canvas particle — সব একসাথে কাজ করে।
bg-system-container → bg-system-content wraps all page body content.guide-bg + .scan-line adds the moving grid scan-line over the backgroundOptimization/Background/background-system.css — included on every desktop page via <link>background-system.js — respects reduced-motion media queryThe fixed top navigation bar used on all desktop pages — 85px height, smooth autohide on scroll-down, reappears on scroll-up. Contains logo image, nav links, and CV download button.
Scroll করলে navbar hide হয়, উপরে scroll করলে আবার আসে। Height 85px — সব page-এ একই behavior।
class="desktop-navbar" + id="desktopNavbar" — required for autohide JS to targetnavbar-autohide.js listens to scroll events — hides on scroll-down > 80px, shows on scroll-uptop: 85px (guide.css: body { padding-top: 85px }) to clear the navbardesktop-nav-cv-btn — red accent styling with download attributeThe Progressive Web App layer — 5-tier cache strategy, offline support, install prompt, and automatic update notification when a new version is deployed.
Site PWA হিসেবে install করা যায়। 5 ধরনের cache, offline support, update notification — সব service-worker.js-এ defined।
pwa-install-prompt.js intercepts beforeinstallprompt, shows custom banner on desktop Chrome/Edgeupdate-notifier.js polls for new version.json, shows toast on new deploy with "Reload" CTAoffline-content-manager.js caches selected PDFs/videos for offline access on next visit| Cache Name | Strategy | Used For |
|---|---|---|
| pre-cache | Pre-cache | Core assets at install |
| network-first | Network First | JSON data files |
| cache-first | Cache First | Images, fonts, CSS |
| swr-cache | Stale-While-Revalidate | HTML pages |
| offline-fallback | Offline | Fallback page |
Pulls live version data from GitHub API to compare against the local `version.json` — drives the update notifier and tracks deployment state without needing a backend.
GitHub থেকে live version check করে। নতুন version deploy হলে update-notifier.js toast দেখায়। কোনো backend দরকার নেই।
realtime-github-sync.js fetches the raw version.json from the public GitHub repolocal.version vs remote.version — triggers update toast if mismatchsetInterval — debounced to avoid rate limitingrealtime-github-sync.js startsversion.json from GitHub raw URLremote.version vs localStorage valueupdate-notifier.js fires toast| # | File | Type | Purpose | Used In |
|---|---|---|---|---|
| 01 | Background/background-system.css | CSS | Animated background: grid, orbs, particles, scan-line | All pages |
| 02 | navbar/desktop-navbar.css | CSS | Top navbar styles — logo, links, CV button, active state | All pages |
| 03 | navbar-autohide.js | JS | Hides navbar on scroll-down >80px, shows on scroll-up | All pages |
| 04 | global-scrollbar.css | CSS | Red-on-black 6px webkit scrollbar with rounded thumb | All pages |
| 05 | service-worker.js | SW | 5-tier PWA cache strategy — offline fallback | All pages via PWA |
| 06 | pwa-init.js | JS | Registers service worker on load, handles SW lifecycle | All pages |
| 07 | pwa-install-prompt.js | JS | Intercepts beforeinstallprompt, shows custom install banner | Home, About |
| 08 | realtime-github-sync.js | JS | Polls GitHub API for version.json, detects new deploys | All pages |
| 09 | update-notifier.js | JS | Shows update toast + "Reload" CTA on new version detected | All pages |
| 10 | fullscreen-init.js | JS | First-click fullscreen trigger — session-persist, nav-exclusion | All pages |