Add personality insights for ENFP including Myer Briggs and 16personalities descriptions with a Gantt chart visualization

Author: ChristineTham

GEMINI.md

@@ -12,7 +12,7 @@ Spotlite is a modern, production-ready personal website template built with **As
 - **Testing:** [Vitest](https://vitest.dev/) with `jsdom` and `v8` coverage
 - **Image Processing:** [Sharp](https://sharp.pixelplumbing.com/)
 - **Lightbox:** [PhotoSwipe](https://photoswipe.com/) for click-to-zoom image galleries
-- **Visualisations:** [D3.js](https://d3js.org/) for interactive data-driven components
+- **Visualisations:** [D3.js](https://d3js.org/) for interactive data-driven components and [Mermaid](https://mermaid.js.org/) via `astro-mermaid` for diagrams
 - **Search Indexing:** [Pagefind](https://pagefind.app/) for static full-site search
 
 ## 🚀 Key Commands

README.md

@@ -17,6 +17,7 @@ It uses the following technologies:
 - [Vitest](https://vitest.dev/) for unit and component testing
 - [UnoCSS](https://unocss.dev/)
 - [D3.js](https://d3js.org/) for interactive data visualisations
+- [Mermaid](https://mermaid.js.org/) via `astro-mermaid` for diagrams
 - `@astrojs/sitemap` and `@astrojs/rss` preintegrated
 - Heroicons and SVG Logos preloaded via [Iconify](https://iconify.design/)
 - [Pagefind](https://pagefind.app/) for static full-site search
@@ -33,6 +34,7 @@ It features:
 - A Superpowers page featuring interactive D3 data visualisations and detailed skill modals.
 - A Creations page showcasing linkable artefacts.
 - A Passions page providing a list of products and tools used.
+- Support for diagrams and flowcharts via Mermaid.
 - Header search with Pagefind indexing for production builds.
 - Automated CV PDF generation from content collections.
 - Development search fallback powered by a local JSON endpoint.

astro.config.mjs

@@ -1,6 +1,7 @@
 import { defineConfig, fontProviders } from 'astro/config'
 import UnoCSS from 'unocss/astro'
 import sitemap from '@astrojs/sitemap'
+import mermaid from 'astro-mermaid'
 
 // https://astro.build/config
 export default defineConfig({
@@ -27,6 +28,7 @@ export default defineConfig({
     }
   ],
   integrations: [
+    mermaid(),
     UnoCSS(),
     sitemap({
       filter: (page) => page !== 'https://astro-spotlite.netlify.app/404/'

conductor/tech-stack.md

@@ -15,6 +15,7 @@
     - **Accessible Shortcuts:** Custom `focus-ring` and semantic `text-accent` utility classes for WCAG compliance.
 - **PhotoSwipe:** Modern lightbox library used for click-to-zoom galleries in image cards and featured page images.
 - **D3.js:** Interactive data visualisations (e.g. adaptive career timeline, superpowers bar chart, animated packed circles) integrated with Astro components. Supports responsive resizing, custom tooltips, theme-aware styling, and continuous molecular-motion simulations with viewport-aware performance pausing via **IntersectionObserver**.
+- **Mermaid:** Support for diagrams and flowcharts via **astro-mermaid**, enabling easy integration of Mermaid.js syntax within content and components.
 - **Interactive Modals:** Custom modal implementation using the HTML5 `<dialog>` element for detailed data exploration.
 
 - **Rosely Design System:** A warm, low-contrast design system used for consistent styling across the site.

package.json

@@ -25,9 +25,12 @@
     "@astrojs/sitemap": "^3.7.2",
     "@iconify-json/heroicons": "^1.2.3",
     "@iconify-json/simple-icons": "^1.2.82",
+    "@mermaid-js/layout-elk": "^0.2.1",
     "@unocss/astro": "^66.6.8",
     "astro": "^6.3.3",
+    "astro-mermaid": "^2.0.1",
     "d3": "^7.9.0",
+    "mermaid": "^11.15.0",
     "photoswipe": "^5.4.4",
     "sharp": "^0.34.5",
     "unocss": "^66.6.8"