Christopher Chege — Portfolio Site (Astro)

A high-fidelity developer portfolio built with Astro and Tailwind CSS. Features a custom steel-slate-gray design theme with Google Blue accents, interactive developer console preview, responsive bento grids, and a grouped experience timeline.

Prerequisites

• Node.js (v18.0.0 or higher)
• npm (comes with Node.js)
• just (convenient command runner, optional but recommended)

Quick Start

You can manage development using just tasks or running native npm commands directly:

# Install dependencies
npm install

# Start local dev server with hot reload
just dev       # (or npm run dev)

# Build optimized static site for production to dist/
just build     # (or npm run build)

# Preview the production build locally
just preview   # (or npm run preview)

Default development URL: http://localhost:4321/

Tech Stack

• Astro — Static site generation & layout routing
• Tailwind CSS — Glassmorphic card styling, flex layouts, responsive breakpoints
• TypeScript — Component props safety and content collection schemas
• EB Garamond & Inter — Paired serif/sans typography
• Vite — Fast bundling and asset optimization

Project Layout

• Justfile — Task workflow commands list.
• tailwind.config.mjs — Mapped theme colors for the steel-slate-gray palette (bg, surface, accent, hook).
• src/layouts/Layout.astro — Main HTML framework, color tokens, global font declarations, and basalt rock decors.
• src/data/cv.json — Central JSON database for professional details (bio, work history projects, education, certifications, volunteerism, and languages).
• src/pages/ — Application routes:
  • index.astro — Homepage with bento grid and interactive developer console.
  • experience.astro — Chronological timeline grouping consecutive projects under clients.
  • projects.astro — Complete repository project directory.
  • blog.astro & blog/[slug].astro — Content collection blog parser.
  • contact.astro — Clean contact grid.
• src/components/ — Custom components:
  • FloatingNav.astro — Glass-pill menu bar with active glow states and mobile layout collapsing.
  • BentoGrid.astro — Rounded card layouts for homepage sections.
  • DeveloperConsole.astro — Interactive terminal simulator.
  • ProjectCard.astro — Project cards featuring tag systems and glass effects.
• src/content/ — Markdown document content collections (blog/ and projects/) validated by src/content/config.ts.

Common Tasks

1. Update Professional Experience, Skills, or Certifications

Edit src/data/cv.json. Components will automatically re-render changes under correct categories and client timeline blocks.

2. Add a Project Showcase

Create a markdown file in src/content/projects/ (e.g. my-awesome-tool.md) with the following frontmatter:

---
title: "Project Name"
description: "Brief summary of what this tool does."
tech: ["Rust", "WASM", "Tailwind"]
github: "https://github.com/..."
weight: 1
---
Body content detailing the implementation and challenges goes here.

3. Customize Accent Colors & Backgrounds

Modify CSS variables in the <style is:global> block inside Layout.astro and align utility mappings under theme.extend.colors in tailwind.config.mjs.