AI Automation & Web Design | n8n · Vapi · Claude API
17
Followers
AI Automation & Web Design | n8n · Vapi · Claude API
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.
22
26
1.3K
A cinematic portfolio concept for a film and motion studio, designed to feel more like an editorial reel than a standard agency website.
The site uses a dark visual system, oversized typography, smooth scrolling, restrained motion, and a full-screen project index to make the work feel premium before the user reads a word. The focus was on pacing, atmosphere and confidence: fewer sections, stronger visuals, cleaner movement.
Built as a responsive Next.js prototype with Framer Motion and Lenis-style smooth scrolling, including hero, selected work, about and contact sections.
7
12
579
I built a working AI recruitment screening demo that shows how a hiring team can use AI without handing over the final decision.
The flow is simple:
A job spec goes in.
Candidate profiles are screened against a weighted guideline.
Each candidate gets a score, band, evidence quotes, and risk flags.
Then everything stops at a human review queue.
No auto-rejects. No silent ATS updates. No “AI decided this person is out”.
The system includes:
Candidate pipeline table
Evidence-based screening view
Human review queue
Approve / reject / snooze decisions
ATS deployment plan
Audit log for compliance
n8n workflow export with a human-in-the-loop Wait node
Optional live Claude screening path
The important part is the architecture: deterministic logic owns the workflow, gating, state and audit trail. The AI helps with judgement and screening, but the human owns the final decision.
Built with Next.js, TypeScript, Claude API, n8n workflow architecture, and a gated ATS sync pattern.
This is the kind of system I like building: AI that makes the work faster, but still respects the places where people need control.
Shorter Version
I built an AI recruitment screening pipeline with a human approval gate.
It screens candidates against a rubric, shows evidence quotes and risk flags, then routes every candidate into a review queue before anything reaches the ATS.
No auto-rejects. No silent updates. Human-in-the-loop by design.
Built with Next.js, TypeScript, Claude API and n8n workflow architecture.
1
203
I’m working on a clean interactive website concept for Volt Audio.
The idea is to make the first screen feel like a small product demo rather than a static landing page. The hero shows the automation visually, then the page scrolls into the actual service offer so someone can quickly understand what it does, who it is for, and why it matters.
The design direction is minimal, dark, and product-led, with the motion doing most of the explaining instead of relying on lots of heavy copy.
Just gave my portfolio a new look, but this time I wanted to do more than showcase finished projects.
I built an interactive, scroll-driven experience that takes visitors through what happens beyond the click, from the interface to the workflows behind it.
Have a look: https://freemanmadudili.com