🔗 Live: https://bzafranks.github.io/
Innovative Learning Solutions for Schools, Districts, Ministries of Education, and EdTech Organizations.
The personal professional portfolio of Dr. Barbara Z. Franks — educator, instructional designer, curriculum developer, and academic leader (President & CEO of D.R.E.A.M. Education Solutions, a separate organization with its own website). A growing collection of complete instructional-design and instructional-leadership solutions, all built on one shared design system so the whole portfolio feels like a single premium educational platform.
This is the monorepo and design-system home for the entire portfolio:
- The portfolio homepage (
index.html) that connects every project. - The shared design system (
assets/css/design-system.css+assets/js/portfolio.js) used by every page and every project — a single source of truth. - A living style guide (
design-system.html). - Reusable page templates (
templates/). - All projects as subfolders under
projects/.
bzafranks.github.io/ ← root domain = portfolio home
├── index.html Portfolio homepage (projects, pillars, roadmap, contact)
├── about.html About Dr. Franks
├── design-system.html Living style guide
├── assets/
│ ├── css/design-system.css THE shared design system (single source of truth)
│ ├── js/portfolio.js Shared components + homepage logic
│ ├── js/projects-data.js Project registry — add 1 entry to publish a project
│ └── img/
├── templates/ project / lesson / case-study starters
├── projects/
│ ├── grade3/ Grade 3 Asynchronous Learning (re-skinned)
│ └── grade5/ Grade 5 Hybrid Learning (re-skinned)
├── STYLE_GUIDE.md Written design + contribution guidelines + nav map
├── PROJECT_SPEC.md Portable rebuild spec
└── README.md
- Palette: premium academic navy
#1f3a5f+ gold#d9a441, with teal/plum/coral accents. - Type: Georgia serif headings + Segoe UI sans body.
- Two pillars: Instructional Design (gold) and Instructional Leadership (teal).
- Components: nav, hero, cards, project cards, tags, callouts, timeline, stats, tabs, accordions, tables, AI video player, quiz, flashcards, drag-and-drop, fill-in-blank, progress trackers, dashboards, achievement badges, reflection, annotation — all in one CSS + JS pair.
- Accessibility: UDL-minded, keyboard support, captions, color-plus-text, print styles, reduced-motion.
- Copy
templates/project-template.html(andlesson-template.html) intoprojects/<your-project>/. - Link the shared
../../assets/css/design-system.cssand../../assets/js/portfolio.js. - On
<body>, setdata-project="Name"anddata-project-root="../../"(adds the back-to-portfolio ribbon). - Add one entry to
assets/js/projects-data.js— it appears on the homepage automatically.
- Double-click
index.html, orpython -m http.server 8000then openhttp://localhost:8000.
This repo is named bzafranks.github.io, so GitHub Pages serves it at the root domain
https://bzafranks.github.io/. Every git push to main republishes automatically.
HTML5 · CSS3 (custom properties, Grid/Flexbox) · vanilla JavaScript · Web Speech API ·
localStorage · GitHub Pages. No frameworks, no build step, no dependencies.
Each project is a complete, adoptable learning system — ready to demo to ministries, districts, schools, online schools, and EdTech/AI-education companies, or to embed in an LMS.
Six more flagship projects are on the roadmap (Grade 7 AI personalization; Bahamian curriculum projects for competency-based learning, UDL, data-driven instruction, career & future skills, and AI). The design system is built to absorb them with zero redesign.
All content is original and created for demonstration. Standards reference the Common Core State Standards. © D.R.E.A.M. Education Solutions.