A dark-themed Astro portfolio/blog template with Three.js particles and modern animations.

Live Demo

• Dark Theme - Professional dark color palette with blue/purple accents
• Three.js Particles - 5000 particle system with animated 3D effects
• Blog System - Full-featured blog with Content Collections
• Portfolio - Project showcase with featured projects
• Responsive - Mobile-first design with floating navbar
• Animations - Smooth transitions and hover effects
• TypeScript - Type-safe development

# Clone this template
git clone https://github.com/kpab/astro-darkness.git
cd astro-darkness

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

Create markdown files in src/content/blog/:

---
title: 'Your Post Title'
description: 'Brief description'
pubDate: 2025-12-15
tags: ['astro', 'three.js']
---

Your content here...

Create markdown files in src/content/projects/:

---
title: 'Your Project'
description: 'Project description'
github: 'https://github.com/...'
tags: ['react', 'typescript']
featured: true
---

Edit CSS variables in src/styles/global.css:

:root {
  --color-bg-dark: #0F172A;
  --color-primary: #3B82F6;
  --color-accent-purple: #8B5CF6;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

src/
├── components/    # Reusable components
├── content/       # Blog posts & projects (Markdown)
├── layouts/       # Page layouts
├── pages/         # Routes
└── styles/        # Global styles

• Astro - Static site generator
• Three.js - 3D graphics
• TypeScript - Type safety
• Google Fonts (Space Grotesk + DM Sans)

MIT - see LICENSE

Made by kpab