Portfolio Website
Design Engineer · 2026
This is the site you're on right now. I built it as a personal portfolio with Next.js 16, React 19, a custom shadcn style design system (Section, Container, SectionHeader, and Text primitives built with cva variants), Tailwind CSS v4, and Framer Motion for animations. It uses a 4 tier brightness scale, semantic typography tokens, and a refined component library.
Context
I needed a portfolio that signals craft without taking a quarter to build. The constraint was simple. It has to read as 'this person ships' on first scroll, while the underlying code stays maintainable enough to evolve weekly.
Approach
Treated the site as a design system in production rather than a one off. Built typography tokens (8 size variants × 4 brightness tones), layout primitives (Section, Container, SectionHeader), and Card variants on top of base ui's useRender pattern. Every page composes from the same primitives. No inline class soup, no per page styling drift.
Key decisions
Token driven typography over ad hoc sizes
12 different text-* sizes were scattered across the codebase. Collapsed to 8 named variants with smart per variant default tones. New pages now read consistently without consumers thinking about sizing.Off white default text (oklch 0.88) instead of pure white
Pure #FFF on dark bg fatigues the eye and flattens hierarchy. Soft off white plus a 4 tier brightness scale (0.88 / 0.74 / 0.60 / 0.46) lets headlines sit above body without weight games.Layout primitives eliminate the section sandwich
Every page used to repeat <section py-20 px-6><div max-w-[1100px] mx-auto>. Section, Container, and SectionHeader collapsed about 30 lines of boilerplate per page and made global rhythm changes a one line edit.Result
6
Pages18
UI primitives95+
Lighthouse targetLive at pavle-design.com. Token system, layout primitives, and component library documented in AGENTS.md so future iterations stay coherent.