To Brown and Her People

A memorial and community website for Brown University, created to honor those affected by the December 13, 2025 tragedy and provide a platform for students to share their stories, find support, and connect with one another.

Overview

This website serves as a permanent space for the Brown community to:

• Share and preserve authentic student stories
• Access resources and support information
• Connect with fellow students
• Honor the memory of those lost

Design Principles

Typography

• Cinzel (alternative to Kapakana): Elegant, artsy headers for emotional impact
• Roboto Bold: Clean, professional headers
• Ropa Sans: Warm, readable body text

Color Palette

• Brown (#4E3629): Primary color representing strength and grounding
• Off-white (#F5F1EB): Soft, welcoming background
• Green (#2D5A3D): Accent color for hope and growth
• Red (#C41E3A): Rare highlights for important elements

Tone & Philosophy

The website balances journalistic professionalism with a warm, community-focused approach. It feels local and truthful, created by students for students, not by an institution.

Website Structure

Main Page (/)

1. Hero Section

   • Full-screen background image
   • Animated text: "To Brown and Her People"
   • Word-by-word reveal with blur effect

2. What Happened Section

   • Detailed timeline of events
   • Narrative description
   • Scroll-triggered animations

3. Read Their Stories Section

   • Image grid showcasing student stories
   • Hover effects revealing story previews
   • Modal popups for full story viewing

4. Brown Community Section

   • Photo gallery of Brown University
   • Centerpiece quote from a student
   • Celebrates the community spirit

5. How to Contribute Section Three action cards:

   • Donations: Links to GoFundMe campaigns
   • Share Your Story: Student login and submission
   • Petitions: Support for policy changes

6. Purpose Section Three pillars:

   • Truth: Authentic voices without filters
   • Permanency: Lasting beyond news cycles
   • Focus: Community-first, no distractions

Stories Page (/stories)

• Featured stories gallery (top by hearts)
• Filtering by tags: Story, Thoughts, Hopes
• Sorting options: Recent, Most Hearts, Most Replies
• Interactive story cards with hearts and replies
• Student login modal for posting

Getting Started

Prerequisites

• Node.js 20+
• npm or yarn

Installation

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Development Server

The application will be available at http://localhost:3000 (or next available port)

Project Structure

brown/
├── app/
│   ├── layout.tsx          # Root layout with fonts and metadata
│   ├── page.tsx            # Main landing page
│   ├── globals.css         # Global styles and design tokens
│   └── stories/
│       └── page.tsx        # Stories listing and filtering page
├── components/
│   ├── Sidebar.tsx         # Navigation sidebar
│   ├── LoginModal.tsx      # Student login UI
│   ├── HeroSection.tsx
│   ├── WhatHappenedSection.tsx
│   ├── ReadStoriesSection.tsx
│   ├── BrownGallerySection.tsx
│   ├── ContributeSection.tsx
│   └── PurposeSection.tsx
├── public/
│   ├── brown/              # Brown University community images
│   │   └── brown-sunset.jpg
│   └── news/               # Shooting-related images and articles
└── task.md                 # Development task tracker

Technical Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• Animations: Framer Motion
• Fonts: Google Fonts (Cinzel, Roboto, Ropa Sans)

Key Features

Animations

• Scroll-triggered reveal animations
• Smooth transitions between sections
• Interactive hover states
• Modal entrance/exit animations

Responsive Design

• Mobile-first approach
• Sidebar collapses on mobile
• Adaptive grid layouts
• Touch-friendly interactions

Accessibility

• Semantic HTML structure
• ARIA labels where needed
• Keyboard navigation support
• High contrast ratios

Future Integration (Not Yet Implemented)

The following features are planned for future development with Supabase:

• Student authentication (Brown email verification)
• Story submission and storage
• Comment/reply system
• Heart/like functionality
• User profiles
• Content moderation dashboard
• Admin features

Important Links

GoFundMe Campaigns

• Chinese-American Victims Medical Expenses
• Jacob Spears Medical Expenses
• Matthew Wang Medical Expenses

Petitions

• Unify RISD & Brown Alert Systems
• Cover Medical & Funeral Expenses

Timeline of Events

December 13, 2025 (Saturday)

• 4:00 PM - Shooting in Room 166, Barus and Holley
• 4:06 PM - Earliest police reports
• 4:22 PM - First active shooter alert
• 2:13 AM - Brown overnight update

December 14, 2025 (Sunday)

• 5:42 AM - Shelter-in-place ended

Victims

• Ella Cook (19, Sophomore from Alabama)
• Mukhammad Aziz Umurzokov (18, Freshman from Virginia)
• 9 others injured

Asset Organization

/public/brown/

Community images showcasing:

• Campus life
• Student gatherings
• Brown University buildings
• Community events

/public/news/

• News article screenshots
• Event-related images
• Memorial photos

Note: Please ensure all images are respectful, properly licensed, and appropriate for a memorial website.

Development

See task.md for detailed development progress and task tracking.

---

By students, for students. Together, we are Brown.