Landing Page Collection
A growing collection of landing pages developed through vibe coding and refined through project-specific code adjustments.
- Role
- Creative direction, content, customisation, deployment
- Year
- 2026
- Category
- Web Experiences, Branding
- Duration
- May 2026
- Tools
- Lovable, VS Code, Vercel, ChatGPT, Claude
Note: The brands are fictional concepts created for portfolio purposes.
00
Overview
Landing Page Collection brings together web concepts developed for different industries within short production cycles. In most projects, the initial design and working page structure were created in Lovable through one detailed prompt. I then moved the project files into VS Code to refine the content flow, responsive behavior and project-specific details directly in code.
01
The starting point
Each project starts from the same landing-page format, but that format cannot stay the same across a beauty brand, a restaurant and a space-travel company. The starting question for every page was what that industry's visitor needs to see first, and what would make them trust it.
02
Approach & strategy
For each project, I first defined the brand purpose, intended audience and primary action expected from the visitor. Vibe coding provided a fast working first version, but the generated structure was not treated as final. Copy, mobile behavior, CTA placement and smaller visual decisions were refined around the needs of each project. This approach made it possible to turn a simple landing-page idea into a working and publishable site within a few hours.
03
Projects in the Collection
Branding, Web Experiences
Elan Beauty
A premium beauty landing-page concept rapidly developed in Lovable and refined through code-level content and responsive adjustments.
View Project →
Web Experiences, Branding
Stacked
A landing-page concept for a premium burger restaurant built around immediate product appeal and a clear path to ordering.
View Project →
Web Experiences
Novax
A landing-page concept presenting commercial space travel through a clear and reassuring content sequence without losing the sense of exploration.
View Project →
05
Production process
- 01
Starting structures
Generated the initial page structures with Lovable.
- 02
Personalisation in VS Code
Rewrote copy, tuned type and colour and reworked sections so each page felt distinct.
- 03
Publishing on Vercel
Deployed each landing page to Vercel for review on real devices.
06
Key decisions
Brand before layout
Each page started from a tone of voice and palette, and layout followed.
Generated start, human finish
The generated base saved time; the personalisation is where the design happens.
Responsive from the start
Every page was checked on mobile while designing, not afterwards.
07
Outcome
Three published concept landing pages, each with its own identity, built through the same vibe-coding-to-code workflow.
08
What I learned
Through these projects, I learned how to move a vibe-coded website into VS Code and continue refining the generated structure directly in code. Handling smaller design and content changes myself allowed me to customize each project without repeatedly using platform credits. I also gained experience managing project files locally, moving projects between development environments, publishing through Vercel and connecting a custom domain when needed.
Next project
← Previous: 2Shot
An offline mobile puzzle game combining color matching, Tetris-shaped pieces and chain reactions.