2024
INCO Architects — Portfolio Website
A high-performance, visually rich portfolio website for an architecture and interior design studio. Built with React, TypeScript, Vite, Tailwind CSS v4, Framer Motion, and Swiper. The site showcases projects, a curated gallery, and a refined brand experience with smooth page transitions, strong SEO, and a responsive, app-like feel.
Technology Stack
Key Highlights
Modern SPA Architecture: Route-based page transitions with AnimatePresence providing smooth navigational flows between routes, creating an app-like user experience.
Advanced Gallery System: Masonry gallery with lightbox, zoom, thumbnails, share controls, and captions built for performance and accessibility using yet-another-react-lightbox with plugins.
Project Showcase: Project slider with custom navigation overlays and dynamic project routes, featuring a typed data model for projects and galleries with modular content structure.
SEO & Performance: SEO-ready SPA with canonical links and Open Graph tags via react-helmet-async. Fast builds, HMR in development, and optimized production assets via Vite 6.
Key Features
Project Portfolio: Dynamic project routes with individual detail pages. Custom project slider with navigation overlays showcasing architectural work with smooth transitions.
Gallery System: Masonry gallery layout with advanced lightbox functionality including zoom, thumbnails, share controls, and captions. Images optimized with proper aspect ratios and metadata for optimal rendering.
User Experience: Clean, minimal UI focusing on imagery and typography. Fully responsive mobile-first layout with smooth route transitions using AnimatePresence. Accessible design with keyboard navigation and screen-reader support.