🚀 Astro Portfolio - aleksa.codes

📅 March 2026 Update: This repository has undergone a major overhaul and refactor!

Personal portfolio and blog built with Astro 7, Tailwind CSS 4, and TypeScript.

Features

• Astro 7 🌌 Static-first with hybrid SSR for the AI chat endpoint
• Tailwind CSS 4 🎨 Vite plugin, CSS-only config, shadcn-style oklch design tokens
• Markdown Blog 📝 Content collections, pagination, reading time, Giscus comments
• Arcade 🕹️ AI-written single-file browser games, playable in-page with the model and prompt behind each one
• AI Chat 🤖 Groq-powered streaming assistant with follow-up questions and daily rate limits
• OG Images 🖼️ Auto-generated at build time via astro-og-canvas
• Decap CMS ⚙️ Git-based headless CMS at /admin
• Dark Mode 🌙 System-aware with instant toggle (no flash)
• Contact Form ✉️ Netlify Forms with reCAPTCHA and honeypot
• Performance ⚡ Compression, lazy loading, priority hints, preloaded fonts
• SEO 🔍 Sitemap, RSS, meta tags, structured OG data

Quick Start

# Clone & install
git clone https://github.com/aleksa-codes/astro-portfolio.git
cd astro-portfolio
bun install

# Set up env
echo 'GROQ_API_KEY=your_key_here' > .env

# Run dev server
bun run dev

Open http://localhost:3000.

Scripts

Command	Description
bun run dev	Dev server (port 3000)
bun run build	Type check → Astro build → Tailwind minify → PostCSS
bun run preview	Preview production build
bun run format	Prettier (Astro + Tailwind + import sorting)
bun run decap	Local Decap CMS server

Project Structure

src/
├── assets/            # Images & fonts (Astro-optimized)
├── components/        # Astro components (kebab-case)
│   └── ui/            # Primitives (card, badge, button, tooltip)
├── content/blog/      # Markdown blog posts
├── layouts/           # base-layout.astro
├── lib/               # Utilities, project data, tech stack data
├── pages/             # Routes (static + /api/chat SSR)
└── styles/            # global.css (Tailwind v4 config + design tokens)

Environment Variables

Variable	Required	Purpose
GROQ_API_KEY	Yes (for chat)	Groq API authentication

Tech Stack

Category	Technology
Framework	Astro 7
Styling	Tailwind CSS 4 + shadcn/ui tokens
AI	Vercel AI SDK + Groq
Content	Markdown + Decap CMS
Icons	astro-icon (Lucide, Simple Icons, etc.)
Code Blocks	Expressive Code
Deployment	Netlify (static + serverless)
Package Manager	Bun

Deployment

Deploy to Netlify with these settings:

• Build command: bun run build
• Publish directory: dist
• Environment variables: GROQ_API_KEY
• Enable Netlify Forms and Netlify Identity (for Decap CMS)

License

MIT - see LICENSE.