ARCHI. - Architecture & Interior Design Portfolio

1. Project Overview

ARCHI. is a premium, multi-page website for an architecture and interior design firm. It features a cinematic scroll-driven 3D experience on the homepage, where a stylized house assembles layer-by-layer as the user scrolls, followed by a camera fly-through of interior rooms and a materials layering demonstration.

The project prioritizes editorial typography, asymmetric layouts, generous whitespace, and a warm minimalist aesthetic. All visuals are rendered using pure CSS shapes, inline SVG, and FontAwesome icons - no external image assets are required.

Key Design Directives

• No glassmorphism - solid, clean backgrounds only
• No text color gradients - all text uses solid colors
• Minimalist light theme - warm off-white backgrounds with deep charcoal text
• Earthy accent palette - Terracotta (#C85A3D) and Sage Green (#7A8B69) used sparingly
• Asymmetric editorial layouts - magazine-style typography with intentional imbalance
• Purposeful animation - smooth, elegant, never gratuitous

2. Tech Stack

CDN References

All external dependencies are loaded via CDN. No local node_modules or build tools are required.

<!-- GSAP + ScrollTrigger -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

<!-- Bootstrap 5.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- FontAwesome 6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<!-- AOS -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

3. File Structure

4. Installation & Setup

Because this is a static site with no build step, setup is straightforward:

1. Download or clone the project folder to your local machine
2. Ensure all files (.html, .css, .js) are in the same directory
3. Open index.html in any modern web browser
4. For best results, serve via a local HTTP server (required for some scroll features)

Local Development Server

While you can open HTML files directly, a local server is recommended for reliable ScrollTrigger behavior:

# Using Python 3
python -m http.server 8000

# Using Node.js (if installed)
npx serve

# Using PHP
php -S localhost:8000

Then visit http://localhost:8000 in your browser.

5. Design System

Color Palette

The palette is deliberately restrained, using warm neutrals with terracotta and sage accents applied sparingly.

Typography

Two typefaces create an editorial, architectural feel:

Spacing Scale

Spacing follows a consistent 4px base grid:

Shadows

Soft, warm shadows maintain the premium feel:

--shadow: 0 10px 30px -10px rgba(28, 25, 23, 0.08);
--shadow-lg: 0 20px 60px -15px rgba(28, 25, 23, 0.12);

6. Page Reference

index.html - Homepage

The flagship page featuring the full 3D scroll experience. Contains:

• Hero section with assembling house (pinned 250vh scroll)
• Camera fly-through of 3 interior rooms
• Philosophy section with editorial quote
• Featured Projects grid (3 cards with CSS buildings)
• Process timeline (4 steps)
• Animated stats counter
• Materials layering 3D section
• Testimonials grid
• Newsletter signup

projects.html - Portfolio

Masonry-style project grid with category filters. Uses AOS for fade-in animations. Filter buttons are sticky below the navbar.

project-detail.html - Single Project

Includes breadcrumb navigation, hero metadata (location, year, area, role), CSS-drawn gallery, 2D floor plan with hover tooltips, and accordion project details.

services.html - Services

2x2 service card grid plus a vertical timeline of 5 design phases with duration estimates.

studio.html - About

Alternating story blocks with CSS-illustrated scenes (drafting table, construction site), 4-member team grid, and awards list.

contact.html - Contact

Two-column layout with consultation form (name, email, project type, budget, message) and contact info with CSS-styled map placeholder.

404.html - Error Page

Creative error design with CSS-illustrated broken building and floating bricks animated via GSAP.

7. CSS Architecture

style.css is organized into 25 clearly-labeled sections. Each section begins with a numbered comment block:

/* ----- 1. CSS VARIABLES ----- */
/* ----- 2. RESET & BASE ----- */
/* ----- 3. CUSTOM SCROLLBAR ----- */
/* ----- 4. TYPOGRAPHY ----- */
/* ----- 5. BUTTONS ----- */
/* ----- 6. NAVBAR ----- */
/* ----- 7. HERO 3D ASSEMBLING HOUSE ----- */
/* ----- 8. CAMERA FLY-THROUGH ----- */
/* ----- 9. MATERIALS LAYERING ----- */
/* ----- 10. PHILOSOPHY SECTION ----- */
/* ----- 11. FEATURED PROJECTS (HOME) ----- */
/* ----- 12. PROCESS SECTION ----- */
/* ----- 13. STATS SECTION ----- */
/* ----- 14. TESTIMONIALS ----- */
/* ----- 15. NEWSLETTER ----- */
/* ----- 16. PAGE HERO (Inner Pages) ----- */
/* ----- 17. PROJECTS PAGE ----- */
/* ----- 18. PROJECT DETAIL PAGE ----- */
/* ----- 19. SERVICES PAGE ----- */
/* ----- 20. STUDIO PAGE ----- */
/* ----- 21. CONTACT PAGE ----- */
/* ----- 22. 404 PAGE ----- */
/* ----- 23. FOOTER ----- */
/* ----- 24. BACK TO TOP ----- */
/* ----- 25. RESPONSIVE ----- */

CSS Variables

All design tokens are defined as CSS custom properties on :root, making global theming trivial:

:root {
  --bg-primary: #FAF9F6;
  --bg-secondary: #F2EFE9;
  --bg-card: #FFFFFF;
  --text-primary: #1C1917;
  --text-secondary: #78716C;
  --accent: #C85A3D;
  --accent-hover: #A84830;
  --accent-sage: #7A8B69;
  --border: #E7E5E4;
  --shadow: 0 10px 30px -10px rgba(28, 25, 23, 0.08);
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --nav-height: 72px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

Responsive Breakpoints

8. JavaScript Architecture

script.js is wrapped in a DOMContentLoaded listener and organized into 13 numbered modules:

9. 3D Scroll Experience

The hero section is the centerpiece of the site. It uses GSAP ScrollTrigger to pin the viewport while a stylized house assembles layer-by-layer across 250vh of scroll distance.

Structure

The house is composed of 6 absolutely-positioned layers inside a perspective container:

<div class="perspective-container">          <!-- perspective: 1500px -->
  <div class="house-assembly">              <!-- transform-style: preserve-3d -->
    <div class="layer-foundation">...</div>   <!-- Layer 1: Base -->
    <div class="layer-first-floor">...</div>  <!-- Layer 2: Walls -->
    <div class="layer-second-floor">...</div> <!-- Layer 3: Upper floor -->
    <div class="layer-roof">...</div>         <!-- Layer 4: Roof -->
    <div class="layer-windows">...</div>      <!-- Layer 5: Openings -->
    <div class="layer-interior">...</div>     <!-- Layer 6: Furniture -->
  </div>
</div>

Animation Timeline

ScrollTrigger Configuration

ScrollTrigger: {
  trigger: '#hero3d',
  start: 'top top',
  end: '+=250%',      // 250vh of scroll distance
  pin: true,          // Pins the section during animation
  scrub: 1.2,         // Smooth 1.2s lag for cinematic feel
  anticipatePin: 1    // Prevents visual jump on pin
}

Camera Fly-Through

After the house assembles, the user scrolls through a second pinned section where three nested rooms (Living Room, Kitchen, Bedroom) are positioned along the Z-axis at 0px, 600px, and 1200px. GSAP translates the parent track from translateZ(0) to translateZ(-1200px), creating the illusion of flying forward through the interior.

Materials Layering

A wall cross-section demonstrates 4 construction layers (Studs, Insulation, Drywall, Paint) sliding in from different X/Y/Z positions to assemble into a solid wall. Triggered when the section enters the viewport at 70%.

10. GSAP Mechanics

Plugin Registration

if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {
  gsap.registerPlugin(ScrollTrigger);
  // ... all scroll animations
}

Key Easing Functions Used

Scrub Values

The scrub parameter controls how tightly animations track scroll position:

• scrub: true - No lag, direct tracking
• scrub: 1 - 1 second of smoothing
• scrub: 1.2 - Used in hero for cinematic lag
• scrub: 1.5 - Used in fly-through for dreamy feel

11. CSS Art System

All building illustrations are rendered using pure CSS shapes. No external images are required.

Building Types

Size Modifiers

.css-building.small { transform: scale(0.7); }
.css-building.large { transform: scale(1.2); }

Room Illustrations

Interior scenes use pseudo-elements and skewed walls to create perspective:

• .room-living-view - Sofa, coffee table, rug, plant
• .room-kitchen-view - Counter, island, stools
• .room-bedroom-view - Bed, nightstands, wardrobe
• .room-exterior-view - Sky, ground, house silhouette

12. Customization Guide

Changing the Firm Name

Search all HTML files for ARCHI. and replace with your firm name. Key locations:

• Navbar logo (.navbar-logo span)
• Footer logo (.footer-logo)
• Footer copyright text
• <title> tags on every page

Changing Accent Color

Update the CSS variables in style.css:

:root {
  --accent: #C85A3D;        /* Primary accent (buttons, links) */
  --accent-hover: #A84830;  /* Darker hover state */
  --accent-sage: #7A8B69;   /* Secondary accent (plants, furniture) */
}

Changing Typography

Update the Google Fonts link in each HTML file and the font variables:

<link href="https://fonts.googleapis.com/css2?family=Your+Heading+Font&family=Your+Body+Font&display=swap" rel="stylesheet">

:root {
  --font-heading: 'Your Heading Font', serif;
  --font-body: 'Your Body Font', sans-serif;
}

Updating Contact Information

Contact details appear in multiple locations:

• Footer columns (all pages)
• Contact page info block
• Map placeholder label

Update address, phone, and email in each location. Look for <!-- UPDATE WITH YOUR ... --> comments.

Adding a New Project

1. Copy an existing .masonry-item block in projects.html
2. Update the data-category attribute
3. Choose a building class (building-modern, building-apartment, etc.)
4. Update title, location, and year text
5. Link to project-detail.html or create a new detail page

13. Accessibility

• Semantic HTML5 elements (<nav>, <main>, <section>, <article>, <footer>)
• aria-label attributes on icon-only buttons (mobile menu, back-to-top, social links)
• aria-expanded on accordion headers
• Keyboard-navigable focus states on all interactive elements
• Sufficient color contrast ratios (WCAG AA compliant for body text)
• prefers-reduced-motion could be added to disable scroll animations for sensitive users

14. Performance Notes

• Zero image assets - all visuals are CSS/SVG, eliminating HTTP requests for images
• Font preconnect - <link rel="preconnect"> hints speed up Google Fonts loading
• Passive scroll listeners - all scroll events use { passive: true }
• GSAP efficiency - uses transform and opacity only (GPU-composited properties)
• AOS disabled on mobile - reduces animation overhead on smaller devices
• Single CSS/JS file - minimizes HTTP requests

Optimization Suggestions

• Self-host Google Fonts for production (removes external dependency)
• Minify style.css and script.js before deployment
• Add loading="lazy" if real images are introduced later
• Consider code-splitting inner page JS if the site grows

15. Browser Support

CSS Features Used

• CSS Grid and Flexbox
• CSS Custom Properties (variables)
• 3D Transforms (perspective, preserve-3d, translateZ)
• clamp() for fluid typography
• clip-path (404 broken wall)

16. Deployment

The site is fully static and can be deployed to any hosting provider:

Recommended Platforms

Pre-Deployment Checklist

1. Update all firm name references (search for ARCHI.)
2. Update contact details (address, phone, email)
3. Update social media links in footer
4. Replace placeholder project content with real projects
5. Test on mobile devices
6. Verify all internal links work
7. Check Google Fonts loading in production

17. Troubleshooting

3D Scroll Not Animating

Symptom: House appears assembled immediately, no scroll animation.

Cause: Opening HTML file directly via file:// protocol can interfere with ScrollTrigger.

Solution: Serve via a local HTTP server (see Installation section).

CDN Resources Not Loading

Symptom: Icons missing, fonts not rendering, animations broken.

Cause: No internet connection or CDN blocked.

Solution: Download libraries locally and update script/link paths.

Mobile Menu Not Working

Symptom: Hamburger button does nothing.

Cause: JavaScript error preventing execution.

Solution: Open browser DevTools console and check for errors. Ensure script.js is loaded after DOM elements.

Scroll Performance Issues

Symptom: Laggy scroll on older devices.

Cause: Too many simultaneous animations.

Solution: Reduce scrub smoothing, or disable AOS on mobile (already implemented).

18. Credits & Resources

Libraries

• GSAP 3 - GreenSock Animation Platform
• ScrollTrigger - GSAP scroll plugin
• Bootstrap 5.3 - CSS framework
• FontAwesome 6 - Icon library
• AOS - Animate on scroll library
• Google Fonts - Playfair Display & Inter

Design Inspiration

• Editorial architecture portfolios (Peter Zumthor, Tadao Ando, Peter Marino)
• Minimalist Swiss design principles
• Contemporary architectural firm websites (Studio Shamshiri, SO-IL, Office Kovacs)

Further Reading

• GSAP Documentation
• ScrollTrigger Documentation
• MDN: CSS 3D Transforms