Veranda, a luxury residential concept landing page

Veranda is a concept build I created for a fictional luxury residential brand. It is not client work or a real property. The images and hero motion were generated with AI as part of the creative process.

I wanted to explore something that matters when building high-fidelity landing pages: after several rounds of changes, how do you make sure the final page still looks like the design that was approved?

The site is built in Next.js with responsive layouts, self-hosted fonts, GSAP motion and an interactive walkthrough. I also built in a proper QA process around it, not just checking that the page loads and the buttons work.

It compares 12 sections across five screen sizes against approved visual baselines. It flags visual drift, missing baselines and changes that have not been reviewed. I also tested interactions, accessibility, contrast, performance, browser behaviour and reduced-motion states.

The main lesson for me was simple: a page can pass functional tests and still no longer be the page that was agreed.

Building a QA process that flags visual drift against approved baselines is such an underrated skill, most people just eyeball it after changes go in. What first made you start checking for that instead of trusting the build looked right?

DONT MISS THIS ONE: I've spent the last few weeks building something I've wanted to finish for a while and add new skills to my pipeline while working on the project: a cinematic, terminal/HUD-style interface for a fictional tactical operations system, entirely in the browser. (I believe this might be a really good solution to run some type of motion projects during filmmaking time directly on the visible probs) Here are some details: Behind a simulated boot sequence (fake network handshakes, IP auth, animated logo reveal) sit four consoles: → STATICPEN: a satellite recon view with live target tracking that shifts from optical to thermal scan on inspection → SILENTPEN: a ground tactical console with four switchable sensor modes: Direct, Lidar, Heat Scan, Ghost → SEERPEN: the deep one. A real 3D globe (Cesium) rendering 26 live/static intelligence layers, conflict zones, ship traffic, flight tracking, GPS jamming, orbital satellites, paired with a live news feed and a local-LLM "analyst" that reads the map context and can act on it through chat → STRATUM: locked for now. Select it, and the system denies you clearance and logs the attempt. A dead end on purpose. Design-wise, the goal was to make it feel like a live system, not a mockup; every terminal readout, scan line, and boot log is actually animating in real time, not a static screenshot dressed up to look busy. Designed fully in Figma, first run and perfected on a local server and moved to GitHub with some changes to able to fit the webpage format. It was built with React 19, TypeScript, Vite, Tailwind v4, Cesium, and a small Express backend aggregating real news and live layer data. While I've FE skills, they were limited in most cases; I've tried a new MCP server system inside Figma, and with VSC and Claude, I was able to pull out my design, put more detailed meaning to it and run it fully with interactions. While I'm against the ML systems to some degree, my approach is to use that as a tool to solve my technical problems. And my design project became a fully functional project. I believe designers will evolve their mindset to create more valuable products with more extensive tool options. Let me know what do you think =) Full case study on Behance: https://lnkd.in/dNd_PRqu Live demo: https://lnkd.in/d2cp9mcN

Amazing! Great Work! 👍