← Portfolio

CodeM8 Home

Personal portfolio and blog site built with Astro, React, and Tailwind CSS. Features a retro terminal / CRT aesthetic with content collections for blog posts and portfolio items.

astro
react
tailwind
typescript
vite
GitHub → Live site →

CodeM8 Home

This is the site you’re looking at right now. It started as a standard dark-themed portfolio and evolved into a full retro-terminal experience.

Goals

  • Zero-compromise performance: static HTML where possible, islands for interactive parts
  • A distinctive visual identity that’s actually readable
  • Content collections with type-safe frontmatter for blog and portfolio
  • Easy to deploy on any Node.js host

Technical Stack

The site is built with:

  • Astro 5 — islands architecture, content collections, SSR with Node adapter
  • React 18 — for interactive components (navigation, any future interactive widgets)
  • Tailwind CSS v4 — utility-first styling with custom terminal theme variables
  • Bearnie — Astro component library for UI primitives (cards, badges, tabs, etc.)
  • shadcn/ui — additional React components where needed

Design Decisions

Terminal Theme

The CRT aesthetic uses CSS custom properties throughout. The core palette:

  • Background: #0a0a0a — near-black, warmer than pure black
  • Primary green: #00ff41 — classic phosphor green with glow effects
  • Amber: #ffb000 — for accent/warning states
  • Body text: #c8c8c8 — readable without being harsh white

Scanlines are implemented as a body::before pseudo-element with a repeating gradient, avoiding any JavaScript overhead.

Content Collections

Blog posts and portfolio items use Astro’s content collections with Zod validation. This gives compile-time type safety for frontmatter fields and automatic slug generation.

SSR with Node Adapter

Using the @astrojs/node adapter in standalone mode for easy Docker deployment.

Deployment

npm run build
node dist/server/entry.mjs