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 Projects page showcases portfolio work as a grid of Win98Window cards. Each card has a cover image, project title, tech-stack badge, and a short description. Clicking a card animates it open into a full maximised Win98Window — using Framer Motion’s layout prop — where the developer can surface screenshots, a longer write-up, and links to the live site or GitHub repository.

​
Purpose

This is the primary showcase section of the portfolio. It communicates what the developer has built, the technologies they used, and where visitors can see or use the work. The Win98 window metaphor makes each project feel like an .exe you are about to run — which fits the overall Y2K theming.

​
Layout and Structure

Cards are arranged in a responsive CSS grid (grid-cols-1 md:grid-cols-2 gap-6) inside a max-w-6xl mx-auto container. The FolderOpen and Code Lucide icons appear in the page heading. Each project card is a Win98Window component with:
  • title set to the project name (e.g. "GeoCities Clone")
  • A cover <img> styled w-full h-48 object-cover border-2 border-win-gray shadow-bevel-inset
  • A font-bold text-lg project name heading
  • A tech string rendered as small badge text
  • A short desc paragraph
When a card is clicked, a separate full-screen Win98Window opens (defaultMaximized: true). This detail window shows a "Decompressing files..." animation, a "Technologies Used" section with a bulleted list, and a "Visit Site (External Link)" button styled as win98-button.
The expand/collapse animation is driven by Framer Motion’s layout prop on the Win98Window wrapper. The window animates from card size to full-screen using a spring transition (bounce: 0, duration: 0.3). Setting defaultMaximized: false on a card resets it to the grid view.

​
Project Data Structure

Each project entry follows this shape: 
{
  id: 1,
  title: "GeoCities Clone",
  desc: "A modern recreation of the classic hosting platform.",
  img: "https://...",          // absolute URL or local /public path
  tech: "React, Tailwind, Nostalgia"
}
The four default projects are:
TitleDescriptionTech
GeoCities CloneA modern recreation of the classic hosting platform.React, Tailwind, Nostalgia
Winamp Web PlayerIt really whips the llama’s ass.Web Audio API, Canvas
AIM Web ClientChat with your buddies like it’s 2002.WebSockets, Node.js
Space Jam Site RevampUnnecessary modernization of perfection.HTML, CSS, Marquee

​
How to Customize

1

Add a new project

Locate the project data array in the source and append a new object with a unique id, title, desc, img, and tech string. The card renders automatically — no JSX changes needed.
2

Replace cover images

Each project’s img field points to an Unsplash URL. Replace these with screenshots of your actual work. Store images in the public/ directory and reference them with a root-relative path like "/screenshots/my-project.png".
3

Add GitHub and live-site links

The maximised detail window currently shows one "Visit Site" button. Extend the project data object with a github field and add a second win98-button inside the detail view for the repository link.
4

Update the window title suffix

Card titles are rendered directly from the project.title field in the Win98Window title prop. You can append a .exe suffix by updating the template literal in the source.
You can give individual project cards different window sizes by passing a className prop to the Win98Window (e.g. "md:col-span-2" to make one card span both columns as a featured project).

Build docs developers (and LLMs) love

Get started for freeTalk to us