Implementation Plan: robee.id Blog Redesign

Implementation Plan: robee.id Blog Redesign #

Design Spec: docs/superpowers/specs/2026-08-23-blog-redesign-design.md

Task 1: Typography, Google Fonts & Design Tokens Foundation #

  • Update _includes/head.html to load Plus Jakarta Sans, Inter, and JetBrains Mono with preconnect hints.
  • Inject early theme script in _includes/head.html to prevent theme flash (FOUC) on load.
  • Redesign _sass/_main.scss with complete CSS custom property design tokens for :root (light) and [data-theme="dark"] (dark).

Task 2: Global Navigation Header, robee.id Logo & Footer #

  • In _layouts/default.html, implement the sleek top navigation bar:
    • robee.id logo with status dot indicator.
    • Desktop & mobile responsive nav links (Home, Blog, About, Materials).
    • Sun/Moon SVG theme toggle button.
  • Update global footer with clean social links (GitHub, RSS, Slice of Life, Cloud & Network Materials) and copyright.

Task 3: Homepage Redesign (index.html) #

  • Modern, clean hero profile section with bio, avatar, status pill, and action buttons.
  • Core Expertise bento grid.
  • Interactive instant tag filtering bar (All, Cloud, Kubernetes, Kafka, SRE, etc.) and search capability.
  • Redesigned article feed with cards showing date, reading time badge, title, excerpt, and topic tags.

Task 4: Post Layout & Reading Ergonomics (_layouts/post.html & _layouts/page.html) #

  • Add top-of-viewport reading progress bar.
  • Add “← All Articles” breadcrumb back link.
  • Format post meta header (date, reading time, topic tags).
  • Refine prose typography with 68ch maximum reading width.
  • Add 1-click copy button for code blocks with feedback toast.
  • Style next/previous article navigation cards.

Task 5: Build Verification & Testing #

  • Run bundle exec jekyll build to ensure all pages compile cleanly.
  • Verify light/dark theme persistence across navigation.
  • Verify interactive filtering and responsive layout on mobile, tablet, and desktop viewports.