Skip to content

Latest commit

 

History

History
87 lines (62 loc) · 2.4 KB

README.md

File metadata and controls

87 lines (62 loc) · 2.4 KB
Raw

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