I've been paying attention to how architecture firms present their work online, and one thing I kept coming back to was how much the first few seconds matter.
Large project photography, minimal distraction, strong project information, and recognition placed close to the work itself.
I kept those ideas in mind while designing Kingsley Architects.
The homepage opens with a project slideshow where the imagery, project name, location and recognition change together, so each project gets its own moment rather than feeling like another item in a grid.
I approached motion the same way.
Using GSAP, I focused on transitions that guide attention, create hierarchy and give the architectural photography enough room to carry the experience.
But I also wanted Kingsley to work beyond the initial launch.
Architecture practices keep evolving. New projects are completed, photography gets updated, awards are received, and the portfolio grows.
So I built a content management system behind the website that allows the studio to add projects, replace imagery and update content without touching the code.
That was an important part of the concept for me.
A studio website shouldn't only look good when it launches. It should be something the practice can continue building on as its body of work grows.
Kingsley is a fictional architecture practice, but the design decisions came from patterns I found while studying real architecture firms and how they present projects, recognition and studio credibility online.
I designed and developed the full experience with Next.js, Tailwind CSS, GSAP and CMS, covering visual direction, responsive development, motion, project presentation and content management.
🔗 Live site:
https://kingsley-architecture.vercel.app/
For architects and studio teams, how important is it for your team to be able to update your portfolio without relying on a developer?
0
60
Ironclad is build for construction and contracting businesses — the kind that need visitors to trust them fast and request a quote, not browse a catalog. CMS-driven project gallery, a full animation system and a client trust section that links out to real case studies.
It's Free check in here (https://www.framer.com/marketplace/templates/ironclad-co/)
2
4
133
Kemobil — Rental Car Operations Management System
Built a full-stack web application for car rental businesses to manage vehicles, customers, bookings, payments, availability, and business operations from one system. Developed with Next.js, TypeScript, Supabase, Tailwind CSS, and deployed with Vercel.
0
226
Finansist Landing Page
Recently built a landing page for a financial assistant service, focusing on trust, clarity, and conversion.
Tech Stack
- Next.js (TypeScript) → fullstack framework (SSR + API routes)
- Supabase → PostgreSQL database + storage (asset buckets)
- Clean, scalable component-based architecture
Highlights
- Responsive and modern UI
- SEO-friendly with server-side rendering
- Consultation form integrated directly with database
- Asset management via Supabase Storage
- Modular structure, ready to scale into CMS or dashboard
Goal
To help businesses showcase their credibility (certifications, experience, services) in a clean and professional way, while increasing consultation conversions.
0
79
Coffee Shop Landing Page Design & Development
Project Value: $150 USD
Designed and developed a modern coffee shop landing page that blends warm aesthetics with a seamless user experience, helping the brand create a memorable online presence and attract more customers.
What was delivered
Elegant and modern UI inspired by premium coffee brands
Fully responsive design optimized for desktop, tablet, and mobile
Visually engaging hero section with immersive imagery
Well-organized menu and featured products presentation
Smooth scrolling and subtle animations for a premium browsing experience
Strategic call-to-action sections to encourage reservations and customer inquiries
Fast-loading, performance-optimized frontend
Clean, maintainable code built with modern web technologies
Project Highlights
This project was designed to capture the atmosphere of a modern café while showcasing its menu and brand identity through a clean, visually appealing interface. Careful attention was given to typography, spacing, and visual hierarchy to create an inviting experience that keeps visitors engaged.
The result is a professional, conversion-focused landing page that enhances brand credibility, improves customer engagement, and provides an enjoyable browsing experience across all devices.
Project Price: $150 USD
0
38
✨ Most cafe menus still feel static — usually shared as PDFs or image files that are difficult or corrupt to open and browser on mobile.
So I explored a more modern digital menu experience designed to make browsing feel faster, cleaner, and more intuitive ☕
This concept focuses on:
✦ Easier menu navigation
✦ Better mobile browsing experience
✦ Organized categories & smart search
✦ A cleaner and more modern interface
The goal wasn’t just to redesign the menu visually, but to improve the overall customer experience while ordering.
in this post, you can see the difference between pdf menu and digital menu experiences on mobile device.
Available for custom café & restaurant projects ✨
1
1
156
A personal portfolio built as a live developer dashboard, at masozan.vercel.app (http://masozan.vercel.app).
It pulls my weekly coding stats from WakaTime every 5 minutes and shows my GitHub contribution graph (895 contributions in the last year), alongside a project gallery, articles and my CV.
Built with Next.js, NextAuth and Framer Motion, with light and dark themes.
0
17
