After several years with the same look, I’ve completely redesigned renner.dev with a focus on modernization and usability.
Design Philosophy
The redesign follows a focused approach:
- Bold brand personality — A restrained palette of black, indigo, and grey
- Subtle interactions — Hover effects that feel intentional, not flashy
- Clean hierarchy — Clear visual structure with minimal clutter
- Developer-focused — Authentic portfolio aesthetic, not a marketing site
Portfolio Page
The projects page is now a full-featured showcase of my GitHub repositories:
- Dual filtering system — Filter by programming language (Python, TypeScript, C#, JavaScript) or by topic (Gaming, Linux, Unity, Steam)
- Star-based sorting — Projects automatically sorted by GitHub stars
- Topic tags — Each project displays its GitHub topics for quick scanning
- Clean timestamps — Dates formatted as “Jan 2006” instead of raw ISO strings
- Hover interactions — Subtle lift effect on card hover
Blog Page
The blog section received significant improvements:
- Sort controls — Toggle between newest-first or alphabetical ordering
- Category filters — Filter posts by category with a single click
- Proper dates — Publication dates pulled correctly from frontmatter
- Card-based layout — Clean separation between posts with hover effects
- Tag display — Each post shows its associated tags
Site-Wide Search
A new search page allows instant searching across all content:
- Unified search — Find both blog posts and GitHub projects
- Client-side — No server required, instant results as you type
- Styled results — Clean result cards with section badges
- Keyboard-friendly — Auto-focused input for quick searching
Technical Details
The site continues to use Hugo as its static site generator with some key improvements:
- Hugo v0.153.1 — Latest version with extended features
- GitHub Actions — Automated deployment and daily GitHub data sync
- Custom templates — All layouts overridden from the base theme
- SCSS architecture — Modular styling with CSS custom properties
- GitHub Pages — Free, fast hosting with automatic HTTPS
Visual Design
The color palette is intentionally restrained:
| Element | Color |
|---|---|
| Background | #0f0f13 (near-black) |
| Cards | #141419 (dark grey) |
| Text | #ffffff / #888888 |
| Accent | #6366f1 (indigo) |
| Links | #60a5fa (blue) |
Typography uses Inter throughout for a clean, modern feel with excellent readability.
This post documents the December 2025 redesign of renner.dev.