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?
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.
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.
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
Edupiere: a multi-tenant school ERP I built solo, live at edupiere.id (http://edupiere.id).
One login for a foundation running many schools: online admissions with weighted ranking, CBT exams, AI-assisted report cards with QR verification, QRIS billing, QR attendance and WhatsApp alerts.
Built with Next.js, TypeScript, Prisma, PostgreSQL and Docker, with 440+ automated tests.:
Personal portfolio website showcasing my web design and development work, including MORA Studio and AERFORM. Built to present selected projects, case studies, and my approach to responsive web development.