Modern Demo Site

Glass morphism, 20+ CSS animations, and adaptive theming in a single static page
with zero build tools and zero framework dependencies.

Glass Morphism UI · 20+ Animations · Dark / Light Theme · Fully Accessible · No Build Step

Live Demo | Quick Start | Architecture | Report Bug

---

What It Does

Feature	Capabilities
Glass Morphism UI	Render translucent cards with backdrop blur, dynamic shadows, and 3D perspective transforms.
Theme System	Detect system preference, toggle light/dark/high-contrast modes, persist via localStorage.
Animation Showcase	Browse 20+ categorized animations with live replay, easing controls, and one-click code copy.
Settings Panel	Adjust theme, contrast, and font size at runtime. Bind keyboard shortcuts (D, A, S).
Portfolio Grid	Filter project cards by category with animated tab switching and hover overlays.
Contact Form	Validate inputs client-side with animated success/error feedback. No backend required.
Responsive Layout	Scale fluidly with mobile-first CSS Grid, fluid typography, and touch-optimized targets.
Accessibility	Expose ARIA roles, trap focus in modals, announce changes to screen readers, honor reduced-motion.
Scroll Progress	Track vertical position with a GPU-accelerated header progress bar.
Performance	Preload critical assets, attach passive listeners, leverage content containment and will-change.

---

Important

This project loads fonts and icons from third-party CDNs (Google Fonts, Font Awesome, Prism.js). No data is collected, no cookies are set, and the contact form submits nowhere -- it is a client-side demo only.

---

Installation

Prerequisites: git · any static file server (python3, node, or equivalent)

git clone https://github.com/TMHSDigital/Github-Pages-Demo-1.git && cd Github-Pages-Demo-1 && python -m http.server 8000

Open http://localhost:8000. Alternatively use npx serve or open index.html directly.

Caution

Opening via file:// may cause CORS failures for Google Fonts and Font Awesome. Use a local HTTP server.

---

System Architecture

flowchart TD
    subgraph Browser
        HTML["index.html<br><i>Single-page entry point</i>"]

        subgraph Styles
            S1["style.css<br>Theme &middot; Layout &middot; Components"]
            S2["animations.css<br>20+ animation keyframes"]
        end

        subgraph Scripts
            U["utilities.js<br>Feature detection &middot; A11y helpers"]
            M["main.js<br>Nav &middot; Theme &middot; Forms &middot; Settings"]
            A["animations.js<br>Showcase UI &middot; Replay &middot; Code copy"]
        end

        HTML --> Styles
        HTML --> Scripts
        U --> M
        M --> A
    end

    subgraph CDN ["External CDNs"]
        F1["Google Fonts — Inter"]
        F2["Font Awesome 6.5.1"]
        F3["Prism.js 1.24.1"]
    end

    subgraph CI ["GitHub Actions"]
        GA["pages.yml<br>push to main ➜ deploy"]
    end

    HTML --> CDN
    Browser --> GA

Loading

---

Tech Stack

Core	HTML5 · CSS3 (custom properties, Grid, Flexbox) · Vanilla JS (ES6+)
External	Google Fonts (Inter) · Font Awesome 6.5.1 · Prism.js 1.24.1
Deploy	GitHub Pages · GitHub Actions (actions/deploy-pages@v4)

---

Project Anatomy

Github-Pages-Demo-1/
├── index.html                  # Single-page app — all sections rendered here
├── css/
│   ├── style.css               # Theme system, glass morphism, responsive grid
│   └── animations.css          # Keyframes and transition definitions
├── js/
│   ├── utilities.js            # Feature detection, debounce, a11y announcer
│   ├── main.js                 # Navigation, scroll, theme, forms, settings, portfolio
│   └── animations.js           # Animation showcase gallery, replay, code snippets
├── assets/
│   └── images/
│       ├── TMHSDigital-LOGO.png
│       ├── TMHS-LOGO.png
│       └── preview.png
├── .github/
│   └── workflows/
│       └── pages.yml           # Deploy on push to main
├── LICENSE                     # MIT
└── README.md

---

Contributing

Fork, branch, and open a pull request. Bugs and feature requests belong in Issues.

---

MIT License · TMHSDigital