Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chanmeng666/forward-with-her-mentorship-program
A modern, responsive website featuring interactive 3D animations and bilingual support (EN/CN) for the Forward with Her Mentorship Program. Built with Next.js 15, React 19, and Three.js.
https://github.com/chanmeng666/forward-with-her-mentorship-program
3d-animation i18n mentorship-program nextjs react responsive-design tailwindcss threejs typescript
Last synced: 22 days ago
JSON representation
A modern, responsive website featuring interactive 3D animations and bilingual support (EN/CN) for the Forward with Her Mentorship Program. Built with Next.js 15, React 19, and Three.js.
- Host: GitHub
- URL: https://github.com/chanmeng666/forward-with-her-mentorship-program
- Owner: ChanMeng666
- License: apache-2.0
- Created: 2024-11-07T06:02:44.000Z (about 2 months ago)
- Default Branch: master
- Last Pushed: 2024-12-07T11:35:13.000Z (27 days ago)
- Last Synced: 2024-12-07T12:20:34.555Z (27 days ago)
- Topics: 3d-animation, i18n, mentorship-program, nextjs, react, responsive-design, tailwindcss, threejs, typescript
- Language: TypeScript
- Homepage: https://forward-with-her.vercel.app
- Size: 12.1 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
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
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**
```bash
git clone https://github.com/ChanMeng666/forward-with-her-mentorship-program.git
cd forward-with-her-mentorship-program
2. **Install dependencies**
```bash
npm install
```
3. **Run the development server**
```bash
npm run dev
```
4. **Open [http://localhost:3000](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](https://github.com/ChanMeng666/3d-model-viewer/issues).
## 📄 License
This project is licensed under the Apache-2.0 license - see the [LICENSE](LICENSE) file for details.
## Author
**Chan Meng**
- LinkedIn: [chanmeng666](https://www.linkedin.com/in/chanmeng666/)
- GitHub: [ChanMeng666](https://github.com/ChanMeng666)