Skip to content

Latest commit

 

History

History
111 lines (78 loc) · 3.97 KB

README.md

File metadata and controls

111 lines (78 loc) · 3.97 KB


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.


👉Try It Now!👈


2024-12-14.15-54-56.mp4

屏幕截图 2024-12-08 174144

屏幕截图 2024-12-08 174242

屏幕截图 2024-12-08 174316

屏幕截图 2024-12-08 174439

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