solomonneas.dev

[+] Status: In Progress [+] Origin: Personal Development [+] Date: 2025.12
>> TECH_STACK:
[Astro][Tailwind CSS][Vite][Node.js][Vercel][Vercel Analytics][Cloudflare][GitHub]

A performant, content-driven portfolio website built with modern web technologies. This project serves as both a professional portfolio and a learning playground for the Astro framework, showcasing a custom "Industrial Terminal / NOC Dashboard" design system.

.dev was chosen intentionally to signal developer focus while enforcing HTTPS by default. All .dev domains are on the HSTS preload list, making secure connections mandatory.

Open Source

This project is open source! Check out the code, fork it, or give it a star if you find it useful.

View Repository 60 Commits Star on GitHub
SOURCE
📁 src/ Pages, Layouts, Components
📝 content/ Blog Posts (MDX)
🎨 styles/ Global CSS + Tailwind
🔤 public/ Fonts, Favicon, Assets
astro build
BUILD PIPELINE
Vite Bundler
→
Astro SSG
→
Tailwind CSS
git push → deploy
DEPLOYMENT
⚙️ GitHub
▲ Vercel
🌐 Edge CDN
solomonneas.dev
USERS
🖥️ Desktop
📱 Mobile
📰 RSS Readers

The site leverages modern web technologies for optimal developer experience and performance:

Astro 5.x Framework
Static site generation, routing, content collections
Tailwind CSS 4.x Styling
Utility-first CSS framework via Vite plugin
Vite Build Tool
Dev server, HMR, asset bundling
Content Collections CMS
Type-safe content with Zod schema validation
Vercel Hosting
CI/CD, edge deployment, automatic HTTPS
Cloudflare DNS & CDN
DNS management, edge caching, DDoS protection
GitHub Source Control
Version control, deployment triggers
$ tree src/ -L 2
📦 src/
├── 📁 components/ # Reusable UI components
│ ├── StatusLight.astro
│ ├── EducationTerminal.astro
│ ├── CertificationsTerminal.astro
│ └── ExperienceTimeline.astro
├── 📁 content/ # Content collections
│ ├── config.ts # Zod schemas
│ └── 📁 blog/ # Markdown posts
├── 📁 layouts/ # Page templates
│ ├── Layout.astro # Main layout
│ └── ProjectLayout.astro
├── 📁 pages/ # File-based routing
│ ├── index.astro
│ ├── about.astro
│ ├── 📁 blog/
│ └── 📁 projects/
└── 📁 styles/
└── global.css # Tailwind + custom

File-based routing generates the following endpoints:

PATH FILE DESCRIPTION
GET / index.astro Home / README terminal
GET /about about.astro Profile & history
GET /experience experience.astro Career timeline
GET /projects projects.astro Project log entries
GET /blog blog.astro Blog index
GET /blog/[slug] [...slug].astro Dynamic blog posts
GET /hire hire.astro Services & contact
GET /contact contact.astro Contact methods
GET /rss.xml rss.xml.js RSS feed endpoint

01 Development Flow

Local development with hot module replacement

1
npm run dev Starts Vite dev server on localhost:4321
2
File Watch Vite monitors src/ for changes
3
HMR Update Instant browser refresh on save

02 Production Build

Static site generation for deployment

1
npm run build Triggers Astro build command
2
Content Process Validate collections, parse MDX
3
SSG Render Generate static HTML for each route
4
CSS Optimize Tailwind purge, minification
5
Output Static files in dist/ ready to deploy

🎨 Theme Engine

Dynamic color theming with CSS filters and localStorage persistence.

Core Mechanism

  • hue-rotate() - shifts entire color palette
  • invert() - toggles light/dark mode
  • Full-page filter via #filter overlay

Persistence

  • Theme saved to localStorage
  • Applied on page load before paint
  • Random hue on each theme toggle

Implementation

  • Inline <script> in Layout.astro
  • CSS transitions for smooth changes
  • Favicon dynamically recolored via SVG

🔤 Typography System

Self-hosted fonts for performance and consistent rendering.

Font Stack

  • IBM Plex Mono - Code, terminals, UI
  • IBM Plex Sans - Body text

Loading Strategy

  • WOFF2 format for compression
  • @font-face in global.css
  • Served from /public/fonts/

📟 Terminal Aesthetic

The "NOC Dashboard" visual language throughout the site.

Visual Elements

  • Terminal headers with status indicators
  • Monospace typography throughout
  • Dotted borders and subtle backgrounds

Color Patterns

  • color-mix() for theme-aware colors
  • Emerald green (#10b981) accents
  • Low-opacity backgrounds (2-5%)

Interactive States

  • StatusLight pulsing animations
  • Hover transforms and glows
  • CLI-style navigation ($ cd /path)

📚 Content Collections

Type-safe content management with Zod validation.

Blog Schema

  • title: z.string()
  • pubDate: z.date()
  • tags: z.array(z.string())

Benefits

  • Build-time validation catches errors
  • TypeScript types auto-generated
  • IDE autocomplete for frontmatter
⚙️ astro.config.mjs

Defines site URL and Vite plugins. Tailwind integrated via @tailwindcss/vite plugin for Tailwind v4 support.

🎨 global.css

Imports Tailwind via @import "tailwindcss", defines @font-face rules, CSS variables, and base styles.

📦 package.json

Minimal dependencies: astro, tailwindcss, @tailwindcss/vite, @astrojs/rss.

📝 content/config.ts

Defines content collections using defineCollection() and Zod schemas for type-safe content.

▲ Vercel

Zero-config deployment. Auto-detects Astro, runs build, deploys to edge CDN on every push to main.

Site live and actively developed
  • ✓ Astro 5.x framework configured
  • ✓ Tailwind CSS 4.x integrated
  • ✓ Terminal design system implemented
  • ✓ Dynamic theme engine working
  • ✓ Content collections for blog
  • ✓ Vercel CI/CD pipeline active
  • ✓ RSS feed generation
  • ○ Additional blog content
  • ○ SEO optimization (meta tags, OG images)
  • ✓ Vercel Analytics integrated