Projects Page: Arcade Game Cartridge Portfolio View

The Projects page presents the developer’s portfolio work through the lens of a retro game library. Each project is rendered as a stylized game cartridge card — complete with a glowing title, arcade-style metadata fields (GENRE: and PLAYERS:), and a description block. When a visitor hovers over a card, hidden action buttons slide into view: RUN DEMO and SOURCE. These are UI elements only — they are not wired to live URLs or repositories in the default implementation. All card data is pulled from the projects array in data/mockData.js, so adding or updating a project requires only a data change — no JSX edits needed.

Route

Property	Value
Path	`/projects`
File (compiled)	`assets/main.js` — `ProjectsPage` component
Data export	`projects` (exported as `p` from `mockData.js`)
Theme colors	Per-project `color` field — `purple` · `lime` · `magenta` · `cyan`

What It Displays

The page renders a responsive CSS Grid of project cards. On mobile the grid is a single column; on desktop it expands to two columns. A section heading introduces the screen in arcade style. Each card shows:

Title — rendered with a neon glow in the project’s accent color
Year — displayed at the top right of the card in dim monospace
GENRE — a short tech-stack or genre tag (e.g., React / Three.js, Next.js / Stripe)
PLAYERS — a player count string (e.g., Solo, Team)
Description — a two-to-three sentence summary of the project
RUN DEMO button — UI element revealed on hover; not linked to a live URL by default
SOURCE button — UI element revealed on hover; not linked to a repository by default

Animations

Cards animate in using Framer Motion’s whileInView trigger. Each card starts at opacity 0 with a downward y offset and transitions to full opacity and natural position as it enters the viewport.

// Approximate per-card animation variant
const cardVariants = {
  hidden: { opacity: 0, y: 40 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.5, ease: "easeOut" },
  },
};

The hover-reveal action buttons use a CSS transition on opacity and translateY, toggled by the parent card’s :hover pseudo-state (via Tailwind’s group + group-hover utilities).

The whileInView trigger fires once — cards do not re-animate when they scroll back into view after leaving. This is controlled by the once: true option passed to the Framer Motion viewport prop.

Data Schema

Each project object in the projects array must conform to the following shape:

// data/mockData.js — project object shape
{
  id: string,          // Unique identifier, used as React key
  title: string,       // Display name of the project
  year: string,        // Release or completion year (e.g. "2025")
  genre: string,       // Tech stack tag shown as "GENRE: <value>"
  players: string,     // Player count shown as "PLAYERS: <value>" (e.g. "Solo", "Team")
  description: string, // Short prose summary of the project
  color: string,       // Accent color — "purple" | "lime" | "magenta" | "cyan"
}

Field Reference

Field	Type	Displayed As	Notes
`id`	`string`	Not displayed	Used as React list key
`title`	`string`	Card heading with neon glow	Keep under 40 chars for layout
`year`	`string`	Top-right of card	Four-digit year as a string
`genre`	`string`	`GENRE: <value>`	Tech stack or genre label, e.g. `React / Three.js`
`players`	`string`	`PLAYERS: <value>`	E.g. `Solo`, `Team`
`description`	`string`	Body text of card	2–3 sentences recommended
`color`	`string`	Glow + border accent	Must be one of four valid tokens

Current Projects

Four projects ship in the default dataset:

Title	Genre	Players	Year	Color
Neon Nexus	React / Three.js	Solo	2025	purple
CyberCart	Next.js / Stripe	Team	2024	lime
GhostWriter	Vue / Node.js	Solo	2024	magenta
PixelPulse	React Native	Team	2023	cyan

Customization

Adding a new project Open data/mockData.js and append a new object to the projects array (exported as p):

// data/mockData.js
export const p = [
  // ... existing entries
  {
    id: "proj-5",
    title: "Pixel Weather App",
    year: "2025",
    genre: "React / OpenWeather",
    players: "Solo",
    description:
      "A retro-styled weather dashboard pulling live forecast data. Features animated pixel-art weather icons and a 7-day outlook panel.",
    color: "cyan",
  },
];

Changing accent colors Set the color field to any of the four supported token values: "purple", "lime", "magenta", or "cyan". The card border, title glow, and button highlight all derive from this single field. Wiring up the RUN DEMO and SOURCE buttons The RUN DEMO and SOURCE buttons are hover-reveal UI elements. They are not linked to real URLs in the default data schema. To add real links, extend the project object with URL fields in mockData.js and update the card component to read them:

// Extended project object with optional URL fields
{
  id: "proj-1",
  title: "Neon Nexus",
  year: "2025",
  genre: "React / Three.js",
  players: "Solo",
  description: "A 3D data visualization dashboard for tracking server metrics in real-time.",
  color: "purple",
  // Add these fields manually if desired:
  demoUrl: "https://demo.example.com",
  sourceUrl: "https://github.com/you/neon-nexus",
}

Keep the genre and players values short — they render in VT323 pixel font at a fixed size. Labels longer than ~15 characters may overflow on mobile screens. See Typography for font size reference.

Sample Data

// Excerpt from data/mockData.js (export p)
[
  {
    id: "proj-1",
    title: "Neon Nexus",
    genre: "React / Three.js",
    players: "Solo",
    year: "2025",
    description: "A 3D data visualization dashboard for tracking server metrics in real-time.",
    color: "purple",
  },
  {
    id: "proj-2",
    title: "CyberCart",
    genre: "Next.js / Stripe",
    players: "Team",
    year: "2024",
    description: "High-performance headless e-commerce storefront with optimistic UI updates.",
    color: "lime",
  },
  {
    id: "proj-3",
    title: "GhostWriter",
    genre: "Vue / Node.js",
    players: "Solo",
    year: "2024",
    description: "Markdown editor with real-time collaboration and haunted AI suggestions.",
    color: "magenta",
  },
  {
    id: "proj-4",
    title: "PixelPulse",
    genre: "React Native",
    players: "Team",
    year: "2023",
    description: "Retro-styled habit tracker that gamifies daily routines.",
    color: "cyan",
  },
]

Case Studies

Deep-dive boss-fight replay view for a single flagship project.

Mock Data Reference

Full reference for all mockData.js exports including the projects array.

Design Tokens

The four accent color tokens used for project card glow effects.

Animations

whileInView and hover animation patterns used across project cards.

Arcade UI

Pages

Projects Page: Arcade Game Cartridge Portfolio View

Route

What It Displays

Animations

Data Schema

Field Reference

Current Projects

Customization

Sample Data

Case Studies

Mock Data Reference

Design Tokens

Animations

Build docs developers (and LLMs) love

Arcade UI

Pages

Documentation Index

​Route

​What It Displays

​Animations

​Data Schema

​Field Reference

​Current Projects

​Customization

​Sample Data

​Related Pages

Case Studies

Mock Data Reference

Design Tokens

Animations

Build docs developers (and LLMs) love

Route

What It Displays

Animations

Data Schema

Field Reference

Current Projects

Customization

Sample Data

Related Pages