mackehansson.dev / work / portfolio
<- back to work
Mode
Case study detail
Case study/2026

Terminal Portfolio

An interactive terminal-style portfolio and résumé. Boots with a fake BIOS sequence and accepts shell-like commands to navigate experience, skills, and projects.

const project = {
  title: "Terminal Portfolio",
  year: 2026,
  tech: ["React 19", "TypeScript", "Vite", "TanStack Router", "@react-pdf/renderer"],
};

Problem

Most developer portfolios are interchangeable — a header, a skills list, and some project cards. I wanted something that showed how I think and work, not just what I've shipped. The challenge was building something immediately memorable without being a gimmick, while still functioning as a practical resume I could actually hand to a recruiter.

Solution

A dual-mode portfolio: the primary interface is a terminal emulator that boots with a fake BIOS POST sequence and accepts shell-like commands to navigate my resume. It's the personality layer — immediate, personal, and a signal of engineering depth. One click switches to a traditional scrollable view for quick scanning or PDF download. Both modes read from the same data source, so there's only one place to maintain content.

Outcomes

  • Fake BIOS boot sequence with memory check, device detection, and OS load animation
  • 10+ shell commands: help, experience, projects, skills, whoami, and several easter eggs
  • Four terminal themes: green phosphor, amber, modern dark, and light
  • Single scrollable homepage with sticky nav and full PDF export via @react-pdf/renderer
  • Project detail pages with case study format — the page you're reading right now
  • Hidden easter eggs: Konami code confetti, snake game, matrix rain, and rm -rf simulation
  • Single-page scroll layout with deep links for terminal, timeline, projects, and contact sections

Tech

React 19TypeScriptViteTanStack Router@react-pdf/renderer