Fall 2026 · Side quest

Portfolio 4.1

The fourth portfolio, grown up. Built from scratch in three days with an AI design stack, then reworked around a bento home page, a chat that answers for me, and a design system every page now shares.

Built with

Claude Code

Stack

Next.js 16 · Supabase · Vercel

Live

joelgiambra.com

From 4.0 to 4.1

What changed

A bento home page

The home page went from a grid of project cards to a bento of live tiles. Each tile walks through the real flow of a project, with its own demo, instead of showing a static thumbnail.

Ask Joel

A chat that answers questions about my work, built with the AI SDK and Claude. It answers from a written set of facts and Q&As, and links to the project it's talking about.

Comments on side quests

Side quests can take public comments now, stored in Supabase, so a project page can be a conversation rather than a one-way post.

Essays, and a case-study system

Long-form essays with narrated audio, and a shared set of case-study styles, so every new page starts from the same type, widths and spacing instead of one-off inline styles.

Tech stack

The tools behind it

Tech Stack — Portfolio 4.1Sun 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

Tile surface

#F7F7F5

.tile

Dark tile

#111110

.tile-dark

Typography

Display

PP Fragment Glare Light · 300 · Hero and page titles

Portfolio 4.1

Heading

Plus Jakarta Sans · 700 · Section headings

Start with the human behind the problem.

Summary

Plus Jakarta Sans · 400 · Lead-in text

A product designer who engineers, crafting solutions that solve problems.

Body

Inter · 400 · Body copy, nav, UI

Crafting experiences that are as intuitive as they are impactful.

Lockup

Reader Medium Pro · 500 · Footer name

Joel Giambra Jr

Label

Inter · 600 · 0.625rem · Uppercase

Design system

Layout & shape

1100px

Container

32px

Gutter

16px

Tile radius

12px

Media radius

Surfaces

.tile

Label

Card title

The bento tile. Warm off-white with a hairline inset.

.tile-dark

Label

Card title

For tiles that carry a product surface.

Outlined card

Label

Card title

Side-quest and project lists on the About page.

Spacing

120