← Work07 / 08 · Design — Build

Client
Personal project
Year
2025
Role
Product design, Dynamic theming system, Front-end development
Disciplines
Design — Build
WikiWesteros houses index: sigil cards bordered in each house’s colour.

Designed an immersive lore database for the ‘A Song of Ice and Fire’ universe.

Fan project, not affiliated with HBO or George R. R. Martin.

01 — Design

Houses index: sigil cards for Lannister, Martell, Mormont, Payne, Seaworth, Selmy and Stark with words, region and seat; card borders take each house’s colour.
Fig. 01Every house carries its own colour; the interface picks it up.

Engineered a dynamic UI theming system that visually reacts to the selected noble house; an interactive world map of Westeros and Essos is planned next.

Focused on minimizing cognitive load while managing dense, multi-layered historical data and character genealogies.

Characters index: search plus house, status and gender filters above portrait cards with alive/deceased badges.
Jon Snow profile: status and house header, a biography by season, an archive nav, and a card with status, birth year and culture.
Filter the characters by house, status and gender; every profile keeps the essentials in view.
“Discover the Known World”: three image cards — Noble Houses, Key Characters, History & Lore.

02 — Build

A Next.js 16 front end over a Strapi v5 content API, built from strictly isolated components.

Each house carries one hex value; one function turns it into --theme-main and a ramp of 5–80% tints, so glows, borders and skeletons re-theme without knowing which house they’re in.

Stack

Frontend
Next.js 16
Content
Strapi v5
Deploy
Vercel

  1. React UI

    isolated components

  2. Theme state

    one hex → tint ramp

  3. Vercel Edge

    static + ISR

Like what you see? — work@selimyaylali.com

(Next) 08 / 08

PetsConnected