Mock Data Reference — Dev Mode Arcade Data Layer

All portfolio content — projects, skills, articles, case studies, and guestbook entries — lives in one place: data/mockData.js. This flat static file is the single source of truth for the entire site. No database, no CMS, no API calls — just a JavaScript module that exports five single-letter constants (p, s, a, c, g) consumed directly by the React components at build time. Editing this file is all you need to make the portfolio your own.

The file is compiled into the production bundle via Vite’s ES module tree-shaking. Only the exports actually imported by components end up in the final build, so unused data adds zero overhead.

Projects — `p`

The p export is an array of project objects rendered on the Projects page. Each entry maps to one arcade game cabinet card, complete with a colored glow accent.

Shape reference

// Project object shape (plain JavaScript — no TypeScript in source)
// {
//   id:          string   — Unique identifier
//   title:       string   — Display title
//   genre:       string   — Tech stack label (shown as "genre")
//   players:     string   — "Solo" or "Team"
//   year:        string   — Release / completion year
//   description: string   — Short summary paragraph
//   color:       string   — One of: "purple" | "lime" | "magenta" | "cyan"
// }

Field reference

Field	Type	Description	Example
`id`	`string`	Unique key used by React as the list `key` prop	`"proj-1"`
`title`	`string`	Project name shown as the cabinet heading	`"Neon Nexus"`
`genre`	`string`	Primary tech stack, displayed as the arcade “genre” tag	`"React / Three.js"`
`players`	`string`	Collaboration mode — `"Solo"` or `"Team"`	`"Solo"`
`year`	`string`	Year the project was completed or published	`"2025"`
`description`	`string`	One-sentence project summary	`"A 3D data visualization dashboard..."`
`color`	`string`	Arcade glow accent — must be one of the four design-token colors	`"purple"`

The color field must be exactly one of "purple", "lime", "magenta", or "cyan". These map directly to the CSS utility classes defined in the design tokens (text-glow-*, box-glow-*, border-arcade-*). Any other value will fall back to an unstyled state with no glow effect.

Full data

// data/mockData.js — projects (export p)
export const 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"
  }
];

Skills — `s`

The s export is an object with three category keys, each holding an array of skill entries. The Skills page renders each category as a separate panel of glowing skill circles.

Shape reference

// Skills object shape (plain JavaScript — no TypeScript in source)
// {
//   frontend: [ { name: string, level: string, desc: string }, ... ],
//   backend:  [ { name: string, level: string, desc: string }, ... ],
//   tooling:  [ { name: string, level: string, desc: string }, ... ],
// }

Category	Description
`frontend`	Browser-facing technologies — frameworks, styling, animation
`backend`	Server-side runtimes, databases, and infrastructure
`tooling`	Developer experience tools — version control, containers, build tools

Field reference

Field	Type	Description	Example
`name`	`string`	Short skill name shown on the circle	`"React"`
`level`	`string`	Arbitrary display string rendered as the proficiency label	`"Level 99"`
`desc`	`string`	Full description shown on hover — keep it punchy	`"Component architecture, hooks, context, performance tuning."`

The level field is a free-form display string — it is never parsed as a number. The convention is "Level <integer>" to stay on-theme, but you can write anything you like (e.g. "MAX", "Legendary", "Still Learning").

Example skill entry

// A single skill object
{
  name:  "React",
  level: "Level 99",
  desc:  "Component architecture, hooks, context, performance tuning."
}

Full data

// data/mockData.js — skills (export s)
export const s = {
  frontend: [
    { name: "React",         level: "Level 99", desc: "Component architecture, hooks, context, performance tuning." },
    { name: "TypeScript",    level: "Level 85", desc: "Strict mode survivor. Generics enthusiast." },
    { name: "Tailwind CSS",  level: "Level 90", desc: "Utility-first styling at the speed of thought." },
    { name: "Framer Motion", level: "Level 75", desc: "Making things bounce, slide, and glow." }
  ],
  backend: [
    { name: "Node.js",     level: "Level 80", desc: "Event-driven server logic and API design." },
    { name: "PostgreSQL",  level: "Level 70", desc: "Relational data modeling and complex queries." },
    { name: "Redis",       level: "Level 60", desc: "Caching and pub/sub for real-time features." }
  ],
  tooling: [
    { name: "Git",    level: "Level 95", desc: "Time travel and alternate timeline management." },
    { name: "Docker", level: "Level 65", desc: "Containerizing the chaos." },
    { name: "Vite",   level: "Level 85", desc: "Lightning-fast builds and HMR." }
  ]
};

Articles — `a`

The a export is an array of writing article objects displayed on the Writing page as an instruction-manual chapter list. Each entry includes a badge indicating the article’s type.

Shape reference

// Article object shape (plain JavaScript — no TypeScript in source)
// {
//   id:      string  — Unique identifier
//   chapter: string  — Display string for the chapter number
//   title:   string  — Article title
//   type:    string  — Badge label — any uppercase string
//   date:    string  — Human-readable publication date
//   excerpt: string  — Short teaser shown beneath the title
// }

Field reference

Field	Type	Description	Example
`id`	`string`	Unique key used by React as the list `key` prop	`"art-1"`
`chapter`	`string`	Chapter number shown on the left spine — display only, not enforced as sequential	`"01"`
`title`	`string`	Full article title	`"The State Management Dilemma"`
`type`	`string`	Badge label stamped on the entry — controls visual style class	`"REFLECTION"`
`date`	`string`	Free-form publication date string	`"Oct 2025"`
`excerpt`	`string`	One-sentence teaser shown under the title	`"Why I stopped worrying..."`

The type field controls the badge rendered on the Writing page entry. Built-in values are "REFLECTION", "TECHNICAL", and "BUG REPORT", but the component accepts any uppercase string — useful for custom categories like "TUTORIAL" or "DEEP DIVE".

Full data

// data/mockData.js — articles (export a)
export const a = [
  {
    id:      "art-1",
    chapter: "01",
    title:   "The State Management Dilemma",
    type:    "REFLECTION",
    date:    "Oct 2025",
    excerpt: "Why I stopped worrying and learned to love simple React Context."
  },
  {
    id:      "art-2",
    chapter: "02",
    title:   "CSS Grid: A Boss Guide",
    type:    "TECHNICAL",
    date:    "Aug 2025",
    excerpt: "Defeating complex layouts without relying on absolute positioning."
  },
  {
    id:      "art-3",
    chapter: "03",
    title:   "Memory Leak in Sector 7",
    type:    "BUG REPORT",
    date:    "May 2025",
    excerpt: "Hunting down a rogue useEffect that was crashing the browser."
  }
];

Case Studies — `c`

The c export is an array of case study objects shown on the Case Studies page. Each entry is framed as a boss fight: the project challenge is the boss, and the solution is the strategy used to defeat it.

Shape reference

// CaseStudy object shape (plain JavaScript — no TypeScript in source)
// {
//   id:       string    — Unique identifier
//   title:    string    — Project title
//   boss:     string    — Name of the core challenge ("the boss")
//   problem:  string    — Description of the problem to solve
//   strategy: string    — High-level approach taken
//   combos:   string[]  — List of specific techniques / tools used
//   victory:  string    — Measurable outcomes achieved
//   bonus:    string    — Optional next step or bonus achievement
// }

Field reference

Field	Type	Description	Example
`id`	`string`	Unique key used as the React list `key` prop	`"cs-1"`
`title`	`string`	Project name rendered as the case study heading	`"Project: Overhaul"`
`boss`	`string`	Name of the antagonist / core challenge	`"The Legacy Monolith"`
`problem`	`string`	Narrative description of the problem being solved	`"A 5-year-old jQuery application..."`
`strategy`	`string`	High-level approach or architecture pattern used	`"Strangler fig pattern..."`
`combos`	`string[]`	Array of specific tools, migrations, or techniques deployed	`["Webpack to Vite migration", ...]`
`victory`	`string`	Concrete, measurable results of the solution	`"Load time reduced to 1.2s..."`
`bonus`	`string`	A stretch goal, next step, or bonus insight	`"Next step: migrating to GraphQL."`

Currently, the Case Studies page renders only the first entry (c[0]) in the array. Additional entries are stored in the data but will not be displayed until the component is updated to support multiple case studies.

Full data

// data/mockData.js — case studies (export c)
export const c = [
  {
    id:       "cs-1",
    title:    "Project: Overhaul",
    boss:     "The Legacy Monolith",
    problem:  "A 5-year-old jQuery application that took 12 seconds to load and was impossible to maintain.",
    strategy: "Strangler fig pattern. Slowly replacing jQuery widgets with React components mounted via portals.",
    combos: [
      "Webpack to Vite migration",
      "Redux Toolkit adoption",
      "Custom design system implementation"
    ],
    victory: "Load time reduced to 1.2s. Developer onboarding time cut in half. Zero downtime during migration.",
    bonus:   "Next step: migrating the remaining REST endpoints to GraphQL."
  }
];

Guestbook — `g`

The g export is an array of pre-populated leaderboard entries shown in the sidebar of the Contact page. These seed entries give the guestbook personality before any real visitors have signed it.

Shape reference

// GuestbookEntry object shape (plain JavaScript — no TypeScript in source)
// {
//   initials: string  — Up to 3 characters — displayed on the leaderboard
//   score:    number  — Numeric score padded to 6 digits in the UI
//   message:  string  — The entry's one-liner
// }

Field reference

Field	Type	Description	Example
`initials`	`string`	1–3 character handle shown on the score board	`"AAA"`
`score`	`number`	Numeric score — displayed left-padded to 6 digits	`999999`
`message`	`string`	The visitor’s message or quip	`"HIRED."`

Scores are rendered with zero-padding to six digits in the UI (e.g. 000100). Keep scores between 0 and 999999 to avoid overflowing the display column. The entries are shown in the order they appear in the array — sort them descending by score for classic arcade leaderboard style.

Full data

// data/mockData.js — guestbook (export g)
export const g = [
  { initials: "AAA", score: 999999, message: "HIRED." },
  { initials: "MOM", score: 500000, message: "Very proud of you sweetie" },
  { initials: "H4X", score: 1337,   message: "Nice CSS." },
  { initials: "DOG", score: 100,    message: "Woof." }
];

Complete file structure

For reference, here is the full module structure showing all five single-letter exports:

// data/mockData.js — all five exports use single-letter names
export { p };  // array    — projects        → Projects page
export { s };  // object   — skills          → Skills page
export { a };  // array    — articles        → Writing page
export { c };  // array    — caseStudies     → Case Studies page
export { g };  // array    — guestbook       → Contact page sidebar

The source file uses minified single-letter identifiers (p, s, a, c, g) as both the internal variable names and the exported names. Import them using those exact letters: import { p, s, a, c, g } from '../data/mockData.js'.

Ready to replace the placeholder data with your own? Head to the Customization guide for a step-by-step walkthrough of every field.

Styling

Data

Mock Data Reference — Dev Mode Arcade Data Layer

Projects — `p`

Shape reference

Field reference

Full data

Skills — `s`

Shape reference

Categories

Field reference

Example skill entry

Full data

Articles — `a`

Shape reference

Field reference

Full data

Case Studies — `c`

Shape reference

Field reference

Full data

Guestbook — `g`

Shape reference

Field reference

Full data

Complete file structure

Build docs developers (and LLMs) love

Styling

Data

Documentation Index

​Projects — p

​Shape reference

​Field reference

​Full data

​Skills — s

​Shape reference

​Categories

​Field reference

​Example skill entry

​Full data

​Articles — a

​Shape reference

​Field reference

​Full data

​Case Studies — c

​Shape reference

​Field reference

​Full data

​Guestbook — g

​Shape reference

​Field reference

​Full data

​Complete file structure

Build docs developers (and LLMs) love

Projects — `p`

Shape reference

Field reference

Full data

Skills — `s`

Shape reference

Categories

Field reference

Example skill entry

Full data

Articles — `a`

Shape reference

Field reference

Full data

Case Studies — `c`

Shape reference

Field reference

Full data

Guestbook — `g`

Shape reference

Field reference

Full data

Complete file structure