Design Spec: robee.id Personal Blog Redesign
Design Spec: robee.id Personal Blog Redesign #
Date: 2026-08-23
Status: Approved
Topic: Sleek Minimalist Tech Redesign for robee.id
1. Vision & Aesthetic Direction #
Transform the personal portfolio and blog into a sleek, lightweight, and easily navigable developer & SRE space.
- Aesthetic Direction: Sleek Minimalist Tech — crisp neo-grotesque typography, refined 1px subtle borders, dark obsidian theme with emerald/mint (
#10b981) accent glow, and an ultra-clean off-white light theme. - Branding: Modern
robee.idwordmark with active status indicator and clean navigation. - Performance & Simplicity: Zero JavaScript frameworks, zero layout shifts, zero flash of unstyled theme on load, pure CSS design tokens with native responsive design.
2. Design Tokens & Typography #
Typography #
- Headings & Display:
Plus Jakarta Sans(weights: 600, 700, 800) - Body & Prose:
Inter(weights: 400, 500, 600) - Monospace, Tags, Dates & Code:
JetBrains Mono(weights: 400, 500) - Fluid Scale:
clamp()based responsive font sizes and spacing.
Color Palette #
| Token | Dark Mode ([data-theme="dark"]) | Light Mode ([data-theme="light"]) |
|---|---|---|
--bg | hsl(222, 47%, 7%) (#0b0f17) | hsl(210, 40%, 98%) (#f8fafc) |
--surface | hsl(222, 40%, 11%) (#111827) | hsl(0, 0%, 100%) (#ffffff) |
--surface-elevated | hsl(222, 35%, 15%) (#172033) | hsl(210, 40%, 96%) (#f1f5f9) |
--border | hsl(222, 30%, 18%) (#1e293b) | hsl(214, 32%, 91%) (#e2e8f0) |
--border-focus | hsl(160, 84%, 44%) | hsl(160, 84%, 38%) |
--text | hsl(210, 40%, 98%) (#f8fafc) | hsl(222, 47%, 11%) (#0f172a) |
--text-muted | hsl(215, 20%, 65%) (#94a3b8) | hsl(215, 16%, 47%) (#64748b) |
--primary / --accent | hsl(160, 84%, 44%) (#10b981) | hsl(160, 84%, 38%) (#059669) |
--primary-glow | rgba(16, 185, 129, 0.15) | rgba(5, 150, 105, 0.12) |
3. Component & Layout Architecture #
Global Header (_layouts/default.html) #
- Brand Logo:
robee.idwith emerald glowing status dot. - Nav Links:
Home,Blog,About,Materialswith active and hover states. - Theme Toggle: Crisp SVG Sun/Moon button with zero-flicker
<head>initialization script.
Homepage (index.html) #
- Hero Section: Concise SRE/DevOps bio, status badge, call to action buttons, and author visual.
- Core Expertise Grid: 3 bento cards highlighting Continuous Delivery, Kubernetes & Cloud, and Site Reliability.
- Live Tag Filter & Search: Client-side instant tag filter pills allowing users to filter posts without page reload.
- Article Stream: Card list showing date, reading time badge, title, preview excerpt, and tag badges.
Post Layout (_layouts/post.html) #
- Reading Progress Bar: Top edge viewport scroll progress indicator.
- Header: Back link
← All Articles, title, date, reading time, and topic badges. - Content: Ergonomic 68ch reading column, enhanced syntax highlighted code blocks with 1-click Copy button.
- Post Navigation: Next and previous post preview cards.
Footer (_layouts/default.html) #
- Clean social icons with tooltip (GitHub, RSS, Slice of Life, Cloud & Network Learning Materials).
- Copyright and tech stack note.
4. Verification Plan #
bundle exec jekyll buildpasses cleanly.- Test responsive layout across 375px (mobile), 768px (tablet), and 1280px (desktop).
- Test light/dark theme switching and automatic system preference detection.
- Verify live tag filtering and code snippet copy-to-clipboard functionality.