Ecclesia Morain · Data Solutions Blog

Astro + Tailwind CSS blog built for GitHub Pages.

Branding extracted from Data_Engineer_Digital_Theme.png:

• Mint→Lavender→Blush gradient background (#b8eef5 → #e8c8f0 → #f4d0e0)
• "Ecclesia Morain" → cyan #4dd4e8 in Share Tech Mono
• "DATA SOLUTIONS" → purple #9060c8 in Share Tech Mono (bold, tracked)
• Green leaf accents #6bc98a, periwinkle arrows #8890e8, rose gears #f4a0c0
• Glassmorphism cards with backdrop-filter: blur(16px)

---

Quick Start

npm install
npm run dev        # → http://localhost:4321
npm run build      # → ./dist/

Deploy to GitHub Pages

1. Push this repo to GitHub
2. Go to Settings → Pages → Source → select GitHub Actions
3. The .github/workflows/deploy.yml handles the rest automatically on every push to main
4. Update site in astro.config.mjs to your actual Pages URL

Adding Blog Posts

Create .md or .mdx files in src/content/posts/:

---
title:       'My Post Title'
description: 'One-sentence summary'
pubDate:     '2025-12-01'
tags:        ['GCP', 'BigQuery', 'FinOps']
---

Post content here...

Then update src/pages/blog/[slug].astro to use getCollection('posts').

Customisation Map

What to change	File
Colors, fonts, shadows	tailwind.config.mjs
CSS variables & base styles	src/styles/global.css
Sidebar / header / footer	src/layouts/Layout.astro
Blog post card	src/components/PostCard.astro
Home page content	src/pages/index.astro
GitHub Actions deploy	.github/workflows/deploy.yml

Tech Stack

• Astro v4
• Tailwind CSS v3
• @tailwindcss/typography for prose
• Share Tech Mono (display)
• DM Sans (body)
• GitHub Pages via GitHub Actions