Digital Domain is a personal portfolio site that recreates the look and feel of a Windows 98 desktop and early-2000s personal homepage — complete with beveled buttons, draggable windows, CRT scanline overlays, and a scrolling marquee banner. Under the hood it is a modern single-page application built with React 18, bundled by Vite, and animated with Framer Motion. React Router v6 handles client-side routing across multiple pages, while a collection of reusable ES-module components provides the retro UI primitives shared throughout the site. The repository ships as a pre-built static site: the compiledDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/digital-domain/llms.txt
Use this file to discover all available pages before exploring further.
assets/ directory is committed alongside the source HTML and component files so the project can be deployed to GitHub Pages with no additional build steps.
What’s Inside
Components
A set of pre-built ES-module components — draggable Win98 windows, animated marquee banners, beveled buttons, and a retro hit counter — that any page can import and compose.
Pages
Multiple routed pages covering Home, About, Projects, Skills, Work Experience, Case Studies, Blog, Contact, and Testimonials (Guestbook), each styled with the Win98 aesthetic.
Styling
Compiled Tailwind CSS (
assets/main.css) that encodes Win98 colour tokens, Comic Sans–inspired typography, and CRT-flicker keyframe animations as utility classes applied throughout the components.Deployment
A pre-built
assets/ directory and a .nojekyll file mean the repo can be pushed directly to GitHub Pages with zero additional build steps.Features
Draggable Win98 Windows
The
Window component wraps any content in a titled, draggable, resizable Win98 chrome — complete with minimize, maximize, and close title-bar buttons powered by Framer Motion drag controls.Marquee Text Banner
The
Marquee component scrolls a text string horizontally across the viewport on an infinite Framer Motion loop, exactly as seen on mid-2000s personal homepages.CRT Scanlines Overlay
A fixed
div.scanlines element is rendered by the Layout component and sits above all page content, casting repeating horizontal scan-line stripes across the screen.Beveled Button
The
BeveledButton component renders a Win98-style button with an inset shadow on press using Framer Motion’s whileTap and CSS shadow-win-btn / shadow-win-btn-active utilities.Guestbook
The
/testimonials route renders a classic guestbook page where visitors can read testimonials displayed in the signature Win98 window chrome.Typewriter Career Page
The Work Experience page animates job history text with a typewriter entrance effect, giving it the feel of a terminal printout on a vintage CRT monitor.
Retro Hit Counter
The
HitCounter component displays an animated digit-flip counter in the style of classic 2000s webpage visit counters.Hash-Based Routing
React Router v6 is configured with a hash history so all navigation changes only
window.location.hash, making every route work correctly on static hosts like GitHub Pages without a redirect server.Tech Stack
| Technology | Version | Role |
|---|---|---|
| React | 18 | UI rendering and component model |
| Vite | — | Dev server, HMR, and production bundler (source not committed) |
| React Router | v6 | Client-side routing with hash-based navigation for static hosting |
| Framer Motion | — | Drag controls, page transitions, and element animations |
| Lucide React | v0.522 | Icon set used in Win98 window title-bar buttons |
Routes
The SPA defines client-side routes registered under a single root layout that renders the sticky header, navigation bar, and scanlines overlay. The nav links are driven by thesd array defined in components/Layout.js.
| Path | Page |
|---|---|
/ | Home |
/about | About Me |
/projects | Projects |
/skills | Skills |
/work | Work Experience |
/case-studies | Case Studies |
/blog | Blog |
/testimonials | Guestbook / Testimonials |
/contact | Contact |