Writing Page — Press Start Portfolio Game Manual Archive

const articles = [
  {
    id: 1,
    title: "THE STATE MANAGEMENT DILEMMA",
    type: "TECHNICAL",
    date: "2023-10-15",
    excerpt: "Why I stopped using Redux for everything and learned to love React Context again.",
    content: "Long form content goes here. In a real app this would be markdown or fetched from a CMS. For now, imagine a deep dive into state management patterns, complete with code snippets and architectural diagrams drawn in ASCII art.",
    color: "var(--neon-magenta)",
  },
  {
    id: 2,
    title: "DEBUGGING THE UNSEEN",
    type: "BUG LOG",
    date: "2023-11-02",
    excerpt: "A 48-hour journey into a memory leak that only happened on Tuesdays.",
    content: "It started as a routine ticket. \"App slows down after lunch.\" What followed was a descent into the madness of garbage collection, closure scopes, and eventually, a single misplaced event listener.",
    color: "var(--neon-cyan)",
  },
  {
    id: 3,
    title: "DESIGN FOR DEVELOPERS",
    type: "REFLECTION",
    date: "2024-01-20",
    excerpt: "You don't need to be an artist to make things look good. You just need rules.",
    content: "Alignment, contrast, hierarchy. Treat design like a system, not magic. If you can write a sorting algorithm, you can learn how to use whitespace effectively.",
    color: "var(--neon-green)",
  },
  {
    id: 4,
    title: "WHY I BUILT AN ARCADE PORTFOLIO",
    type: "ARTICLE",
    date: "2024-03-10",
    excerpt: "Rejecting the minimalist bento-box trend for something with actual personality.",
    content: "The web has become too clean. Too safe. I wanted to build something that felt like a physical object, something that demanded interaction. Here is how I built the CRT effects and managed the performance budget.",
    color: "var(--neon-yellow)",
  },
];

┌──────────────────────────┐
│░ TECHNICAL               │  ← type badge (top-left, accent colour)
│                          │
│  THE STATE MANAGEMENT    │  ← title (Press Start 2P, accent colour)
│  DILEMMA                 │
│                          │
│  Why I stopped using…    │  ← excerpt (3-line clamp)
│  VOL. 01 // 2023-10-15   │  ← vol number + date
└──────────────────────────┘
  ░ = left spine stripe (white/10 with right border)
  ◢  = bottom-right decorative rotated square

@keyframes pageTurn {
  from {
    transform: perspective(1200px) rotateY(-20deg);
    opacity: 0;
  }
  to {
    transform: perspective(1200px) rotateY(0deg);
    opacity: 1;
  }
}