All Pages
Desktop Pages
প্রতিটি page-এর visual mockup, features এবং বিস্তারিত guide — সব এখানে।
Main Page
Home
Home/index.html
Portfolio landing page — the first page visitors see. Contains full-height hero, animated skill progress bars, journey timeline, and quick-access CTAs.
প্রথম যে page visitor দেখে। Hero section, animated stats counter, skills, timeline — সব কিছু একসাথে।
Full-height hero with profile photo + animated tech badge strip
4 animated counters: 66+ Projects, 10K+ Lines of Code, 10 Certs, 8+ Videos
Skill progress bars (4 categories: CAD, Programming, Simulation, Web)
Vertical journey timeline (2021–2025)
PWA install prompt + Lenis smooth scroll + AOS animations
Lenis Scroll
AOS Animations
Animated Counters
Progress Bars
PWA Install
Mobile Redirect
View Full Guide
Profile
About
About me/about.html
Detailed personal profile page. Education timeline, technical skills grid, CEFR language proficiency, hobbies, and expandable club/organization cards.
Detailed profile — education timeline, 12টি skill chip, CEFR language level, 5টি expandable club card সহ।
Education timeline: BSc KUET → HSC GPA 5.00 → SSC GPA 5.00
12-skill chip grid + CEFR English proficiency visual
5 expandable club cards with toggleClubDetails() interaction
Particle canvas background (particles-canvas)
Certificates Viewer link (certificates-viewer.html)
Expandable Cards
Particle Canvas
CEFR Language
Education Timeline
Skill Chips
View Full Guide
PAGE 03
…/Projects Code/projects.html
Portfolio
Projects
Projects Code/projects.html
Engineering project showcase with live search, filter tabs (SolidWorks / Arduino / Electronics / MATLAB), glassmorphism cards with 3D hover tilt effect.
৬৩+ engineering project — SolidWorks, Arduino, MATLAB, Electronics — live search, filter, 3D card hover tilt সহ।
Live search with suggestions dropdown (recent search tracking)
Filter tabs: All / SolidWorks / Arduino / Electronics / MATLAB
Glassmorphism cards with 3D tilt on hover (rotateX 2deg)
Shimmer sweep animation on card hover
Data source: projects.json (dynamic loading)
Live Search
Filter Tabs
3D Card Tilt
Shimmer Effect
Glassmorphism
JSON Driven
View Full Guide
SUB 03A
desktop/projects-solidworks.html
Projects ↳ SolidWorks
SolidWorks Projects
desktop/projects-solidworks.html
Dedicated guide for SolidWorks 3D CAD projects — 3D CSS cube hero animation, project detail cards with orthographic views, and `.sldprt` / `.sldasm` / `.step` file downloads.
SolidWorks CAD project-এর আলাদা guide। CSS 3D cube hero, orthographic view cards, source file download।
3D CSS cube hero with `transform-style: preserve-3d` + float animation
Project detail cards with front/top/side orthographic view panels
File type badges: .sldprt, .sldasm, .step, .stl with download links
Shimmer loading skeleton on card render
CSS 3D Cube
Orthographic Views
SLDPRT / STEP
File Download
Shimmer Skeleton
View Full Guide
SUB 03B
desktop/projects-arduino.html
void setup() {
pinMode(13, OUTPUT);
}
Projects ↳ Arduino
Arduino Projects
desktop/projects-arduino.html
Arduino & Tinkercad project guide — syntax-highlighted `.ino` code viewer, circuit component visualization, and direct Tinkercad simulation links.
Arduino project guide: syntax-highlighted code viewer, Tinkercad circuit visualization, component list কার্ড।
Syntax-highlighted .ino code viewer with copy-to-clipboard button
Circuit component visualization with pin connection map
Tinkercad simulation link-out with circuit preview thumbnail
Component list table per project (part number + quantity)
Code Viewer
Syntax Highlight
Tinkercad Link
Circuit Viz
Copy Clipboard
View Full Guide
SUB 03C
desktop/projects-electronics.html
Projects ↳ Electronics
Electronics Projects
desktop/projects-electronics.html
PCB layout viewer, component reference guide, and circuit analysis for electronics projects — annotated schematics, Gerber file downloads, and component datasheets.
Electronics project guide: PCB layout viewer, component reference grid, circuit analysis section, Gerber file download।
Interactive PCB layout grid with pad/trace/via visualization
Component reference table with values, ratings, and datasheet links
Circuit analysis section: voltage / current / power calculations
Gerber file + BOM export via download buttons
PCB Viewer
Component Guide
Circuit Analysis
Gerber Export
BOM Download
View Full Guide
SUB 03D
desktop/projects-matlab.html
Projects ↳ MATLAB
MATLAB Projects
desktop/projects-matlab.html
MATLAB & Simulink project guide — animated SVG sine wave hero, plot gallery with lightbox zoom, and `.m` / `.slx` file downloads for signal processing and control systems.
MATLAB Simulink project guide: SVG sine wave hero, plot gallery, .m/.slx file download সহ।
Animated SVG sine wave hero (signal processing visual theme)
Plot gallery with lightbox zoom and caption overlay
MATLAB code viewer with `%` comment syntax highlighting
Download: .m scripts, .slx Simulink models, exported figures
SVG Sine Wave
Plot Gallery
Code Viewer
.m / .slx Files
Lightbox Zoom
View Full Guide
PAGE 04
…/Content Studio/hub.html
Content Hub
Content Studio
Content Studio/hub.html + 5 sub-sections
Central hub for all content — 5 types: Vlogs, Books & PDFs, Blog Posts, Research Papers, Educational Courses. Each has its own sub-page with sidebar filters.
৫ ধরনের content এক জায়গায়। সব JSON থেকে auto-count হয়। প্রতিটির আলাদা listing, detail, viewer page।
Auto-count stats: fetches 5 JSON files simultaneously (Promise.all)
Engineering corner-accent cards with grid pattern + white-splash
Books: sidebar filter + 3D book viewer + inline PDF reader
Video: YouTube API integration + unified sync manager
Blog: bilingual posts (Bangla + English) with markdown reader
Promise.all Fetch
YouTube API
PDF Reader
3D Book Viewer
Markdown Posts
Sidebar Filters
View Full Guide
SUB 04A
desktop/content-books.html
Content Studio ↳ Books
Books & PDFs
desktop/content-books.html
Books & PDFs guide — CSS 3D flip book animation, sidebar filter with subject/language tags, inline PDF reader with page navigation, and book detail page layout.
Books guide: CSS 3D book flip animation, sidebar filter, inline PDF reader, book detail page — সব বিস্তারিত।
CSS 3D flip book with `transform-style: preserve-3d` + spine edge
Sidebar filter: subject tag chips, language toggle, file size range
Inline PDF reader with `<iframe>` + prev/next page toolbar
Book detail page: cover, TOC accordion, chapter preview, download
3D Book Flip
Sidebar Filter
PDF Reader
Book Detail
books.json
View Full Guide
SUB 04B
desktop/content-videos.html
Content Studio ↳ Videos
Videos & Vlogs
desktop/content-videos.html
Video content guide — YouTube thumbnail grid, embedded player with custom progress bar, YouTube Data API v3 sync flow, and vlog storage structure.
Video guide: YouTube thumbnail grid, embedded player, API v3 sync, vlog storage structure।
YouTube thumbnail grid with lazy-loading and hover play icon overlay
Embedded player with custom progress bar + duration timestamp
YouTube Data API v3 sync via `unified-video-sync.js`
Vlog storage structure: `Content Storage/vlogs/` + local fallback
YouTube API v3
Thumbnail Grid
Embedded Player
Sync Manager
Vlog Storage
View Full Guide
SUB 04C
desktop/content-papers.html
Content Studio ↳ Papers
Research Papers
desktop/content-papers.html
Research papers guide — paper listing with abstract preview, split-pane PDF viewer, and citation export in APA / IEEE / BibTeX formats with copy-to-clipboard.
Research paper guide: listing + abstract, split-pane PDF viewer, APA/IEEE/BibTeX citation export।
Paper listing with title, authors, year, journal tag chips
Split-pane viewer: abstract panel (left) + PDF iframe (right)
Citation export: APA, IEEE, BibTeX formats + copy-to-clipboard
Filter by subject, year range, and open-access badge
Paper Listing
Split Viewer
APA / IEEE
BibTeX Export
papers.json
View Full Guide
SUB 04D
desktop/content-posts.html
Content Studio ↳ Posts
Written Posts
desktop/content-posts.html
Blog posts guide — bilingual EN/বাংলা toggle, Markdown rendering with code blocks and syntax highlighting, post detail page with reading-time estimate.
Blog post guide: EN/বাংলা toggle, Markdown rendering, code block syntax highlight, reading-time estimate।
Bilingual toggle: switch between English and বাংলা content versions
Markdown rendering: headings, bold, lists, code blocks, blockquotes
Per-block syntax highlight + copy button for code snippets
Post card grid with reading-time badge, category tag, excerpt
EN / বাংলা Toggle
Markdown Render
Code Blocks
Reading Time
Post Detail
View Full Guide
SUB 04E
desktop/content-courses.html
Content Studio ↳ Courses
Educational Courses
desktop/content-courses.html
Educational courses guide — course listing with progress bars, course viewer with playlist sidebar, lesson lock/unlock states, and course detail page.
Course guide: listing + progress bar, viewer + playlist sidebar, lesson lock/unlock, detail page।
Course listing: thumbnail, progress bar, lesson count badge
Viewer: main video player + expandable playlist sidebar
Lesson states: done (✓ green), active (▶ red), locked (🔒 grey)
Course detail: overview, topic list, instructor card, enrol CTA
Course Listing
Playlist Sidebar
Progress Bar
Lesson States
courses.json
View Full Guide
Communications
Contact
Contact/contact.html
Two-column contact page. Left panel: profile info, direct contact items, social links grid. Right panel: full contact form with triple-fallback sending system.
Two-column layout — left-এ profile + contact info, right-এ animated form। Triple-fallback: EmailJS → Web3Forms → mailto।
Pulsing green "Available" status dot (CSS statusPulse animation)
Triple-fallback form: EmailJS → Web3Forms → mailto
Loading spinner on submit button + success/error messages
Social grid: LinkedIn, GitHub, YouTube, Facebook, Instagram
Auto-reply email to sender via EmailJS template
EmailJS
Web3Forms
Triple Fallback
Pulsing Status
Auto-Reply
Social Grid
View Full Guide
Restricted Admin
Only-Boss Admin
Restricted route map
Restricted administration environment with layered protection and controlled tooling. Public guide intentionally omits entry and internal routing specifics.
এটি একটি restricted administration environment। Public guide-এ entry method ও internal routing details ইচ্ছাকৃতভাবে দেখানো হয় না।
Layered authentication and session governance
Runtime monitoring and tamper-response policy
Restricted admin operations under controlled context
Public-safe disclosure model for security content
Detailed implementation intentionally redacted
Restricted Access
Layered Security
Monitoring
Session Governance
Redacted Details
Controlled Tools
View Full Guide
Infrastructure
Shared Systems
Optimization/ (all files)
10 shared systems used across all desktop pages — background animations, navbar, PWA, GitHub sync, offline manager, update notifier, and scrollbar.
সব desktop page এই shared systems ব্যবহার করে। Background, Navbar, PWA, offline cache, GitHub sync — সব `Optimization/` folder-এ।
Background system: geometric shapes + gradient orbs + particle canvas
Desktop navbar with autohide (hides on scroll-down)
PWA: Service Worker, manifest, offline support
Real-time GitHub sync for version tracking
Update notifier + offline content manager
background-system.css
desktop-navbar.css
service-worker.js
realtime-github-sync
update-notifier
global-scrollbar.css
View Full Guide