https://github.com/chanmeng666/design-pages

【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.
https://github.com/chanmeng666/design-pages
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
Last synced: about 1 month ago
JSON representation
Host: GitHub
URL: https://github.com/chanmeng666/design-pages
Owner: ChanMeng666
License: mit
Created: 2025-07-02T01:29:40.000Z (12 months ago)
Default Branch: main
Last Pushed: 2026-04-07T10:37:07.000Z (2 months ago)
Last Synced: 2026-04-07T12:23:35.436Z (2 months ago)
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
Language: CSS
Homepage: https://chanmeng666.github.io/design-pages/
Size: 9.82 MB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project

README

          




# 🎨 Design Pages
Interactive Digital Design Portfolio & Visual Experiments


A cutting-edge digital design portfolio showcasing innovative CSS animations, 3D effects, geometric patterns, and experimental visual experiences.


Features a full-screen infinite scrolling gallery with GSAP-powered interactions and 16 unique design experiments.


Explore the **FUTURE** of creative web development and visual storytelling.

[Live Demo][demo-link] · [Documentation][docs] · [View Gallery][gallery-link] · [Issues][github-issues-link]




[![🚀 Explore Live Gallery 🚀](https://gradient-svg-generator.vercel.app/api/svg?text=%F0%9F%9A%80Visit%20Live%20Site%F0%9F%9A%80&color=000000&height=60&gradientType=radial&duration=6s&color0=ffffff&template=pride-rainbow)][demo-link]




[![][github-release-shield]][github-release-link]

[![][github-stars-shield]][github-stars-link]

[![][github-forks-shield]][github-forks-link]

[![][github-issues-shield]][github-issues-link]

[![][github-license-shield]][github-license-link]


[![][css3-shield]][css3-link]

[![][html5-shield]][html5-link]

[![][javascript-shield]][javascript-link]

[![][responsive-shield]][responsive-link]

**Share This Project**

[![][share-x-shield]][share-x-link]

[![][share-linkedin-shield]][share-linkedin-link]

[![][share-reddit-shield]][share-reddit-link]

^{🌟 Pushing the boundaries of web-based visual design. Built for designers, developers, and digital artists.}

## 📸 Project Gallery

> [!TIP]

> Experience the full interactive gallery with live previews, search, and filtering capabilities.



  

  Full-Screen Infinite Scrolling Gallery - Explore 16 unique design experiments





  

  

  Featured Designs - 3D Rotating Cube and Perspective Bar Effects



### 📸 Screenshots



  

  Main Portfolio View - Interactive Design Gallery





  

  

  Design Experiments Showcase - Gallery and Individual Designs



🎨 More Design Samples



  

  Advanced Gradient and Color Experiments





  

  Cutting-edge Visual Compositions



## 🎬 Interactive Demo

> [!NOTE]

> Watch the design experiments in action with real-time interactions and animations.



[![Demo Preview](https://img.youtube.com/vi/DEMO_VIDEO_ID/maxresdefault.jpg)][demo-link]

*Click to experience the interactive design portfolio*



**Design Categories:**



 

 

 

 





> [!IMPORTANT]

> 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.

📑 Table of Contents

#### TOC

- [🎨 Design PagesInteractive Digital Design Portfolio \& Visual Experiments](#-design-pagesinteractive-digital-design-portfolio--visual-experiments)

  - [📸 Project Gallery](#-project-gallery)

    - [📸 Screenshots](#-screenshots)

  - [🎬 Interactive Demo](#-interactive-demo)

      - [TOC](#toc)

      - [](#)

  - [🌟 Introduction](#-introduction)

  - [✨ Key Features](#-key-features)

    - [`1` Interactive 3D Effects](#1-interactive-3d-effects)

    - [`2` Advanced Geometric Designs](#2-advanced-geometric-designs)

    - [`3` Dynamic Gradient Systems](#3-dynamic-gradient-systems)

    - [`*` Additional Features](#-additional-features)

  - [🛠️ Tech Stack](#️-tech-stack)

  - [🏗️ Architecture](#️-architecture)

    - [Project Structure](#project-structure)

    - [Design System Architecture](#design-system-architecture)

    - [Component Architecture](#component-architecture)

  - [⚡️ Performance](#️-performance)

    - [Performance Metrics](#performance-metrics)

  - [🚀 Getting Started](#-getting-started)

    - [Quick Start](#quick-start)

    - [Development Setup](#development-setup)

    - [Browser Requirements](#browser-requirements)

  - [🛳 Deployment](#-deployment)

    - [Static Site Deployment](#static-site-deployment)

    - [GitHub Pages Setup](#github-pages-setup)

  - [📖 Usage Guide](#-usage-guide)

    - [Gallery Navigation](#gallery-navigation)

      - [Gallery Interface](#gallery-interface)

    - [Adding New Designs](#adding-new-designs)

  - [🎨 Design Categories](#-design-categories)

    - [Featured Design Highlights](#featured-design-highlights)

  - [⌨️ Development](#️-development)

    - [Project Structure](#project-structure-1)

    - [CSS Architecture](#css-architecture)

  - [🤝 Contributing](#-contributing)

    - [How to Contribute](#how-to-contribute)

    - [Contribution Guidelines](#contribution-guidelines)

  - [📄 License](#-license)

  - [👥 Credits](#-credits)

  - [🙋‍♀️ Author](#️-author)

####




## 🌟 Introduction

**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.

Whether 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.

> [!NOTE]

> - Modern browser with CSS3 support required

> - Best experienced on desktop for full interactive features

> - Mobile-responsive design included

> - Minimal dependencies (only GSAP 3.12.2 for animations)

| [![][demo-shield-badge]][demo-link] | Experience all 16 design experiments with live previews and interactions. |

| :---------------------------------- | :------------------------------------------------------------------------- |

> [!TIP]

> **⭐ Star this repository** to bookmark this collection of design experiments and get notified of new additions!

[![][image-star]][github-stars-link]

## ✨ Key Features

### `1` [Interactive 3D Effects][docs-3d-effects]

Experience 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.



  

  3D Effects Collection - Rotating cubes, isometric designs, and floating elements



**Featured 3D Experiments:**

- 🎲 **Rotating Cube**: Interactive 3D cube with click-to-rotate faces

- 📐 **Isometric Design**: Depth illusion through isometric perspective

- 🌊 **Spatial Rhythm**: Dynamic spatial arrangements with motion

- 💫 **Floating Rings**: Ethereal elements in 3D space

Key capabilities include:

- 🚀 **Hardware Acceleration**: GPU-powered 3D transforms

- 🎮 **Interactive Controls**: Click and hover interactions

- 📱 **Cross-Platform**: Responsive 3D experiences

- 🎨 **Advanced Lighting**: CSS-based lighting effects

[![][back-to-top]](#readme-top)

### `2` [Advanced Geometric Designs][docs-geometric]

Revolutionary geometric pattern system that transforms mathematical concepts into beautiful visual experiences. These designs showcase precision, symmetry, and dynamic motion through code.



  

  Geometric Design Collection - Mathematical beauty in digital form



**Design Patterns Available:**

- 📊 **Perspective Bars**: Color-interpolated bar effects with depth

- 🔲 **Static Rectangles**: Layered 3D rectangle compositions  

- 🔄 **Animated Rectangles**: Dynamic rotating geometric sequences

[![][back-to-top]](#readme-top)

### `3` [Dynamic Gradient Systems][docs-gradients]

Explore 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.



  

  Gradient Effects Collection - Color transitions and visual experiments



**Gradient Techniques:**

- 🌈 **Conic Gradients**: Radial color transitions and light beams

- 📐 **SVG Gradients**: Vector-based gradient implementations

- 🎨 **Dynamic Posters**: Grid-based gradient compositions

[![][back-to-top]](#readme-top)

### `*` Additional Features

Beyond the core design experiments, this portfolio includes:

- [x] 🔍 **Infinite Gallery**: Full-screen scrolling with 4 horizontal rows

- [x] 🎨 **Live Preview**: Iframe-based live preview on each card

- [x] 🌓 **Theme Support**: Dark/light mode with smooth transitions

- [x] 📱 **Responsive Design**: Optimized for all device sizes

- [x] ⚡ **Performance**: Optimized CSS animations and transitions

- [x] 🎯 **Accessibility**: ARIA labels and keyboard navigation

- [x] 🔧 **Minimal Dependencies**: Pure HTML, CSS, JavaScript + GSAP

- [x] 📊 **Analytics Ready**: Built-in performance monitoring

> ✨ New design experiments are continuously added to explore emerging web technologies.



[![][back-to-top]](#readme-top)



## 🛠️ Tech Stack



  

    

      

        

        
HTML5

      

      

        

        
CSS3

      

      

        

        
JavaScript ES6+

      

      

        

        
GSAP 3.12

      

      

        

        
GitHub Pages

      

    

  



**Frontend Technologies:**

- **HTML5**: Semantic markup and accessibility features

- **CSS3**: Advanced selectors, transforms, animations, gradients

- **JavaScript ES6+**: Modern JavaScript for interactivity

- **GSAP 3.12.2**: Professional-grade animation library

- **CSS Custom Properties**: Dynamic theming system

**Advanced CSS Features:**

- **3D Transforms**: `transform-style: preserve-3d`, perspective

- **Animations**: `@keyframes`, `transition`, `animation`

- **Gradients**: Linear, radial, conic, and SVG gradients

- **Filters**: Backdrop-filter, blur, color manipulation

- **Responsive**: Mobile-first responsive design

**Development Tools:**

- **Version Control**: Git for source control

- **Deployment**: GitHub Pages for static hosting

- **Performance**: Lighthouse optimization

- **Accessibility**: ARIA compliance and semantic HTML

> [!TIP]

> This project uses minimal dependencies (only GSAP for animations), showcasing the power of vanilla web technologies and modern CSS capabilities.

## 🏗️ Architecture

### Project Structure

```

design-pages/

├── assets/                     # Static assets

│   ├── css/                   # Stylesheets

│   │   ├── variables.css      # CSS custom properties

│   │   ├── main.css          # Core styles

│   │   └── gallery.css       # Gallery-specific styles

│   ├── js/                   # JavaScript modules

│   │   ├── main.js          # Core functionality

│   │   └── gallery.js       # Gallery system

│   ├── fonts/               # Web fonts

│   └── images/              # Image assets

├── components/              # Reusable components

├── data/                   # JSON data files

│   └── works.json          # Portfolio data

├── demos/                  # Design experiments

│   ├── 3d-effects/        # 3D design demos

│   ├── experimental/      # Experimental designs

│   ├── geometric-designs/ # Geometric patterns

│   └── gradient-effects/  # Gradient experiments

├── docs/                  # Documentation

└── index.html            # Main portfolio page

```

### Design System Architecture

```mermaid

graph TB

    subgraph "Design System"

        A[CSS Variables] --> B[Theme System]

        B --> C[Component Styles]

        C --> D[Layout System]

    end

    subgraph "Interactive Layer"

        E[JavaScript Core] --> F[Gallery System]

        F --> G[Infinite Scroll]

        G --> H[Drag Interaction]

        H --> I[GSAP Animation]

    end

    subgraph "Content Layer"

        J[JSON Data] --> K[Dynamic Gallery]

        K --> L[Work Cards]

        K --> M[Special Cards]

    end

    A --> E

    J --> F

    D --> K

```

### Component Architecture



  

  Modular design system with reusable components



**Core Components:**

- **Gallery System**: Full-screen infinite scrolling with 4 horizontal rows

- **Card System**: Work cards with iframe previews + special cards (brand, github, contact)

- **Theme Engine**: Dark/light mode with CSS custom properties

- **GSAP Animation**: Timeline-based hero animation and drag interactions

- **Card Click Handlers**: Type-specific actions (open demo, mailto, github profile)

### Gallery Flow

```mermaid

sequenceDiagram

    participant User

    participant Gallery

    participant GSAP

    participant DOM

    User->>Gallery: Page Load

    Gallery->>Gallery: loadData() from works.json

    Gallery->>Gallery: createAllCards()

    Gallery->>Gallery: distributeCards() into 4 rows

    Gallery->>DOM: render()

    Gallery->>GSAP: setupDrag()

    User->>Gallery: Drag gesture

    Gallery->>GSAP: move(deltaX, deltaY)

    GSAP->>DOM: Update card positions with wrap

    User->>Gallery: Click Work Card

    Gallery->>User: Open demo in new tab

```

## ⚡️ Performance

### Performance Metrics



  

  Lighthouse Performance Scores



**Key Performance Features:**

- ⚡ **98+ Lighthouse Score** across all categories

- 🚀 **< 1s** Initial page load time

- 💨 **60fps** Smooth animations and transitions

- 📦 **Single Dependency** Only GSAP for animations

- 🔄 **Lazy Loading** Optimized iframe and resource loading

**Optimization Techniques:**

- 🎯 **CSS Optimization**: Minimal, efficient CSS architecture

- 📦 **Asset Optimization**: Compressed images and fonts

- 🔄 **Efficient Animations**: Hardware-accelerated transforms

- 📱 **Mobile Performance**: Optimized for mobile devices

> [!NOTE]

> Performance metrics measured using Lighthouse and tested across modern browsers.

## 🚀 Getting Started

### Quick Start

**1. Clone Repository**

```bash

git clone https://github.com/ChanMeng666/design-pages.git

cd design-pages

```

**2. Open in Browser**

```bash

# Open index.html in your browser

open index.html

# Or use a local server

python -m http.server 8000

# Navigate to http://localhost:8000

```

**3. Explore Gallery**

- Browse the interactive gallery

- Filter by design categories

- Preview designs in full-screen modal

- Toggle between dark/light themes

🎉 **That's it!** No build process or dependencies required.

### Development Setup

For development with live reload:

```bash

# Using Live Server (VS Code extension)

# Or any local development server

# Python

python -m http.server 8000

# Node.js (if you have it)

npx serve .

# PHP

php -S localhost:8000

```

### Browser Requirements

> [!IMPORTANT]

> Modern browser with CSS3 support required for full experience.

**Supported Browsers:**

- ✅ Chrome 80+ (Recommended)

- ✅ Firefox 75+

- ✅ Safari 13+

- ✅ Edge 80+

**Required Features:**

- CSS Custom Properties

- CSS Grid & Flexbox

- CSS 3D Transforms

- ES6+ JavaScript

## 🛳 Deployment

### Static Site Deployment

This project can be deployed to any static hosting service:

**Vercel (Recommended)**

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Fdesign-pages)

**Other Platforms:**



|           Deploy with Netlify            |                     Deploy with Surge                      |                     Deploy with GitHub Pages                      |

| :-------------------------------------: | :---------------------------------------------------------: | :---------------------------------------------------------: |

| [![][deploy-netlify-button]][deploy-netlify-link] | [![][deploy-surge-button]][deploy-surge-link] | [![][deploy-github-button]][deploy-github-link] |



**Manual Deployment:**

```bash

# Build for production (if using build tools)

npm run build

# Deploy dist folder to your hosting service

# Or upload the entire project folder

```

### GitHub Pages Setup

```bash

# Enable GitHub Pages in repository settings

# Choose source: Deploy from a branch

# Select branch: main

# Folder: / (root)

```

## 📖 Usage Guide

### Gallery Navigation

**Browsing Designs:**

1. **Infinite Scroll** - Drag horizontally or vertically to explore the gallery

2. **Live Previews** - Each card shows an iframe preview of the design

3. **Click to Open** - Click any work card to open the demo in a new tab

4. **Special Cards** - Interact with brand, GitHub, and contact cards

#### Gallery Interface



  

  Full-Screen Infinite Gallery with Live Previews



**Quick Actions:**

```javascript

// Open design in new window

window.open('demos/3d-effects/rotating-cube.html', '_blank');

// Toggle theme programmatically

document.body.classList.toggle('light-theme');

// Access gallery object

window.Gallery.resize();  // Recalculate card positions

```

### Adding New Designs

**1. Create Design File:**

```html

    

    

    Your Design

    

        /* Your CSS here */

    

    

```

**2. Update Data File:**

```json

// data/works.json

{

  "works": [

    {

      "id": "your-design",

      "title": "Your Design Name",

      "category": "category-name",

      "description": "Design description",

      "technologies": ["CSS", "JavaScript"],

      "path": "demos/category/your-design.html",

      "featured": false,

      "createDate": "2024-01-01"

    }

  ]

}

```

## 🎨 Design Categories

| Category | Count | Description | Featured Technologies |

|----------|-------|-------------|----------------------|

| **3D Effects** | 4 designs | Three-dimensional visual experiences | CSS 3D Transform, Perspective |

| **Geometric Designs** | 3 designs | Mathematical patterns and shapes | CSS Grid, Transform, Animation |

| **Gradient Effects** | 5 designs | Color transitions and visual experiments | Linear/Conic Gradients, SVG |

| **Experimental** | 4 designs | Cutting-edge design explorations | Canvas API, GSAP ScrollTrigger |

### Featured Design Highlights

🎲 3D Effects Collection

- **Rotating Cube**: Interactive 3D cube with face transitions

- **Isometric Cube**: Depth illusion through isometric perspective  

- **Spatial Rhythm**: Dynamic spatial arrangements

- **Floating Rings**: Ethereal 3D ring elements

📐 Geometric Designs

- **Perspective Bars**: Color-interpolated depth effects

- **Static Rectangles**: Layered 3D compositions

- **Animated Rectangles**: Dynamic geometric sequences

🌈 Gradient Effects

- **Conic Gradients**: Radial color transitions

- **Dynamic Posters**: Grid-based compositions

- **SVG Gradients**: Vector-based gradient systems

## ⌨️ Development

### Project Structure

**Core Files:**

```bash

index.html              # Main portfolio page

assets/css/main.css     # Core styles

assets/css/gallery.css  # Gallery system

assets/js/main.js       # Core JavaScript

assets/js/gallery.js    # Gallery functionality

data/works.json         # Portfolio data

```

**Adding New Experiments:**

1. Create HTML file in appropriate `demos/` subdirectory

2. Add entry to `data/works.json`

3. Include preview image (optional)

4. Test in gallery system

### CSS Architecture

**Design System:**

```css

/* CSS Custom Properties */

:root {

  --primary-bg: #0a0a0a;

  --accent-blue: #00ffff;

  --gradient-primary: linear-gradient(135deg, var(--accent-blue), var(--accent-pink));

}

/* Component-based styles */

.work-card { /* Gallery card component */ }

.modal { /* Preview modal component */ }

.gallery-controls { /* Filter controls */ }

```

**Animation Patterns:**

```css

/* Hardware-accelerated animations */

.cube {

  transform: rotateX(-15deg) rotateY(25deg) rotateZ(5deg);

  transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);

}

/* Responsive animations */

@media (prefers-reduced-motion: reduce) {

  .cube { animation: none; }

}

```

## 🤝 Contributing

We welcome contributions to expand this design experiment collection!

### How to Contribute

**1. Fork & Clone:**

```bash

git clone https://github.com/ChanMeng666/design-pages.git

cd design-pages

```

**2. Create New Design:**

- Add HTML file to appropriate `demos/` folder

- Follow existing naming conventions

- Include responsive design

- Test across browsers

**3. Update Portfolio:**

- Add entry to `data/works.json`

- Include description and technologies used

- Set appropriate category

**4. Submit PR:**

- Clear description of new design

- Include screenshot or demo

- Test gallery integration

### Contribution Guidelines

**Design Standards:**

- Use semantic HTML

- Follow CSS custom property system

- Ensure mobile responsiveness

- Include accessibility features

**Code Quality:**

- Clean, commented code

- Consistent naming conventions

- Performance optimized

- Cross-browser compatibility

> [!TIP]

> Check existing designs for reference implementations and code patterns.

[![][pr-welcome-shield]][pr-welcome-link]

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

**Open Source Benefits:**

- ✅ Personal and commercial use

- ✅ Modification and distribution

- ✅ Private use allowed

- ✅ Create derivative works

## 👥 Credits



  

    

      

        

          

          


          _{Chan Meng}

        

        


        Creator & Designer

      

    

  



## 🙋‍♀️ Author

**Chan Meng**

-  LinkedIn: [chanmeng666](https://www.linkedin.com/in/chanmeng666/)

-  GitHub: [ChanMeng666](https://github.com/ChanMeng666)

-  Email: [chanmeng.dev@gmail.com](mailto:chanmeng.dev@gmail.com)

-  Portfolio: [chanmeng.org](https://chanmeng.org/)

---



🎨 Pushing the Boundaries of Web Design 🌟




Where creativity meets technology through code





⭐ **Star this Repository** • 🎨 **View Live Gallery** • 🐛 **Report Issues** • 💡 **Suggest Designs** • 🤝 **Contribute**





**Made with ❤️ and advanced CSS by Chan Meng**







---

[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square

[demo-link]: https://chanmeng666.github.io/design-pages

[gallery-link]: https://chanmeng666.github.io/design-pages

[docs]: https://github.com/ChanMeng666/design-pages/wiki

[github-issues-link]: https://github.com/ChanMeng666/design-pages/issues

[github-stars-link]: https://github.com/ChanMeng666/design-pages/stargazers

[github-forks-link]: https://github.com/ChanMeng666/design-pages/forks

[github-release-link]: https://github.com/ChanMeng666/design-pages/releases

[pr-welcome-link]: https://github.com/ChanMeng666/design-pages/pulls

[github-license-link]: https://github.com/ChanMeng666/design-pages/blob/main/LICENSE

[docs-3d-effects]: https://github.com/ChanMeng666/design-pages/wiki/3D-Effects

[docs-geometric]: https://github.com/ChanMeng666/design-pages/wiki/Geometric-Designs

[docs-gradients]: https://github.com/ChanMeng666/design-pages/wiki/Gradient-Effects

[github-release-shield]: https://img.shields.io/github/v/release/ChanMeng666/design-pages?color=369eff&labelColor=black&logo=github&style=flat-square

[github-stars-shield]: https://img.shields.io/github/stars/ChanMeng666/design-pages?color=ffcb47&labelColor=black&style=flat-square

[github-forks-shield]: https://img.shields.io/github/forks/ChanMeng666/design-pages?color=8ae8ff&labelColor=black&style=flat-square

[github-issues-shield]: https://img.shields.io/github/issues/ChanMeng666/design-pages?color=ff80eb&labelColor=black&style=flat-square

[github-license-shield]: https://img.shields.io/badge/license-MIT-white?labelColor=black&style=flat-square

[css3-shield]: https://img.shields.io/badge/CSS3-Advanced-1572B6?style=flat-square&logo=css3&logoColor=white

[html5-shield]: https://img.shields.io/badge/HTML5-Semantic-E34F26?style=flat-square&logo=html5&logoColor=white

[javascript-shield]: https://img.shields.io/badge/JavaScript-ES6+-F7DF1E?style=flat-square&logo=javascript&logoColor=black

[responsive-shield]: https://img.shields.io/badge/Design-Responsive-00D8FF?style=flat-square&logo=responsive&logoColor=white

[css3-link]: https://developer.mozilla.org/en-US/docs/Web/CSS

[html5-link]: https://developer.mozilla.org/en-US/docs/Web/HTML

[javascript-link]: https://developer.mozilla.org/en-US/docs/Web/JavaScript

[responsive-link]: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

[pr-welcome-shield]: https://img.shields.io/badge/🤝_PRs_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge

[demo-shield-badge]: https://img.shields.io/badge/VIEW%20LIVE%20DEMO-GALLERY-ff6b9d?labelColor=black&logo=vercel&style=for-the-badge

[share-x-link]: https://x.com/intent/tweet?hashtags=webdesign,css,portfolio&text=Check%20out%20this%20amazing%20digital%20design%20portfolio&url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Fdesign-pages

[share-linkedin-link]: https://linkedin.com/sharing/share-offsite/?url=https://github.com/ChanMeng666/design-pages

[share-reddit-link]: https://www.reddit.com/submit?title=Amazing%20CSS%20Design%20Portfolio&url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Fdesign-pages

[share-x-shield]: https://img.shields.io/badge/-share%20on%20x-black?labelColor=black&logo=x&logoColor=white&style=flat-square

[share-linkedin-shield]: https://img.shields.io/badge/-share%20on%20linkedin-black?labelColor=black&logo=linkedin&logoColor=white&style=flat-square

[share-reddit-shield]: https://img.shields.io/badge/-share%20on%20reddit-black?labelColor=black&logo=reddit&logoColor=white&style=flat-square

[deploy-netlify-link]: https://app.netlify.com/start/deploy?repository=https://github.com/ChanMeng666/design-pages

[deploy-surge-link]: https://surge.sh

[deploy-github-link]: https://pages.github.com

[deploy-netlify-button]: https://www.netlify.com/img/deploy/button.svg

[deploy-surge-button]: https://img.shields.io/badge/Deploy%20to-Surge-00D4AA?style=for-the-badge&logo=surge&logoColor=white

[deploy-github-button]: https://img.shields.io/badge/Deploy%20to-GitHub%20Pages-181717?style=for-the-badge&logo=github&logoColor=white

[image-star]: https://img.shields.io/github/stars/ChanMeng666/design-pages?style=social