A recreation of the original ActiveBox template by Mohammad Rohaan, refined into a responsive, accessible, interactive one-page portfolio demonstration — plain HTML/CSS/JS, no framework build step.
Author: Mohammad Rohaan · rohaan2802
https://rohaan2802.github.io/WebActiveBox/
Repository:
https://github.com/rohaan2802/WebActiveBox
Design decisions:
https://github.com/rohaan2802/WebActiveBox/blob/master/CASE_STUDY.md
Verification notes:
https://github.com/rohaan2802/WebActiveBox/blob/master/RESPONSIVE_QA.md
- Live demo
- Quick review
- Feature screenshots (20)
- Deep feature walkthrough
- What this project demonstrates
- Run locally
- Source map
- Verification
- Project structure
- Attribution and scope
- Author
- Resize the page — grids and navigation adapt.
- Toggle dark / light theme, reload, confirm the preference persists.
- Filter the work gallery and open an image — try arrows, Tab, Escape.
- Read The build (
#project-notes) for scope and decisions. - Enable OS reduced motion — reveals and hover movement stop.
Previous docs/preview.webp gallery art was removed. These labelled captures replace it.
Full-bleed hero with brand, CTA pair, and dark theme as the default presentation.
Same composition after the theme switch — palette, contrast, and controls update together.
Four capability cards (customize, responsive, modern, clean foundations) under a clear section heading.
Eight portfolio studies with filters enabled and “showing all” status text.
Category filter hides non-matching cards and updates the live status count.
Second filter path for photography studies — same progressive-enhancement pattern.
Accessible dialog viewer with title, position (n / total), prev/next, and Escape to close.
Illustrative team grid with portraits and roles from the template content.
Static sample quote presentation (not a live CMS feed).
Tight crop of the download band — source zip + GitHub link, no neighboring sections bleeding in.
Full “Behind the build” block: project facts, Foundation / Interaction / Resilience cards, and source CTAs.
Third gallery path (Print) with the filtered set and live status — complements Objects / Photography shots above.
Top progress bar reflecting scroll depth through the long one-pager.
Deferred control that appears after scrolling, returning focus to the top of the page.
Brand, section links, and theme toggle in the sticky/site header region.
Compact viewport hero — type and actions remain usable without horizontal overflow.
Hamburger / menu toggle expands the primary nav for small screens.
Stacked work cards and filters on a phone-width canvas.
Mid-width arrangement of the features grid between phone and desktop.
First Tab reveals “Skip to content” for keyboard and assistive-tech users.
theme-init.js runs in <head> so the saved theme applies before CSS paints (reduces flash). Preference key: WebActiveBox-theme. If localStorage is blocked, the switch still works for the session. The toggle updates data-theme, button label/icon, and theme-color meta.
Fluid headings, ~18px reading baseline, generous line-height, and bounded measure. Navigation collapses before links crowd. Features / work / team grids reflow across phone → tablet → desktop (screenshots 16–19).
Buttons with data-filter set aria-pressed and hide non-matching .work-cards. Status text is a live region (aria-live="polite"). Without JS, all images remain normal links.
Uses a <dialog> when available. Supports Escape, arrow keys, focus trap on Tab, and position text. Modifier-click still opens the raw image URL (progressive enhancement).
Smooth in-page nav, menu toggle for small screens, and current-section indication while scrolling. Reading progress and reveal motion are cancellable under prefers-reduced-motion.
“The build” section explains Foundation / Interaction / Resilience. FAQ uses native <details> so it works without JS and without a dependency.
- Skip link for keyboard users
- Content readable if JS fails
- Reduced-motion respected
- Theme fallback without storage
- Local assets only — no CDN runtime required for core UI
Automated Playwright checks across many widths in both themes, keyboard gallery behavior, theme persistence, FAQ, reduced motion, and no-JS navigation. See RESPONSIVE_QA.md.
- Responsive composition — fluid type and grids; nav collapses cleanly
- Interaction design — theme, filters, viewer, back-to-top, progress, section tracking, FAQ
- Considered motion — short reveals; no mandatory animation loop
- Progressive enhancement — usable without JS; storage-safe theme
- Maintainable delivery — static files, local assets, regression script
python -m http.server 5500Regenerate README screenshots (optional):
python scripts/capture_feature_shots.py| File | Responsibility |
|---|---|
index.html |
Semantic page, content, FAQ, viewer markup |
assets/css/style.css |
Base layout + light palette |
assets/css/enhancements.css |
Dark palette, theme, gallery, viewer |
assets/css/presentation.css |
Larger type, project section, effects |
theme-init.js |
Early theme apply |
script.js |
Navigation / menu |
enhancements.js |
Theme, filters, viewer, back-to-top |
presentation.js |
Motion, progress, section tracking |
tests/responsive_check.py |
Browser regression checks |
scripts/capture_feature_shots.py |
README screenshot generator |
python -m pip install playwright
python tests/responsive_check.pyDefault browser channel: Chrome. Set BROWSER_CHANNEL=msedge for Edge. Artifacts land in ignored tests/artifacts/.
WebActiveBox/
├── index.html · *.js
├── assets/css · fonts · images · Design
├── docs/screenshots/ # 20 labelled JPGs
├── scripts/capture_feature_shots.py
├── tests/responsive_check.py
├── CASE_STUDY.md · RESPONSIVE_QA.md
├── LICENSE · README.md · TREE.txt
Independent front-end study of an existing template — not a commercial product claim or client delivery. Original imagery/fonts keep their attribution; review licenses before commercial reuse. Team / portfolio / testimonial copy is illustrative. No analytics, checkout, or Lighthouse score is claimed. Tests do not certify every physical device or AT.
Mohammad Rohaan · https://github.com/rohaan2802
Live site: https://rohaan2802.github.io/WebActiveBox/
Repository: https://github.com/rohaan2802/WebActiveBox