Skip to main content

Documentation Index

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

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

The Work page lives at /work and presents the portfolio owner’s professional history in a deliberately tactile way. The window interior uses a light off-white background with a subtle dot pattern, and work history entries are rendered as polaroid-style photo cards positioned at slight random rotations. Visitors can click and drag any card freely. Cards scale up on hover and snap back to their resting rotation when released. Decorative pixel-art star SVGs are scattered behind the cards to complete the scrapbook aesthetic.

​
Win98 Window configuration

PropertyValue
Window title~*~ Where I've Been ~*~
Title bar iconbriefcase (Lucide), brown (#8B4513)
Width900 px
Height600 px
Interior backgroundOff-white bg-[#f4f4f0] with dot SVG pattern

​
Card design

Each work entry is rendered as a white polaroid card. The card structure is: 
motion.div  (white bg, shadow-xl, border border-gray-200, w-72, p-4, pb-12)
├── div       (push-pin strip — absolute, top-3, white/50, border, rotate-3)
├── div       (colored photo area — w-full h-40, bg-{color}, company name label)
└── div       (text body — font-mono)
    ├── h3    (role, text-retro-navy)
    ├── p     (years, text-retro-magenta)
    └── p     (description)
The initial rotation for each card alternates between -2 degrees (even index) and +3 degrees (odd index) via the initial prop.

​
Drag behavior

Framer Motion’s drag prop enables free-form card dragging. Each polaroid is wrapped in a motion.div with the following configuration: 
// In main.js — Work component, per card
<motion.div
  drag
  dragMomentum={false}
  initial={{ opacity: 0, y: 50, rotate: index % 2 === 0 ? -5 : 5 }}
  animate={{ opacity: 1, y: 0, rotate: index % 2 === 0 ? -2 : 3 }}
  transition={{ delay: index * 0.2 }}
  whileHover={{ scale: 1.05, rotate: 0, zIndex: 10 }}
  className="w-72 p-4 pb-12 bg-white shadow-xl relative border border-gray-200"
>
  {/* card content */}
</motion.div>
dragMomentum={false} ensures cards stop exactly where the user releases them. whileHover scales the card up slightly and straightens it to rotate: 0 on hover, then raises it above siblings via zIndex: 10.
Card positions are not persisted between sessions. Every time the Work page is navigated to, cards reset to their original positions and rotations. This is intentional — the drag interaction is a visual flourish, not a persistent layout tool.

​
Decorative pixel stars

Two SVG pixel stars are rendered as absolutely-positioned elements behind the card layer. Both use a 4-pointed star path (M12 0L14.59 9.41L24 12L14.59 14.59L12 24L9.41 14.59L0 12L9.41 9.41L12 0Z):
  • Top-left star: 24 × 24, fill #ec4899 (magenta), animate-pulse
  • Bottom-right star: 32 × 32, fill #00cfd1 (turquoise), animate-pulse, 0.5 s delay

​
Work history data

All work history entries are defined in the jd array inside the Work component in main.js. The array is hardcoded JSX-level data — there is no external data file. 
// In main.js — Work component (jd array)
const jd = [
  {
    company: "TechCorp Inc.",
    role:    "Senior Frontend Engineer",
    years:   "2021 - Present",
    desc:    "Led the migration from legacy jQuery to React. Built a design system from scratch.",
    color:   "bg-yellow-100",
  },
  {
    company: "StartupX",
    role:    "Full Stack Developer",
    years:   "2018 - 2021",
    desc:    "Wore many hats. Shipped features across the stack using Node and Vue.",
    color:   "bg-blue-100",
  },
  {
    company: "Digital Agency",
    role:    "Web Developer",
    years:   "2015 - 2018",
    desc:    "Created pixel-perfect marketing sites and WordPress themes for clients.",
    color:   "bg-pink-100",
  },
];
1

Add a new role

Push a new object into the jd array with company, role, years, desc, and color fields. Use a Tailwind background color class (e.g. bg-green-100) for color.
2

Update an existing entry

Find the object in jd and edit the fields directly. Changes take effect immediately on the next save.
3

Adjust card colors

The color field is applied as the Tailwind class for the photo-strip area at the top of each polaroid. Any bg-* class works — pick one that contrasts well with the gray company-name label rendered on top.
Cards animate in with a staggered delay: index * 0.2 transition. With three cards the last card appears 400 ms after the first. If you add more cards, consider reducing the multiplier to keep the total animation duration reasonable.

Win98Window

Window chrome props — title bar text, icon, and fixed dimensions.

Testimonials

Another draggable-card page — sticky notes and forum posts about the portfolio.

Skills

Companion page listing the technical skills behind the work history.

Architecture Overview

How Framer Motion is integrated across draggable pages.

Build docs developers (and LLMs) love

Get started for freeTalk to us