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 Home app is the first thing visitors see when they land on DevOS. It opens automatically as a README.md window and plays back a Markdown welcome message one character at a time, mimicking the feeling of a file being written to disk in real time. The Notepad chrome — complete with a menu bar and a UTF-8 status strip — grounds the experience in a familiar OS metaphor without sacrificing any personality.

​
What It Does

HomeApp renders a three-region layout inside the window body:
  1. Menu bar — a bg-gray-100 strip with five non-functional labels (File, Edit, Format, View, Help) that complete the Notepad illusion.
  2. Content area — a font-code text-sm whitespace-pre-wrap scrollable div that displays the progressively revealed welcomeContent string followed by a blinking cursor block.
  3. Status bar — a footer strip showing Ln 1, Col 1 on the left and UTF-8 on the right, matching the real Windows Notepad layout.

​
Typewriter Mechanism

The animation uses a single useState string and a setInterval inside a useEffect: 
useEffect(() => {
  let i = 0;
  const interval = setInterval(() => {
    setState(welcomeContent.substring(0, i));
    i += 3;
    if (i > welcomeContent.length) clearInterval(interval);
  }, 10);
  return () => clearInterval(interval);
}, []);
  • Speed: 3 characters revealed per 10 ms tick — approximately 300 characters per second.
  • Cleanup: the effect returns a cleanup function that clears the interval on unmount, preventing memory leaks when the window is closed.

​
The welcomeContent Template Literal

The full welcome message is defined as a tagged template literal at the top of HomeApp.js. It is divided into five sections:
SectionContent
Greeting# Hello, World! 👋 heading and a one-sentence mission statement
Quick LinksA Markdown list of four [label](href) links — About Me, Projects, Skills, Work History
Technical DetailsA bullet list of the core technologies powering DevOS (React, Tailwind CSS, Framer Motion, custom Context)
DividerA --- horizontal rule separating content from the tip
TipAn italic hint reminding users they can drag, resize, and minimise windows
To change the welcome message, edit the template literal directly in components/apps/HomeApp.js: 
const welcomeContent = `
# Hello, World! 👋

Welcome to **DevOS** — replace this line with your own intro.

## Quick Links
- [About Me](about) - Your bio
- [Projects](projects) - Your work
...
`;
The content <div> has an onClick handler that intercepts anchor clicks before the browser can navigate: 
const handleClick = (e) => {
  const target = e.target;
  if (target.tagName === 'A') {
    e.preventDefault();
    const href = target.getAttribute('href');
    const windowMap = { about: 'about', projects: 'projects', skills: 'skills', work: 'work' };
    if (windowMap[href]) {
      alert(`In a full implementation, this would open the ${href} window.`);
    }
  }
};
The windowMap object translates each href value to a window ID recognised by WindowManager. Currently it falls back to an alert — replace the alert call with openWindow(windowMap[href], ...) using the useWindowManager hook to wire up real navigation.
The blinking cursor is a <span> with the Tailwind classes animate-pulse inline-block w-2 h-4 bg-os-teal ml-1 align-middle. It appears immediately and continues blinking even after the typewriter animation finishes, giving the impression of an active terminal caret. Adjust the bg-os-teal class to any colour token to match your theme.

Build docs developers (and LLMs) love

Get started for freeTalk to us