Adel & Co. Ceramics

What This Site Does

A one-page site for a ceramics studio, built from a written client brief to replace a Cairo-based potter's Instagram DMs as the way people commission work. The brief called for something warm and human rather than "a SaaS startup page" — built entirely in vanilla HTML and CSS, no framework, no JavaScript.

View the live site · View the repo on GitHub

How I Worked Through This

Early on I had to decide where the scroll indicator belonged structurally. It felt like it should live in <header>, but a header is for introducing content, and a scroll cue isn't introducing anything — it's pointing at what's next. The actual answer was that it wasn't its own structural unit at all: it's part of the hero's job, so it lives inside the hero section, right after the tagline.

Two bugs slipped through with the same root cause — both "nothing looks broken, nothing happens either." I'd written the scroll arrow as CSS content: '↓', which only works on ::before/::after, not a regular element — fixed by putting the arrow directly in the HTML. Right after that, the anchor link wasn't scrolling anywhere: I'd made the About section a class instead of an id, and fragment links only match ids.

Once the site was visually done, I went back through it specifically for accessibility rather than treating a clean look as finished. A Lighthouse audit came back at 99 Performance, 95 Accessibility, 100 Best Practices, 91 SEO — strong, but Lighthouse flagged the terracotta contact links for low color contrast (about 3.9:1 against the cream background, under the 4.5:1 AA threshold). Swapping to a darker shade already in the palette fixed it and brought Accessibility up to 100.

I also went looking for a gap Lighthouse doesn't actually check: whether the page's landmark regions were useful for a screen reader user, not just present. The real question wasn't "which sections have headings" but "which sections are genuine jump-to destinations" — the hero is where a screen reader lands automatically, so turning it into a landmark would've just cluttered the jump list with a "you are here" entry. About, Gallery, and Contact each got a proper named landmark instead, and I verified the result with NVDA's Elements List rather than just trusting the markup — three named regions, hero correctly absent, no duplicates.