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 Testimonials page lives at /testimonials and presents social proof from clients and peers as a collection of physical-looking artefacts scattered across a warm tan background (bg-[#d4a373]). Three distinct draggable items — a white email printout, a blue forum post card, and a yellow post-it note — are positioned around the patterned surface. Visitors can drag any of them freely, rearranging the layout to read whichever note catches their eye. All drag behavior is powered by Framer Motion.

​
Win98 Window configuration

PropertyValue
Window titleKind Words From Strangers
Title bar iconmessage-square (Lucide), turquoise
Width900 px
Height650 px
Interior backgroundTan bg-[#d4a373] with SVG chevron pattern

​
The three draggable items

Email Card

A white paper-style card (w-80, font-mono, text-sm) mimicking a printed email. From: boss@company.com, To: dev@portfolio.com, Subject: “Great work on the launch”. Body: “Just wanted to say the new site looks amazing. The retro theme is a huge hit with the team. You really nailed the aesthetic while keeping it fast.” Initial rotation: −3 degrees.

Forum Post Card

A blue card (bg-[#e2eaf3], border-[#a3b8cc]) styled like a post from a late-90s web dev forum. Header bar: “Web Dev Forums :: Showoff Your Site” (bg-[#5c7ca8]). Username: CodeNinja, Posts: 1,337. Body: “Bro this portfolio is insane. The attention to detail with the Win98 borders is chef’s kiss.” Initial rotation: +2 degrees.

Post-it Note

A yellow sticky note (bg-yellow-200, w-48 h-48, font-pixel) with blue text. Content: "Best dev I've ever worked with. 10/10 would hire again." — A Happy Client. Initial rotation: −8 degrees.

​
Drag behavior

All three items are motion.div elements with drag and dragMomentum={false}. Rotation is set via the inline style prop, not Framer Motion’s initial: 
// In main.js — Testimonials component, email card
<motion.div
  drag
  dragMomentum={false}
  className="absolute top-10 left-10 w-80 bg-white p-4 shadow-lg border border-gray-200
             font-mono text-sm cursor-grab active:cursor-grabbing"
  style={{ rotate: -3 }}
>
  {/* email content */}
</motion.div>

// Forum post card
<motion.div
  drag
  dragMomentum={false}
  className="absolute top-20 right-20 w-96 bg-[#e2eaf3] ..."
  style={{ rotate: 2 }}
>
  {/* forum post content */}
</motion.div>

// Post-it note
<motion.div
  drag
  dragMomentum={false}
  className="absolute bottom-20 left-1/3 w-48 h-48 bg-yellow-200 p-4
             shadow-md font-pixel text-lg text-blue-800 cursor-grab active:cursor-grabbing"
  style={{ rotate: -8 }}
>
  {/* post-it content */}
</motion.div>
dragMomentum={false} keeps items stationary exactly where the user drops them. Items do not snap back or animate when released — they stay wherever they land.
Dragged positions are not persisted between sessions. Navigating away and back resets all three items to their original positions and rotations. This is intentional — the interaction is decorative.

​
Customizing testimonials

1

Update existing content

Find the three motion.div blocks inside the Testimonials component in main.js and edit the text content of each card directly. The email, forum post, and post-it are each self-contained JSX blocks.
2

Reposition items

Change the top-*, left-*, right-*, or bottom-* Tailwind classes on each motion.div to move items to different starting positions. Make sure items don’t start directly on top of each other.
3

Adjust rotation

Change the style={{ rotate: N }} value on each card. The three defaults are -3, 2, and -8. Alternating positive and negative values makes the layout look naturally scattered rather than uniformly aligned.
4

Add a new testimonial

Copy one of the existing motion.div blocks and paste it as a new sibling inside the background div. Assign it a different absolute position and rotation value so it doesn’t overlap an existing card.
If you add a fourth item, ensure its initial Tailwind position classes place it within the 900 × 650 content area bounds. Items initialized outside the visible area require the user to drag other cards aside to find them — which can be a fun easter egg if intentional.

Work

The other draggable-card page — polaroid work history on an off-white background.

Win98Window

Window wrapper props for this page’s title bar configuration.

Architecture Overview

How Framer Motion drag is set up across the portfolio.

Theming

Adjusting the tan background texture and retro color tokens.

Build docs developers (and LLMs) love

Get started for freeTalk to us