DEV Community

Cover image for Why My Portfolio Has a Boot Sequence, Window Manager, and 6 Playable Games
Viram Choksi
Viram Choksi

Posted on

Why My Portfolio Has a Boot Sequence, Window Manager, and 6 Playable Games

#webdev #react #portfolio #javascript

I Built a Full Operating System as My Developer Portfolio — Here's How

Most developer portfolios look the same: a hero section, some cards, a contact form. I wanted mine to make recruiters stop scrolling.

So I built ViramOS — a fully functional desktop operating system that runs in the browser. Boot sequence, login screen, draggable windows, taskbar, 13+ interactive apps, 6 playable games, and a working terminal. All built with Next.js, React, and Framer Motion.

Live demo: viram-choksi.vercel.app

What Does It Actually Do?

When you visit my portfolio, you don't see a webpage. You see this:

  1. Boot Sequence — Matrix rain, ASCII art, fake BIOS logs loading frameworks
  2. Login Screen — Glassmorphic card with animated gradient ring, press Enter to unlock
  3. Desktop — Animated wallpapers, floating particles, draggable app icons
  4. Window Manager — Drag, resize, minimize, maximize, snap-to-edge (like Windows 11)
  5. Taskbar — Running app indicators, system tray, control center, clock

And then 13+ apps you can actually use:

  • Terminal with 15+ commands (whoami, neofetch, benchmark, architecture)
  • Projects file manager with metrics and impact numbers
  • Skills package manager with proficiency bars
  • Games — Snake, 2048, Tic Tac Toe (with minimax AI), Typing Test, Memory Card, Reaction Time
  • System Monitor — Real-time FPS, Core Web Vitals, bundle size breakdown, architecture decision records
  • Settings — 12 wallpapers, accent colors, font scaling, night shift, high contrast
  • Command Palette — Press / to fuzzy-search and launch any app

The Tech Stack

Layer Technology
Framework Next.js 16 (App Router, SSR, ISR)
UI React 19, Framer Motion
Styling Tailwind CSS 4
3D Three.js + React Three Fiber
State React Context (no Redux needed)
Email Nodemailer via API route
Analytics Vercel Analytics + Speed Insights
Deploy Vercel (Edge Network)

Architecture Decisions That Matter

Why React Context over Redux?

The OS state (open windows, settings, theme) is shared across components but updates infrequently — user clicks, not real-time data. Context + useCallback/useMemo keeps the bundle smaller and API simpler. Redux would add ~12KB gzipped for state that changes maybe 5 times per session.

Why DOM Windows, Not Canvas?

I considered building the window manager on Canvas (like Figma does). But DOM-based windows mean:

  • Native text selection inside windows
  • Form inputs work naturally
  • Screen readers can access content
  • Standard React component composition

Canvas would give better performance at 50+ simultaneous windows, but a portfolio never has more than 5 open.

Why Framer Motion over CSS Animations?

The boot sequence, window transitions, and desktop effects need orchestrated animations with exit transitions. CSS can't do AnimatePresence — you can't animate an element leaving the DOM. Framer Motion costs ~45KB gzipped but enables spring physics, gesture-based drag, and coordinated mount/unmount animations.

Window Snap Zones

I implemented Windows 11-style snap zones: drag a window to the left edge and it snaps to the left half, right edge for right half, top for maximize. The snap preview shows a translucent overlay while dragging near edges. Dragging a snapped window out restores it to its original size.

const getSnapZone = (clientX, clientY) => {
  const vw = window.innerWidth;
  if (clientY <= 12) return "top";     // maximize
  if (clientX <= 12) return "left";    // left half
  if (clientX >= vw - 12) return "right"; // right half
  return null;
};
Enter fullscreen mode Exit fullscreen mode

Settings Persistence

All user preferences (wallpaper, accent color, font size, night shift) persist to localStorage. The trick with Next.js SSR: you can't read localStorage during server render or you get hydration mismatches. So I start with defaults, then restore from localStorage in a useEffect after mount.

SEO for a JavaScript-Heavy Portfolio

The biggest SEO challenge: the homepage is entirely JS-rendered. Google can crawl dynamic content, but it takes extra time. My approach:

  1. sr-only content — Full text resume hidden but crawlable (same content as the interactive apps)
  2. <noscript> fallback — Visible content for JS-disabled users and crawlers
  3. 11 static landing pages — /frontend-developer-ahmedabad, /react-developer-ahmedabad, etc. with visible content, FAQ schema, and breadcrumbs
  4. JSON-LD structured data — 7 schemas: Person, FAQPage, WebSite, ProfessionalService, ItemList, LocalBusiness, Organization
  5. Dynamic sitemap with proper priorities and dates

Accessibility in an OS Simulation

Building an accessible OS simulation sounds contradictory, but I took it seriously:

  • prefers-reduced-motion — All CSS animations respect the user preference
  • role="application" on the desktop, role="dialog" on windows
  • Skip link — Tab-accessible "Skip to desktop" link
  • Keyboard navigation — Tab through desktop icons, Enter/Space to open apps
  • aria-label on all interactive elements (window controls, taskbar, context menu)
  • Focus indicators — Visible focus-visible rings on all buttons
  • Semantic HTML — <main>, <nav>, <button> instead of <div> everywhere

WCAG compliance in my day job went from 40% to 95%. I applied the same thinking here.

Performance

Despite the visual complexity, the portfolio loads fast:

  • Code splitting — Each app component only loads when its window opens
  • Immutable cache headers — 1-year cache for JS/CSS assets
  • Adaptive particles — Fewer particles on mobile for 60fps
  • Lazy window rendering — Zero hidden DOM nodes for closed apps
  • Vercel Edge Network — CDN distribution + SSR

What I Learned

  1. The OS metaphor forces you to solve real problems — Window z-index management, focus trapping, state persistence, responsive layouts for different "screen sizes" inside windows. These are the same problems production apps face.

  2. Constraints breed creativity — A scrollable page is easy. An interactive desktop with overlapping windows, a taskbar, and 13 apps forces you to think about layout, performance, and UX simultaneously.

  3. Recruiters spend 15-30 seconds — If they don't instantly see something interesting, they leave. The boot sequence animation buys you 5 seconds of attention. The desktop experience keeps them exploring.

Try It

Live: viram-choksi.vercel.app

Open the Terminal and type help. Try / to open the Command Palette. Play Snake. Change the wallpaper in Settings. Drag a window to the edge and watch it snap.

If you're building your own portfolio, steal the architecture — just don't copy the design. The world needs more creative portfolios and fewer Bootstrap templates.

I'm Viram Choksi, a Frontend Engineer in Ahmedabad, India. I build with React.js, Next.js, Vue.js, and TypeScript. Currently at Motadata, previously at MindInventory. Say hi at viramchoksi77166@gmail.com or find me on LinkedIn.

Tags: #webdev #javascript #react #portfolio #nextjs #frontend #career

Top comments (0)