Back to Projects

Craft'd Habitat Architectural Portfolio

Architectural showcase site combining aesthetic precision with engineering performance. Built custom IntersectionObserver-based lazy loading for images/videos, modular CSS variable system, hierarchical navigation, and dual Firestore + EmailJS contact capture. Delivered an immersive browsing experience for project case studies.

2024
Craft'd Habitat
6 weeks
View Live

Project Gallery

Home Page

Home Page

Technologies

Vanilla JS (ES6)Frontend
Firebase FirestoreDatabase
EmailJSIntegration
Swiper.jsCarousel
CSS Custom PropertiesDesign System

Key Features

  • Custom media lazy loading system
  • Responsive luxury typography scale
  • Expandable content modules
  • Firestore-backed contact capture
  • Email notification workflow
  • Touch-optimized navigation

Results

  • Reduced initial media payload
  • Improved time-to-interactive
  • Streamlined lead capture process

Challenges & Solutions

Performance under heavy media load

Consistent luxury brand feel across pages

Progressive enhancement without build step

HTML5CSS3JavaScriptFirebaseLazy LoadingUI Architecture