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 Work History app turns a conventional résumé into an interactive terminal session. When the window opens, a setInterval loop feeds career log entries onto the screen one line every 300 ms — recreating the feeling of watching a server boot sequence. Once the log finishes, a blinking prompt invites visitors to type one of the supported commands, making the portfolio feel like a system you can actually poke around in.

​
Visual Design

The terminal fills the entire app window and is styled with three Tailwind classes that do all the heavy lifting:
ClassEffect
bg-[#1E1E1E]Near-black background matching VS Code Dark
text-[#00FF00]Classic phosphor-green text
font-codeMonospaced font stack
The prompt string is C:\DevOS>, echoed in text-white before each command the user types, while output lines remain in green. The input field itself uses bg-transparent outline-none border-none so it blends into the terminal surface, with caret-[#00FF00] for the matching cursor colour. The input is given autoFocus so keyboard focus lands immediately when the app opens.

​
Career Log Entries

The careerLog array is the data source for the animated boot sequence. Each string is pushed into the displayed log at 300 ms intervals via setInterval: 
const careerLog = [
  '[2019-06-01] INITIALIZING CAREER SEQUENCE...',
  '[2019-06-15] Hired @ StartupX as Junior Frontend Dev',
  '[2019-08-22] WARN: First production bug deployed. Sweating profusely.',
  '[2020-01-10] Promoted to Mid-level Developer',
  '[2021-03-01] Transitioned to TechCorp Inc. as Frontend Engineer',
  '[2022-11-15] Led migration from Vue to React (survived)',
  '[2023-05-20] Promoted to Senior Frontend Engineer',
  '[2024-01-10] Architected new design system \'TealUI\'',
  '[CURRENT] Seeking new challenges. Type \'help\' for commands.',
];
The useEffect that drives the animation clears the interval once every entry has been displayed, so it only runs once per mount: 
useEffect(() => {
  let index = 0;
  const interval = setInterval(() => {
    if (index < careerLog.length) {
      setLog(prev => [...prev, careerLog[index]]);
      index++;
    } else {
      clearInterval(interval);
    }
  }, 300);
  return () => clearInterval(interval);
}, []);

​
Auto-Scroll

A second useEffect fires every time the log state array changes. It calls scrollIntoView on a ref attached to an empty <div> placed after the last log line, keeping the terminal pinned to the most recent output: 
useEffect(() => {
  bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [log]);

​
Supported Commands

Type any of the following at the C:\DevOS> prompt and press Enter. The handleCommand function processes input with a switch statement; the trimmed, lowercased value is matched against the cases below.
Prints the list of available commands.
Available commands: help, whoami, ls, clear, sudo
Returns the current user identity — with a permission caveat.
guest_user (Permission denied for existential queries)
Lists the contents of the current (fictional) directory.
resume.pdf  portfolio_v1_final_FINAL.zip  secrets.txt
Resets the log state array to [], wiping the terminal output. No output line is added — the handleCommand function returns early for this case.
case 'clear':
  setLog([]);
  return;
Issues a sternly worded refusal.
Nice try. This incident will be reported.
Any unrecognised command falls through to the default branch and echoes the input back:
Command not found: [your input]
Every command except clear appends two lines to log: the echoed prompt (C:\DevOS> [input]) and the response string. Typed input is always shown in text-white so the user’s own entries stand out from system output.

​
Customising the Terminal

Add career entries — append new strings to the careerLog array. The animation loop will pick them up automatically; no other changes are needed. Add new commands — extend the switch statement inside handleCommand: 
case 'skills':
  response = 'React · TypeScript · Node.js · Tailwind · D3.js';
  break;
Change the prompt string — find C:\DevOS> in the JSX (rendered inside the <span> and prepended when echoing typed commands) and replace it with any string you prefer. Adjust the animation speed — change the 300 ms delay in setInterval to a higher value for a slower typewriter effect or 0 to display all entries instantly.

Build docs developers (and LLMs) love

Get started for freeTalk to us