Skip to main content

Documentation Index

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

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

The About page (/about) reframes a developer biography as a role-playing game character sheet. The page opens with the GlitchText headline PLAYER ONE: PROFILE and then splits into two zones: a narrow left column containing the character portrait card and class title, and a wider right area presenting stat cards (BACKSTORY, SPECIAL ABILITIES, and WEAKNESSES) in a two-column sub-grid. Below both columns, a full-width horizontally-scrolling timeline section labelled STORY MODE runs the developer’s career from 2015 to 2026.

​
Layout Structure

The page uses a three-column CSS grid. The character card occupies one column and the stat cards occupy two columns, stacking to full width on mobile. 
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
  {/* Left: Character Card */}
  <div className="col-span-1 flex flex-col items-center space-y-6">
    ...
  </div>
  {/* Right: Stat Cards grid */}
  <div className="col-span-1 md:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-6">
    ...
  </div>
</div>

​
Character Card

The character portrait is a pixel-bordered container. Inside it, a background image is applied at reduced opacity with mix-blend-luminosity, giving a monochrome desaturated tint. On hover, the image transitions to full opacity. A Lucide React User icon sits above the image and scales up slightly on group hover. Beneath the portrait, the character class label is displayed in two lines: 
<h2 className="text-3xl text-white">LVL 99 DEVELOPER</h2>
<p className="text-neon-green text-xl">CLASS: FRONTEND MAGE</p>

​
Stat Cards

Each stat section uses a reusable card component with a title, icon, and bordered container. The three stat cards and their content are:

BACKSTORY

A short paragraph in the portfolio’s body font. Describes the origin story: spawned in a small town, leveled up through non-tech industries before discovering coding.

SPECIAL ABILITIES

An unordered list of three abilities, each with a neon-cyan bold label followed by a description: Pixel Perfect, State Manager, and Vibe Check.

WEAKNESSES

A flex-wrap collection of styled pill tags. Default values: Internet Explorer, Uncommented Regex, Meetings that could be emails, Centering Divs (Just kidding). Spans full width across both sub-grid columns.

Adding a Card

Create a new stat card by copying the card component pattern and placing it inside the two-column sub-grid. Pass a spanning class to fill both columns.

​
Story Mode Timeline

Below the character grid, a full-width parallax timeline scrolls horizontally as the page scrolls vertically. It uses useScroll from Framer Motion with the section ref and maps scrollYProgress to a CSS x transform, sliding the timeline strip leftward as you scroll down. The six milestones defined in the source are:
YearTitleDescription
2015TUTORIALDiscovered View Source
2017LEVEL 1Retail & CS Grind
2019LEVEL 2Healthcare Tech
2021MINI-BOSSFirst Freelance Gig
2023LEVEL 3Full-Stack Mastery
2026CURRENTBuilding the Future
const timeline = [
  { title: "TUTORIAL",  desc: "Discovered View Source", year: "2015" },
  { title: "LEVEL 1",   desc: "Retail & CS Grind",      year: "2017" },
  { title: "LEVEL 2",   desc: "Healthcare Tech",         year: "2019" },
  { title: "MINI-BOSS", desc: "First Freelance Gig",     year: "2021" },
  { title: "LEVEL 3",   desc: "Full-Stack Mastery",      year: "2023" },
  { title: "CURRENT",   desc: "Building the Future",     year: "2026" },
];
Each milestone node renders a neon-green ground line, a pulsing neon-yellow circle marker, and the year, title, and description stacked below. A bouncing neon-cyan player sprite at the horizontal centre acts as the viewport position indicator.

​
Customisation

1

Update character portrait

Replace the background image URL inside the portrait container with your own hosted image URL. The mix-blend-luminosity class applies the synthwave tint automatically.
2

Update class title and level

Change LVL 99 DEVELOPER and CLASS: FRONTEND MAGE in the character card section below the portrait.
3

Edit bio text

Locate the BACKSTORY card and replace the paragraph content with your own origin story.
4

Add or remove abilities

Find the list inside the SPECIAL ABILITIES card. Each item follows the pattern: a neon-cyan bold label followed by a description string.
5

Edit the timeline

Modify the timeline array. Each entry needs title, desc, and year strings. The parallax translation range may need adjusting if you add more than six milestones.
The STORY MODE container has overflow-hidden set, so only one viewport-width of the timeline strip is visible at a time. Increase the negative percentage in the useTransform call to expose more milestones during scroll when adding extra entries.

Build docs developers (and LLMs) love

Get started for freeTalk to us