[>_] SYS_INTERFACE V.2.0.4
SECURE_CONNECTION_ESTABLISHED
< RETURN_TO_INDEX

Fullstack Developer :: COMPLETED

Astro_Portfolio

| Personal developer portfolio with retro sci-fi terminal aesthetic

Astro TypeScript Tailwind CSS MDX Cloudflare Pages

> KEY_METRICS

  • > Lighthouse score 98+ across all categories
  • > Zero client-side JavaScript on static pages
  • > Auto-deployed to Cloudflare Pages on every push
  • > Built with Tailwind CSS v4 and custom retro terminal design system

OVERVIEW

This portfolio is built to be fast, accessible, and visually distinct. The retro sci-fi terminal aesthetic is inspired by 80s CRT monitors and classic mainframe UIs — the kind of interface you’d find on the Nostromo.

TECH_DECISIONS

Why Astro?

Astro’s content-first philosophy means pages ship with zero JavaScript by default. For a portfolio site that’s mostly static content, this is the right trade-off. Content collections provide type-safe frontmatter for projects, and MDX enables rich case studies.

Why Tailwind CSS v4?

Tailwind v4 moves configuration into CSS with the @theme directive — no more tailwind.config.js. Custom design tokens are defined once in global.css and available everywhere. The new Vite plugin integration is seamless with Astro.

Why Cloudflare Pages?

Free tier, global CDN, automatic deploys on push to main. Build times are under 30 seconds. The portfolio is served from edge nodes worldwide.

CHALLENGES

The biggest challenge was implementing the CRT aesthetic without killing performance. Scanline overlays with repeating-linear-gradient are purely CSS — no extra images or JavaScript. The corner bracket decoration uses pseudo-elements defined once in global.css.

RESULTS

  • Sub-second first contentful paint globally
  • Perfect accessibility score — semantic HTML, ARIA labels, keyboard navigation
  • Content updates require only a new MDX file and a git push