Boston College Computer Science Society

Empowering the next generation of technologists and innovators

The official website for the Boston College Computer Science Society (BCCSS). Built with modern web technologies and featuring a unique terminal-inspired design that reflects our tech-forward community.

• 🖥️ Terminal-themed UI with retro aesthetics
• ⚡ Lightning-fast performance with Vite
• 📱 Fully responsive mobile-first design
• 🎨 Smooth animations and interactive elements
• 🔗 Clean URLs with React Router
• 🎯 Epic 404 page with glitch effects
• ♿ Accessible and semantic HTML
• 🚀 Auto-deployment to GitHub Pages

• Node.js (v18 or higher)
• npm or yarn
• Git

1. Clone the repository

   git clone https://github.com/yourusername/bccss.git
   cd bccss

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open your browser

   http://localhost:5173
   

bccss/
├── 📁 public/           # Static assets
│   ├── 📁 events/       # Event photos
│   ├── 📁 board/        # Board member photos
│   ├── 404.html         # GitHub Pages SPA support
│   └── CNAME            # Custom domain config
├── 📁 src/
│   ├── 📁 assets/       # Images and media
│   ├── 📁 components/   # Reusable components
│   │   ├── Navbar.tsx
│   │   ├── Footer.tsx
│   │   └── ImageCarousel.tsx
│   ├── 📁 pages/        # Page components
│   │   ├── Home.tsx
│   │   ├── About.tsx
│   │   ├── Join.tsx
│   │   ├── NotFound.tsx
│   │   └── index.ts
│   ├── main.tsx         # App entry point
│   └── index.css        # Global styles
├── package.json
├── tailwind.config.js
├── vite.config.ts
└── README.md

/* Primary Colors */
--primary-green: #00D4AA    /* BCCSS Brand Green */
--primary-teal: #00B4D8     /* Accent Teal */

/* Surface Colors */
--surface-black: #0A0A0A    /* Deep Black */
--surface-gray: #1A1A1A     /* Dark Gray */
--surface-border: #2A2A2A   /* Border Gray */

/* Text Colors */
--text-white: #FFFFFF       /* Primary Text */
--text-gray: #B0B0B0        /* Secondary Text */
--text-dim: #808080         /* Tertiary Text */

/* Accent Colors */
--accent-purple: #8B5CF6    /* Purple Accent */
--accent-pink: #EC4899      /* Pink Accent */

• Headers: Custom font stack with fallbacks
• Body: System font stack for optimal performance
• Code: Monospace for terminal elements

We welcome contributions from the BCCSS community! Here's how you can help:

Found a bug? Please create an issue with:

• Description of the problem
• Steps to reproduce
• Expected vs actual behavior
• Screenshots (if applicable)
• Browser/device information

Have an idea? We'd love to hear it! Include:

• Clear description of the feature
• Use case and benefits
• Mockups or examples (if applicable)

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Make your changes
4. Test thoroughly

   npm run lint    # Check code style
   npm run build   # Test build

5. Commit with clear messages

   git commit -m "feat: add amazing new feature"

6. Push and create a Pull Request

• ✅ Use TypeScript for type safety
• ✅ Follow ESLint rules
• ✅ Use functional components with hooks
• ✅ Keep components small and focused
• ✅ Use semantic HTML elements
• ✅ Add comments for complex logic
• ✅ Test on mobile devices

We use conventional commits:

• feat: New features
• fix: Bug fixes
• docs: Documentation updates
• style: Code style changes
• refactor: Code refactoring
• test: Adding tests
• chore: Maintenance tasks

The site is automatically deployed to bccss.co using GitHub Pages.

npm run deploy

This will:

1. Build the production version
2. Deploy to the gh-pages branch
3. Update the live site

• Add event registration system
• Implement member directory
• Add blog/news section

• Dark/light theme toggle
• Member login portal
• Event calendar integration
• Newsletter signup
• Job board integration

A: Create a new component in src/pages/, export it from src/pages/index.ts, and add a route in src/main.tsx.

A: Add photos to public/board/ and update the board member data in the About page component.

A: Add photos to public/events/ and update the images array in src/components/ImageCarousel.tsx.

A: GitHub Pages can take a few minutes to update. Try clearing your browser cache or checking in an incognito window.

Need help? Reach out to us:

• 💬 Slack: bccss.slack.com
• 📧 Email: Newsletter
• 📸 Instagram: @bccssociety
• 🔗 GitHub: github.com/bccss

This project is open source and available under the MIT License.

• BCCSS Board Members for their vision and leadership
• Boston College for supporting our community
• Contributors who help make this site amazing
• Open Source Community for the incredible tools we use