✨ Nine Year Plan 2022–2031

An interactive reference guide to the Bahá'í Nine Year Plan — overview, core activities, institutions, statistics, and key messages

HTML5 CSS3 Vanilla JS Animated Counters Static Site

📋 Project Overview & Problem Statement

Challenge: The Bahá'í Nine Year Plan (2022–2031) spans complex themes — core activities, institutional frameworks, social action, and statistics — spread across multiple official documents. Community members and researchers needed a single, well-structured digital reference to navigate the Plan's scope.

Solution: A comprehensive, scroll-driven reference site covering all major dimensions of the Nine Year Plan. Built entirely in HTML, CSS, and vanilla JavaScript, it presents dense material in a readable format with animated statistics, section navigation, and fade-in cards — making the Plan's scope tangible and explorable.

Key Benefits

🖥️ Application Features

📜 The Plan Overview

Explains the Nine Year Plan's purpose, the three protagonists (Individual, Community, Institutions), and its place in the 25-year arc ending at Riḍván 2046.

📅 Historical Context

Timeline of the 25-year period (1996–2021) that preceded the Plan — cluster development, global campaigns, and the growth of the institute process.

⚙️ Core Activities Grid

Study circles, children's classes, junior youth groups, and devotional gatherings — each explained with purpose and current global scale, in a 2×2 grid layout.

🏛️ Institutional Framework

Covers the Administrative Order structure — Houses of Justice, National/Local Spiritual Assemblies, Continental Boards of Counsellors, and Auxiliary Boards.

🌍 Social Action & Public Discourse

Documents the growth of Bahá'í development projects (250 → 1,500), BIDO, Houses of Worship, and participation in public discourse.

📊 Animated Statistics

Key numbers animate on scroll using requestAnimationFrame with ease-out cubic easing — 5.7M Bahá'ís, 10,000+ clusters, 70,000+ grassroots initiatives per year.

⚙️ Technical Architecture & Implementation

Frontend Stack

HTML5 CSS3 Custom Properties Vanilla JavaScript Google Fonts (Cormorant Garamond + Inter) IntersectionObserver API requestAnimationFrame CSS Grid & Flexbox

Architecture Highlights

🚀 Deployment

Hosted as a static site on GitHub Pages. No build step required — open index.html directly in any browser.

# Clone and open locally git clone https://github.com/lyven81/ai-project.git open ai-project/projects/nine-year-plan/index.html # Or view live at: # https://lyven81.github.io/ai-project/projects/nine-year-plan/

📊 Key Metrics

8
Content Sections
6
Knowledge Source Files
5
Animated Stat Counters
9
Years Covered (2022–2031)

Value Delivered