# Project Overview Modal — Click-to-Reveal Sliding Detail Overlay ## Goal Build a full-screen **project index**: a numbered list of projects sits at the bottom-left of a dark, non-scrolling viewport. Clicking any list row plays a **paused GSAP timeline** that slides a large white detail panel **up from far off-screen** while **un-rotating it from a 20° tilt to flat**, landing it pinned to the bottom-right. The panel's content (title, category, copy, link, image) is swapped in from a data array for whichever row you clicked. Clicking **Close**, or anywhere outside the panel, **reverses the same timeline** and the panel tilts and drops back off-screen. The star effect is that single tilt-corrected slide-up driven by one reversible timeline. ## Tech Vanilla HTML/CSS/JS with ES module imports. Use **`gsap` (npm)** only — **no GSAP plugins**, no ScrollTrigger, no Lenis, no SplitText. ```js import gsap from "gsap"; import { data } from "./data.js"; // project content lives in a sibling module ``` No framework. `script.js` is loaded as ` ``` **The 10 list rows** (index / name / year — three flex columns per row): ``` 01 Advanced Nanotech Fabrics 2022 02 Natural Bio-luminescent Accents 2021 03 Integrated Electronic Wearables 2023 04 Dynamic Morphing Clothing 2021 05 3D Holographic Prints 2017 06 Atmospheric Aero-adaptable Garments 2018 07 Responsive Skinsync Attire 2019 08 Sustainable Zero-waste Weavings 2023 09 Lab-crafted Synthetic Leather 2022 10 Neuro-responsive Fashion Gear 2021 ``` The link's leading `` is an **arrow-up-right glyph** (original uses a Phosphor icon font `` loaded via CDN `