Diversity Connected Website Redesign

ITC4850: Information Technology Project - Capstone Course
Northeastern University | Fall 2025

This repository contains the capstone project for ITC4850, where our team redesigned and rebuilt the Diversity Connected website using modern web technologies. This project represents the capstone of our IT program, combining technical skills with real-world project management practices.

• Execute a complete IT project in a collaborative team environment
• Apply skills from across the IT discipline to solve real-world problems
• Demonstrate effective project management and team coordination
• Deliver a production-ready solution with proper documentation

Current Phase: Development in Progress
Deployment: Live on Netlify at https://diversityconnected.netlify.app/

Note: This redesigned website is an independent educational project created for ITC4850. Due to lack of sponsor response, this version has no official affiliation with Diversity Connected organization.

Redesign and rebuild the Diversity Connected website using a modern React-based technology stack to address critical performance, maintainability, and user experience issues present in the legacy WordPress implementation.

• Performance: Eliminate frontend bloat and reduce page load times
• Modern Stack: Migrate from outdated PHP/WordPress to React ecosystem
• Maintainability: Replace complex page builder dependencies with clean, maintainable code
• Responsiveness: Ensure optimal user experience across all devices
• Security: Move away from end-of-life PHP 7.4 to modern, secure technologies

• CMS: WordPress 6.7.2 with Elementor 3.28.3
• Backend: PHP 7.4.33 (End-of-Life) + MySQL
• Frontend: jQuery, Backbone.js, multiple legacy libraries
• Theme: Astra 4.8.13

Critical Issues Identified:

• Outdated PHP version (no security updates)
• Heavy frontend bloat from Elementor
• Multiple redundant JavaScript libraries
• Poor performance optimization
• Suboptimal mobile responsiveness

• Frontend Framework: React 19.1.1
• Build Tool: Vite 7.1.7
• Routing: React Router DOM 7.9.4
• Styling: TailwindCSS 3.4.18 (Utility-first CSS framework)
• 3D Graphics: Three.js 0.181.0 + React Three Fiber 9.4.0
• Animations: GSAP 3.13.0 + TailwindCSS Animate 1.0.7
• Icons: Font Awesome 6.7.1
• Utilities:
  • Class Variance Authority 0.7.1 (Component variants)
  • Tailwind Merge 3.3.1 (Class merging)
  • CLSX 2.1.1 (Conditional classes)
• WebGL: OGL 1.0.11 (Lightweight WebGL library)
• Component Architecture: Modular, reusable component design
• Performance: Optimized asset loading and code splitting
• Responsive Design: Mobile-first approach with TailwindCSS responsive utilities
• Deployment: Netlify (Continuous Deployment)

The project underwent a complete styling migration from CSS modules to TailwindCSS, bringing significant benefits:

• Utility-First Approach: Replaced custom CSS with utility classes for faster development
• Consistent Design System: Unified spacing, colors, and typography across all components
• Reduced Bundle Size: Eliminated unused CSS through TailwindCSS's purge functionality
• Enhanced Responsiveness: Leveraged TailwindCSS's responsive utilities for better mobile experience
• Developer Experience: Improved maintainability with inline styling approach

Implemented a modular component system to improve code reusability and maintainability:

• ServiceCard: Reusable service display cards with icons, titles, descriptions, and feature lists
• ProcessStep: Numbered process step components for workflow visualization
• StatCard: Statistical display cards with main numbers, titles, and subtitles
• TeamMember: Team member profile cards with avatars, names, and positions
• ContactInfo: Contact information display components with icons, titles, and content
• PageHeader: Consistent page header component with titles and descriptions
• SpotlightCard: Interactive cards with spotlight hover effects and gradient backgrounds
• ColorBends: Advanced 3D background component using Three.js with dynamic color gradients
• ChromaGrid: Animated grid background with color transitions
• LightRays: Dynamic light ray effects for visual enhancement
• DarkVeil: Overlay component for creating depth and focus effects
• Silk: Smooth animated background textures
• GoogleMap: Integrated Google Maps component for location display
• Navbar: Responsive navigation bar with smooth animations and mobile menu
• Footer: Site footer with social media links and contact information

• Code Reduction: Eliminated ~400 lines of repetitive code across pages
• Consistency: Ensured uniform styling and behavior across similar elements
• Maintainability: Centralized component logic for easier updates and bug fixes
• Scalability: Easy to extend and modify components for future requirements
• Reusability: Components can be easily reused across different pages and contexts

• Project Management: Jira
• Version Control: Git/GitHub
• Communication: Discord

This project follows Agile methodology with emphasis on:

• Sprint planning and execution
• Task tracking and burndown charts
• Code reviews and quality assurance
• Team collaboration and communication
• Stakeholder management
• Iterative development and continuous improvement

Node.js (v18 or higher)
pnpm (recommended) or npm
Git

# Clone the repository
git clone https://github.com/Mihaivich/DC.git

# Navigate to project directory
cd DC

# Install dependencies
pnpm install

# Start development server
pnpm run dev

pnpm run dev       # Run development server (http://localhost:5173)
pnpm run build     # Create production build
pnpm run lint      # Run ESLint for code quality
pnpm run preview   # Preview production build locally

The project is automatically deployed to Netlify on every push to the main branch.

DC/
├── public/              # Static assets
│   └── _redirects       # Netlify redirect rules
├── src/
│   ├── components/      # React components
│   │   ├── ChromaGrid.jsx       # Animated grid background
│   │   ├── ColorBends.jsx       # 3D background with Three.js
│   │   ├── ContactInfo.jsx      # Contact information display
│   │   ├── DarkVeil.jsx         # Overlay effects
│   │   ├── Footer.jsx           # Site footer
│   │   ├── GoogleMap.jsx        # Google Maps integration
│   │   ├── LightRays.jsx        # Dynamic light effects
│   │   ├── Navbar.jsx           # Navigation bar
│   │   ├── PageHeader.jsx       # Page headers
│   │   ├── ProcessStep.jsx      # Process step components
│   │   ├── ServiceCard.jsx      # Service display cards
│   │   ├── Silk.jsx             # Animated textures
│   │   ├── SpotlightCard.jsx    # Interactive spotlight cards
│   │   ├── StatCard.jsx         # Statistical display cards
│   │   └── TeamMember.jsx       # Team member profiles
│   ├── pages/          # Page components
│   │   ├── About.jsx            # About page
│   │   ├── Contact.jsx          # Contact page
│   │   ├── Expertise.jsx        # Expertise page
│   │   ├── Government.jsx       # Government services page
│   │   └── Home.jsx             # Home page
│   ├── assets/         # Static assets
│   │   └── images/             # Image files
│   │       ├── david.png       # Team member photos
│   │       ├── john.jpg
│   │       ├── michael.png
│   │       └── sara.png
│   ├── lib/            # Utility libraries
│   │   └── utils.js            # Utility functions
│   ├── App.css         # Global CSS styles
│   ├── App.jsx         # Main App component
│   ├── main.jsx        # Application entry point
│   └── index.css       # Base styles
├── components.json     # Component configuration
├── eslint.config.js    # ESLint configuration
├── index.html          # HTML template
├── jsconfig.json       # JavaScript configuration
├── postcss.config.js   # PostCSS configuration
├── tailwind.config.js  # TailwindCSS configuration
├── vite.config.js      # Vite configuration
├── package.json        # Dependencies and scripts
├── pnpm-lock.yaml      # Lock file for pnpm
└── README.md           # Project documentation

• Modern React Architecture: Component-based design for better maintainability
• Advanced 3D Graphics: Three.js integration with dynamic backgrounds and visual effects
• Interactive Animations: GSAP-powered smooth animations and transitions
• Spotlight Effects: Interactive cards with dynamic spotlight hover effects
• Dynamic Backgrounds: Multiple animated background components (ColorBends, ChromaGrid, LightRays)
• Performance Optimized: Lazy loading, code splitting, and optimized assets
• Fully Responsive: Mobile-first design ensuring great UX on all devices
• Modern UI Components: Reusable component library with consistent design system
• Smooth Hover Effects: White glow effects and smooth transitions across interactive elements
• Google Maps Integration: Interactive maps for location display
• Accessible: WCAG compliance for inclusive user experience
• SEO Friendly: Proper meta tags and semantic HTML structure
• Custom CSS Utilities: TailwindCSS with custom animations and effects

This is an academic project for ITC4850. Team members should follow these guidelines:

1. Create a feature branch from main
2. Make your changes and commit with clear messages
3. Submit a pull request for review
4. Ensure all tests pass before merging
5. Update Jira tickets accordingly

feat: Add new feature
fix: Bug fix
docs: Documentation changes
style: Code style changes
refactor: Code refactoring
test: Test additions or changes
chore: Build process or auxiliary tool changes

Through this project, team members developed skills in:

• Full-stack web development with React
• Project management using Agile methodologies
• Team collaboration and version control
• Technical documentation and communication
• Problem-solving and critical thinking
• Quality assurance and testing strategies

This project is created for educational purposes as part of the ITC4850 capstone course at Northeastern University.

Course: ITC4850 - Information Technology Project
Institution: Northeastern University
Semester: Fall 2025
Instructor: Professor David Leussler
Methodology: Agile Project Management

For questions about this project, please contact the team through:

• GitHub Issues
• Jira Project Board

Northeastern University | Information Technology Program