Skip to content

aleksa-codes/astro-portfolio

Repository files navigation

🚀 Astro Portfolio - aleksa.codes

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

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

Astro Tailwind CSS TypeScript Netlify

Features

  • Astro 6 🌌 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
  • 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 6
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.

About

Personal portfolio and blog built with Astro, Tailwind CSS and Decap CMS. Ready to be hosted on Netlify and use Netlify Forms. + Portfolio AI Assistant.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors