A modern, component-based landing page website for Develop and Innovate for Social Change. built with Next.js, TypeScript, and Tailwind CSS.

Since 2017, DISC has been transforming how Northwestern students engage with technology and community impact. What started as a small student group has grown into a dynamic community of innovators, bringing together diverse perspectives and skills to tackle real-world challenges.

Joining is easy! Just click on this link to join our Discord and be updated whenever we host events on campus!

This project is a sophisticated web portfolio implementation featuring various interactive components and sections including a hero section, about page, project showcase, and more. The project utilizes modern web technologies and follows a component-based architecture for maintainable and scalable code.

.
├── _components/               # React components
│   ├── HeroTreeMap.tsx       # Tree map visualization component
│   ├── _sections/            # Page sections
│   └── ui/                   # Reusable UI components
├── app/                      # Next.js app directory
│   ├── fonts/               # Custom fonts
│   ├── globals.css          # Global styles
│   ├── layout.tsx           # Root layout
│   └── page.tsx             # Home page
├── hooks/                   # Custom React hooks
├── lib/                     # Utility libraries
├── types.ts                 # TypeScript type definitions
└── utils/                   # Utility functions

• Modern UI Components: Includes custom-built components like:
  • Interactive TreeMap visualization
  • iPhone 15 Pro mockup
  • Safari browser frame
  • Feature cards
  • Custom navigation menus
• Responsive Design: Fully responsive layout with mobile-first approach
• Custom Hooks: Includes utility hooks for enhanced functionality
• Type Safety: Built with TypeScript for better development experience
• Performance Optimized: Implements best practices for web performance

• Next.js 14 - App Router Implementation
• React - JavaScript Library for User Interfaces
• TypeScript - Typed Programming Language
• Tailwind CSS - Utility-First CSS Framework
• Framer Motion - Animation Library
• D3.js - Data Visualization Library
• shadcn/ui - Re-usable UI Components

• Implementation & Development: Ethan Pineda

The initial design concept was created by the 2024 DISC team:

• Paula E. Fregene
• Joanna M. Soltys
• Melanie Cuenca
• Pauline Wakiuru Wachiuri
• Satviki Madaan

1. Clone the repository:

git clone https://github.com/DISC-NU/disc-website.git

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser to view the project.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.