jawji.com
A personal website rebuilt as a living archive rather than a portfolio.
Rebuilding my personal website from a photography portfolio into a living archive of photography, work, experiments, and everything I create next.
You’re in it.
This page is the project. Everything around you, the navigation, the photography, the 52 archive, the way it moves, is what Project 1 produced. There is no separate demo to open and no screenshot to click. You are standing in it.
The problem
jawji.com used to be only a photography portfolio. But photography was one part of a much wider body of work, research, software, games, systems, experiments. A single gallery could no longer hold all of it, so each new thing lived somewhere else, or nowhere.
The idea
Make one personal digital home with two primary worlds, Photography and Work, sharing a single design system. Both coexist under one identity instead of competing as separate ones.
One home, two worlds
Everything branches from the homepage into one of two territories, and each territory has its own small set of rooms. This is the actual shape of the site you are on.
Designing two worlds
Photography stays quiet, spacious and image-led; the photographs set the colour. Work is denser, more systematic and more typographic, with the 52 Weeks challenge at its centre. Same type, same grid, same motion, different temperature.
Photography
- Quiet
- Visual
- Spacious
- Editorial
Warm paper, wide margins, and photographs that set the colour. The interface steps back so the images can lead.
Enter Photography →Work
- Systematic
- Experimental
- Information-rich
- Interactive
Deep navy, thin rules, index numbers, and one opinionated coral accent. The 52 Weeks challenge lives here.
Enter Work →Motion that answers back
The homepage is a threshold: move the cursor and the seam between the two worlds follows it, so the wordmark changes colour at the boundary. Scroll past the threshold and the worlds separate into their latest work. Every image sits inside a parallax layer; every reveal is a transform or an opacity, never a layout thrash. Under prefers-reduced-motion the same content simply stands still.
Try it: scroll to the top and move your cursor left and right across the homepage.
The parts of the project
- The homepageOne identity. Two worlds.
- NavigationOne bar everywhere. Photography and Work open menus of their own pages; Contact stands apart.
- PhotographyQuiet, spacious, image-led.
- SeriesEvery body of work, editorially sequenced.
- ArchiveEvery frame, filterable, with a full-screen viewer.
- WorkDenser, systematic, typographic.
- 52 ProjectsThe live challenge, 2 of 52.
- RésuméBrowser-native, printable.
- ContactDirect, not a form.
Building for growth
Every photograph and every project lives in typed data rather than in page code. Adding a series or completing a week updates the routes, the counter, the index, the latest-project panel and the sitemap without touching a layout. The archive is built to keep growing.
What it is made of
- Every photographic series and photograph, each exported at multiple widths in WebP and JPEG.
- A design system with two typefaces (Bricolage Grotesque and Inter), four colour themes, and motion built from transforms and opacity only.
- The complete 52 Weeks challenge, beginning with this website.
The website is not hosting the challenge. It is the first thing the challenge produced.
This is week one, so the honest answer is: ask again in a year. The early lesson is structural, building the archive first means every future project already has somewhere to live.