Tidier sections, gentle motion, section colours and a live hero

Sammy asked for a more eye-catching site, worked through one item at a time: first the details that made it look unfinished, then motion and colour.

Tidier layout

• Home sections line up. On desktop each section’s photo and card now start on the same line, and the photo stays in view beside the card while it is read. Before, the photo started about 100px below the card, and an extra margin left a wide empty band above every section.
• Photos keep their faces in frame. Each home photo has its own focus point, so cropping it for a tablet or phone no longer cuts off the avatars’ faces, and a stacked photo on a tablet is no longer nearly two screens tall.
• The Bluesky card shows the Bluesky butterfly glowing on Bluesky blue when a post has no image, instead of the letters “BS”. TikTok, Instagram and YouTube posts without an image get their own marks and colours the same way.
• Latest creator content uses the same side margins as the sections around it.
• The Work page’s section links sit in even columns, six and five on desktop and four to a row on tablets, instead of a row of eight with three left over.
• The back-to-top button moved from the middle of the screen, where it covered the text being read, to the bottom-right corner, in the site’s dark and amber colours. On a first visit it waits until the language offer in that corner is closed.

Motion

• Pages fade into each other. Following a link fades the old page out and the new one in, while the header stays where it is. Browsers that cannot do this change page as before.
• The hero portal turns slowly, carrying its glowing points around the rings, and drifts away as the page scrolls while the photo behind it sinks a little more slowly than the page.
• Section headings on the inner pages wipe up into view as they are scrolled to.
• All of it stops for visitors who ask for reduced motion, either on their device or with Display settings.

Colour

• Each home section takes a colour from its photo: violet and pink for About, violet for Live, pink and gold for Latest creator content, cyan for Projects and pink for Links, alongside the amber the site already used. Community keeps its warm gold.
• #KeepItMello in the hero is pink.

Live hero

• While Sammy is live on Twitch the home hero shows a “LIVE now on Twitch” link with a pulsing dot, and the portal glows Twitch violet and turns faster. It reads in every language the home page is published in.
• The status comes from the Twitch check that runs every ten minutes and records the result with the site, so the hero switches once that update is published. The site’s server can also apply a newer status the moment one is stored for it, the way it already does for the social feeds.

Verification

• tools/test-feed-pages.mjs checks that a live status shows the link and marks the hero on the English, Spanish and Japanese home pages, that an offline one hides it, and that other pages are untouched.
• The home sections, the Bluesky card, the Work page links and the back-to-top button were measured and reviewed at desktop, tablet and phone widths, and the motion was checked with and without reduced motion.