Howdy! Just wrapped up a pretty significant update to this website, and I figured I’d document the process – partly for you, but mostly so I remember what I did when I inevitably break something later.

💀 The Problem: Too Much Hallway, Not Enough Home

The old homepage felt like a narrow hallway – constrained to 720px width and frankly, a bit boring. For a site that’s supposed to showcase what I do, it wasn’t doing much showcasing. Time to fix that.

🚀 What Got Done

✅ Tailwind CSS Integration

First things first: I ditched the custom CSS approach and integrated Tailwind CSS. This wasn’t just about jumping on the utility-first bandwagon – it was about having a consistent design system that I could actually maintain.

The integration involved:

• Adding Tailwind via Astro’s built-in integration
• Creating a proper config file with custom colors matching the existing theme
• Updating the build process to handle the new CSS framework

✅ Full-Width Layout

Remember when I said the old site felt like a hallway? Well, I fixed that. The main content area now uses the full viewport width instead of being constrained to 720px. On larger screens, sections are capped at a more reasonable 1024px (max-w-5xl in Tailwind speak) with proper centering.

✅ Sticky Header Navigation

One of those “why didn’t I do this sooner” improvements – the header now sticks to the top when you scroll. Had to wrestle with some CSS specificity issues on mobile, but got it working across all breakpoints.

✅ Hero Section Overhaul

The hero got a complete makeover:

• Added a background image (that flag photo from a few years back)
• Included my profile picture with a proper circular crop
• Added my personal motto: “God ✝️, Family 👨‍👩‍👧‍👦, USA 🇺🇸, Web Dev 💻”
• Made it full viewport height on desktop with proper vertical centering

✅ Feature Cards

Replaced the old text-heavy sections with clean, card-based design:

• Blog card linking to articles
• GitHub card for code exploration
• Proper hover effects and responsive behavior
• Dark/light mode support (though I had to debug some color issues)

✅ About Section Refresh

Simplified the about section with updated copy reflecting my 30+ years of experience and a cleaner layout that doesn’t overwhelm visitors.

🚧 Technical Challenges

✅ CSS Specificity Wrestling

The biggest headache was dealing with conflicting CSS rules. The old global styles were fighting with Tailwind classes, particularly around:

• Border radius not applying (global img styles overriding Tailwind)
• Dark mode colors not switching properly
• Layout constraints being overridden by global main styles

✅ Inline Styles vs. Utility Classes

Had a moment where I fell back to inline styles for quick fixes. Caught myself and properly implemented the solutions using Tailwind’s utility classes and important modifiers (!text-white).

✅ Viewport Height Calculations

Getting the hero section height right required accounting for the sticky header. Used calc(100vh - 80px) to prevent content from disappearing below the fold.

🚀 The Result

The site now feels like an actual homepage instead of a narrow corridor. It’s responsive, accessible, and actually showcases what I do. The patriotic background image might be a bit much for some folks, but hey – it’s my website.

👉 What’s Next

This was phase one of a broader site refresh. Still on the list:

• About page expansion
• Blog post styling improvements
• Maybe some project showcase pages
• Performance optimization

The beauty of static site generation with Astro is that these changes build fast and deploy reliably. No more worrying about WordPress updates breaking things at 2 AM.

If you’re a fellow developer considering a similar move from dynamic to static, I’d recommend it. The peace of mind alone is worth the migration effort.