Othman Constructions — Portfolio Website
A premium construction company portfolio showcasing completed projects through immersive 3D visualisations of exterior and interior designs, animated with Framer Motion for a world-class presentation experience.
Overview
Othman Constructions needed a digital presence that matched the ambition and craftsmanship of their physical builds. The result is a premium portfolio website featuring cinematic scroll animations and 3D visualisations that bring each completed project to life — turning a static company brochure into an engaging architectural showcase.
Key Features
- 3D Project Visualisations: Interactive three-dimensional renders of exterior façades and interior spaces, giving prospective clients an immersive preview of completed work.
- Animated Storytelling: Framer Motion powers smooth scroll-triggered animations and entrance effects that guide visitors through the portfolio without feeling gimmicky.
- Project Gallery: Filterable project showcase organised by property type, location, and scope.
- Company Story: An About section communicating the team's heritage, values, and construction philosophy.
- Contact & Enquiry: Integrated contact form and location map for lead generation.
- Performance-First: Static generation with Next.js ensures fast load times even with heavy media.
Technical Architecture
Built on Next.js with TypeScript for type safety and long-term maintainability. Framer Motion handles all animation logic. A lightweight Node.js and Express.js backend powers form submission and contact routing.
Tech Stack
Next.js · TypeScript · Tailwind CSS · Framer Motion · 3D Visualisation · Node.js · Express.js