Modern Demo Site

A sophisticated, modern website template showcasing advanced CSS effects, responsive design, and smooth interactions. Built with pure HTML, CSS, and JavaScript.

View Demo • Documentation • Report Bug • Request Feature

Preview

Table of Contents

• Getting Started
• Highlights
• Documentation
  • Prerequisites
  • Installation
  • Project Structure
• Customization
  • Theme Configuration
  • Typography System
• Core Components
• Browser Support
• FAQ
• Contributing
• License
• Credits

Getting Started

Experience the future of web design in three simple steps:

1. Quick Start: Visit our live demo
2. Explore Features: Test the dark mode, responsive layouts, and animations library
3. Make It Yours: Fork the repository and customize to your needs

Watch our brief introduction:

Highlights

Modern Design Glass morphism UI with dynamic saturation Floating gradient backgrounds Perspective-based 3D effects Dynamic shadow system Scroll-based progress indicators	Theme System System preference detection Smooth theme transitions Local storage persistence High contrast accessibility Real-time theme switching
Performance Hardware-accelerated transforms Strategic content containment Optimized will-change usage Reduced motion support Efficient CSS custom properties	Responsive Mobile-first architecture Fluid typography system Dynamic grid layouts Touch-optimized interactions Adaptive component scaling
Animation Library 20+ ready-to-use animations Interactive code playground Copy-paste implementation Customization controls Keyboard navigation support	Accessibility Keyboard shortcuts (D for dark mode, A for animations) Screen reader announcements Focus management Reduced motion settings ARIA attributes

Documentation

Prerequisites

• Modern web browser (Chrome 80+, Firefox 75+, Safari 13.1+, or Edge 80+)
• Basic familiarity with HTML, CSS, and JavaScript
• Local development server (Python 3.x or Node.js 14+)
• Text editor or IDE (VS Code recommended)
• Git for version control

Installation

1. Clone the repository:

   git clone https://github.com/TMHSDigital/Github-Pages-Demo-1.git

2. Navigate to the project directory:

   cd Github-Pages-Demo-1

3. Serve locally using any of these methods:

   # Using Python
   python -m http.server 8000
   
   # Using Node.js
   npx serve

4. View in browser:

   http://localhost:8000
   

Project Structure

Github-Pages-Demo-1/
├── index.html          # Entry point
├── css/               # Styles
│   ├── style.css      # Main stylesheet
│   └── animations.css # Animation library styles
├── js/                # Scripts
│   ├── main.js        # Core functionality
│   └── animations.js  # Animation library functionality
├── assets/            # Static files
│   └── favicon.ico    # Site favicon
└── README.md          # Documentation

Customization

Theme Configuration

Basic Customization

Modify the CSS variables in css/style.css:

:root {
    --primary-color: #0f172a;
    --secondary-color: #2563eb;
    --accent-color: #0891b2;
    --text-color: #1e293b;
    --bg-color: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.7);
}

Advanced Theming

• Customize glass effects via --glass-bg and --glass-border
• Adjust animation timing with --transition-speed
• Modify shadow depths using --shadow-sm, --shadow, --shadow-lg

Typography System

Font Configuration

The type system uses Inter for optimal legibility.

1. Configure weights in index.html:

   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

2. Adjust scale in css/style.css:

   html {
       font-size: 16px;
       line-height: 1.6;
   }

Core Components

View Components

Header

• Glass morphism backdrop filter
• Dynamic scroll behavior
• Gradient-enhanced branding
• Responsive navigation

Hero Section

• Dynamic gradient system
• SVG pattern overlays
• Animated blob backgrounds
• Optimized CTA placement

Feature Grid

• Perspective-based 3D cards
• Staggered animations
• Glass morphism effects
• Interactive hover states

Animation Library

• Categorized animation examples (Transitions, Keyframes, Scroll, Interactive, Text)
• Live interactive demos
• Customizable parameters
• Syntax-highlighted code snippets
• One-click code copying

Contact Form

• Real-time validation
• Animated feedback states
• Glass morphism styling
• Accessible form controls

Footer

• Social media integration
• Brand consistency
• Accessibility optimized
• Responsive layout

Browser Support

Browser	Support	Notes
Chrome 80+	✅	Full
Firefox 75+	✅	Full
Safari 13.1+	✅	Full
Edge 80+	✅	Full

FAQ

How do I customize the color scheme?

Modify the CSS variables in css/style.css. See Theme Configuration for details.

Can I use this template for commercial projects?

Yes! This project is licensed under MIT. You're free to use it for personal or commercial projects.

How do I deploy to GitHub Pages?

1. Fork this repository
2. Enable GitHub Pages in your repository settings
3. Select the main branch as source
4. Your site will be live at https://[username].github.io/Github-Pages-Demo-1

How do I report a bug?

Open an issue using our bug report template. Include:

• Expected behavior
• Actual behavior
• Steps to reproduce
• Screenshots if applicable

How do I add new features?

1. Check our roadmap for planned features
2. Open a feature request if your idea isn't listed
3. Fork, implement, and submit a PR

Contributing

We welcome contributions! Please read our Contributing Guidelines before submitting a Pull Request.

Development Process

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing

3. Commit your changes

   git commit -m 'Add amazing feature'

4. Push to your fork

   git push origin feature/amazing

5. Open a Pull Request

License

Released under the MIT License. See LICENSE for details.

Credits

• Typography: Inter by Rasmus Andersson
• Icons: Font Awesome
• Images: Unsplash - All images used in the portfolio section are from Unsplash and are used under their license (free to use for commercial and non-commercial purposes)
• Inspiration: Modern web design trends and best practices

---

View Demo • Report Bug • Request Feature

_{Designed and developed by TMHSDigital}

How do I use the animation library?

The animation library showcase provides ready-to-use animations you can add to your projects:

1. Navigate to the Animations section (press 'A' key for quick access)
2. Browse different animation categories using the tabs
3. Click the "Replay" button to see the animation in action
4. Customize the animation using the duration and easing controls
5. Click "Copy Code" to copy the CSS, HTML, or JavaScript code
6. Paste the code into your project

You can also use left/right arrow keys to navigate between animation categories.

Advanced Usage

For more complex implementations:

• Combining animations: Apply multiple animation classes to create compound effects
• JavaScript triggers: Use the JS examples to trigger animations based on user events
• Customization API: Modify the provided CSS variables to match your project's color scheme
• Performance optimization: For animations used extensively, consider adding the will-change property

Using animations with React, Vue, or Angular

When using the animations in component-based frameworks:

// React example
import './animations.css';

function AnimatedButton() {
  const handleClick = () => {
    const button = document.getElementById('animated-button');
    button.classList.remove('shake');
    void button.offsetWidth; // Force reflow
    button.classList.add('shake');
  };

  return (
    <button id="animated-button" className="shake" onClick={handleClick}>
      Click me!
    </button>
  );
}

With proper adaptation, all animations can be integrated into any modern framework.