Kyle Skrinak's Blog

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

Live Site:

• 🚀 Production - Main blog

✨ Features

• ⚡ Fast by default - Static HTML with 1.4s LCP on production
• 🎨 Responsive - Works on all devices
• 🌙 Dark mode - Light and dark theme toggle
• 🔍 Full-text search - Powered by Pagefind
• ♿ Accessible - Lighthouse Accessibility score 93 on production
• 📱 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 - Jekyll → Astro migration summary (planning docs archived post-launch)
🧪 QA/Testing	Testing Guide

Quick Links:

• Local Setup - Run locally in 5 minutes
• Deployment Guide - How to deploy
• Supply-Chain Security - Dependency hardening, audit tooling, and pin policy
• Special Features - Custom implementations
• Resume Variants - Tailor a one-page resume PDF for a specific job role
• Migration History - Jekyll → Astro migration summary (planning docs archived post-launch)

🚀 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 check:live-weight # Nightly live page-weight check against production (see weightwatch.yml)
npm run test:console     # Check for console errors
npm run test:visual      # Visual regression testing

# Configuration management
npm run config:generate  # Generate configuration docs
npm run config:validate  # Validate config consistency
npm run config:inspect   # Debug configuration values

🧪 Testing & Quality Assurance

PR Checks (run on PRs to main):

• Visual Regression Testing - Playwright-based screenshot comparison with automated baseline management

Scheduled Checks (nightly):

• Link Validation - Two-tier verification (htmltest + browser) that filters false positives

Test Suites (run manually or in CI):

• Console Error Detection - Scans for JavaScript errors on key pages
• SEO Validation - Meta tags verification, sitemap accuracy, canonical URL checks
• Analytics Privacy - DNT/GPC compliance

See /docs/testing/ for detailed guides.

🔒 Security & Supply Chain

Layered dependency hardening to limit exposure from compromised or malicious packages:

• Renovate (npm only) with a 7-day cooling-off on routine bumps; security alerts fast-tracked
• ignore-scripts=true — no package lifecycle scripts run on install
• npm run audit:deps — local pre-install audit: lockfile diff, publish-age, dormant-revival detection, and signature verification with a GO / REVIEW / BLOCK verdict
• CI gates — npm audit signatures and the helper unit suite run on PRs and pushes to deploy branches
• SHA-pinned Docker base image, actions/checkout, and actions/setup-node; other Actions locked to major-version tags; transitive CVEs pinned via npm overrides

Full detail: Supply-Chain Security · Dependency Pins.

📊 Project Structure

/
├── design/                  # 🎨 Graphic source files (not deployed)
├── docs/                    # 📚 All documentation (see docs/index.md)
├── src/
│   ├── content/
│   │   ├── blog/           # Blog posts (markdown/MDX)
│   │   └── 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
├── tests/                  # Test suites
└── package.json

💻 Tech Stack

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

📈 Performance

Lighthouse Scores (Production, measured 2026-05-25 against three desktop posts, post-Disqus-removal):

• Performance: 99
• Accessibility: 93
• Best Practices: 100
• SEO: 100

See CHANGELOG.md "Jekyll → Astro Migration" section for Jekyll vs. Astro migration benchmarks.

🚢 Deployment

Changes flow through two long-lived branches:

1. develop — all new work lands here; runs CI checks on every push
2. main — a PR from develop triggers build/config-validate/visual-regression checks, then on merge the production deploy to AWS S3 + CloudFront with CDN invalidation

See Deployment Guide for details.

📋 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

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

---

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