Portfolio 4.0

Designing, building, and deploying my fourth portfolio rendition, from scratch, in just three days — using an AI powered design stack crafting a Next.js site focused on craft, performance, and a design system built entirely from the ground up.

Tech Stack — Portfolio 4.0Sun May 4 4:20 PM

app

components

public

next.config.ts

tsconfig.json

package.json

README.md

globals.css

tailwind.config.ts

node_modules

Design System

Tokens, type & foundations

Colour

Background

#FFFFFF

--bg

Text

#000000

--text

Accent

#E9FF27

--accent

Muted

#6B6B6B

--muted

Border

#E5E5E5

--border

Typography

Display — PPFragment Glare Light

Portfolio 4.0

PPFragment · Weight 300 · Hero only

Heading — Plus Jakarta Sans

Designing the unexpected

Plus Jakarta Sans · Weight 700 · All headings

Body — Inter

Crafting experiences that are as intuitive as they are impactful.

Inter · Weight 400 · Body, nav, labels

Sans Light — PPFragment Sans

A design system built entirely from the ground up.

PPFragment Sans · Weight 300 · Long-form body

Label — Inter

DESIGN SYSTEM

Inter · Weight 600 · 0.625rem · Uppercase labels

Cards

Bordered

Label

Card Title

Supporting body text goes here.

Filled

Label

Card Title

Supporting body text goes here.

Shadow

Label

Card Title

Supporting body text goes here.

Glass

Label

Card Title

Supporting body text goes here.

Spacing

120