A fast, content-driven personal website and blog built with Astro, featuring a modern design, AI-powered chat assistant, seasonal effects, and headless CMS integration.
- 🚀 Astro v5+ - Modern static site generator with islands architecture
- 🎨 Tailwind CSS v4 - Utility-first CSS framework with custom design tokens
- 📝 MDX Blog - Write blog posts with Markdown and JSX components
- 🎛️ Decap CMS - Headless CMS for content management
- 🤖 AI Chat Assistant - Groq-powered chat with daily limits and conversation persistence
- ❄️ Seasonal Effects - Winter snow animation and seasonal avatars
- 📱 Responsive Design - Mobile-first approach with dark mode support
- 🔍 SEO Optimized - Meta tags, sitemap, RSS feed, and structured data
- ⚡ Performance - Optimized with compression, lazy loading, and modern web standards
- ♿ Accessibility - ARIA labels, keyboard navigation, and semantic HTML
- Node.js 18+
- Bun (for Tailwind/PostCSS build steps)
-
Clone the repository
git clone https://github.com/aleksa-codes/astro-portfolio.git cd astro-portfolio -
Install dependencies
bun install
-
Set up environment variables
# GROQ API Key: https://console.groq.com/keys GROQ_API_KEY="" # required for AI chat functionality # Google Analytics: https://analytics.google.com/analytics/web/ GA_ID="G-XXXXXXXXX" # optional
-
Start development server
bun run dev
-
Open your browser
- Navigate to
http://localhost:3000
- Navigate to
| Command | Description |
|---|---|
bun run dev |
Start development server with hot reload |
bun run build |
Build for production (includes TypeScript check) |
bun run preview |
Preview production build locally |
bun run prod |
Format, build, and preview (end-to-end workflow) |
bun run prettier |
Format code with Prettier |
bun run decap |
Start Decap CMS local development server |
Note: If you prefer npm, you can use
npm run <script>instead ofbun run <script>.
- Blog Posts: Add MDX files to
src/content/blog/with required frontmatter - Projects: Update
src/pages/projects/index.astrowith new project data - Site Config: Modify
src/config/site.config.tsfor navigation and metadata
- Design Tokens: Edit
src/styles/global.cssfor colors and themes - Components: Use Tailwind utilities with semantic color variants
- Dark Mode: Automatically toggles via
.darkclass on<html>
- AI Chat: Configure daily limits and prompts in
src/components/ai-chat.astro - Snow Effect: Seasonal animation active Nov-Jan, toggleable via localStorage
- External Links: Auto-open in new tabs via custom rehype plugin
Configure content collections in public/admin/config.yml. Sync with src/content/config.ts when changing schemas. The CMS is accessible at /admin.
Integrations configured in astro.config.ts:
- astro-compress: Asset optimization
- astro-icon: Icon management
- astro-expressive-code: Syntax highlighting
- @astrojs/sitemap: SEO sitemap generation
---
title: 'Post Title'
description: 'Brief description'
date: 2024-01-01
author: 'Author Name'
thumbnail: ./image.jpg
tags: ['tag1', 'tag2']
---Projects are defined in src/pages/projects/index.astro with properties for title, description, tags, image, demo URL, GitHub URL, featured status, and category.
- Connect your GitHub repository to Netlify
- Set build command:
bun run build - Set publish directory:
dist - Configure environment variables in Netlify dashboard
- Enable Netlify Forms for contact form functionality
The site can be deployed to any static hosting service. Ensure the platform supports:
- Node.js build environment
- Environment variable configuration
- Form handling (or use alternative contact methods)
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
- Run
bun run prettierbefore committing - Test builds with
bun run build - Follow existing code patterns and conventions
- Update documentation for new features
This project is licensed under the MIT License - see the LICENSE file for details.