SLASSCOM Initiatives

An interactive, responsive dashboard mapping SLASSCOM's initiatives to target groups and industry segments.

Tech Stack

• Framework: React + Vite
• Styling: Tailwind CSS v4 + Vanilla CSS
• Data: Static JSON (public/data.json)
• Deployment: GitHub Pages

Development

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

   The site will be available at http://localhost:5173.

Architecture

• public/data.json: The single source of truth for all segments, target groups, and initiatives. Edit this file to update the matrix content.
• src/components/: Contains all React components (Header, Matrix, SegmentRow, TargetGroupColumn, InitiativeCard, DetailModal).
• src/index.css: Contains Tailwind configuration and custom animations/dialog styling.

Documentation

• SPEC.md: Technical specification and data schema.
• DESIGN.md: UI/UX guidelines and styling rules.