DevOS is a single-page React application that transforms a personal portfolio into a fully interactive, browser-based desktop environment. Instead of a conventional scrollable page, visitors land on a boot sequence, click Login to Desktop, and find themselves in a windowed workspace complete with draggable, resizable apps, a live-clock taskbar, and nine portfolio applications — all running entirely client-side without a backend.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-os/llms.txt
Use this file to discover all available pages before exploring further.
Key Features
Window Manager
A React Context-powered engine that tracks every open window’s position, z-index, minimized state, and maximized state in a single
windows[] array.Boot Screen
An animated terminal log runs on mount, streaming boot messages line by line before revealing the Login to Desktop button.
Desktop & Icon Grid
Nine app icons —
README.md, about_me.exe, projects/, and more — arranged in a column-wrapping flex grid. Double-click any icon to open its window.Taskbar & Live Clock
A persistent 48 px bar at the bottom of the viewport shows open-app pills and a live digital clock, giving the OS illusion its finishing touch.
9 Portfolio Apps
Home, About, Projects, Skills, Terminal (
career.log), Case Studies, Articles, Contact, and Testimonials — each opens in its own floating window.Framer Motion Animations
Every window springs open and fades out on close via
framer-motion motion.div with initial, animate, and exit props. The boot screen uses the same primitives for its login reveal.Tech Stack
| Layer | Library / Tool |
|---|---|
| UI framework | React 18 |
| Styling | Tailwind CSS |
| Animation | Framer Motion |
| Icons | Lucide React v0.522 |
| Build tool | Vite |
os-* colour palette (os-cream, os-teal, os-cyan, os-accent, os-dark) give DevOS its distinct visual identity. Framer Motion handles every entrance, exit, and layout transition so you never need to write a CSS keyframe by hand.
Architecture Overview
DevOS is structured as a thin shell around a centralWindowManagerProvider. The provider wraps the entire tree so that BootScreen, Desktop, and Taskbar all share the same window state without any prop-drilling. Once the boot sequence completes, a single boolean flips and the desktop slides in. From that point on, every user action — opening an app, clicking a taskbar pill, minimising a window — flows through the same context. Read the full breakdown on the Architecture page.
DevOS has no backend. All portfolio data — projects, skills, work history, testimonials, and articles — lives directly inside the corresponding
components/apps/ files. To personalise your portfolio, edit those files and redeploy; no database or API key is required.