GCGRAFIX Astro - Colophon

Next post →
– Glenn Cueto

Porting GCGRAFIX.com to Astro + Tailwind CSS

For context, this site features all original, responsive design and custom drawn and animated SVGs. Previously built on a bespoke Kirby (PHP flat-file / No DB) CMS and Bootstrap. Now newly migrated to Astro + Tailwind, with a focus on performance and modern maintainability, it retains the original design and feel.

Below are some details on the tech stack, architecture, and various tools and processes used to build, test, deploy, and monitor the site. It serves as the site’s colophon as well as a case study for others interested in similar setups.

GCGRAFIX Site

Colophon

Framework & Architecture

This site was rebuilt from a custom Kirby CMS (PHP) to Astro v5 with server-side rendering. The shift enables modern web standards and better developer experience while maintaining the lightweight philosophy of the original flat-file approach.

Key Architectural Decisions:

  • Output Mode: Server-side rendering and Node.js
  • Package Management: npm with pre-build scripts for image optimization
  • Hosting: Self-hosted on a Linux VPS with Docker containerization
  • NoDB: Flat-file content management
  • Style Framework: Modern CSS utility framework

Styling

Tailwind CSS v4 for modern, utility-first styling

  • All typography and spacing specified through CSS
  • Global prose styling for Markdown content rendering

Design, UX & Animation

  • Fontography: Quicksand (home page heading), Mulish everywhere else
  • SVGs: Custom-drawn in Sketch, optimized for web
  • Animations: A previously implemented, Vivus.js for SVG path drawing, Velocity.js for DOM animations
  • Responsive: Fully responsive across all device sizes
  • Accessibility: 100% Lighthouse Grade + Manual Audits

Content Management

  • Content uses Astro Content Collections
  • Markdown: Articles and pages written in Markdown with frontmatter metadata; standard MD syntax supported

Authentication & Security

Protected routes are managed through authentication middleware.

Performance & Testing

  • Lighthouse CI: Configured for automated performance monitoring
  • Unit Tests: Vitest with TypeScript support
  • E2E Tests: Playwright for user interaction testing
  • Linting: ESLint with strict TypeScript rules
  • Pre-commit Hooks: Husky to enforce code quality standards
  • A11y Testing: axe-core integrated into testing suite

Deployment

Containerization:

  • Defined production and development environments
  • Multi-container orchestration with Docker Compose

Self-Hosting:

  • Runs on a personal VPS with Docker
  • Dokploy used for automated deployments from GitHub, container management & monitoring

Analytics & Monitoring

  • Google Analytics: For traffic and behavior insights
Next post →