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.

✨ Features

• Interactive 3D Model: Dynamic 3D scene using Three.js that responds to scroll and section changes
• Bilingual Support: Complete English and Chinese language support with easy switching
• Responsive Design: Fully responsive layout optimized for both desktop and mobile devices
• Smooth Animations: Auto-scrolling gallery and smooth transitions between sections
• Modern Tech Stack: Built with Next.js 15, React, TypeScript, and Tailwind CSS

🛠️ Tech Stack

• Next.js 15.0.2
• React 19
• 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/3d-model-viewer.git
   cd 3d-model-viewer

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

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

📱 Responsive Design

The website is optimized for various screen sizes:

• 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

🌐 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

🎨 Styling

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

📦 Project Structure

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

🤝 Contributing

Feel free to submit issues and enhancement requests.

📄 License

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

Author

Chan Meng

• LinkedIn: chanmeng666
• GitHub: ChanMeng666