Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/digital-domain/llms.txt

Use this file to discover all available pages before exploring further.

The Work page renders career history as if it is being typed live into a Windows Notepad document. A useEffect hook drives a character-by-character reveal animation from a full text string — appending one character every 10 milliseconds — with a blinking cursor anchored at the insertion point. The result feels like watching a dot-matrix printer produce a résumé in real time. The window is non-draggable and fills the full 80vh viewport height, giving the typewriter output plenty of room to breathe.

​
Notepad Window

The entire page is a single Window component titled “CAREER.TXT - Notepad” with a FileText Lucide icon: 
<div className="max-w-4xl mx-auto h-[80vh]">
  <Window
    title="CAREER.TXT - Notepad"
    icon={<FileText size={14} />}
    defaultSize={{ width: "100%", height: "100%" }}
    className="!static h-full"
  >
    {/* Menu bar + content area */}
  </Window>
</div>
The !static class overrides the Window component’s default positioning, keeping it in the document flow. The window fills the parent container at full width and height.
Visual appearance: Standard Win98 grey window border with a blue title bar displaying a file icon and “CAREER.TXT - Notepad”. The interior is split vertically: a thin grey menu bar at the top, and the scrollable text content below. The overall appearance is an authentic Windows Notepad clone.

​
Decorative Menu Bar

A row of non-functional menu items sits at the top of the window interior, styled to match Notepad’s own menu bar: 
<div className="flex gap-4 px-2 py-1 bg-win-gray text-sm font-comic border-b border-gray-400">
  <span className="cursor-pointer hover:bg-blue-800 hover:text-white px-1">File</span>
  <span className="cursor-pointer hover:bg-blue-800 hover:text-white px-1">Edit</span>
  <span className="cursor-pointer hover:bg-blue-800 hover:text-white px-1">Format</span>
  <span className="cursor-pointer hover:bg-blue-800 hover:text-white px-1">View</span>
  <span className="cursor-pointer hover:bg-blue-800 hover:text-white px-1">Help</span>
</div>
Visual appearance: Each menu item is plain text in font-comic text-sm on the bg-win-gray toolbar. Hovering any item applies a blue background (hover:bg-blue-800) and white text, mimicking an open menu highlight. None of the items trigger any action — they are purely decorative.

​
Typewriter Animation

A useState hook holds the currently displayed text, and a useEffect drives the reveal: 
const [displayedText, setDisplayedText] = useState("");

useEffect(() => {
  let i = 0;
  const interval = setInterval(() => {
    setDisplayedText(fullText.substring(0, i));
    i++;
    if (i > fullText.length) clearInterval(interval);
  }, 10);
  return () => clearInterval(interval);
}, []);
The setInterval callback calls setDisplayedText on every tick, slicing fullText from index 0 to the current cursor position i, then incrementing i. At 10ms per character, the full text (approximately 730 characters) completes in roughly 7.3 seconds. The cleanup function clearInterval ensures the interval is cancelled if the component unmounts before completion.
The interval fires at 10ms — the minimum reliable interval in modern browsers. This produces a rapid, smooth typing effect rather than a slow dramatic reveal. The animation runs once on mount and does not loop.

​
Full Career Text Content

The complete text string is defined as a template literal constant (k in the compiled source): 
==================================================
              CAREER.TXT - NOTEPAD
==================================================

> CURRENT STATUS: Employed but always compiling...

[2022 - PRESENT] SENIOR FULL-STACK DEVELOPER
@ TechCorp Solutions Inc.
--------------------------------------------------
* Architected a microservices backend that hasn't
  crashed in 400 days (knock on wood).
* Reduced load times by 40% by deleting unused 
  node_modules (mostly left-pad).
* Mentored junior devs on the ancient art of 
  reading error messages.

[2019 - 2022] FRONTEND ENGINEER
@ StartupXYZ
--------------------------------------------------
* Built 14 different variations of a dropdown menu.
* Successfully convinced management to stop using
  Internet Explorer 11.
* Implemented dark mode, saving millions of retinas.

[2017 - 2019] JUNIOR WEB DEVELOPER
@ Local Agency
--------------------------------------------------
* Centered divs.
* Changed button colors based on A/B tests.
* Learned that 'git push --force' is dangerous.

==================================================
EOF
Three positions are documented, spanning from 2017 to present:
PeriodRoleCompany
2022 – PresentSenior Full-Stack DeveloperTechCorp Solutions Inc.
2019 – 2022Frontend EngineerStartupXYZ
2017 – 2019Junior Web DeveloperLocal Agency

​
Text Rendering and Blinking Cursor

The text content area uses whitespace-pre-wrap to preserve the ASCII art formatting of the text string: 
<div className="flex-1 p-4 overflow-auto font-courier text-sm whitespace-pre-wrap leading-relaxed text-black">
  {displayedText}
  <span className="animate-blink inline-block w-2 h-4 bg-black ml-1 align-middle" />
</div>
Visual appearance: The revealed text renders in a monospace courier font (font-courier) at text-sm with leading-relaxed line spacing. The black background of the <span> cursor blinks continuously via a CSS blink keyframe animation (animate-blink) — a solid 8×16px black rectangle toggling between visible and invisible. The cursor sits immediately after the last revealed character, align-middle to the text baseline.
The overflow-auto on the content container allows the window to scroll if the text grows taller than the visible area, though the h-[80vh] window is tall enough to contain the full career text without scrolling.

​
Component Dependencies

ComponentSourceUsage
Window (p)components/Window.jsCAREER.TXT window frame
file-text (Lucide)lucide-reactWindow title bar icon
useStateReact 18displayedText state
useEffectReact 18setInterval typewriter driver
CSS animate-blinkTailwind configBlinking cursor keyframe

Build docs developers (and LLMs) love

Get started for freeTalk to us