Problem
The Tarnished Codex felt like an unfinished wiki: plenty of information, no point of view.
Shift
I stopped adding categories and told my own experience through my screenshots.
Result
A seven-chapter landing page and a 78-photo Journal, live and tested with 6+ people.
01 / Context
When I play Elden Ring I take screenshots without photo mode, because I want my Tarnished to stay in the frame. They record where I went and what I wanted to remember.
They were first planned for the About or Playground page of this portfolio. Then the project became a chance to explore visual and interaction quality, with award-level craft as the bar.
I also worried that a photo album alone would be boring. So I added World, Bosses, Armory, Armour, Essentials and Endings, until it became The Tarnished Codex.
What the Codex held
02 / The problem
By 13 October I had reviewed the site as it stood and written down what I found. This is that version, with those findings. My photographs had become one category among many.
Worth keeping: “Rise, Tarnished.”
Short and right for the game. It is still the title of the live page.
One headline formula
Large serif, last word in italic, section after section. “Follow your curiosity” could sit on any site without a single change.
One section skeleton
Almost every section runs opener, toolbar, gallery, footer. The page had length but no rhythm.
Worth keeping: the boss gallery
Its varied image sizes made it the most visually alive part of the page.
Too clean for this world
Cream and olive surfaces made Armory and Essentials read like a product catalogue. Dark fantasy, travel editorial and shop were all competing.
Categories for completeness
Six endings were there to complete the set. I had chosen one, and that is the one the site tells now.
The best idea was buried
“I was here.” was the strongest personal idea on the page, and it sat below eight other sections.
03 / The reframe
How do I tell my experience through photographs and personal choices, while still giving visitors enough context about the world?
That question replaced “what else should the site include?” It came with a test for every section: does this tell my experience, or does it just add another category?
What the test did to the content, in items per category.
| Category | The Tarnished Codex, then Elden Memoir |
|---|---|
| Places | 33 4 |
| Bosses | 17 2 |
| Weapons and armourone loadout | 10 5 |
| Endings | 6 1 |
| Essential items | 6 6 |
| Photographs | 16 78 |
Every screenshot I had for this project, in the order I took them. The 78 in the Journal are in colour.
Eleven of those I captured during the project, including the frames of the ending itself.
Stays in the project
Handed to external guides
One rule for copy: invent nothing.
No play time, no death counts, no made-up memories. If I hadn’t confirmed a detail, it stayed out of the site.
04 / Directions
I kept the old site and every new direction side by side on the Pen.dev canvas. Before exploring, I wrote down what a good answer had to do.
Hover to scroll through a page, click to open it in full.Swipe across, then tap a page to open it in full.
05 / Structure
The page moves from the world, to what I fought and how I fought it, to what I carried and photographed. The last two chapters connect the person who was with me to the ending I chose.
01 / The world
Who made this, and where it takes place.
02 / The journey
What I fought, what I carried, what I kept.
03 / The ending
Who was with me, and how it ended.
The Codex put everything at the same level. Here each detail follows the same path: the reason it was chosen, visual proof, just enough context, then an external source.
On the page
The story
A photograph, a name, a line or two. Enough for a short visit to feel complete.
In the viewer
The proof
The full frame at its original ratio, with zoom and previous/next. Boss cards open their footage in the same viewer.
Out to a guide
The context
Area, boss, equipment and ending guides live on external wikis. Spoiler-heavy detail stays one deliberate click away.
States designed before any code
06 / Key decisions
Most sections went through several layouts on the canvas. These four changed what the page is, and each one gave something up.
Decision 01
Armory and Armour were two collections of gear from the game. I merged them into My Build: one character and the combination I used.
I explored five layouts. The live page has four cards, with both Knight’s Greatswords sharing one, so the same weapon doesn’t appear twice in the row.
Trade-off: the row no longer maps one to one onto equipment slots.
As shipped: “Steel, fire, and a little faith.”
Decision 02
Hybrid cut the list to five picks. The live page keeps Malenia and Rennala, my two favourites, and gives each one its own looping footage.
Trade-off: Radahn, Maliketh and Godfrey were real picks too, and they no longer appear in this section.
Before: five encounters, static cards.
After: two favourites, each with its own looping footage.
Decision 03
On the boards the ending was a single image with a title. In the browser it became six memories: the frame opens as you reach it, then scrolling moves through them, and it all reverses when you scroll back up.
I had no captures of the ending when I built this. So it launched with frames from Ranni’s quest, in a data file made for swapping. Frames I took on 31 October later replaced the last three.
Trade-off: it is a long scroll, so there is a Skip voyage link, a screen-reader transcript and a static gallery for reduced motion.
Portrait: quiet, but static.
Moon stage: bigger, still one image.
The voyage: one memory sliding into the next.
Decision 04
I explored five closings on the canvas: a signature, a monumental wordmark, a farewell with a chapter index, an imprint, and a single line. The live page ends on that line, “A world remembered.”
Trade-off: no chapter links at the end of a long page, only Credits and Back to top.
07 / Visual system
My first colour exploration was too light for Elden Ring. I moved it to charcoal and dark olive, ivory, and a brass gold, and kept the surfaces quiet so the screenshots carry the colour.
Cold blue appears only in Ranni’s chapter, so the accent has a reason inside the story.
Viewer black
#0B0D0C
Canvas
#111312
Surface
#141712
Card surface
#1B211C
Rule
#383D36
Muted text
#AFB0A6
Antique gold
#BCA477
Ivory
#E7E1D3
Ending mist
#A6BDCC
On the canvas colour, ivory measures 14.3:1, muted text 8.5:1 and gold 7.7:1. Gold marks actions and metadata, while large surfaces stay neutral.
Cormorant Garamond gives headings their character and Manrope keeps interface text readable, with a 14px minimum across all text.
The full foundations board.
08 / The result
Seven chapters, a Journal, a viewer, and a page each for About and Credits. Restrained ornament keeps the screenshots at the centre.
Choosing a place changes the photograph and caption without changing the height of the section. It advances on its own, and pauses off-screen, on hover or focus, and when the viewer is open. Try the tabs below; these are captures from the live page.
Hall of Legends: boss cards open their footage in the shared viewer.
The Little Things: six items I relied on. Each links to a reference.
Places, Bosses, and Grace & wonder split the archive into collections, shown as a grid or as masonry. The viewer keeps each photo at its original ratio and adds zoom and keyboard navigation.
Collections
Masonry view
Viewer
Age of the Stars
Compositions reorder for small screens. Controls stay large and don’t depend on hover.
09 / Build and QA
A static board can’t show how scrolling feels, how a font renders, or how an image loads. So I compared the browser with the Pen.dev frames section by section, then adjusted spacing, crops, alignment and small-screen layouts.
Drag to compare the Places section in the design file and on the live site.
I compared three approaches. No WebGL, custom cursors, forced scrolling or artificial loading delays. With reduced motion, parallax, positional reveals and ambient movement all switch off.
Atmospheric
An effects-heavy approach built on ambient layers.
Considered, not chosen.
Pinned and 3D
A spectacle built on pinned scenes and 3D.
Considered, not chosen.
Editorial
Short reveals and parallax, with three signature moments: Hero, Places, and Melina into the Ending.
Chosen as the better fit for photography, performance and maintainability.
A 26 October audit covered the motion across 54 source files. Four bugs were reproduced in the browser, and all four are fixed in the shipped code.
Malenia’s source video is 16 MB. Her card uses a 6.9 MB, 720p, silent rendition that starts loading 180px before the card enters the screen and pauses when it leaves. The photograph stays underneath as poster and fallback.
Lighthouse on the live site
| Metric | Desktop | Mobile |
|---|---|---|
| Performance | 99 | 84 |
| Accessibility | 100 | 100 |
| Best Practices | 100 | 100 |
| SEO | 100 | 100 |
| Largest Contentful Paint | 0.8 s | 3.9 s |
| Cumulative Layout Shift | 0 | 0 |
Median of three runs per device, 6 November 2026. This is lab data, not real visitors.
How I worked with AI
I set the direction, chose the content and screenshots, and reviewed the design decisions and the build. The frontend was built with help from Codex. ImageGen produced some item illustrations, which I redirected until their shape and colour fit the site. Sources are listed on the Credits page. The gameplay photographs are all my own.
10 / Work log
During the project I posted progress updates, with the time each session took. These are sessions 4 to 8, as I posted them, with the notes lightly edited.
#4
9 Oct · 2h 45m
Explored movie and gaming website layouts, aligned with the design system and my creative direction.
Curated and refined design references to set a focused visual direction.
1 of 5
11 / Testing
I met each person directly and covered usability testing, a design critique and a design review in the same session. The feedback led to design improvements and new features.
In each session
Who took part
12 / Reflection
Adding sections did not make the project stronger.
Pick the story first.
Once I chose a story I could tell myself, the design direction became clearer and the scope could shrink.
The rules came before the options.
The section test, nine review criteria and the “invent nothing” rule were written down before the directions, so every direction was compared on the same terms.
A board can’t judge scroll.
A static design can’t prove how scrolling, font rendering or image loading will feel. The hero, the boss footage and the ending all changed once they ran in a browser.
The feedback comes from a small group and is qualitative. It shows what these 6+ people saw, not how a wider audience would respond.
