Museum of Humanity

A high-performance interactive portfolio — an evocative showcase of craft, motion, and thought. Museum of Humanity marries pixel-perfect UI, accessible interactions, and advanced frontend architecture to present work as an immersive gallery: thoughtful, lightning-fast, and human-first.

"A portfolio that feels like a living exhibit — each interaction reveals a new layer of care."

---

Highlights

• High-performance interactive portfolio with buttery motion and minimal paint.
• Custom state machines implemented with React Context API for predictable UI flows.
• Secure Gemini (LLM) integration via Netlify serverless functions — LLM calls never run in the browser.
• Accessible UI built with Tailwind CSS and semantic markup; respects reduced-motion and keyboard navigation.
• Optimized for modern devices: code-splitting, lazy loading, GPU-friendly animations, and asset compression.

Tech stack

• JavaScript (modern ESNext)
• Tailwind CSS
• Serverless Functions (Netlify)
• Progressive enhancement & ARIA accessibility patterns
• Build tools: (Vite / Next / Parcel) — adjust to your setup in the commands below

Screenshots

• Add polished screenshots or short GIFs here to show the landing, interactive exhibits, and mobile views.

---

Features

• Thoughtful interactive scenes and transitions driven by small, focused state machines.
• Server-mediated LLM calls: user prompts are proxied through Netlify functions to keep secrets off the client.
• Tailwind-powered design system for predictable, responsive UI.
• Focus-visible outlines, skip links, semantic headings and landmarks for assistive tech.
• Prefers-reduced-motion support and CPU/GPU-friendly animation patterns.
• Lightweight asset pipeline and image optimization for fast loads.

---

Getting started

Prerequisites

• Node.js >= 16
• npm or yarn
• Netlify CLI (if running serverless functions locally)

Install

1. Clone the repo git clone https://github.com/Pawanraje-kadam/museum-of-humanity.git
2. Install dependencies npm install

   or

   yarn install

Local development

• Start the dev server (adjust command to your project's framework) npm run dev

  or

  yarn dev

• To run Netlify functions locally: netlify dev

  or

  netlify functions:serve

Build

• Create a production build: npm run build

  or

  yarn build

Preview production locally (if supported) npm run start

or

yarn start

Deploy

• The project is optimized for Netlify:
  1. Push your repo to GitHub.
  2. Connect the repo in Netlify and set the environment variables (see below).
  3. Use Netlify's build command and publish directory (configure based on your framework).
  4. Netlify will build and deploy serverless functions automatically.

---

Environment variables (Define these in Netlify site settings or a local .env for local testing — do NOT commit secrets.)

• GEMINI_API_KEY — API key for Gemini (or whichever LLM you're proxying to).
• NETLIFY_AUTH_TOKEN — (optional) for CLI deployments.
• OTHER_API_KEYS — any analytics, image CDN, or external service keys.

Serverless function tip

• Keep LLM keys on the server function and enforce input validation & rate limiting inside the function to prevent abuse:
  • Validate incoming text length.
  • Sanitize prompts.
  • Rate-limit per IP or user session.

---

Architecture & how it works

• UI layer: React + Context API state machines.
  • Each major interaction (gallery navigation, focus traps, exhibit transitions) is modeled as a small, explicit state machine for predictability.
• Server layer: Netlify Functions act as a secure proxy for LLM requests and any private backend logic.
  • Browser → Netlify Function → Gemini API
• Assets & performance:
  • Code-splitting and route-level bundles minimize initial JS.
  • Lazy-loaded interactive components and compressed media reduce paint.
  • Carefully-tuned GSAP/Three-like animations (or CSS transforms) run on the compositor thread when possible.

Project structure (example)

• /src
  • /components — reusable UI pieces
  • /contexts — Context API + state machines
  • /pages or /routes — app pages and route-level code splitting
  • /styles — Tailwind config and global CSS
• /netlify/functions — serverless functions (LLM proxy)
• /public — static assets (images, fonts)

Adjust paths above to match the repository layout.

---

Accessibility Museum of Humanity is built with accessibility as a first-class citizen:

• Semantic HTML and ARIA where necessary.
• Keyboard-first navigation and visible focus states.
• Skip links and logical reading order.
• prefers-reduced-motion respects user preferences.
• Color contrast checks and accessible forms.

Suggested accessibility checks:

• Run axe-core or Lighthouse and fix issues flagged as critical.
• Test with VoiceOver and NVDA for basic navigation flows.

---

Performance Best practices included:

• Minimized main-thread work; keep animations off the main thread when possible.
• Serve modern image formats (AVIF/WebP) and responsive srcsets.
• Use HTTP caching and CDN for static assets.
• Keep third-party scripts lazy-loaded and non-blocking.

Run Lighthouse and aim for:

• Performance: 90+
• Accessibility: 90+
• Best Practices: 90+

---

Security & LLM safety

• Never expose API keys in client code — all LLM calls go through serverless functions.
• Sanitize and validate any user input before forwarding to the model.
• Apply rate-limiting to serverless endpoints to prevent abuse.
• Log judiciously and avoid storing raw user prompts unless necessary and consented.

---

Contributing Contributions are welcome. Suggested process:

1. Open an issue describing the change or improvement.
2. Fork the repo and create a descriptive branch name (feature/… or fix/…).
3. Run tests and linters locally.
4. Create a pull request with a clear description and screenshots/GIFs when relevant.

Code style

• Follow the project linting rules (ESLint / Prettier).
• Keep components focused and small.
• Write small commits with clear messages.

---

License Add a LICENSE file to your repository. MIT is a common choice:

MIT License

---

Contact Built by Pawan Raje Kadam — for demos, inquiries, or collaborations:

• GitHub: https://github.com/Pawanraje-kadam
• Personal site / email: add your contact details

Thank you for exploring the Museum of Humanity — a living portfolio that puts craft, performance, and accessibility front and center.