Building a NeoBrutalist Portfolio from Scratch

Why NeoBrutalism?

The web has become too sanitized. Every portfolio looks the same — rounded corners, soft gradients, and minimalist layouts. I wanted something different.

NeoBrutalism brings **personality** back to design. It's bold, it's raw, and it refuses to be boring.

The Design Philosophy

**Bold borders** — No subtle shadows. Hard, thick borders that demand attention.

**Vibrant colors** — Neon yellows, pinks, and greens. Colors that make you look twice.

**Monospace typography** — A nod to the terminal, the origin of all code.

**Grid patterns** — A subtle reminder that everything is built on structure.

The Tech Stack

I used vanilla HTML, CSS, and JavaScript for the first version. Why? Because sometimes you don't need a framework to build something beautiful.

.neo-button {

border: 4px solid black;

box-shadow: 4px 4px 0px 0px #000;

transition: all 0.2s;

}

.neo-button:hover {

transform: translate(2px, 2px);

box-shadow: none;

}

What I Learned

Building this portfolio taught me that design rules are meant to be broken — but only if you understand them first.