Modernizing My Jekyll Blog with AI: A Complete Transformation Journey

July 22, 2025

Modernizing My Jekyll Blog with AI: A Complete Transformation Journey

What up! So I just finished completely modernizing my Jekyll blog with some serious AI assistance, and honestly? The results are pretty incredible. I went from a basic, minimal Jekyll site to a modern, professional platform that actually reflects who I am as a person and professional.

Let me walk you through exactly what we accomplished, the prompts that made it successful, and why this approach worked so well.

The Starting Point: Basic but Functional

My original blog was… fine. It worked. It had content. But it looked like every other minimal Jekyll theme out there. Nothing wrong with that, but as someone who teaches others about technology and career development, I needed something that better reflected my expertise and personality.

What I had:

• Basic Jekyll setup with minimal theme
• Good content spanning 2021-2025
• Mobile-responsive (barely)
• Zero personality in the design

What I wanted:

• Professional but approachable design
• Modern UI/UX patterns
• Something that reflected my humor and authentic voice
• Better user experience for readers

Phase 1: Foundation & Modern Design System

The first breakthrough came when I realized I needed to approach this systematically. Instead of just asking for “a better design,” I got specific about what modern actually means.

The Game-Changing Prompt

"Create a modern Jekyll blog foundation inspired by Thor's authentic, action-oriented writing style:

Design System:
- Professional color scheme: cybersecurity industry blues/grays with energetic accent colors
- Typography: Clear hierarchy supporting structured content (headings, bullet points, code blocks)
- Modern fonts: Inter for text, excellent monospace for code examples
- Spacing system that makes technical tutorials easy to scan

Technical Foundation:
- Clean, semantic HTML5 structure
- CSS Grid and Flexbox for responsive layouts  
- SASS architecture with design tokens (colors, typography, spacing)
- Component-based styling approach
- Mobile-first responsive design optimized for technical content
- Performance-optimized build process
- Excellent code syntax highlighting for Azure/AWS tutorials

Content-First Design:
- Layouts that support step-by-step tutorials with screenshots
- Clear visual hierarchy for actionable advice and bullet points
- Professional but approachable aesthetic reflecting Thor's authentic voice
- Tutorial-friendly layouts with proper code block styling"

What Made This Work

The key was being specific about my content style. Instead of generic design requests, I described:

• My writing characteristics (structured, actionable, authentic)
• My content types (technical tutorials, career advice)
• My audience (IT professionals, career changers)
• My industry context (cybersecurity, cloud solutions)

Results:

• Modern design tokens system with CSS custom properties
• Inter font family for professional typography
• CSS Grid-based responsive layout
• Component-based SASS architecture
• Mobile-first design that actually looks good

Phase 2: The UX Revolution

The second phase focused on user experience, but here’s where things got interesting. I realized my navigation was too rigid.

The Original Navigation Problem

We started with traditional category-based navigation:

• Tech
• Career
• Business

But then I had a realization: “I want to be encouraged to blog about anything so they might not always fall into those categories.”

The Creative Solution

Instead of rigid categories, we implemented:

1. Countdown Timer: Shows time since my last post as motivation
2. Flexible Tagging: Posts can have multiple tags without rigid categorization
3. Dynamic Messaging: The countdown gives encouraging (or guilt-inducing) messages

The prompt that unlocked this was simple:

"I don't like those tabs and sub headers. I want to be encouraged to blog about anything. 
Maybe we do something unique. Instead of those tabs maybe a count down clock since my last update?"

The Countdown Innovation

The countdown timer turned out to be brilliant:

• Motivational: Shows “48+ days since last post” with encouraging messages
• Dynamic: Changes color and urgency based on time elapsed
• Personal: Reflects my goal to blog more consistently
• Unique: I haven’t seen this on other blogs

Phase 3: Authentic Personal Branding

The biggest challenge was removing corporate name-dropping while maintaining credibility.

The Corporate Dilemma

Originally, my site prominently featured “Senior Security Solution Engineer at Microsoft” everywhere. But I felt uncomfortable using Microsoft’s name for personal credibility.

The solution? Focus on expertise and personality instead:

Before:

tagline: "Senior Security Solution Engineer at Microsoft"
description: "Technical tutorials, career advice, and cybersecurity insights from a Senior Security Solution Engineer at Microsoft"

After:

tagline: "Professional Breaker of Things (Then Fixer of Things)"
description: "Where cybersecurity and cloud solutions meet questionable life choices. Join me for technical tutorials, career advice, and some other nonsense too."

Why This Works Better

1. Humor: Shows personality while maintaining professionalism
2. Relatable: Every IT person knows the “break then fix” cycle
3. Authentic: Sounds like how I actually talk
4. Memorable: More likely to stick in readers’ minds

The Technical Implementation

Here’s what we actually built:

Modern SASS Architecture

// Design tokens approach
$primary-color: #2563eb;
$secondary-color: #64748b;
$accent-color: #f59e0b;
$background: #ffffff;
$surface: #f8fafc;

Responsive CSS Grid

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  
  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

Interactive Countdown Timer

class LastPostCountdown {
  constructor() {
    this.lastPostDate = new Date('2025-06-04T00:00:00');
    this.updateCountdown();
    setInterval(() => this.updateCountdown(), 1000);
  }
  
  updateCountdown() {
    const now = new Date();
    const timeDiff = now - this.lastPostDate;
    const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
    
    // Dynamic messaging based on time elapsed
    if (days < 7) {
      this.setMessage("🎉 Fresh content!", "success");
    } else if (days < 30) {
      this.setMessage("📝 Time for another post?", "warning");
    } else {
      this.setMessage("🚨 Time to break the silence!", "danger");
    }
  }
}

The Prompts That Made The Difference

1. Content-First Design Thinking

Instead of asking for “a pretty design,” I described my content style:

• “Structured, actionable advice”
• “Step-by-step technical tutorials”
• “Professional but authentic voice”

2. Specific Technical Requirements

Rather than vague requests, I specified:

• “CSS Grid and Flexbox for responsive layouts”
• “SASS architecture with design tokens”
• “Mobile-first responsive design”

3. Personal Branding Clarity

When the corporate name-dropping felt wrong, I said exactly that:

• “I’m uncomfortable using Microsoft’s name for personal clout”
• “Using my humor, is there a way to make those things funny?”

4. User Experience Focus

The breakthrough came when I described the feeling I wanted:

• “I want to be encouraged to blog about anything”
• “Maybe something unique, like a countdown clock”

Lessons Learned: What Made This Successful

1. Be Specific About Your Content Style

Generic design requests get generic results. Describing your writing voice, content structure, and audience made all the difference.

2. Embrace Iteration

We went through multiple design iterations. The countdown timer idea only emerged after I rejected the rigid category system.

3. Trust Your Instincts

When something felt wrong (like the corporate name-dropping), addressing it directly led to better solutions.

4. Focus on User Experience Over Features

The countdown timer isn’t technically complex, but it solves a real problem: motivation to write consistently.

5. Make It Personal

The humor and authentic voice make the site memorable and different from every other tech blog.

The Technical Stack We Used

• Jekyll 4.x with modern liquid templating
• SASS/SCSS with component-based architecture
• CSS Grid & Flexbox for responsive layouts
• Vanilla JavaScript ES6+ for interactions
• Inter font family from Google Fonts
• CSS custom properties for design tokens
• Mobile-first responsive design
• GitHub Pages for hosting

What We Accomplished

Before vs. After

Before:

• Basic minimal theme
• No personality
• Rigid categorization
• Corporate name-dropping
• Mobile-responsive but not mobile-optimized
• No motivation system

After:

• Modern, professional design with personality
• Countdown motivation system
• Flexible tagging system
• Authentic personal branding with humor
• Mobile-first responsive design
• Interactive elements and smooth animations
• Professional but approachable aesthetic

Performance Metrics

• Mobile-friendly: Responsive design that works on all devices
• Fast loading: Optimized CSS and minimal JavaScript
• Accessible: Semantic HTML and proper contrast ratios
• SEO-optimized: Proper meta tags and structured data

The Business Impact

This isn’t just about aesthetics. A professional, modern blog:

1. Builds credibility without relying on employer name-dropping
2. Encourages consistent writing through the countdown system
3. Better represents my expertise in modern web technologies
4. Provides better user experience for readers
5. Differentiates from other tech blogs through personality and humor

Want to Do This Yourself?

Start With These Prompts

For Design System:

"Create a modern [your platform] foundation inspired by [your name]'s [describe your writing style]:

Design System:
- Professional color scheme for [your industry]
- Typography supporting [your content types]
- Modern fonts that reflect [your personality]
- Spacing system for [your content structure]

Technical Foundation:
- [List your technical requirements]
- [Specify responsive design needs]
- [Include performance requirements]"

For Personal Branding:

"Help me create authentic personal branding that:
- Reflects my [describe your expertise] without [what you want to avoid]
- Shows my personality through [humor/professionalism/etc.]
- Appeals to [your target audience]
- Differentiates from [competitor description]"

Key Success Factors

1. Be specific about your content and style
2. Describe your audience and industry context
3. Don’t be afraid to iterate and change direction
4. Trust your instincts about what feels authentic
5. Focus on user experience over technical features

What’s Next?

This was Phases 1 and 2 of a 6-phase modernization plan. Next up:

• Enhanced individual post layouts
• Advanced search functionality
• Newsletter integration
• Performance optimization
• SEO enhancements

But honestly? The foundation we built is solid, professional, and authentically me. The countdown timer is already motivating me to write more consistently (hence this post!).

The Bottom Line

AI-assisted development isn’t about having AI do all the work. It’s about:

• Clear communication of your vision and requirements
• Iterative refinement based on feedback and instincts
• Combining technical expertise with creative problem-solving
• Staying true to your authentic voice and goals

The result? A blog that actually represents who I am as a professional and person, while providing a great experience for readers.

Now excuse me while I go reset that countdown timer with a new post… 😄

---

Want to see the code behind this transformation? Check out the GitHub repository for all the implementation details.

Have questions about modernizing your own blog? Hit me up on LinkedIn - always happy to help fellow professionals level up their online presence.