Central landing page for the independent browser-based technical learning environments I build for myself.
Live hub: https://zann208.github.io/study/
Study Console is the single navigation hub for my personal technical learning system. Each subject area stays in its own repository or subfolder so it can grow independently without making the landing page fragile.
The consoles are designed for understanding, revision, calculations, troubleshooting practice, simulations, reference, and active recall. They use plain HTML, CSS and JavaScript so they remain easy to host, inspect and maintain.
The repository now hosts the canonical Study Console UI System v1 under shared/v1/.
shared/v1/study-system.css— shared colors, typography, spacing, global navigation, buttons, cards, learning blocks, tables, quizzes, themes, accessibility and responsive primitives.shared/v1/study-system.js— shared global console shell, console switcher, theme persistence, recent-console tracking and reusable navigation behavior.google-dc-hackathon/gdc.css— only the subject-specific structures needed by the Google Data Center console.docs/UI-SYSTEM.md— canonical design-system specification.docs/MIGRATION.md— migration checklist for NETDES, WNET, ALGO, Privacy and OS.
External consoles should pin the versioned assets at https://zann208.github.io/study/shared/v1/ rather than depending on an unversioned latest file.
| Console | Focus | Source | Live |
|---|---|---|---|
| NET | Network Design & Troubleshooting | netdes | open |
| WLN | Wireless Network Engineering | wnet | open |
| ALG | Algorithms & Data Structures | algo | open |
| PRV | Privacy & Information Security | privacy | open |
| OS | Operating Systems & Scheduling | os | open |
| GDC | Google Data Center Hardware Hackathon 2026 | this repository: google-dc-hackathon/ |
open |
The consoles are presented as my own technical learning environments, not as mirrors of university courses.
Public-facing wording should therefore avoid:
- university course codes or subject numbers
- exact official course titles when they identify a specific university offering
- instructor names, class schedules, rooms, office hours, grading breakdowns, or LMS references
- labels such as
Lecture 01,Week 4,Worksheet 2,course handout, or source-file identifiers when they expose the original class structure - claims such as "built from lecture slides" or "for [course code] at [university]"
Keep the useful technical content: explanations, examples, tools, calculators, simulations, troubleshooting flows, practice questions, definitions, diagrams, and original organization. Rename structure into neutral product language such as modules, topics, concepts, practice, workbench, reference, mastery, challenge, or review.
Academic affiliation can still appear on the professional portfolio/resume where appropriate; it should not define the identity of the Study Console itself.
study= central learning hub and cross-console navigation.- Separate topic repos = the source of truth for each technical console.
google-dc-hackathon/= competition-preparation console maintained inside this hub.Zann208.github.io= professional portfolio; it links to Study Console as a project rather than duplicating every console.Zann208/Zann208= GitHub profile README; it stays concise and recruiter-facing.
- Keep one clear source of truth for every console.
- Prefer small, intentional edits over chains of patch scripts.
- Do not add overlapping workflows that automatically rewrite generated HTML after normal edits.
- Test navigation links and mobile layout after structural changes.
- Keep topic-specific content inside its own repo; use this hub only for discovery and shared navigation.
- Keep naming consistent: NET, WLN, ALG, PRV, OS and GDC.
- Preserve
.nojekyllfor direct static GitHub Pages hosting. - Before adding new material, rewrite its framing into the console's own neutral topic structure rather than copying university labels.
Vanilla HTML, CSS and JavaScript hosted with GitHub Pages. No framework is required for the central hub.