A minimalist personal portfolio + blog built with Astro, featuring a custom ASCII cellular automata background.
- Landing Page: Clean centered layout with name and social links
- Blog: Posts with infinite scroll, tag filtering, and search
- ASCII Background: Custom WebGL shader mixing reaction-diffusion and diffusion-limited aggregation
- Grayscale Design: Minimal, timeless aesthetic
- Static-First: Fast, SEO-friendly static output
- Astro - Static site generator
- Tailwind CSS - Styling
- TypeScript - Type safety
- Markdown - Content authoring
├── src/
│ ├── components/ # Reusable components
│ │ ├── AsciiBackground.astro # WebGL background
│ │ ├── PostCard.astro # Blog post card
│ │ ├── TagFilter.astro # Tag filter modal
│ │ └── SearchModal.astro # Search modal
│ ├── layouts/ # Page layouts
│ │ └── BaseLayout.astro
│ ├── pages/ # Route pages
│ │ ├── index.astro # Landing page
│ │ ├── about.astro # About page
│ │ ├── posts/
│ │ │ ├── index.astro # Posts list
│ │ │ └── [slug].astro # Individual post
│ │ └── api/
│ │ └── posts.json.ts # Posts API
│ ├── content/ # Content collections
│ │ └── posts/ # Markdown posts
│ ├── utils/ # Utilities
│ │ └── posts.ts
│ └── styles/
│ └── global.css # Global styles
├── content.config.ts # Content collection config
└── astro.config.mjs # Astro config
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewPosts are written in Markdown with frontmatter:
---
title: "Post Title"
pubDatetime: 2024-01-15T10:00:00Z
description: "Brief description of the post"
heroImage: "/images/posts/image.jpg"
tags: ["coding", "tutorial"]
---- Colors: Grayscale palette (near-black to off-white)
- Typography: Inter (sans-serif), JetBrains Mono (monospace)
- Spacing: Consistent scale from 0.25rem to 6rem
- Background: Low-opacity ASCII art with center vignette
- Respects
prefers-reduced-motion - Keyboard navigation support
- Proper ARIA labels
- Strong text contrast
- Focus visible states
MIT