Origin Story - Frontend magic for GitHub Pages - zero backend, pure fun

[attogram]

this is a new repo, a fork of https://github.com/attogram/base

here is proposed plan for creation of the site. It is only a proposal. Modify/update plan as you see fit, but keep in theme.

Theme: Getting Interactive with GitHub Pages / Frontend magic for GitHub Pages - zero backend, pure fun

also, fix the "placeholder" from attogram/base into specific things for our new site (also update the badges, etc). keep all other base content as-is, so it's easy to merge in updates from base later.

create the site in full, including a large number of interactive feature pages. Result will be 1 PR that will create all the content of the site, ready to be published.

---

Create a full static website titled “Getting Interactive with GitHub Pages” designed for developers and tech learners, hosted on GitHub Pages with no build tools or backend. The site should include:

1. Homepage / Introduction

• Explain GitHub Pages as a static hosting platform and common misconceptions about static sites.
• Emphasize that rich interactivity is achievable with only HTML, CSS, and JavaScript (no backend).
• List the types of interactive features showcased on the site.
• Target audience: developers, educators, students, open source contributors.

---

2. Interactive Feature Pages

For each, provide: explanation, use cases, live demo, and full static code (HTML/CSS/JS) users can copy:

• Forms Without Servers: capture input and display feedback using client-side JS.
• Live JavaScript Runner: a simple editor to write and run JS code in-browser.
• Theme Switcher (Light/Dark): toggle themes, storing preferences in localStorage.
• Persistent Notes App: save user notes in localStorage.
• Filterable Lists & Search: sort and filter static lists client-side with JS.
• Markdown to HTML Converter: live Markdown input rendered to HTML.
• JSON Viewer / Formatter: paste JSON, see formatted and collapsible view.
• Interactive Diagrams with Mermaid.js: render diagrams from text with Mermaid CDN.
• Clipboard Interaction: copy-to-clipboard buttons using Clipboard API.
• Drag and Drop UI: reorder or move items using HTML5 drag and drop.
• Client-Side Routing (SPA-style): simulate single-page navigation with hash routing.
• Page State Memory: store user interface state in session/localStorage.
• Browser API Demos: simple demos of Geolocation, Notifications, Speech APIs.
• Tech Tools: base64 encode/decode, URL encode/decode, JSON formatter, color picker, and other lightweight utility tools implemented purely in frontend JS.

---

3. Games Section

A showcase of simple browser games, each with demo, source code, and explanation:

• Clicker Game with persistent scoring.
• Tic Tac Toe (2-player or AI).
• Memory Match card game.
• Number Guessing game with validation.
• Rock, Paper, Scissors with animations.
• Maze/Grid navigation controlled by keyboard.
• Typing Speed Test measuring WPM.
• Drag-and-Drop Puzzle.
• Simon Says memory pattern game.
• Wordle-style guessing game (simplified).

Include a /games/index.html listing all games with thumbnails and links.

---

4. Bonus Content

• Best practices for static interactivity: progressive enhancement, accessibility, performance.
• Ready-made templates and code snippets for common interactivity patterns.
• Resources: links to browser APIs, no-dependency JS libraries, GitHub Pages tips.

---

5. Markdown Usage

• Explain how Markdown can be used to create content easily on GitHub Pages.
• Demonstrate converting Markdown to HTML live on the page using client-side JavaScript.
• Provide examples of interactive Markdown editors/viewers that run fully in-browser.
• Discuss benefits of Markdown for documentation, blogs, and project READMEs hosted on static sites.
• Include code samples and tips for embedding interactive Markdown content.

---

6. Technical Constraints

• All pages must be fully static (HTML/CSS/JS).
• No external build tools, frameworks, or CLI dependencies.
• Use only vanilla JavaScript or minimal CDN libraries (e.g., Mermaid.js).
• Compatible with GitHub Pages hosting out-of-the-box.
• Include copyable code blocks with syntax highlighting for user convenience.

---

7. Site Structure Suggestion

List the site files as a plain indented list to avoid code block issues:

• /index.html
• /forms.html
• /live-js-runner.html
• /theme-switcher.html
• /notes-app.html
• /filter-search.html
• /markdown-converter.html
• /json-viewer.html
• /mermaid-diagrams.html
• /clipboard.html
• /drag-drop.html
• /spa-routing.html
• /page-state.html
• /browser-apis.html
• /tech-tools.html
• /games/index.html
• /games/clicker.html
• /games/tic-tac-toe.html
• /games/memory-match.html
• /games/number-guessing.html
• /games/rock-paper-scissors.html
• /games/maze.html
• /games/typing-speed.html
• /games/drag-drop-puzzle.html
• /games/simon-says.html
• /games/wordle.html
• /best-practices.html
• /resources.html

---

This prompt describes a complete, easy-to-generate, ready-to-deploy static site that educates GitHub users on how to add meaningful interactivity to their static GitHub Pages projects — with practical demos, games, tech tools, Markdown integration, and resources.

[google-labs-jules]

Jules is on it. When finished, you will see another comment and be able to review a PR.

[google-labs-jules]

Ready for a review! A PR has been created.