Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/windows-xp-developer/llms.txt

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

The Work History page translates a traditional résumé into the portfolio’s Aqua visual language. Each job entry is an aqua-glass card floated to the right of a vertical timeline spine. The three cards appear in reverse chronological order (most recent first) and animate in from the left as the user scrolls into view, turning a static list into a narrative journey through a career.

​
Visual overview

A thin vertical gradient line runs along the left edge of the content column. Each card is positioned to the right of the spine with 24 px of left padding, connected by a glowing circular node marker — a teal-to-blue gradient sphere with an inset white highlight. Inside each card, the layout is: a year-range pill badge at the top, job title in a prominent weight below it, company name in teal, and a short description paragraph at the bottom. A lens-flare sweep effect on the card surface plays on hover.

Timeline spine

A vertical border-left gradient line running the full height of the job list. Each card junction has a circular node marker using a from-teal-300 to-blue-500 gradient with a white inner dot.

Glass card

Each role is an aqua-glass panel with a year badge, role title, company name, and description. A decorative lens-flare overlay sweeps across the panel face on hover.

​
The three roles

All job data is stored in an array in the Work History route component inside assets/main.js:
YearRoleCompanyDescription
2023 – PresentSenior Frontend EngineerTechCorp Inc.Leading the frontend architecture for a modern SaaS platform. Reintroduced tasteful animations to a previously sterile UI.
2020 – 2023UI DeveloperCreative Agency LLCBuilt highly interactive marketing sites. Mastered Framer Motion and complex CSS animations.
2018 – 2020Web DesignerFreelanceDesigned and developed custom WordPress themes. Learned the importance of pixel-perfect implementation.

​
Component structure

// Simplified Work History page structure
import { motion } from 'framer-motion';

const jobs = [
  {
    year:        '2023 - Present',
    role:        'Senior Frontend Engineer',
    company:     'TechCorp Inc.',
    description: 'Leading the frontend architecture for a modern SaaS platform. Reintroduced tasteful animations to a previously sterile UI.',
  },
  {
    year:        '2020 - 2023',
    role:        'UI Developer',
    company:     'Creative Agency LLC',
    description: 'Built highly interactive marketing sites. Mastered Framer Motion and complex CSS animations.',
  },
  {
    year:        '2018 - 2020',
    role:        'Web Designer',
    company:     'Freelance',
    description: 'Designed and developed custom WordPress themes. Learned the importance of pixel-perfect implementation.',
  },
];

export default function WorkHistory() {
  return (
    <div className="timeline-container">
      {/* Vertical spine */}
      <div className="timeline-spine" />

      <div className="jobs-list">
        {jobs.map((job, index) => (
          <motion.div
            key={job.company}
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true, margin: '-100px' }}
            transition={{ duration: 0.5, delay: index * 0.2 }}
            className="timeline-item"
          >
            {/* Node marker */}
            <div className="node-marker" />

            <div className="aqua-glass job-card group">
              {/* Lens-flare hover overlay */}
              <div className="lens-flare group-hover:animate-sweep" />

              <span className="year-badge">{job.year}</span>
              <h3>{job.role}</h3>
              <h4>{job.company}</h4>
              <p>{job.description}</p>
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  );
}

​
Customization

Job entries are stored in the jobs array inside the Work History route component in assets/main.js. Locate the array by searching for "TechCorp Inc.": 
// In assets/main.js — locate the jobs array (search for "TechCorp Inc.")
const jobs = [
  {
    year:        '2023 - Present',   // Free-form string; displayed as a badge pill
    role:        'Senior Frontend Engineer',
    company:     'TechCorp Inc.',
    description: 'One to two sentences about impact and scope.',
  },
  // Entries render top-to-bottom, so put most recent first
];
The description field is a plain string in the source. If you need bullet points (e.g., three key achievements), break the field into an array of strings and map them to list items inside the card template.
Adding more than seven or eight entries will make the timeline very long on mobile. Consider grouping earlier, less relevant roles into a single “Earlier Career” entry with a brief summary.

​
Key interactions

InteractionBehaviour
Scroll into viewCards animate from x: -50 to x: 0 with duration: 0.5, staggered by index * 0.2 s
viewport.onceEach card animates exactly once on first intersection (once: true, margin: '-100px')
Hover on cardA white gradient lens-flare overlay sweeps across the card face (animate-[sweep_1s_ease-in-out])
All cards slide from leftUnlike typical alternating timelines, all cards enter from the left — the spine is on the left edge
The timeline spine in the source is a left-edge vertical gradient line (absolute left-8), not a centred spine. All cards are positioned uniformly to the right of the spine with pl-24 padding. There is no alternating left/right layout.

Build docs developers (and LLMs) love

Get started for freeTalk to us