Skip to main content

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.

The About app presents personal information through the familiar lens of a Windows system properties dialog. Instead of dry CPU clock speeds, the spec rows surface personality — a processor listed as “ADHD-powered creativity” says more about a developer than any résumé bullet. Three tabs let visitors switch between a technical-specs view, a prose biography, and a grid of hobbies, all without leaving the window.

​
Tab Structure

The active tab is tracked by a single useState string ("system" | "bio" | "hobbies"). Clicking a tab button calls setActiveTab(tab.toLowerCase()), and a conditional render block beneath the tab bar swaps in the correct panel. 
const [activeTab, setActiveTab] = useState('system');
Tab buttons use a conditional class to lift the active tab by one pixel (relative top-[1px]) and apply a bottom-border hack that merges the button into the panel below it, matching the classic Windows tab appearance.

​
System Tab

The System tab is a two-column flex layout: a Polaroid-style photo on the left and a spec grid on the right.

​
Photo Placeholder

<div className="w-32 h-32 bg-white p-2 shadow-md transform -rotate-3">
  <div className="w-full h-full bg-gray-200 flex items-center justify-center text-gray-400 border border-gray-300">
    [Photo]
  </div>
</div>
Replace the inner [Photo] div with a real <img> tag to show your own photo: 
<img src="/your-photo.jpg" alt="Profile photo" className="w-full h-full object-cover" />

​
Spec Rows

The specs are rendered in a grid-cols-[auto_1fr] CSS grid. Each row pairs a Lucide icon with a label and a humorous value:
IconLabelValue
cpuProcessorADHD-powered creativity v3.1 @ 4.2GHz
memory-stickMemory (RAM)8GB short-term + persistent caffeine cache
hard-driveStorage1TB of unfinished side projects
wifiNetworkUsually connected, occasionally drops packets during meetings
All icons are sourced from lucide-react and tinted with the text-os-teal theme token.

​
Bio Tab

The Bio tab renders inside a prose prose-sm container with font-serif text-gray-800, giving the text a warm, editorial feel distinct from the monospaced content in other apps. 
<div className="prose prose-sm max-w-none font-serif text-gray-800">
  <h2 className="text-2xl font-ui font-bold text-os-teal mb-4">
    The Human Behind the OS
  </h2>
  <p className="text-base leading-relaxed mb-4">
    I'm a software engineer who believes that enterprise software doesn't
    have to be boring...
  </p>
</div>
Edit the heading and paragraph copy directly in components/apps/AboutApp.js to replace the placeholder biography with your own.

​
Hobbies Tab

The Hobbies tab uses a grid grid-cols-2 gap-4 layout. Each hobby is a white card with a teal heading and a short description:
HobbyDescription
Mechanical KeyboardsLubing switches and arguing about tactile bumps
Retro GamingCollecting CRTs and playing SNES RPGs
Coffee BrewingPour-over enthusiast who weighs their water
<div className="bg-white p-4 rounded border border-gray-200 shadow-sm">
  <h4 className="font-bold text-os-teal mb-2">Mechanical Keyboards</h4>
  <p className="text-sm text-gray-600">
    I spend too much time lubing switches and arguing about tactile bumps.
  </p>
</div>
Add or remove cards by inserting or deleting <div> blocks in the grid container. A third card in an odd-count grid will span the full row if you add col-span-2 to its className.

​
Customising

All editable values live in components/apps/AboutApp.js:
  • Spec values — change the string after each <span className="font-semibold"> label.
  • Bio text — replace or extend the <p> blocks inside the prose container.
  • Hobbies — add, remove, or rename the card <div> blocks in the grid grid-cols-2 container.
  • Username — update "DevOS User" and "Registered to: You" in the photo sidebar.

Build docs developers (and LLMs) love

Get started for freeTalk to us