🎨 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 interactive galleries, responsive design, and modern web technologies.
Explore the FUTURE of creative web development and visual storytelling.

Live Demo · Documentation · View Gallery · Issues

Share This Project

^{🌟 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.

Interactive Gallery Dashboard - Browse 14+ 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.

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

🌟 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
No external dependencies required

	Experience all 14+ design experiments with live previews and interactions.

Tip

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

✨ Key Features

`1` Interactive 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

`2` Advanced Geometric Designs

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

`3` Dynamic Gradient Systems

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

`*` Additional Features

Beyond the core design experiments, this portfolio includes:

🔍 Smart Gallery: Search and filter through design categories
🎨 Live Preview: Modal-based preview system for each design
🌓 Theme Support: Dark/light mode with smooth transitions
📱 Responsive Design: Optimized for all device sizes
⚡ Performance: Optimized CSS animations and transitions
🎯 Accessibility: ARIA labels and keyboard navigation
🔧 No Dependencies: Pure HTML, CSS, and JavaScript
📊 Analytics Ready: Built-in performance monitoring

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

🛠️ Tech Stack

HTML5

CSS3

JavaScript ES6+

Git

Vercel

Frontend Technologies:

HTML5: Semantic markup and accessibility features
CSS3: Advanced selectors, transforms, animations, gradients
JavaScript ES6+: Modern JavaScript for interactivity
CSS Custom Properties: Dynamic theming system
CSS Grid & Flexbox: Responsive layout systems

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: Vercel for hosting and CI/CD
Performance: Lighthouse optimization
Accessibility: ARIA compliance and semantic HTML

Tip

This project uses zero external frameworks, 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

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[Modal Preview]
        G --> H[Theme Toggle]
    end
    
    subgraph "Content Layer"
        I[JSON Data] --> J[Dynamic Gallery]
        J --> K[Category Filtering]
        K --> L[Search System]
    end
    
    A --> E
    I --> F
    D --> J

Component Architecture

Modular design system with reusable components

Core Components:

Gallery System: Dynamic portfolio grid with filtering
Modal Preview: Full-screen design preview system
Theme Engine: Dark/light mode with CSS custom properties
Navigation: Responsive header with mobile menu
Search & Filter: Real-time content filtering

⚡️ 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
📦 Zero Dependencies No external libraries
🔄 Lazy Loading Optimized 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

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

2. Open in Browser

# 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:

# 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)

Other Platforms:

Deploy with Netlify	Deploy with Surge	Deploy with GitHub Pages

Manual Deployment:

# 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

# Enable GitHub Pages in repository settings
# Choose source: Deploy from a branch
# Select branch: main
# Folder: / (root)

📖 Usage Guide

Gallery Navigation

Browsing Designs:

Explore Categories - Filter by design type (3D, Geometric, Gradients, Experimental)
Search Designs - Use the search bar to find specific effects
Preview Mode - Click any design card for full-screen preview
View Controls - Switch between grid and list views

Gallery Interface

Interactive Gallery with Search, Filtering, and Preview

Quick Actions:

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

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

// Filter by category
gallery.filterByCategory('3d-effects');

Adding New Designs

1. Create Design File:

<!-- demos/category/your-design.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Design</title>
    <style>
        /* Your CSS here */
    </style>
</head>
<body>
    <!-- Your design here -->
</body>
</html>

2. Update Data File:

// 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	2 designs	Cutting-edge design explorations	Advanced CSS, Filter Effects

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:

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:

Create HTML file in appropriate demos/ subdirectory
Add entry to data/works.json
Include preview image (optional)
Test in gallery system

CSS Architecture

Design System:

/* 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:

/* 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:

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.

📄 License

This project is licensed under the MIT License - see the 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
GitHub: ChanMeng666
Email: [email protected]
Portfolio: chanmeng.live

🎨 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

Name		Name	Last commit message	Last commit date
Latest commit History 17 Commits
.github		.github
assets		assets
data		data
demos		demos
.gitattributes		.gitattributes
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
index.html		index.html

Uh oh!

License

ChanMeng666/design-pages

Folders and files

Latest commit

History

Repository files navigation

🎨 Design Pages

Interactive Digital Design Portfolio & Visual Experiments

📸 Project Gallery

📸 Screenshots

🎬 Interactive Demo

TOC

🌟 Introduction

✨ Key Features

1 Interactive 3D Effects

2 Advanced Geometric Designs

3 Dynamic Gradient Systems

* Additional Features

🛠️ Tech Stack

🏗️ Architecture

Project Structure

Design System Architecture

Component Architecture

⚡️ Performance

Performance Metrics

🚀 Getting Started

Quick Start

Development Setup

Browser Requirements

🛳 Deployment

Static Site Deployment

GitHub Pages Setup

📖 Usage Guide

Gallery Navigation

Gallery Interface

Adding New Designs

🎨 Design Categories

Featured Design Highlights

⌨️ Development

Project Structure

CSS Architecture

🤝 Contributing

How to Contribute

Contribution Guidelines

📄 License

👥 Credits

🙋‍♀️ Author

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Sponsor this project

Uh oh!

Packages 0

Languages

`1` Interactive 3D Effects

`2` Advanced Geometric Designs

`3` Dynamic Gradient Systems

`*` Additional Features

Packages