2024
Fatima Alaa — Interior Architect Portfolio
A high-performance, premium portfolio website designed for an Interior Architect. It serves as a digital showcase of professional work, technical skills, and design philosophy. Built with a 'mobile-first' approach and cutting-edge web technologies, it delivers an immersive user experience (UX) comparable to top-tier design agency websites. The application is engineered for speed, SEO, and visual impact, utilizing server-side rendering (SSR), smooth scroll mechanics, and cinematic animations.
Technology Stack
Key Highlights
Premium Design System: Custom color palette (Chocolate, Caramel, Cream, Rust) and typography (Luxury & Elegant fonts) creating a cohesive brand identity that reflects the client's attention to detail and luxury aesthetic.
Cinematic Animations: Integrated GSAP and Framer Motion for sophisticated entrance animations, scroll-triggered reveals, and micro-interactions that elevate the user experience to award-winning website standards.
Smooth Scrolling: Implemented Lenis for a buttery-smooth scrolling experience often found in high-end award-winning websites, creating a premium feel throughout the site.
Watermarked Imagery: Custom WatermarkedImage component that automatically protects portfolio assets while maintaining visual quality, ensuring intellectual property protection.
Implementation Highlights
Home Page: Immersive landing with gradient blurs and call-to-action. Statistics dashboard with animated counters for Years of Experience, Projects Completed, and Awards. Featured projects carousel highlighting top work.
Project Portfolio: Smart filtering system with real-time category filtering (Interior Design, Technical Office, etc.) without page reloads. Dynamic project routes with individual case study pages generated from a centralized data source. High-fidelity image rendering with automated optimization (WebP/AVIF).
About Page: Comprehensive professional biography with timeline of experience and skills matrix, providing detailed insight into the architect's background and expertise.
Performance: Built on Next.js 15 App Router with server-side rendering for optimal SEO. Achieved high Lighthouse scores through code splitting, component-level lazy loading, and automatic image optimization.