Building a modern personal website: lessons learned

The Journey to a Modern Web Presence

A strong digital presence is no longer optional—it’s foundational. Whether you’re aiming to advance your career, build a brand, or simply showcase your work, your website is now the first touchpoint for most people.

After years in music technology, I finally created a personal website that not only showcases my skills but is maintainable, accessible, and performant.

Why Jekyll + GitHub Pages?

Embracing Static Generation

Static site generators like Jekyll have become essential for modern, lightweight websites:

• Performance: Instant load from pre-rendered HTML—no database, no lag.
• Security: With no backend logic exposed, security risks are minimal.
• Cost: GitHub Pages provides free, reliable hosting, including custom domains.
• Simplicity: The infrastructure is minimal—just focus on your content.

Jekyll, which powers GitHub Pages out of the box, was my choice for several reasons:

• Mature plugin ecosystem
• Liquid templating for flexible layouts
• Markdown for natural content writing
• Native support for posts, collections, and data-driven pages

Design Philosophy

Less, but Better

I leaned into a minimalist, modern SaaS-inspired style (think: Linear, Vercel). Key tenets:

1. Whitespace: Let content breathe.
2. Typography: Rely on system fonts for speed—no webfont lag.
3. Color: Keep things neutral, with modest accents to highlight important elements.
4. Motion: Use animation sparingly, only to improve clarity or focus.

Accessibility Is Non-Negotiable

• Semantic, standards-based HTML everywhere
• ARIA labels on interactive elements
• Keyboard navigability for all UI
• Respects user motion preferences (reduced motion)
• Meets high contrast ratios for legibility

Technical Approach

Tailwind CSS: From CDN to Purged Builds

Initially, I explored using Tailwind via CDN, but that quickly proved inefficient:

• Massive bundle: Unused utilities ballooned CSS sizes (~3MB unminified)
• Sluggish loads: Longer time-to-interactive
• Security (CSP): Requires unsafe-inline, which is best avoided

Current Status:
I’ve adopted a proper Tailwind build pipeline with PurgeCSS. Now, unused styles are stripped at build time—measuring in under 20KB for the entire site.

Modular with Jekyll Includes

Componentization is critical for maintainability. Jekyll’s include tag makes it easy:

{% include project-card.html 
   title=item.title 
   description=item.description 
   tech_stack=item.tech_stack %}

Instead of copy-pasting markup, reusable components now drive the site—much like React/Vue, but without a JS runtime cost.

Blog Features

Elevating User Experience

A blog today should be more than a reverse-chronological list. I’ve built:

• Client-side search for near-instant results
• Tags and categories for real information architecture
• Related posts to increase engagement
• Dynamic Table of Contents for long-form posts (see sidebar on desktop)
• Estimated reading time auto-generated per post

These features are powered via a combination of Liquid templates, includes, data files, and light JavaScript.

Performance Optimization

Current Lighthouse Scores

Continuous focus on performance pays off:

• Performance: 95+
• Accessibility: 100
• Best Practices: 100
• SEO: 100

(You can check actual numbers in the footer or with Chrome DevTools Lighthouse)

Behind the Scenes

1. Images: All images use loading="lazy", WebP where possible, and responsive srcset.
2. CSS: Fully-purged Tailwind, with critical CSS inlined for perceived speed.
3. Fonts: No external webfonts—the system stack ensures speed and privacy.
4. JavaScript: Minimal, deferred, only for UX extras like ToC and search.
5. Caching: Relying on GitHub Pages’ built-in static caching.

Content Management

The Markdown Publishing Flow

Publishing content is now as simple as:

1. Create a Markdown file in _posts/
2. Fill in frontmatter (title, date, tags, etc.)
3. Commit and push to GitHub
4. GitHub Actions builds and deploys everything automatically

There’s no CMS, no database, and near-zero overhead for publishing or updating content.

Lessons Learned

What Works Well

• Static-first: Ultra-fast and secure
• Includes/components: Code stays dry and easy to manage
• YAML/JSON data files: One place to update structured data (like music projects)
• “Push-to-deploy”: Each update is visible to the world in minutes

What I’d Change Next Time

• Start Tailwind build pipeline from day one to avoid future code churn
• Create more demo/test content to better stress-test blog and category features
• Analytics integration: Should have been set up at launch, not as an afterthought
• Dark mode: It’s a user expectation now, and already implemented site-wide via Tailwind’s dark mode utilities

Looking Forward

My site will keep evolving. Planned improvements:

• More deep-dives and case studies on music tech and MIR
• Dedicated project pages and interactive demos
• Newsletter (see footer to sign up)
• Commenting via third-party (privacy-safe) integrations

Conclusion

Modern personal websites don’t need complex stacks or paid hosting. With Jekyll, Tailwind CSS, and GitHub Pages you get a performant, scalable site—while retaining full control over your content and tech.

By focusing on accessibility, performance, and clarity, the site offers a better user experience than most all-in-one solutions or heavy JS frameworks.

Curious about the implementation? See the full source code on GitHub.

Related Topics:
#WebDevelopment #Jekyll #TailwindCSS #Performance #Accessibility #StaticSites