Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dark-retro-webpage/llms.txt

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

The Projects page (/projects) showcases the developer’s work as a filterable grid of .bevel-window cards. Each card presents a project title, description, technology stack tags, and links to the GitHub repository and live demo. A tag-based filter bar at the top of the page lets visitors narrow results to a specific technology or category.

​
Layout structure

The page uses a full-width container capped at max-w-6xl with a vertical spacing rhythm (space-y-8). From top to bottom:
  1. Page heading — a font-display (Press Start 2P) section title, e.g. "PROJECTS_DIR/", styled in text-[#a855f7].
  2. Filter bar — a wrapping row of tag buttons. The active filter is highlighted; clicking a tag filters the card grid to show only matching projects.
  3. Project card grid — a responsive grid (lg:grid-cols-2, collapsing to single column on small screens) of project cards.

​
Project card anatomy

Each project card is a .bevel-window panel with the following internal structure: 
// Project card pattern (from assets/main.js)
<div className="bevel-window p-4 flex flex-col gap-4">
  {/* Header: title + external links */}
  <div className="flex justify-between items-start">
    <h3 className="font-mono text-[#e2e8f0] text-lg font-bold">
      retro-weather-app
    </h3>
    <div className="flex gap-2">
      <a href="https://github.com/..." className="bevel-button p-1">
        {/* Github icon (lucide-react) */}
      </a>
      <a href="https://..." className="bevel-button p-1">
        {/* ExternalLink icon (lucide-react) */}
      </a>
    </div>
  </div>

  {/* Description */}
  <p className="text-[#94a3b8] text-sm leading-relaxed">
    A weather dashboard styled like a Win95 desktop app, built with
    React and the Open-Meteo API.
  </p>

  {/* Tech stack tags */}
  <div className="flex flex-wrap gap-2 mt-auto">
    <span className="text-xs font-mono px-2 py-1 bg-[#a855f7]/10 border border-[#a855f7] text-[#a855f7]">
      React
    </span>
    <span className="text-xs font-mono px-2 py-1 bg-[#22d3ee]/10 border border-[#22d3ee] text-[#22d3ee]">
      TypeScript
    </span>
  </div>
</div>
The mt-auto on the tags row pushes the tag strip to the bottom of the card regardless of description length, keeping the grid visually aligned.

​
Tag filter bar

The filter bar renders a list of all unique tags collected from the projects data array. Clicking a tag sets the active filter in component state; the grid then shows only projects whose tags array includes the active filter. Clicking the active tag again (or an “ALL” button) resets the filter. 
// Filter button pattern
<button
  onClick={() => setActiveFilter(tag)}
  className={`bevel-button px-3 py-1 font-mono text-xs ${
    activeFilter === tag
      ? "bg-[#a855f7] text-white"
      : "text-[#c0c8d8]"
  }`}
>
  {tag}
</button>
The filter is client-side only. There is no pagination — all projects in the data array are rendered into the DOM and simply hidden/shown by the filter logic.

​
Adding a project

Projects are defined as objects in an array inside the Projects component in assets/main.js. To add a new project, append an object to the array: 
// In assets/main.js — projects data array
const projects = [
  {
    title: "retro-weather-app",
    description:
      "A weather dashboard styled like a Win95 desktop app, built with React and the Open-Meteo API.",
    tags: ["React", "TypeScript", "CSS"],
    github: "https://github.com/yourusername/retro-weather-app",
    live: "https://retro-weather.example.com",
  },
  // Add your new project here:
  {
    title: "my-new-project",
    description: "A short description of what this project does.",
    tags: ["React", "Node.js"],
    github: "https://github.com/yourusername/my-new-project",
    live: "",           // Leave empty string if no live demo
  },
];
FieldTypeRequiredNotes
titlestring✅Displayed as the card heading in font-mono
descriptionstring✅Short project summary (1–3 sentences)
tagsstring[]✅Technology/category tags; drives the filter bar
githubstring✅Full GitHub URL; leave "" to hide the icon
livestring✅Live demo URL; leave "" to hide the icon

​
CSS utilities used

ClassPurpose
.bevel-windowRaised Win98-style card border + --bg-panel background
.bevel-buttonTag filter button and icon link styling
bg-[#a855f7]/10Purple tint background for tag pills
border-[#a855f7]Purple border for active/React tags
border-[#22d3ee]Cyan border for TypeScript/tool tags
text-[#94a3b8]Muted description text
To change the color of a specific tag’s pill, extend the tag data object with an optional color field ("purple", "cyan", "magenta", etc.) and map that to the corresponding Tailwind border/background classes in the tag rendering logic.

​
Customization

Reorder projects: The grid renders projects in array order. Move objects within the projects array to change display order. Change grid columns: The grid uses lg:grid-cols-2. Change this to lg:grid-cols-3 for a denser three-column layout on large screens. Remove the filter bar: Delete the filter bar JSX and the activeFilter state from the Projects component. Remove the .filter() call on the projects array passed to the card map. Add a “featured” badge: Add a featured: true field to a project object and render a small badge (e.g., a text-[#a3ff12] label styled with .bevel-button) in the card header when project.featured is truthy.

​
Related pages

Case Studies

Deep-dive narratives for selected projects

Skills

Technology categories with animated progress bars

Home

Hero layout with navigation to all sections

Contact

Get in touch or sign the guestbook

Build docs developers (and LLMs) love

Get started for freeTalk to us