https://github.com/tmhsdigital/github-pages-demo-1
A simple GitHub Pages demonstration repository showcasing how to build and deploy a basic static website using HTML, CSS, and JavaScript. Perfect for beginners learning web development or anyone looking to create a custom GitHub Pages site.
https://github.com/tmhsdigital/github-pages-demo-1
css front-end github-pages html javascript portfolio responsive-design static-site web-development
Last synced: about 1 month ago
JSON representation
A simple GitHub Pages demonstration repository showcasing how to build and deploy a basic static website using HTML, CSS, and JavaScript. Perfect for beginners learning web development or anyone looking to create a custom GitHub Pages site.
- Host: GitHub
- URL: https://github.com/tmhsdigital/github-pages-demo-1
- Owner: TMHSDigital
- License: mit
- Created: 2025-02-23T17:07:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-03-15T17:41:20.000Z (3 months ago)
- Last Synced: 2026-03-16T05:32:58.638Z (3 months ago)
- Topics: css, front-end, github-pages, html, javascript, portfolio, responsive-design, static-site, web-development
- Language: CSS
- Homepage: https://tmhsdigital.github.io/Github-Pages-Demo-1/
- Size: 5.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Modern Demo Site
Glass morphism, 20+ CSS animations, and adaptive theming in a single static page
with zero build tools and zero framework dependencies.
[](LICENSE)
[](#)
[](../../actions/workflows/pages.yml)
[](#)
[](#)
[](#)
`Glass Morphism UI` · `20+ Animations` · `Dark / Light Theme` · `Fully Accessible` · `No Build Step`
[Live Demo](https://tmhsdigital.github.io/Github-Pages-Demo-1/) | [Quick Start](#installation) | [Architecture](#system-architecture) | [Report Bug](../../issues)
---
## 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)
```bash
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
```mermaid
flowchart TD
subgraph Browser
HTML["index.html
Single-page entry point"]
subgraph Styles
S1["style.css
Theme · Layout · Components"]
S2["animations.css
20+ animation keyframes"]
end
subgraph Scripts
U["utilities.js
Feature detection · A11y helpers"]
M["main.js
Nav · Theme · Forms · Settings"]
A["animations.js
Showcase UI · Replay · 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
push to main ➜ deploy"]
end
HTML --> CDN
Browser --> GA
```
---
## 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](../../issues).
---
[MIT License](LICENSE) · [TMHSDigital](https://github.com/TMHSDigital)