Building a System-Driven Portfolio
Redefining the Developer Portfolio
Most developer portfolios fall into the exact same trap: a friendly photo on the left, a "Hi, I'm a fullstack developer" headline on the right, and a soft, rounded bento grid below.
While functional, it's completely forgettable.
The Anti-Safe Harbor Approach
For this iteration of my portfolio, I established strict constraints:
- Geometry: Only 0px or 2px border radiuses.
- Palette: True black (
#0f1110) and Acid Green (#b2fc3a). No safe "fintech blue". - Typography: Massive, imposing display fonts for headers contrasted against utilitarian monospace fonts for data.
The Stack
The site is statically generated using Next.js 15 (App Router) and styled with pure Tailwind CSS. I explicitly avoided UI libraries like shadcn/ui to force myself to build custom primitives that match the brutalist aesthetic.
// Custom button primitive enforcing sharp geometry
const variants = {
primary: "bg-accent text-background hover:bg-accent-hover rounded-none border border-accent",
outline: "border border-border bg-transparent hover:border-accent hover:text-accent rounded-none",
}
"If my layout structure is predictable, I have failed."
This constraint led to the complete abandonment of the standard navigation bar, replaced instead by a dynamic Framer Motion spring layout.
Next Steps
I'll be using this space to document technical experiments, homelab server configurations, and deep-dives into React rendering architectures.