{"id":30388644,"url":"https://github.com/chanmeng666/design-pages","last_synced_at":"2026-05-18T02:32:15.800Z","repository":{"id":302370980,"uuid":"1012201983","full_name":"ChanMeng666/design-pages","owner":"ChanMeng666","description":"【Every star you give powers a designer's creative journey! ⭐️】An innovative digital design portfolio showcasing 14+ interactive visual experiments built with pure CSS3, HTML5, and JavaScript. Features cutting-edge 3D effects, geometric patterns, gradient systems, and experimental designs.","archived":false,"fork":false,"pushed_at":"2026-04-07T10:37:07.000Z","size":10296,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-07T12:23:35.436Z","etag":null,"topics":["3d-effects","3d-transforms","animations","css-animations","css3","digital-design","experimental","frontend","gallery","geometric-design","gradient-effects","html5","interactive","javascript","portfolio","responsive-design","visual-effects","web-design"],"latest_commit_sha":null,"homepage":"https://chanmeng666.github.io/design-pages/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ChanMeng666.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"chanmeng66u","thanks_dev":null,"custom":null}},"created_at":"2025-07-02T01:29:40.000Z","updated_at":"2026-04-07T10:37:10.000Z","dependencies_parsed_at":"2025-07-09T11:33:44.637Z","dependency_job_id":"f887b789-c0fa-4f46-bf89-c23797bcdde9","html_url":"https://github.com/ChanMeng666/design-pages","commit_stats":null,"previous_names":["chanmeng666/design-pages"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ChanMeng666/design-pages","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Fdesign-pages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Fdesign-pages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Fdesign-pages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Fdesign-pages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChanMeng666","download_url":"https://codeload.github.com/ChanMeng666/design-pages/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Fdesign-pages/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33162610,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T22:39:12.733Z","status":"online","status_checked_at":"2026-05-18T02:00:06.436Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d-effects","3d-transforms","animations","css-animations","css3","digital-design","experimental","frontend","gallery","geometric-design","gradient-effects","html5","interactive","javascript","portfolio","responsive-design","visual-effects","web-design"],"created_at":"2025-08-21T07:48:39.061Z","updated_at":"2026-05-18T02:32:15.793Z","avatar_url":"https://github.com/ChanMeng666.png","language":"CSS","funding_links":["https://buymeacoffee.com/chanmeng66u"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n# 🎨 Design Pages\u003cbr/\u003e\u003ch3\u003eInteractive Digital Design Portfolio \u0026 Visual Experiments\u003c/h3\u003e\n\nA cutting-edge digital design portfolio showcasing innovative CSS animations, 3D effects, geometric patterns, and experimental visual experiences.\u003cbr/\u003e\nFeatures a full-screen infinite scrolling gallery with GSAP-powered interactions and 16 unique design experiments.\u003cbr/\u003e\nExplore the **FUTURE** of creative web development and visual storytelling.\n\n[Live Demo][demo-link] · [Documentation][docs] · [View Gallery][gallery-link] · [Issues][github-issues-link]\n\n\u003cbr/\u003e\n\n[![🚀 Explore Live Gallery 🚀](https://gradient-svg-generator.vercel.app/api/svg?text=%F0%9F%9A%80Visit%20Live%20Site%F0%9F%9A%80\u0026color=000000\u0026height=60\u0026gradientType=radial\u0026duration=6s\u0026color0=ffffff\u0026template=pride-rainbow)][demo-link]\n\n\u003cbr/\u003e\n\n\u003c!-- SHIELD GROUP --\u003e\n\n[![][github-release-shield]][github-release-link]\n[![][github-stars-shield]][github-stars-link]\n[![][github-forks-shield]][github-forks-link]\n[![][github-issues-shield]][github-issues-link]\n[![][github-license-shield]][github-license-link]\u003cbr/\u003e\n[![][css3-shield]][css3-link]\n[![][html5-shield]][html5-link]\n[![][javascript-shield]][javascript-link]\n[![][responsive-shield]][responsive-link]\n\n**Share This Project**\n\n[![][share-x-shield]][share-x-link]\n[![][share-linkedin-shield]][share-linkedin-link]\n[![][share-reddit-shield]][share-reddit-link]\n\n\u003csup\u003e🌟 Pushing the boundaries of web-based visual design. Built for designers, developers, and digital artists.\u003c/sup\u003e\n\n## 📸 Project Gallery\n\n\u003e [!TIP]\n\u003e Experience the full interactive gallery with live previews, search, and filtering capabilities.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/images/gallery-overview.png\" alt=\"Digital Design Gallery Overview\" width=\"800\"/\u003e\n  \u003cp\u003e\u003cem\u003eFull-Screen Infinite Scrolling Gallery - Explore 16 unique design experiments\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/images/3d-cube-demo.png\" alt=\"3D Rotating Cube\" width=\"400\"/\u003e\n  \u003cimg src=\"./assets/images/geometric-bars.png\" alt=\"Perspective Bars\" width=\"400\"/\u003e\n  \u003cp\u003e\u003cem\u003eFeatured Designs - 3D Rotating Cube and Perspective Bar Effects\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n### 📸 Screenshots\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/images/screenshots/screencapture-chanmeng666-github-io-design-pages-2025-09-06-15_56_25.png\" alt=\"Design Pages Screenshot 1\" width=\"800\"/\u003e\n  \u003cp\u003e\u003cem\u003eMain Portfolio View - Interactive Design Gallery\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/images/screenshots/screencapture-chanmeng666-github-io-design-pages-2025-09-06-15_56_59.png\" alt=\"Design Pages Screenshot 2\" width=\"800\"/\u003e\n  \u003cimg src=\"./assets/images/screenshots/屏幕截图 2025-09-06 155741.png\" alt=\"Design Pages Screenshot 3\" width=\"400\"/\u003e\n  \u003cp\u003e\u003cem\u003eDesign Experiments Showcase - Gallery and Individual Designs\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003e🎨 More Design Samples\u003c/kbd\u003e\u003c/summary\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/images/gradient-effects.png\" alt=\"Gradient Effects\" width=\"600\"/\u003e\n  \u003cp\u003e\u003cem\u003eAdvanced Gradient and Color Experiments\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/images/experimental-designs.png\" alt=\"Experimental Designs\" width=\"600\"/\u003e\n  \u003cp\u003e\u003cem\u003eCutting-edge Visual Compositions\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003c/details\u003e\n\n## 🎬 Interactive Demo\n\n\u003e [!NOTE]\n\u003e Watch the design experiments in action with real-time interactions and animations.\n\n\u003cdiv align=\"center\"\u003e\n\n[![Demo Preview](https://img.youtube.com/vi/DEMO_VIDEO_ID/maxresdefault.jpg)][demo-link]\n\n*Click to experience the interactive design portfolio*\n\n\u003c/div\u003e\n\n**Design Categories:**\n\n\u003cdiv align=\"center\"\u003e\n\n \u003cimg src=\"https://img.shields.io/badge/3D%20Effects-%2300ffff?style=for-the-badge\u0026logo=threedotjs\u0026logoColor=white\"/\u003e\n \u003cimg src=\"https://img.shields.io/badge/Geometric%20Designs-%234ecdc4?style=for-the-badge\u0026logo=geometrics\u0026logoColor=white\"/\u003e\n \u003cimg src=\"https://img.shields.io/badge/Gradient%20Effects-%23ffa726?style=for-the-badge\u0026logo=gradients\u0026logoColor=white\"/\u003e\n \u003cimg src=\"https://img.shields.io/badge/Experimental-%23ff6b9d?style=for-the-badge\u0026logo=laboratory\u0026logoColor=white\"/\u003e\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n\u003e [!IMPORTANT]\n\u003e This project demonstrates advanced CSS techniques including 3D transforms, complex animations, gradient effects, and responsive design. Perfect for designers seeking inspiration and developers learning modern CSS capabilities.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003e📑 Table of Contents\u003c/kbd\u003e\u003c/summary\u003e\n\n#### TOC\n\n- [🎨 Design PagesInteractive Digital Design Portfolio \\\u0026 Visual Experiments](#-design-pagesinteractive-digital-design-portfolio--visual-experiments)\n  - [📸 Project Gallery](#-project-gallery)\n    - [📸 Screenshots](#-screenshots)\n  - [🎬 Interactive Demo](#-interactive-demo)\n      - [TOC](#toc)\n      - [](#)\n  - [🌟 Introduction](#-introduction)\n  - [✨ Key Features](#-key-features)\n    - [`1` Interactive 3D Effects](#1-interactive-3d-effects)\n    - [`2` Advanced Geometric Designs](#2-advanced-geometric-designs)\n    - [`3` Dynamic Gradient Systems](#3-dynamic-gradient-systems)\n    - [`*` Additional Features](#-additional-features)\n  - [🛠️ Tech Stack](#️-tech-stack)\n  - [🏗️ Architecture](#️-architecture)\n    - [Project Structure](#project-structure)\n    - [Design System Architecture](#design-system-architecture)\n    - [Component Architecture](#component-architecture)\n  - [⚡️ Performance](#️-performance)\n    - [Performance Metrics](#performance-metrics)\n  - [🚀 Getting Started](#-getting-started)\n    - [Quick Start](#quick-start)\n    - [Development Setup](#development-setup)\n    - [Browser Requirements](#browser-requirements)\n  - [🛳 Deployment](#-deployment)\n    - [Static Site Deployment](#static-site-deployment)\n    - [GitHub Pages Setup](#github-pages-setup)\n  - [📖 Usage Guide](#-usage-guide)\n    - [Gallery Navigation](#gallery-navigation)\n      - [Gallery Interface](#gallery-interface)\n    - [Adding New Designs](#adding-new-designs)\n  - [🎨 Design Categories](#-design-categories)\n    - [Featured Design Highlights](#featured-design-highlights)\n  - [⌨️ Development](#️-development)\n    - [Project Structure](#project-structure-1)\n    - [CSS Architecture](#css-architecture)\n  - [🤝 Contributing](#-contributing)\n    - [How to Contribute](#how-to-contribute)\n    - [Contribution Guidelines](#contribution-guidelines)\n  - [📄 License](#-license)\n  - [👥 Credits](#-credits)\n  - [🙋‍♀️ Author](#️-author)\n\n####\n\n\u003cbr/\u003e\n\n\u003c/details\u003e\n\n## 🌟 Introduction\n\n**Design Pages** is an innovative digital design portfolio that showcases the intersection of creativity and technology through interactive web experiences. Created by Chan Meng, this project demonstrates advanced CSS techniques, 3D transformations, and experimental visual design patterns.\n\nWhether you're a designer seeking inspiration, a developer learning advanced CSS, or a digital artist exploring new mediums, this portfolio offers a comprehensive collection of interactive design experiments that push the boundaries of what's possible with modern web technologies.\n\n\u003e [!NOTE]\n\u003e - Modern browser with CSS3 support required\n\u003e - Best experienced on desktop for full interactive features\n\u003e - Mobile-responsive design included\n\u003e - Minimal dependencies (only GSAP 3.12.2 for animations)\n\n| [![][demo-shield-badge]][demo-link] | Experience all 16 design experiments with live previews and interactions. |\n| :---------------------------------- | :------------------------------------------------------------------------- |\n\n\u003e [!TIP]\n\u003e **⭐ Star this repository** to bookmark this collection of design experiments and get notified of new additions!\n\n[![][image-star]][github-stars-link]\n\n## ✨ Key Features\n\n### `1` [Interactive 3D Effects][docs-3d-effects]\n\nExperience cutting-edge 3D design experiments built with pure CSS transforms and JavaScript interactions. Our 3D effects collection demonstrates advanced spatial design concepts and interactive user experiences.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/images/3d-effects-showcase.png\" alt=\"3D Effects Collection\" width=\"600\"/\u003e\n  \u003cp\u003e\u003cem\u003e3D Effects Collection - Rotating cubes, isometric designs, and floating elements\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n**Featured 3D Experiments:**\n- 🎲 **Rotating Cube**: Interactive 3D cube with click-to-rotate faces\n- 📐 **Isometric Design**: Depth illusion through isometric perspective\n- 🌊 **Spatial Rhythm**: Dynamic spatial arrangements with motion\n- 💫 **Floating Rings**: Ethereal elements in 3D space\n\nKey capabilities include:\n- 🚀 **Hardware Acceleration**: GPU-powered 3D transforms\n- 🎮 **Interactive Controls**: Click and hover interactions\n- 📱 **Cross-Platform**: Responsive 3D experiences\n- 🎨 **Advanced Lighting**: CSS-based lighting effects\n\n[![][back-to-top]](#readme-top)\n\n### `2` [Advanced Geometric Designs][docs-geometric]\n\nRevolutionary geometric pattern system that transforms mathematical concepts into beautiful visual experiences. These designs showcase precision, symmetry, and dynamic motion through code.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/images/geometric-showcase.png\" alt=\"Geometric Designs\" width=\"600\"/\u003e\n  \u003cp\u003e\u003cem\u003eGeometric Design Collection - Mathematical beauty in digital form\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n**Design Patterns Available:**\n- 📊 **Perspective Bars**: Color-interpolated bar effects with depth\n- 🔲 **Static Rectangles**: Layered 3D rectangle compositions  \n- 🔄 **Animated Rectangles**: Dynamic rotating geometric sequences\n\n[![][back-to-top]](#readme-top)\n\n### `3` [Dynamic Gradient Systems][docs-gradients]\n\nExplore the full spectrum of CSS gradient capabilities with our experimental gradient collection. From conic gradients to SVG-based effects, discover new ways to work with color and light.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/images/gradient-showcase.png\" alt=\"Gradient Effects\" width=\"600\"/\u003e\n  \u003cp\u003e\u003cem\u003eGradient Effects Collection - Color transitions and visual experiments\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n**Gradient Techniques:**\n- 🌈 **Conic Gradients**: Radial color transitions and light beams\n- 📐 **SVG Gradients**: Vector-based gradient implementations\n- 🎨 **Dynamic Posters**: Grid-based gradient compositions\n\n[![][back-to-top]](#readme-top)\n\n### `*` Additional Features\n\nBeyond the core design experiments, this portfolio includes:\n\n- [x] 🔍 **Infinite Gallery**: Full-screen scrolling with 4 horizontal rows\n- [x] 🎨 **Live Preview**: Iframe-based live preview on each card\n- [x] 🌓 **Theme Support**: Dark/light mode with smooth transitions\n- [x] 📱 **Responsive Design**: Optimized for all device sizes\n- [x] ⚡ **Performance**: Optimized CSS animations and transitions\n- [x] 🎯 **Accessibility**: ARIA labels and keyboard navigation\n- [x] 🔧 **Minimal Dependencies**: Pure HTML, CSS, JavaScript + GSAP\n- [x] 📊 **Analytics Ready**: Built-in performance monitoring\n\n\u003e ✨ New design experiments are continuously added to explore emerging web technologies.\n\n\u003cdiv align=\"right\"\u003e\n\n[![][back-to-top]](#readme-top)\n\n\u003c/div\u003e\n\n## 🛠️ Tech Stack\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/html5\" width=\"48\" height=\"48\" alt=\"HTML5\" /\u003e\n        \u003cbr\u003eHTML5\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/css3\" width=\"48\" height=\"48\" alt=\"CSS3\" /\u003e\n        \u003cbr\u003eCSS3\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/javascript\" width=\"48\" height=\"48\" alt=\"JavaScript\" /\u003e\n        \u003cbr\u003eJavaScript ES6+\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/greensock\" width=\"48\" height=\"48\" alt=\"GSAP\" /\u003e\n        \u003cbr\u003eGSAP 3.12\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/github\" width=\"48\" height=\"48\" alt=\"GitHub Pages\" /\u003e\n        \u003cbr\u003eGitHub Pages\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n**Frontend Technologies:**\n- **HTML5**: Semantic markup and accessibility features\n- **CSS3**: Advanced selectors, transforms, animations, gradients\n- **JavaScript ES6+**: Modern JavaScript for interactivity\n- **GSAP 3.12.2**: Professional-grade animation library\n- **CSS Custom Properties**: Dynamic theming system\n\n**Advanced CSS Features:**\n- **3D Transforms**: `transform-style: preserve-3d`, perspective\n- **Animations**: `@keyframes`, `transition`, `animation`\n- **Gradients**: Linear, radial, conic, and SVG gradients\n- **Filters**: Backdrop-filter, blur, color manipulation\n- **Responsive**: Mobile-first responsive design\n\n**Development Tools:**\n- **Version Control**: Git for source control\n- **Deployment**: GitHub Pages for static hosting\n- **Performance**: Lighthouse optimization\n- **Accessibility**: ARIA compliance and semantic HTML\n\n\u003e [!TIP]\n\u003e This project uses minimal dependencies (only GSAP for animations), showcasing the power of vanilla web technologies and modern CSS capabilities.\n\n## 🏗️ Architecture\n\n### Project Structure\n\n```\ndesign-pages/\n├── assets/                     # Static assets\n│   ├── css/                   # Stylesheets\n│   │   ├── variables.css      # CSS custom properties\n│   │   ├── main.css          # Core styles\n│   │   └── gallery.css       # Gallery-specific styles\n│   ├── js/                   # JavaScript modules\n│   │   ├── main.js          # Core functionality\n│   │   └── gallery.js       # Gallery system\n│   ├── fonts/               # Web fonts\n│   └── images/              # Image assets\n├── components/              # Reusable components\n├── data/                   # JSON data files\n│   └── works.json          # Portfolio data\n├── demos/                  # Design experiments\n│   ├── 3d-effects/        # 3D design demos\n│   ├── experimental/      # Experimental designs\n│   ├── geometric-designs/ # Geometric patterns\n│   └── gradient-effects/  # Gradient experiments\n├── docs/                  # Documentation\n└── index.html            # Main portfolio page\n```\n\n### Design System Architecture\n\n```mermaid\ngraph TB\n    subgraph \"Design System\"\n        A[CSS Variables] --\u003e B[Theme System]\n        B --\u003e C[Component Styles]\n        C --\u003e D[Layout System]\n    end\n\n    subgraph \"Interactive Layer\"\n        E[JavaScript Core] --\u003e F[Gallery System]\n        F --\u003e G[Infinite Scroll]\n        G --\u003e H[Drag Interaction]\n        H --\u003e I[GSAP Animation]\n    end\n\n    subgraph \"Content Layer\"\n        J[JSON Data] --\u003e K[Dynamic Gallery]\n        K --\u003e L[Work Cards]\n        K --\u003e M[Special Cards]\n    end\n\n    A --\u003e E\n    J --\u003e F\n    D --\u003e K\n```\n\n### Component Architecture\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/images/architecture-diagram.png\" alt=\"Project Architecture\" width=\"800\"/\u003e\n  \u003cp\u003e\u003cem\u003eModular design system with reusable components\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n**Core Components:**\n- **Gallery System**: Full-screen infinite scrolling with 4 horizontal rows\n- **Card System**: Work cards with iframe previews + special cards (brand, github, contact)\n- **Theme Engine**: Dark/light mode with CSS custom properties\n- **GSAP Animation**: Timeline-based hero animation and drag interactions\n- **Card Click Handlers**: Type-specific actions (open demo, mailto, github profile)\n\n### Gallery Flow\n\n```mermaid\nsequenceDiagram\n    participant User\n    participant Gallery\n    participant GSAP\n    participant DOM\n\n    User-\u003e\u003eGallery: Page Load\n    Gallery-\u003e\u003eGallery: loadData() from works.json\n    Gallery-\u003e\u003eGallery: createAllCards()\n    Gallery-\u003e\u003eGallery: distributeCards() into 4 rows\n    Gallery-\u003e\u003eDOM: render()\n    Gallery-\u003e\u003eGSAP: setupDrag()\n\n    User-\u003e\u003eGallery: Drag gesture\n    Gallery-\u003e\u003eGSAP: move(deltaX, deltaY)\n    GSAP-\u003e\u003eDOM: Update card positions with wrap\n\n    User-\u003e\u003eGallery: Click Work Card\n    Gallery-\u003e\u003eUser: Open demo in new tab\n```\n\n## ⚡️ Performance\n\n### Performance Metrics\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/images/performance-metrics.png\" alt=\"Performance Dashboard\" width=\"800\"/\u003e\n  \u003cp\u003e\u003cem\u003eLighthouse Performance Scores\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n**Key Performance Features:**\n- ⚡ **98+ Lighthouse Score** across all categories\n- 🚀 **\u003c 1s** Initial page load time\n- 💨 **60fps** Smooth animations and transitions\n- 📦 **Single Dependency** Only GSAP for animations\n- 🔄 **Lazy Loading** Optimized iframe and resource loading\n\n**Optimization Techniques:**\n- 🎯 **CSS Optimization**: Minimal, efficient CSS architecture\n- 📦 **Asset Optimization**: Compressed images and fonts\n- 🔄 **Efficient Animations**: Hardware-accelerated transforms\n- 📱 **Mobile Performance**: Optimized for mobile devices\n\n\u003e [!NOTE]\n\u003e Performance metrics measured using Lighthouse and tested across modern browsers.\n\n## 🚀 Getting Started\n\n### Quick Start\n\n**1. Clone Repository**\n\n```bash\ngit clone https://github.com/ChanMeng666/design-pages.git\ncd design-pages\n```\n\n**2. Open in Browser**\n\n```bash\n# Open index.html in your browser\nopen index.html\n\n# Or use a local server\npython -m http.server 8000\n# Navigate to http://localhost:8000\n```\n\n**3. Explore Gallery**\n\n- Browse the interactive gallery\n- Filter by design categories\n- Preview designs in full-screen modal\n- Toggle between dark/light themes\n\n🎉 **That's it!** No build process or dependencies required.\n\n### Development Setup\n\nFor development with live reload:\n\n```bash\n# Using Live Server (VS Code extension)\n# Or any local development server\n\n# Python\npython -m http.server 8000\n\n# Node.js (if you have it)\nnpx serve .\n\n# PHP\nphp -S localhost:8000\n```\n\n### Browser Requirements\n\n\u003e [!IMPORTANT]\n\u003e Modern browser with CSS3 support required for full experience.\n\n**Supported Browsers:**\n- ✅ Chrome 80+ (Recommended)\n- ✅ Firefox 75+\n- ✅ Safari 13+\n- ✅ Edge 80+\n\n**Required Features:**\n- CSS Custom Properties\n- CSS Grid \u0026 Flexbox\n- CSS 3D Transforms\n- ES6+ JavaScript\n\n## 🛳 Deployment\n\n### Static Site Deployment\n\nThis project can be deployed to any static hosting service:\n\n**Vercel (Recommended)**\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Fdesign-pages)\n\n**Other Platforms:**\n\n\u003cdiv align=\"center\"\u003e\n\n|           Deploy with Netlify            |                     Deploy with Surge                      |                     Deploy with GitHub Pages                      |\n| :-------------------------------------: | :---------------------------------------------------------: | :---------------------------------------------------------: |\n| [![][deploy-netlify-button]][deploy-netlify-link] | [![][deploy-surge-button]][deploy-surge-link] | [![][deploy-github-button]][deploy-github-link] |\n\n\u003c/div\u003e\n\n**Manual Deployment:**\n\n```bash\n# Build for production (if using build tools)\nnpm run build\n\n# Deploy dist folder to your hosting service\n# Or upload the entire project folder\n```\n\n### GitHub Pages Setup\n\n```bash\n# Enable GitHub Pages in repository settings\n# Choose source: Deploy from a branch\n# Select branch: main\n# Folder: / (root)\n```\n\n## 📖 Usage Guide\n\n### Gallery Navigation\n\n**Browsing Designs:**\n\n1. **Infinite Scroll** - Drag horizontally or vertically to explore the gallery\n2. **Live Previews** - Each card shows an iframe preview of the design\n3. **Click to Open** - Click any work card to open the demo in a new tab\n4. **Special Cards** - Interact with brand, GitHub, and contact cards\n\n#### Gallery Interface\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/images/gallery-interface.png\" alt=\"Gallery Interface\" width=\"800\"/\u003e\n  \u003cp\u003e\u003cem\u003eFull-Screen Infinite Gallery with Live Previews\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n**Quick Actions:**\n\n```javascript\n// Open design in new window\nwindow.open('demos/3d-effects/rotating-cube.html', '_blank');\n\n// Toggle theme programmatically\ndocument.body.classList.toggle('light-theme');\n\n// Access gallery object\nwindow.Gallery.resize();  // Recalculate card positions\n```\n\n### Adding New Designs\n\n**1. Create Design File:**\n\n```html\n\u003c!-- demos/category/your-design.html --\u003e\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eYour Design\u003c/title\u003e\n    \u003cstyle\u003e\n        /* Your CSS here */\n    \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- Your design here --\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**2. Update Data File:**\n\n```json\n// data/works.json\n{\n  \"works\": [\n    {\n      \"id\": \"your-design\",\n      \"title\": \"Your Design Name\",\n      \"category\": \"category-name\",\n      \"description\": \"Design description\",\n      \"technologies\": [\"CSS\", \"JavaScript\"],\n      \"path\": \"demos/category/your-design.html\",\n      \"featured\": false,\n      \"createDate\": \"2024-01-01\"\n    }\n  ]\n}\n```\n\n## 🎨 Design Categories\n\n| Category | Count | Description | Featured Technologies |\n|----------|-------|-------------|----------------------|\n| **3D Effects** | 4 designs | Three-dimensional visual experiences | CSS 3D Transform, Perspective |\n| **Geometric Designs** | 3 designs | Mathematical patterns and shapes | CSS Grid, Transform, Animation |\n| **Gradient Effects** | 5 designs | Color transitions and visual experiments | Linear/Conic Gradients, SVG |\n| **Experimental** | 4 designs | Cutting-edge design explorations | Canvas API, GSAP ScrollTrigger |\n\n### Featured Design Highlights\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003e🎲 3D Effects Collection\u003c/kbd\u003e\u003c/summary\u003e\n\n- **Rotating Cube**: Interactive 3D cube with face transitions\n- **Isometric Cube**: Depth illusion through isometric perspective  \n- **Spatial Rhythm**: Dynamic spatial arrangements\n- **Floating Rings**: Ethereal 3D ring elements\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003e📐 Geometric Designs\u003c/kbd\u003e\u003c/summary\u003e\n\n- **Perspective Bars**: Color-interpolated depth effects\n- **Static Rectangles**: Layered 3D compositions\n- **Animated Rectangles**: Dynamic geometric sequences\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003e🌈 Gradient Effects\u003c/kbd\u003e\u003c/summary\u003e\n\n- **Conic Gradients**: Radial color transitions\n- **Dynamic Posters**: Grid-based compositions\n- **SVG Gradients**: Vector-based gradient systems\n\n\u003c/details\u003e\n\n## ⌨️ Development\n\n### Project Structure\n\n**Core Files:**\n```bash\nindex.html              # Main portfolio page\nassets/css/main.css     # Core styles\nassets/css/gallery.css  # Gallery system\nassets/js/main.js       # Core JavaScript\nassets/js/gallery.js    # Gallery functionality\ndata/works.json         # Portfolio data\n```\n\n**Adding New Experiments:**\n\n1. Create HTML file in appropriate `demos/` subdirectory\n2. Add entry to `data/works.json`\n3. Include preview image (optional)\n4. Test in gallery system\n\n### CSS Architecture\n\n**Design System:**\n```css\n/* CSS Custom Properties */\n:root {\n  --primary-bg: #0a0a0a;\n  --accent-blue: #00ffff;\n  --gradient-primary: linear-gradient(135deg, var(--accent-blue), var(--accent-pink));\n}\n\n/* Component-based styles */\n.work-card { /* Gallery card component */ }\n.modal { /* Preview modal component */ }\n.gallery-controls { /* Filter controls */ }\n```\n\n**Animation Patterns:**\n```css\n/* Hardware-accelerated animations */\n.cube {\n  transform: rotateX(-15deg) rotateY(25deg) rotateZ(5deg);\n  transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n\n/* Responsive animations */\n@media (prefers-reduced-motion: reduce) {\n  .cube { animation: none; }\n}\n```\n\n## 🤝 Contributing\n\nWe welcome contributions to expand this design experiment collection!\n\n### How to Contribute\n\n**1. Fork \u0026 Clone:**\n\n```bash\ngit clone https://github.com/ChanMeng666/design-pages.git\ncd design-pages\n```\n\n**2. Create New Design:**\n\n- Add HTML file to appropriate `demos/` folder\n- Follow existing naming conventions\n- Include responsive design\n- Test across browsers\n\n**3. Update Portfolio:**\n\n- Add entry to `data/works.json`\n- Include description and technologies used\n- Set appropriate category\n\n**4. Submit PR:**\n\n- Clear description of new design\n- Include screenshot or demo\n- Test gallery integration\n\n### Contribution Guidelines\n\n**Design Standards:**\n- Use semantic HTML\n- Follow CSS custom property system\n- Ensure mobile responsiveness\n- Include accessibility features\n\n**Code Quality:**\n- Clean, commented code\n- Consistent naming conventions\n- Performance optimized\n- Cross-browser compatibility\n\n\u003e [!TIP]\n\u003e Check existing designs for reference implementations and code patterns.\n\n[![][pr-welcome-shield]][pr-welcome-link]\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n**Open Source Benefits:**\n- ✅ Personal and commercial use\n- ✅ Modification and distribution\n- ✅ Private use allowed\n- ✅ Create derivative works\n\n## 👥 Credits\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/ChanMeng666\"\u003e\n          \u003cimg src=\"https://github.com/ChanMeng666.png?size=100\" width=\"100px;\" alt=\"Chan Meng\"/\u003e\n          \u003cbr /\u003e\n          \u003csub\u003e\u003cb\u003eChan Meng\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n        \u003cbr /\u003e\n        \u003csmall\u003eCreator \u0026 Designer\u003c/small\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n## 🙋‍♀️ Author\n\n**Chan Meng**\n- \u003cimg src=\"https://cdn.simpleicons.org/linkedin/0A66C2\" width=\"16\" height=\"16\"\u003e LinkedIn: [chanmeng666](https://www.linkedin.com/in/chanmeng666/)\n- \u003cimg src=\"https://cdn.simpleicons.org/github/181717\" width=\"16\" height=\"16\"\u003e GitHub: [ChanMeng666](https://github.com/ChanMeng666)\n- \u003cimg src=\"https://cdn.simpleicons.org/gmail/EA4335\" width=\"16\" height=\"16\"\u003e Email: [chanmeng.dev@gmail.com](mailto:chanmeng.dev@gmail.com)\n- \u003cimg src=\"https://cdn.simpleicons.org/internetexplorer/0078D4\" width=\"16\" height=\"16\"\u003e Portfolio: [chanmeng.org](https://chanmeng.org/)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\u003cstrong\u003e🎨 Pushing the Boundaries of Web Design 🌟\u003c/strong\u003e\n\u003cbr/\u003e\n\u003cem\u003eWhere creativity meets technology through code\u003c/em\u003e\n\u003cbr/\u003e\u003cbr/\u003e\n\n⭐ **Star this Repository** • 🎨 **View Live Gallery** • 🐛 **Report Issues** • 💡 **Suggest Designs** • 🤝 **Contribute**\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n**Made with ❤️ and advanced CSS by Chan Meng**\n\n\u003cimg src=\"https://img.shields.io/github/stars/ChanMeng666/design-pages?style=social\" alt=\"GitHub stars\"\u003e\n\u003cimg src=\"https://img.shields.io/github/forks/ChanMeng666/design-pages?style=social\" alt=\"GitHub forks\"\u003e\n\n\u003c/div\u003e\n\n---\n\n\u003c!-- LINK DEFINITIONS --\u003e\n\n[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square\n\n\u003c!-- Project Links --\u003e\n[demo-link]: https://chanmeng666.github.io/design-pages\n[gallery-link]: https://chanmeng666.github.io/design-pages\n[docs]: https://github.com/ChanMeng666/design-pages/wiki\n\n\u003c!-- GitHub Links --\u003e\n[github-issues-link]: https://github.com/ChanMeng666/design-pages/issues\n[github-stars-link]: https://github.com/ChanMeng666/design-pages/stargazers\n[github-forks-link]: https://github.com/ChanMeng666/design-pages/forks\n[github-release-link]: https://github.com/ChanMeng666/design-pages/releases\n[pr-welcome-link]: https://github.com/ChanMeng666/design-pages/pulls\n[github-license-link]: https://github.com/ChanMeng666/design-pages/blob/main/LICENSE\n\n\u003c!-- Documentation Links --\u003e\n[docs-3d-effects]: https://github.com/ChanMeng666/design-pages/wiki/3D-Effects\n[docs-geometric]: https://github.com/ChanMeng666/design-pages/wiki/Geometric-Designs\n[docs-gradients]: https://github.com/ChanMeng666/design-pages/wiki/Gradient-Effects\n\n\u003c!-- Shield Badges --\u003e\n[github-release-shield]: https://img.shields.io/github/v/release/ChanMeng666/design-pages?color=369eff\u0026labelColor=black\u0026logo=github\u0026style=flat-square\n[github-stars-shield]: https://img.shields.io/github/stars/ChanMeng666/design-pages?color=ffcb47\u0026labelColor=black\u0026style=flat-square\n[github-forks-shield]: https://img.shields.io/github/forks/ChanMeng666/design-pages?color=8ae8ff\u0026labelColor=black\u0026style=flat-square\n[github-issues-shield]: https://img.shields.io/github/issues/ChanMeng666/design-pages?color=ff80eb\u0026labelColor=black\u0026style=flat-square\n[github-license-shield]: https://img.shields.io/badge/license-MIT-white?labelColor=black\u0026style=flat-square\n\n[css3-shield]: https://img.shields.io/badge/CSS3-Advanced-1572B6?style=flat-square\u0026logo=css3\u0026logoColor=white\n[html5-shield]: https://img.shields.io/badge/HTML5-Semantic-E34F26?style=flat-square\u0026logo=html5\u0026logoColor=white\n[javascript-shield]: https://img.shields.io/badge/JavaScript-ES6+-F7DF1E?style=flat-square\u0026logo=javascript\u0026logoColor=black\n[responsive-shield]: https://img.shields.io/badge/Design-Responsive-00D8FF?style=flat-square\u0026logo=responsive\u0026logoColor=white\n\n[css3-link]: https://developer.mozilla.org/en-US/docs/Web/CSS\n[html5-link]: https://developer.mozilla.org/en-US/docs/Web/HTML\n[javascript-link]: https://developer.mozilla.org/en-US/docs/Web/JavaScript\n[responsive-link]: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design\n\n[pr-welcome-shield]: https://img.shields.io/badge/🤝_PRs_welcome-%E2%86%92-ffcb47?labelColor=black\u0026style=for-the-badge\n\n\u003c!-- Badge Variants --\u003e\n[demo-shield-badge]: https://img.shields.io/badge/VIEW%20LIVE%20DEMO-GALLERY-ff6b9d?labelColor=black\u0026logo=vercel\u0026style=for-the-badge\n\n\u003c!-- Social Share Links --\u003e\n[share-x-link]: https://x.com/intent/tweet?hashtags=webdesign,css,portfolio\u0026text=Check%20out%20this%20amazing%20digital%20design%20portfolio\u0026url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Fdesign-pages\n[share-linkedin-link]: https://linkedin.com/sharing/share-offsite/?url=https://github.com/ChanMeng666/design-pages\n[share-reddit-link]: https://www.reddit.com/submit?title=Amazing%20CSS%20Design%20Portfolio\u0026url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Fdesign-pages\n\n[share-x-shield]: https://img.shields.io/badge/-share%20on%20x-black?labelColor=black\u0026logo=x\u0026logoColor=white\u0026style=flat-square\n[share-linkedin-shield]: https://img.shields.io/badge/-share%20on%20linkedin-black?labelColor=black\u0026logo=linkedin\u0026logoColor=white\u0026style=flat-square\n[share-reddit-shield]: https://img.shields.io/badge/-share%20on%20reddit-black?labelColor=black\u0026logo=reddit\u0026logoColor=white\u0026style=flat-square\n\n\u003c!-- Deployment Links --\u003e\n[deploy-netlify-link]: https://app.netlify.com/start/deploy?repository=https://github.com/ChanMeng666/design-pages\n[deploy-surge-link]: https://surge.sh\n[deploy-github-link]: https://pages.github.com\n\n[deploy-netlify-button]: https://www.netlify.com/img/deploy/button.svg\n[deploy-surge-button]: https://img.shields.io/badge/Deploy%20to-Surge-00D4AA?style=for-the-badge\u0026logo=surge\u0026logoColor=white\n[deploy-github-button]: https://img.shields.io/badge/Deploy%20to-GitHub%20Pages-181717?style=for-the-badge\u0026logo=github\u0026logoColor=white\n\n\u003c!-- Images --\u003e\n[image-star]: https://img.shields.io/github/stars/ChanMeng666/design-pages?style=social\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanmeng666%2Fdesign-pages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanmeng666%2Fdesign-pages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanmeng666%2Fdesign-pages/lists"}