<div align="center">

<br />

# ◆ &nbsp;U P P A L&nbsp; ◆

### Housing Development — A Cinematic Luxury Experience

*An immersive, dark-luxury single-page website for an ultra-luxury real estate developer.*
*Scroll-driven storytelling, a live WebGL scene, and a pinned horizontal gallery — no page simply appears.*

<br />

[![HTML5](https://img.shields.io/badge/HTML5-050505?style=for-the-badge&logo=html5&logoColor=D4AF37)](#)
[![CSS3](https://img.shields.io/badge/CSS3-050505?style=for-the-badge&logo=css3&logoColor=D4AF37)](#)
[![JavaScript](https://img.shields.io/badge/JavaScript-050505?style=for-the-badge&logo=javascript&logoColor=D4AF37)](#)
[![GSAP](https://img.shields.io/badge/GSAP-050505?style=for-the-badge&logo=greensock&logoColor=D4AF37)](#)
[![Three.js](https://img.shields.io/badge/Three.js-050505?style=for-the-badge&logo=three.js&logoColor=D4AF37)](#)

[![License: MIT](https://img.shields.io/badge/License-MIT-D4AF37?style=flat-square)](LICENSE)
[![No build step](https://img.shields.io/badge/build-none%20required-D4AF37?style=flat-square)](#-getting-started)
[![Zero runtime dependencies](https://img.shields.io/badge/external%20requests-zero-D4AF37?style=flat-square)](#-architecture)

<br />

**[▶ Live Demo](https://darkhorsepig.github.io/uppalgroup/)** &nbsp;·&nbsp; [Highlights](#-highlights) &nbsp;·&nbsp; [Gallery](#-gallery) &nbsp;·&nbsp; [Tech](#-tech-stack) &nbsp;·&nbsp; [Getting Started](#-getting-started)

<br />

<img src="docs/preview/hero.jpg" alt="Uppal — cinematic hero section" width="100%" />

</div>

<br />

## ◇ Overview

**Uppal Housing Development LLC** is a UAE-based developer of ultra-luxury residences, backed by
The Uppal Group since 1979. This site translates that pedigree into a digital experience designed
in the spirit of **Aman, Aston Martin and Foster + Partners** — dark, editorial, and cinematic.

The brief was deliberate: *design first, storytelling second, sales third.* Every section is
choreographed. Nothing fades in by accident. Scrolling should feel like moving through an
architectural film.

> **Crafting landmarks of enduring value — homes that turn vision into luxury.**

<br />

## ◇ Highlights

| | |
|---|---|
| **Cinematic hero** | Full-viewport render with a slow Ken-Burns zoom, a gold particle field, a word-by-word masked headline reveal, and an animated scroll indicator. |
| **Buttery smooth scroll** | [Lenis](https://github.com/darkroomengineering/lenis) inertial scrolling synchronised to [GSAP ScrollTrigger](https://gsap.com/scrolltrigger/) — every section animates on entry. |
| **Live 3D experience** | A [Three.js](https://threejs.org) scene of floating architecture — a tiered gold tower, orbiting geometry, depth fog, gold rim-lighting, mouse rotation, and a scroll-controlled camera dolly. |
| **Animated legacy timeline** | 1979 → Growth → Global → UAE → Future, with a glowing gold spine that fills on scroll and numbers that count up. |
| **Glass-morphism expertise cards** | 3D tilt, a spotlight that tracks the cursor, and background imagery that reveals on hover. |
| **Pinned horizontal gallery** | The residences scroll sideways — IL Primo · Marquise Square · Boulevard Central — with parallax renders, floating labels, and luxury pagination. |
| **Vision & Mission** | Two giant frosted-glass panels floating over slowly parallaxing architecture. |
| **Micro-interactions everywhere** | Custom cursor + glow, magnetic buttons, ripples, animated nav underlines, marquees, grain / bloom / vignette overlays. |

<br />

## ◇ Gallery

<div align="center">

### About & Legacy

<table>
<tr>
<td width="50%"><img src="docs/preview/about.jpg" alt="About section — split editorial layout" /></td>
<td width="50%"><img src="docs/preview/legacy.jpg" alt="Group Legacy — animated gold timeline" /></td>
</tr>
</table>

### Expertise & 3D Experience

<table>
<tr>
<td width="50%"><img src="docs/preview/expertise.jpg" alt="Expertise cards with hover reveal and spotlight" /></td>
<td width="50%"><img src="docs/preview/experience.jpg" alt="Three.js 3D architectural scene" /></td>
</tr>
</table>

### Residences (horizontal) & Vision

<table>
<tr>
<td width="50%"><img src="docs/preview/projects.jpg" alt="Pinned horizontal residences gallery" /></td>
<td width="50%"><img src="docs/preview/vision.jpg" alt="Vision & Mission frosted glass panels" /></td>
</tr>
</table>

### Footer & Mobile

<table>
<tr>
<td width="60%"><img src="docs/preview/footer.jpg" alt="Luxury footer with cursor glow" /></td>
<td width="20%"><img src="docs/preview/m-hero.jpg" alt="Mobile hero" /></td>
<td width="20%"><img src="docs/preview/m-menu.jpg" alt="Mobile menu" /></td>
</tr>
</table>

</div>

<br />

## ◇ Tech Stack

| Layer | Choice | Why |
|---|---|---|
| **Markup** | Semantic HTML5 | Accessible landmarks, no framework overhead |
| **Styling** | Modern CSS | Custom-property design system, `clamp()` fluid type, grid/flex, glass-morphism, `backdrop-filter` |
| **Motion** | [GSAP](https://gsap.com) + ScrollTrigger | Scroll-driven storytelling, pinning, timelines |
| **Smooth scroll** | [Lenis](https://github.com/darkroomengineering/lenis) | Inertial scrolling, synced to ScrollTrigger |
| **3D / WebGL** | [Three.js](https://threejs.org) | The floating architectural scene |
| **Type** | [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond) + [Manrope](https://fonts.google.com/specimen/Manrope) | Luxury editorial serif + modern sans, self-hosted |

Written in vanilla ES modules — **no build tooling, no framework, no `node_modules` to install.**
Open the file and it runs.

<br />

## ◇ Architecture

- **Zero external requests at runtime.** GSAP, Lenis, Three.js and both font families are vendored
  under `assets/vendor` and `assets/fonts`, so the site works offline, loads deterministically, and
  keeps a strict Content-Security-Policy happy.
- **ES-module `importmap`.** Bare specifiers (`gsap`, `three`, …) resolve to the local vendored
  builds — clean imports without a bundler.
- **Performance-minded.** Optimised imagery, lazy-loaded below-the-fold media, GPU-accelerated
  transforms, animation paused when off-screen (the hero particle field and WebGL loop idle when
  scrolled away).
- **Accessible & resilient.** Keyboard-navigable, reduced-motion aware (`prefers-reduced-motion`
  disables heavy motion), and a `<noscript>` fallback reveals all content if JavaScript is off.

<br />

## ◇ Project Structure

```
.
├── index.html                # the entire experience
├── assets/
│   ├── css/
│   │   ├── main.css           # design system + every section's styles
│   │   └── fonts.css          # self-hosted @font-face
│   ├── js/
│   │   ├── main.js            # Lenis, GSAP, cursor, magnetics, reveals, horizontal gallery
│   │   └── scene.js           # Three.js 3D experience
│   ├── fonts/                 # woff2 — Cormorant Garamond + Manrope
│   ├── img/                   # optimised project renders & branding
│   └── vendor/                # gsap · lenis · three (self-hosted ESM)
├── docs/preview/              # screenshots used in this README
├── Uppalgroup.ae/             # original reference site (kept, unchanged)
├── .nojekyll                  # serve every asset verbatim on GitHub Pages
└── LICENSE
```

<br />

## ◇ Getting Started

No build step. No dependencies to install. Serve the folder with any static server:

```bash
# clone
git clone https://github.com/darkhorsepig/uppalgroup.git
cd uppalgroup

# serve (pick one)
python3 -m http.server 8000
# → http://localhost:8000
npx serve .
```

> Open `index.html` over `http://` (not `file://`) — ES modules require a server origin.

### Deploy

The site is fully static — deploy the repository **root** to any static host.

- **GitHub Pages** — Settings → Pages → deploy from `main` / root. `.nojekyll` is already included,
  so every asset (including the `vendor` folder) is served verbatim. Your site will be live at
  `https://<user>.github.io/uppalgroup/`.
- **Netlify / Vercel / Cloudflare Pages** — point at the repo root, no build command, publish
  directory `/`. Or drag the folder into [Netlify Drop](https://app.netlify.com/drop).

<br />

## ◇ Content & Credits

All copy is drawn from Uppal Group source material, lightly rewritten for clarity while preserving
meaning. Featured residences — IL Primo, Marquise Square and Boulevard Central — are ongoing
projects in Downtown Dubai and Business Bay.

**Contact** · `admin@uppalgroup.ae` · +971 56 549 3116 · Office 508, Standard Chartered Tower,
Downtown Dubai, UAE

Fonts: *Cormorant Garamond* & *Manrope* (SIL Open Font License). Libraries: *GSAP* (standard
license), *Lenis* & *Three.js* (MIT).

<br />

## ◇ License

Released under the [MIT License](LICENSE). Brand assets, imagery and company content remain the
property of Uppal Housing Development LLC / The Uppal Group.

<br />

<div align="center">

*Designed to feel like discovering luxury architecture.*

<sub>◆ Every scroll, handcrafted. ◆</sub>

</div>
