Forward with Her Website

A modern, responsive website built for the Forward with Her Mentorship Program, featuring interactive 3D animations, bilingual support, and dynamic content presentation.

2024-12-14.15-54-56.mp4

Features

We've got all the essentials needed for a modern mentorship program website!

⚡ Interactive 3D Animations

Engaging 3D scene using Three.js that responds to scroll and section changes, providing an immersive user experience.

🌐 Bilingual Support

Complete English and Chinese language support with seamless switching capabilities through the Language Context.

📱 Responsive Design

Fully responsive layout optimized for various devices:

• Desktop: Full-width 3D model with side-by-side content
• Mobile: Stacked layout with optimized 3D model viewing
• Tablet: Adaptive layout based on screen width

🎨 Modern Design

• Custom color scheme with CSS variables
• Dark mode support
• Smooth transitions and animations
• Tailwind CSS utility classes for consistent styling

🔄 Auto-Scrolling Gallery

Dynamic image gallery with smooth auto-scrolling functionality and pause on hover.

🛠️ Tech Stack

• Next.js 15.0.2
• React 19.0.0
• TypeScript
• Three.js 0.149.0
• Tailwind CSS 3.4.1
• Spline Tool (for 3D models)

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/ChanMeng666/forward-with-her-mentorship-program.git
   cd forward-with-her-mentorship-program
   

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open http://localhost:3000 with your browser

🌐 Internationalization

The website supports both English and Chinese languages:

• Easy language switching via the navigation bar
• Consistent translations across all sections
• Dynamic meta content updates based on selected language

📦 Project Structure

src/
├── app/                 # Next.js app router
├── components/          # React components
├── config/             # Configuration files
├── contexts/           # React contexts
└── styles/             # Global styles

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check issues page.

📄 License

This project is licensed under the Apache-2.0 license - see the LICENSE file for details.

Author

Chan Meng

• LinkedIn: chanmeng666
• GitHub: ChanMeng666