Skip to main content

Redesigning My Portfolio: A Neo-Brutalism Case Study

How I transformed my boring portfolio into a vibrant, high-performance neo-brutalist masterpiece.

Vanessa
May 10, 2024
5 min read
designportfoliocase-study

The Problem

My old portfolio was built with standard corporate design patterns: soft shadows, rounded corners, and a generic blue color palette. It looked professional, but it lacked personality. It didn’t stand out among thousands of other developer portfolios.

The Solution: Neo-Brutalism

I decided to embrace neo-brutalism. This design trend is characterized by:

  • Pure black #000000 for borders and shadows
  • Bright, eye-catching “neon” colors
  • Hard edges instead of rounded corners
  • A general “raw” and unpolished aesthetic

The Process

1. Color Palette Selection

I chose a set of neon colors to act as accents against a stark white background:

  • Neon Pink: #FF006E
  • Neon Blue: #00D9FF
  • Neon Yellow: #FFBE0B

2. Component Design

I rebuilt every component from scratch. Buttons received thick borders and hard drop shadows that disappear on hover to create a tactile “pressed” effect.

3. Performance Optimization

Instead of relying on heavy CSS frameworks, I used Tailwind CSS with custom utilities to keep the bundle size small.

The Results

The redesign was a huge success. The new site is not only visually striking but also incredibly fast.

MetricOld SiteNew Site
Lighthouse Score75100
Bounce Rate65%30%
Load Time2.5s0.8s

Neo-brutalism isn’t for everyone. Make sure it aligns with your personal brand before adopting it!