An educational web experience tracing the history of New Zealand's four industrial pillars — from te ao Māori to the machine age.
This repository contains a suite of interactive, single-page HTML timelines and an educational hub built for Craffft — a New Zealand learning platform where the second F in Craffft stands for Fibre.
Each timeline covers one of Craffft's four industry pillars, tracing its evolution across hundreds of years. Together they form an educational framework aligned with Te Mātaiaho (the New Zealand Curriculum refresh), with a specific focus on the Aotearoa New Zealand's Histories strand and English/Literacy achievement objectives.
| File | Title | Span |
|---|---|---|
education.html |
Why History Matters — Learning Hub | Big Bang → Present |
fibre-timeline.html |
NZ Fibre Industry | c.1300 → 2026+ |
food-timeline.html |
NZ Food Systems | c.1300 → 2026+ |
Factory-timeline.html |
NZ Advanced Manufacturing | c.1300 → 2026+ |
transport-timeline.html |
NZ Transport | c.1300 → 2026+ |
A comprehensive single-page educational site covering:
- The Cosmic Timeline — Big Bang (13.8 Bya) through the formation of our Solar System
- The Geologic Time Scale — Precambrian, Phanerozoic, and the emerging Anthropocene epoch
- Aotearoa Industrial History — An overview timeline across all four pillars from te ao Māori to Industry 4.0
- Five Reasons Timelines Matter — the systems-thinking rationale for Craffft's methodology
- Te Mātaiaho Curriculum Alignment — the Understand / Know / Do framework, Histories strand skill strips, and Literacy strand connections
- The NPC Mindset — the pedagogical goal of empowering students as ecopreneurs, not passive inhabitants of the existing system
Each timeline is a self-contained, interactive horizontal scroll experience. All share the same design system.
| Era | Year | Accent |
|---|---|---|
| Te Ao Tawhito | c.1300 | Gold |
| The Age of Sail | 1769 | Ocean teal |
| Industrial Fibre | 1880 | Amber |
| Synthetic Era | 1950 | Steel grey |
| Deregulation | 1984 | Sage |
| Bio-Economy | 2010 | Vibrant green |
| Regenerative Now | 2025 | Electric cyan |
| Ngā Ara | 2026+ | Future green |
| Era | Year | Accent |
|---|---|---|
| Te Ao Tawhito | c.1300 | Leaf green |
| Age of Sail & Trade | 1769 | Harvest amber |
| The Refrigeration Revolution | 1882 | Sky blue |
| The Protected Farm | 1950 | Weathered earth |
| Rogernomics & Reform | 1984 | Data blue |
| Precision Agriculture | 1995 | Lush green |
| Regenerative Turn | 2020 | Science purple |
| Ngā Ara | 2026+ | Future mint |
| Era | Year | Accent |
|---|---|---|
| The Craft Age | c.1300 | Clay ochre |
| Colonial Industry | 1840 | Colonial brass |
| The Protected Factory | 1950 | Factory blue |
| Deregulation Shock | 1984 | Disruption orange |
| Niche Mastery | 1990 | Precision gold |
| Industry 4.0 Arrives | 2016 | Digital indigo |
| The Automation Surge | 2020 | Innovation purple |
| Ngā Ara | 2026+ | Future mint |
| Era | Year | Accent |
|---|---|---|
| Te Ara o Ngā Tīpuna | c.1300 | Waka green |
| Age of Ships | 1840 | Ocean teal |
| Iron Roads | 1870 | Iron gold |
| Road Era | 1922 | Asphalt grey |
| Digital Era | 1990 | Digital indigo |
| Green Infrastructure | 2019 | Electric green |
| The Electric Age | 2025 | Electric cyan |
| Ngā Ara | 2026+ | Future lime |
- Horizontal scroll with
scroll-snap-type: x mandatory— one era per viewport - Full-width historical slider — 8 clickable era segments coloured by accent; TODAY marker positioned at the boundary of the current era
- Default landing on the most substantive present-day era (index 6), not the first
- Entrance animations via
IntersectionObserver— staggered fade-up on panel entry - Keyboard navigation —
←→HomeEnd - Gold progress bar — fills left-to-right as user moves through the timeline
- Universal topbar — 36px fixed nav on every page; active pillar highlighted;
← Craffftlinks back to the learning hub - Bilingual headings — English title (large, Playfair Display, accented) + Te Reo Māori subtitle (Inter, muted)
- Era 8: Future Paths — four scenario cards (invest / partner / delay / wild card) replace event cards in the final era of each timeline
- Fully self-contained — no frameworks, no external JS, no build step
These timelines directly address the Understand / Know / Do framework:
Aotearoa New Zealand's Histories strand
- Continuity and Change — traced through the Transport pillar (waka → coal → EV)
- Perspectives and Bias — explored through Food and Fibre (Maramataka vs. pastoral farming)
- Historical Narratives — constructed through the Factory pillar (cause-and-effect chains to the present)
English / Literacy strand
- Critical reading and data synthesis — timelines as primary source documents
- Persuasive writing — industrial history as evidence for civic submissions
- Contextual vocabulary — syntropic, decortication, extractive, telemetry, kaitiakitanga, mātauranga, Maramataka acquired through context, not rote lists
| Property | Value |
|---|---|
| Background | Dark near-black (varies per pillar: #0C1A10, #0D180A, #0C1018, #0A0F18) |
| Cream | #F5EDD8 |
| Gold | #C8A84B |
| Heading font | Playfair Display (Google Fonts) |
| Body font | Inter (Google Fonts) |
| Layout | Fixed header + slider, full-height scroll track, fixed footer |
| Animations | CSS transitions + IntersectionObserver, no JS animation libraries |
The site is deployed via Railway with serve as the static file server.
# Local development
npm install
npm start # serves on http://localhost:3000Railway reads railway.json and runs:
serve . --listen $PORT --single
GitHub Pages (fallback): also available at
https://radkiwi.github.io/Craffft_Pillars/
Craffft_Pillars/
├── education.html # Learning hub — the homepage
├── fibre-timeline.html # Fibre pillar interactive timeline
├── food-timeline.html # Food pillar interactive timeline
├── Factory-timeline.html # Factory pillar interactive timeline
├── transport-timeline.html # Transport pillar interactive timeline
├── package.json # serve dependency for Railway
├── railway.json # Railway deployment config
└── README.md
Craffft is a New Zealand educational platform building the next generation of ecopreneurs — young people with the systems-thinking skills, historical context, and technical capability to design and build the sustainable industries of the future.
The four pillars — Food, Fibre, Factory, Transport — are the systems that built the modern world. Understanding their history is the first step to reimagining them.