anandarupa.github.io

Anandarupa Dhar: Maps & Movements, Nodes & Narratives

Personal website for Anandarupa Dhar, Economist • Activist • Curious Thinker.

Built with Next.js, Tailwind CSS, Framer Motion, D3.js, and Recharts.

🚀 Deployment Setup

Important: To enable automatic deployment to GitHub Pages:

  1. Go to repository Settings → Pages
  2. Under Build and deployment → Source, select GitHub Actions
  3. Merge your changes to the main branch
  4. The site will automatically build and deploy via GitHub Actions
  5. Your site will be live at https://anandrupa.me (custom domain) or https://Anandarupa-web.github.io/anandarupa.github.io/

The repository is already configured with the necessary GitHub Actions workflow (.github/workflows/deploy.yml), CNAME file for the custom domain, and .nojekyll file to prevent Jekyll processing.

Theme

“Maps & Movements, Nodes & Narratives”: a personality-first site capturing the dual identity of an empirical economist and student activist. Visual metaphors include contour maps, force-graph nodes, stitched textile textures, and documentary-style imagery.

Quick Start

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production (static export)
npm run build

# The static site is output to the /out directory

Open http://localhost:3000 to view the site locally.

Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── page.tsx            # Home / Hero page
│   ├── about/page.tsx      # About: Narrative Timeline
│   ├── research/page.tsx   # Research & Projects (filterable)
│   ├── publications/page.tsx # Publications with JSON-LD schema
│   ├── activism/page.tsx   # Activism & Leadership
│   ├── notes/page.tsx      # Notes / Microblog
│   ├── tools/page.tsx      # Interactive Tools (D3, charts, QA)
│   ├── contact/page.tsx    # Contact form
│   ├── layout.tsx          # Root layout with nav + footer
│   └── globals.css         # Theme tokens, stitch/contour styles
├── components/
│   ├── Navigation.tsx      # Responsive nav with mobile menu
│   ├── Footer.tsx          # Site footer
│   └── ForceGraph.tsx      # D3 co-author network graph
├── content/notes/          # MDX blog posts (source content)
│   ├── why-spatial-thinking-matters.mdx
│   ├── do-employees-really-matter.mdx
│   └── data-democracy-student-voices.mdx
└── data/
    ├── research.json       # Research projects with mock data
    ├── publications.json   # Publications list
    ├── timeline.json       # Timeline nodes for About page
    └── qa.json             # Q&A for "Ask Anandarupa" feature

Pages

Page Route Description
Home / Split hero with bio and animated contour map
About /about Interactive vertical timeline
Research /research Filterable project gallery with mini-charts
Publications /publications Searchable list with JSON-LD schema
Activism /activism Carousel/mosaic with stitch textile motif
Notes /notes Microblog with expandable posts
Tools /tools D3 force graph, map demo, data explorer, Q&A
Contact /contact Contact form with honeypot spam protection

Tech Stack

Color Palette

Color Hex Usage
Deep Teal #0F5660 Navigation, headings, timeline
Warm Amber #F0A500 CTAs, active states, accents
Charcoal #1F2933 Body text, footer
Off-White #FCFBFA Backgrounds

Deployment

Vercel

  1. Push to GitHub
  2. Import the repository on Vercel
  3. Vercel auto-detects Next.js, so no additional configuration is needed
  4. The vercel.json adds security headers automatically

Netlify

  1. Push to GitHub
  2. Import the repository on Netlify
  3. Build command: npm run build
  4. Publish directory: out
  5. The netlify.toml configures build and security headers

This repository includes a GitHub Actions workflow (.github/workflows/deploy.yml) that automatically builds and deploys to GitHub Pages on every push to main.

One-Time Setup Required:

  1. Go to your repository Settings → Pages
  2. Under Build and deployment → Source, select GitHub Actions (NOT “Deploy from a branch”)
  3. Merge changes to main; the site will deploy automatically on each push
  4. Your site will be available at https://anandrupa.me (custom domain) or https://Anandarupa-web.github.io/anandarupa.github.io/

Why this fixes the README display issue:

Contact Form Setup

The contact form on the /contact page uses Netlify Forms by default (via data-netlify="true" attribute). To configure for your deployment:

Netlify Forms (default)

No additional configuration needed. Netlify automatically detects the form.

Vercel / Custom Endpoint

  1. Open src/app/contact/page.tsx
  2. Find the form’s onSubmit handler
  3. Replace the fetch URL with your serverless endpoint (e.g., a Vercel serverless function or third-party form service)
  4. The honeypot field (bot-field) provides basic spam protection

Replacing Placeholder Images

All images currently use Unsplash URLs as placeholders. To replace with your own images:

  1. Add your images to the public/images/ directory
  2. Update the image src attributes in the relevant page component
  3. Update the alt text to describe the actual image
  4. Remove any “AI-generated / Unsplash placeholder” metadata from the alt text

Image locations:

Accessibility

Important Notes