Website built with Codex

Website structure

The site combines a small logo, restrained navigation, Traditional and Black & grey collections, a gallery that restores its position and a short enquiry form.

A selected drawing stays attached while browsing and returning to the form. That behaviour is covered by the project tests.

Design

Coal black, JetBrains Mono, small yellow accents and compact desktop images define the interface. Photographs and drawings retain their original colour.

Traditional work, black-and-grey work, studio information and practical answers have separate linked pages. The homepage keeps its copy short.

Gallery and images

Traditional and Black & grey are separate collections. A piece can belong in both; image tone alone does not determine its style.

Thumbnails use proportional image derivatives. The full viewer shows the complete image, with previous, next and close controls alongside gestures.

AR-D-001 is the Halloween campaign cover, excluded from design enquiries. It retains a 1024 × 1280 full image and a proportional 600-pixel-wide WebP thumbnail. The served full image preserves the decoded artwork pixels without recolouring. Smaller recovered photographs are not upscaled.

Phone gesture feel requires device review; source tests cover only the behaviour they exercise.

Project files

src/data/media.json holds gallery records. src/data/content.ts holds practical site text. Updating an image means changing its source and catalogue record, then rebuilding the site.

Project notes retain the current direction, source references and unfinished work. README.md contains setup instructions; docs/VERIFICATION.md records executed checks and their limits.

The commands below start a local preview inside the existing project. These notes do not include a downloadable template or its assets.

• Source: site files.
• Preview: a separate review version.
• Git: version history.
• Tests: checks of specific behaviours.

npm ci
npm run dev

Media workflow

A Codex skill packages reusable task instructions in a SKILL.md file, with optional scripts and references. Here, a media workflow preserves sources, exports proportional thumbnails, updates a catalogue record and checks dimensions and collection membership.

Separate agents handled the project page and AI notes for this site revision. The combined build was checked for routes, links, form behaviour and navigation. More agents are not a measured speed or quality improvement.

The resulting files remain part of the project. This workflow is not offered as an installed service or downloadable skill.

Preview and existing URLs

The development review is separate from the existing production website, excluded from indexing and unable to send public customer enquiries.

/tattoos/traditional/ has a corresponding collection in the new site. Another 33 legacy routes still need individual retention or replacement decisions before migration; the redirect list has not been applied.

Build and tests

The project has separate commands for generating pages, checking Astro source and running behaviour tests. Device interaction and inbox delivery require separate observation.

The commands apply to the existing project. A public tutorial or template release would also need a reproducible setup and clear rights for its code and assets.

npm run build
npm run check
npm test