Kyle Skrinak's Blog

A modern, fast, and accessible blog built with Astro. Migrated from Jekyll with improved performance and features.

Live Sites:

• 🚀 Production - Main blog
• 🧪 Staging - Testing environment

✨ Features

• ⚡ Super fast - Optimized Astro build with <2s load times
• 🎨 Beautiful - Responsive design that works on all devices
• 🌙 Dark mode - Light and dark theme toggle
• 🔍 Full-text search - Powered by Pagefind
• ♿ Accessible - WCAG 2.1 compliant
• 📱 Mobile-first - Perfect on phones, tablets, desktops
• 📊 SEO-friendly - Sitemaps, RSS feeds, canonical URLs
• 🎯 TypeScript - Type-safe markdown and configuration

📚 Documentation

All project documentation is organized in the /docs directory. Start here:

👀 Documentation Hub - Navigation and overview

By Role:

Role	Start Here
👨‍💻 Developer	Getting Started
🚀 DevOps	Operations & Deployment
📖 Understanding Project	Migration History
🧪 QA/Testing	Testing Guide
🎯 Ready to Launch?	Launch Status

Quick Links:

• Local Setup - Run locally in 5 minutes
• Deployment Guide - How to deploy
• Special Features - Custom implementations
• Performance Analysis - Jekyll vs Astro comparison
• Pre-Launch Checklist - Launch readiness

🚀 Quick Start

# Install dependencies
npm install

# Start development server
npm run dev
# Visit http://localhost:4321

# Build for production
npm run build

# Preview production build
npm run preview

🛠️ Common Commands

npm run dev              # Start development server
npm run build            # Build production site
npm run preview          # Preview production build
npm run lint             # Check code quality
npm run format           # Auto-format code
npm run check:links      # Two-tier link checking (htmltest + Playwright)
npm run test:console     # Check for console errors
npm run test:visual      # Visual regression testing

📊 Project Structure

/
├── design/                  # 🎨 Graphic source files (not deployed)
├── docs/                    # 📚 All documentation (see docs/index.md)
├── src/
│   ├── content/
│   │   ├── blog/           # 36 blog posts (markdown)
│   │   └── pages/          # Static pages
│   ├── components/         # Reusable components
│   ├── layouts/            # Page layouts
│   ├── pages/              # Dynamic routes
│   ├── styles/             # Global styles
│   └── config/             # Configuration
├── public/
│   ├── favicon.ico         # Favicon variants
│   ├── apple-touch-icon.png
│   └── site.webmanifest    # PWA manifest
├── tests/                  # Test suites
├── reports/                # Generated test reports
└── package.json

💻 Tech Stack

Layer	Technology
Framework	Astro
Styling	TailwindCSS
Language	TypeScript
Search	Pagefind
Testing	Playwright
Deployment	GitHub Pages (staging) + AWS S3/CloudFront (production)
CI/CD	GitHub Actions

📈 Performance

Lighthouse Scores (Production):

• Performance: 97
• Accessibility: 100
• Best Practices: 100
• SEO: 100

See Performance Analysis for detailed comparison.

🚢 Deployment

Two deployment pipelines:

1. Staging: Push to staging branch → GitHub Pages
2. Production: Push to main branch → AWS S3 + CloudFront

See Deployment Guide for details.

🧪 Testing

# Console error testing (before pushing)
npm run dev              # Terminal 1
npm run test:console     # Terminal 2

# Visual regression testing
npm run test:visual

# Against staging environment
npm run test:console:staging

# Against production environment
npm run test:console:production

See Testing Guide for more.

📋 Version History

See CHANGELOG.md for detailed release history.

📝 License

Licensed under the MIT License. See LICENSE file for details.

---

🤔 Need Help?

1. Getting started? → Getting Started Guide
2. Something not working? → Troubleshooting
3. Want to understand why something works this way? → Migration History
4. Ready to launch? → Launch Checklist

All documentation is in /docs - start with docs/index.md.

---

Made with ❤️ for my blog. Based on AstroPaper theme.