Skip to main content

Documentation Index

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

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

The Work page presents employment history in the style of an old-fashioned printed résumé — formal bullet points, company names, and date ranges. The twist is a hidden “REAL story” panel behind each job title: clicking a role expands a Win98-style dialog that replaces the polished CV copy with a candid, self-deprecating account of what actually happened. The Briefcase Lucide icon labels the page heading.

​
Purpose

This section serves as the professional experience timeline. It demonstrates career progression and communicates seniority, while the hidden real-story mechanic adds personality and humour. The dual-layer approach lets the page function as a genuine résumé while winking at the audience.

​
Layout and Structure

The page is a single max-w-4xl mx-auto column. The main heading reads "My Work History" with a parenthetical subtitle "(Pretend this is on Indeed)". A Briefcase icon sits alongside the <h1>. An address-bar line below the heading reads "123 Localhost Ave • 127.0.0.1 • devname@hotmail.com". Below the heading, each job entry is a bordered card with:
  • A win98-button job title — clicking it toggles the real-story panel
  • Company name and date range in a font-courier text-sm sidebar
  • A bulleted list of formal accomplishments styled with ChevronRight bullet icons
A caption above the job list reads "Click a job title for the REAL story!" in small italic text. When the title is clicked, a Win98Window expands containing the realStory text in font-comic style. The toggle state is local component state (useState(null)) and collapses when you click a second job title. The three default work entries are:
TitleCompanyDates
Senior WebmasterTechCorp Global2020 – Present
Frontend NinjaStartup.io2017 – 2020
HTML EnthusiastFreelance2015 – 2017

​
Job Data Structure

Each work entry follows this shape: 
{
  id: 1,
  title: "Senior Webmaster",
  company: "TechCorp Global",
  date: "2020 - Present",
  bullets: [
    "Maintained legacy systems while migrating to modern stacks.",
    "Optimized database queries reducing load times by 40%.",
    "Led a team of 3 junior developers."
  ],
  realStory: "Mostly I just centered divs and told the juniors to 'Google it'. The 40% reduction was because we finally deleted a 10-year-old tracking script nobody knew about."
}

​
How to Customize

1

Replace the job entries

Locate the work history array in the source. Replace the placeholder companies, titles, dates, and bullet points with your actual experience. Keep each bullets array to three or four items for visual balance.
2

Write your real stories

Each realStory string is what appears in the hidden panel. This is your chance to be candid and funny. Keep them to two or three sentences — the Win98 dialog has a fixed height and longer text will overflow.
3

Add a printable resume link

Above or below the job list, add a win98-button that links to a PDF of your résumé stored in public/. The button can use the FileText Lucide icon to signal a downloadable document.
4

Change the page address header

The "123 Localhost Ave • 127.0.0.1 • devname@hotmail.com" address line at the top of the résumé is a plain text string in the heading block. Update it with your real contact details or a fun fictional address.
Set a single realStory to null or an empty string if you want one role to behave as a normal (non-interactive) résumé entry — the toggle handler checks for a truthy value before rendering the reveal panel.

Build docs developers (and LLMs) love

Get started for freeTalk to us