Portfolio Website

The Goal

I wanted a place to showcase my work, so I built a portfolio that matched my style while staying easy to navigate and maintain. The end result is a fast, accessible, statically generated site with a simple design and a bit of my personality put into it.

Technical Highlights

Astro 5.x

The site is built with Astro as a static site generator. Content lives in markdown files within Astro’s Content Collections, making it trivial to add new projects or blog posts — just drop in a .md file with frontmatter. The file-based routing maps src/pages/ directly to URL paths, and getStaticPaths() handles dynamic routes at build time.

Vanilla CSS Architecture

No Tailwind, no Bootstrap, no CSS-in-JS. The styling is organized across three files:

• global.css — CSS reset, design tokens, base element styles, and markdown content styling
• effects.css — Grid background, scanline overlay, glitch text, cursor blink, and fade-in animations
• components.css — Navbar, cards, tags, hero sections, buttons, and layout components

Design tokens are defined in :root with a dark theme, desaturated cyan accent, and consistent spacing scale. The .glitch-text class uses hover-triggered pseudo-element animations, and .scanline provides a subtle CRT-inspired overlay.

Content-First Workflow

Projects and blog posts are markdown files with YAML frontmatter. Schemas are defined in src/content/config.ts with type-safe validation. Adding content is as simple as creating a new file — no page components to wire up.

SEO & Performance

• Open Graph and Twitter Card meta tags generated per-page
• JSON-LD structured data (ProfilePage, CreativeWork, BlogPosting, etc.)
• Auto-generated sitemap via @astrojs/sitemap
• Zero JavaScript by default — client-side scripts only where needed (tag filtering, reading progress bar, mobile nav)
• Static output means fast hosting anywhere

Deployment

Built output is deployed to Hostinger via public_html/. A publish_changes.bat script handles the Git add → commit → push workflow in one step.