Persona — MBTI Personality Profiler

A modern, fully client-side MBTI personality assessment with a premium dark-mode UI.

Live Demo · Report Bug · Request Feature

Screenshot

About

Persona is a polished, vanilla-JavaScript implementation of the Myers-Briggs Type Indicator built for self-aware professionals. Take a 60-question assessment, watch your result animate into a radar chart, dive into deep insights across ten dimensions, and explore compatibility across all 16 types — entirely in your browser, with no backend.

Key Features

Module	What it does
🧭 60-Question Assessment	Likert-scale questions across the 4 MBTI dimensions, with auto-save and back navigation
📊 Visual Results	Animated radar chart, trait spectrum bars, and percentage strength indicators
🧠 10 Insight Tabs	Strengths, Weaknesses, Communication, Leadership, Learning, Workplace, Careers, Teamwork, Stress, Growth
👥 16 Type Profiles	Full profiles for every type — career paths, famous figures, relationship style
💞 Compatibility Matrix	16×16 heat map with rule-based pair scoring and tips
🏆 Gamification	XP system, 7 unlockable badges, journey tracker
🌓 Theme & Sound	Dark/light theme toggle (dark default) and sound effects
📥 Share & Export	Web Share API, clipboard fallback, PNG download via html2canvas
💾 Persistence	localStorage saves progress, history, theme, sound, and badges
⌨️ Accessibility	Keyboard nav (1–5 to answer, ←/→ to navigate), aria-live, reduced-motion support

Tech Stack

Category	Technology
Markup	HTML5 (semantic, single-page app)
Styling	CSS3 (custom properties, glassmorphism, grid/flex, mobile-first)
Logic	Vanilla JavaScript (ES6+, modular IIFE namespaces)
Charts	Chart.js 4 (radar visualization)
Effects	canvas-confetti (result celebration)
Export	html2canvas (PNG download)
Fonts	Inter, Space Grotesk (Google Fonts)
Deployment	GitHub Pages via GitHub Actions

Architecture

┌────────────────────────────────────────────────────┐
│                    Browser (SPA)                   │
│ ┌──────────────────────────────────────────────┐   │
│ │  index.html  · 6 views, modal, toast         │   │
│ └──────────────────────────────────────────────┘   │
│ ┌──────────────────────────────────────────────┐   │
│ │  style.css   · design tokens, glass surface  │   │
│ └──────────────────────────────────────────────┘   │
│ ┌──────────────────────────────────────────────┐   │
│ │  script.js                                   │   │
│ │  ├── MBTI.Data         (questions, types)    │   │
│ │  ├── MBTI.Storage      (localStorage)        │   │
│ │  ├── MBTI.Scoring      (Likert → type)       │   │
│ │  ├── MBTI.Router       (hash-based SPA)      │   │
│ │  ├── MBTI.Assessment   (question flow)       │   │
│ │  ├── MBTI.Results      (radar, insights)     │   │
│ │  ├── MBTI.Types        (16-type gallery)     │   │
│ │  ├── MBTI.Compatibility(matrix + pair)       │   │
│ │  ├── MBTI.Gamification (XP, badges)          │   │
│ │  ├── MBTI.UI           (theme, sound, toast) │   │
│ │  └── MBTI.App          (bootstrap)           │   │
│ └──────────────────────────────────────────────┘   │
│              ↕ localStorage (mbti.*)               │
└────────────────────────────────────────────────────┘

Project Structure

mbti/
├── index.html         # SPA shell with 6 views
├── style.css          # Design system + responsive layout
├── script.js          # All app logic and data
├── screenshot.png     # README hero screenshot
├── README.md          # You are here
└── .github/
    └── workflows/
        └── deploy.yml # GitHub Pages deployment

Getting Started

Prerequisites

A modern browser (Chrome, Firefox, Safari, Edge). No build tools required.

Run Locally

Clone and serve:

git clone https://github.com/alfredang/mbti.git
cd mbti
python3 -m http.server 8000
# open http://localhost:8000

Or simply open index.html directly in a browser.

Keyboard Shortcuts

Key	Action
1	Strongly Agree
2	Agree
3	Neutral
4	Disagree
5	Strongly Disagree
→	Next question
←	Previous question
Esc	Close modal

Deployment

This project is auto-deployed to GitHub Pages via the workflow in .github/workflows/deploy.yml. Every push to main redeploys.

To deploy your own fork:

1. Fork the repo
2. In Settings → Pages, set the source to GitHub Actions
3. Push to main — the action handles the rest

Live URL pattern: https://<username>.github.io/mbti/

Contributing

Contributions are welcome.

1. Fork the project
2. Create your feature branch (git checkout -b feat/amazing-thing)
3. Commit your changes (git commit -m "feat: add amazing thing")
4. Push to the branch (git push origin feat/amazing-thing)
5. Open a Pull Request

License

This project is released under the MIT License.

Developed By

Tertiary Infotech Academy Pte Ltd

Acknowledgements

• The MBTI framework, originated by Katharine Cook Briggs and Isabel Briggs Myers
• Chart.js for the radar visualization
• canvas-confetti for the celebratory burst
• html2canvas for client-side PNG export
• The Inter and Space Grotesk type families

---

If you find this useful, please ⭐ the repo!

Powered by Tertiary Infotech Academy Pte Ltd