🚀 Forward with Her

Mentorship Program Website

An innovative mentorship platform that leverages cutting-edge 3D technology to connect female professionals in tech.
Features interactive 3D animations, bilingual support, and responsive design with modern user experience.
One-click FREE deployment of your mentorship community platform.

Live Website · GitHub Repository · Documentation · Issues

Share Project Repository

^{🌟 Empowering women in tech through innovative mentorship experiences. Built for the next generation of female tech leaders.}

📸 Project Screenshots

[!TIP] Experience the immersive 3D interface and responsive design that makes mentorship engaging and accessible.

Interactive 3D Scene with Section-based Animations

Responsive Design - Desktop and Mobile Experience

📱 More Screenshots

Auto-Scrolling Gallery with Hover Interactions

Program Schedule and Requirements Section

🎬 Demo Video

[!NOTE] Watch the interactive 3D animations and smooth section transitions in action.

2024-12-14.15-54-56.mp4

Interactive 3D scene responding to scroll and section changes

Tech Stack Badges:

Important

This project demonstrates modern full-stack development with 3D web technologies. It combines Next.js 15 with Three.js to provide immersive user experiences. Features include interactive 3D animations, bilingual support, responsive design, and auto-scrolling galleries.

📑 Table of Contents

🌟 Introduction

We are passionate developers creating next-generation mentorship solutions for women in tech. By adopting modern 3D web technologies and intuitive design principles, we aim to provide users with engaging, interactive experiences that make professional networking and mentorship more accessible and inspiring.

Whether you're a potential mentor, mentee, or program administrator, this platform provides an immersive environment to explore mentorship opportunities. The project combines cutting-edge technologies with thoughtful UX design to create memorable interactions.

Note

Node.js >= 18.0 required
Modern browser with WebGL support for 3D features
Responsive design optimized for desktop and mobile
Bilingual support (English/Chinese) included by default

	No installation required! Visit our live demo to experience the 3D interactions firsthand.
	Join our community! Connect with developers and contribute to empowering women in tech.

Tip

⭐ Star us to receive all release notifications from GitHub without delay!

⭐ Star History

✨ Key Features

`1` Interactive 3D Animations

Experience next-generation web 3D technology with our immersive scene that responds to user interactions and scroll position. Our innovative approach provides unprecedented visual engagement through advanced Three.js integration and Spline 3D models.

Dynamic 3D scene with section-responsive animations

Key capabilities include:

🚀 Real-time Rendering: Smooth 60fps 3D animations with WebGL
🔧 Scroll Integration: Scene transforms based on page scroll position
📱 Responsive 3D: Optimized rendering for both desktop and mobile devices
🛡️ Performance Optimized: Efficient loading and rendering pipeline

Tip

The 3D scene dynamically changes its animation style and camera position based on the current section being viewed, creating a cohesive narrative experience.

`2` Bilingual Support System

Revolutionary internationalization system that transforms how users interact with content. With our advanced React Context-based translation system, users can seamlessly switch between English and Chinese while maintaining consistent user experience.

Seamless Language Switching - English (left) and Chinese (right)

Available Languages:

English: Complete professional terminology with tech industry focus
Chinese: Native Chinese translations with cultural context adaptation

`*` Additional Features

Beyond the core features, this project includes:

💨 Auto-Scrolling Gallery: Smooth infinite scroll with pause-on-hover functionality
🌐 Multi-Section Layout: Organized content presentation with smooth navigation
🔒 Modern Design: Beautiful UI with custom color schemes and typography
💎 Responsive Layout: Mobile-first design with desktop optimization
🗣️ Real-time Updates: Dynamic content loading and smooth transitions
📊 Performance Optimized: Image optimization and lazy loading
🔌 Extensible: Modular component architecture for easy customization
📱 Touch Support: Mobile gesture support for gallery interactions

✨ More features are continuously being added as the project evolves.

🛠️ Tech Stack

Next.js 15

React 19

TypeScript 5

Three.js

Tailwind CSS

Vercel

Frontend Stack:

Framework: Next.js 15 with App Router for optimal performance
Language: TypeScript for type safety and better developer experience
Styling: Tailwind CSS with custom design system
3D Graphics: Three.js 0.149.0 + Spline Tool integration
State: React Context for language management
UI Components: Custom components with Lucide React icons

Development Tools:

Build Tool: Next.js built-in bundler with optimization
Code Quality: ESLint + TypeScript for code consistency
Version Control: Git with conventional commits
Package Manager: NPM with lockfile for dependency consistency

Tip

Each technology was carefully selected for production readiness, developer experience, and optimal performance for 3D web applications.

🏗️ Architecture

System Architecture

Tip

This architecture supports component-based development and modern React patterns, making it scalable and maintainable for team collaboration.

graph TB
    subgraph "Client Side"
        A[Next.js App] --> B[React Components]
        B --> C[3D Scene Layer]
        C --> D[Three.js Renderer]
        B --> E[UI Components]
        E --> F[Language Context]
    end
    
    subgraph "3D Pipeline"
        G[Spline Models] --> H[Three.js Scene]
        H --> I[WebGL Renderer]
        I --> J[Browser Canvas]
    end
    
    subgraph "State Management"
        K[Language Context]
        L[Scroll State]
        M[Animation State]
    end
    
    D --> G
    F --> K
    C --> L
    C --> M
    
    subgraph "Build & Deploy"
        N[TypeScript Compiler]
        O[Next.js Build]
        P[Vercel Deployment]
    end
    
    A --> N
    N --> O
    O --> P

Component Structure

Modular Component Architecture Overview

src/
├── app/                          # Next.js App Router
│   ├── layout.tsx               # Root layout with providers
│   ├── page.tsx                 # Main application page
│   ├── globals.css              # Global styles
│   └── favicon.ico              # App icon
├── components/                   # Reusable UI components
│   ├── AnimatedThreeScene.tsx   # 3D scene with animations
│   ├── AutoScrollGallery.tsx    # Infinite scroll gallery
│   ├── Navigation.tsx           # Responsive navigation
│   ├── LanguageSwitcher.tsx     # Language toggle
│   ├── Footer.tsx               # Site footer
│   └── DynamicHead.tsx          # Dynamic meta tags
├── contexts/                     # React contexts
│   └── LanguageContext.tsx      # i18n state management
├── config/                       # Configuration files
│   └── metadata.ts              # Site metadata
└── styles/                       # Additional styles

Data Flow Architecture

sequenceDiagram
    participant U as User
    participant N as Navigation
    participant P as Page
    participant T as ThreeScene
    participant G as Gallery
    participant L as LanguageContext
    
    U->>N: Scroll/Click
    N->>P: Update Current Section
    P->>T: Pass Section State
    T->>T: Animate 3D Scene
    U->>L: Switch Language
    L->>P: Update Translations
    P->>N: Re-render with New Language
    P->>G: Update Gallery Titles

⚡️ Performance

Note

Optimized for 3D web applications with efficient rendering and responsive design across devices.

Performance Metrics

Key Metrics:

⚡ 90+ Lighthouse Score for Performance and Accessibility
🚀 < 2s Initial page load with 3D assets
💨 60fps Smooth 3D animations
📊 < 5MB Total bundle size with 3D assets
🔄 Instant Language switching without reload

Performance Optimizations:

🎯 Dynamic Imports: 3D components loaded only when needed
📦 Code Splitting: Automatic route-based splitting
🖼️ Image Optimization: Next.js Image component with WebP support
🔄 3D Optimization: Efficient Three.js scene management with proper disposal

Note

Performance metrics measured using Lighthouse and real-world testing across different devices and network conditions.

🚀 Getting Started

Prerequisites

Important

Ensure you have the following installed:

Node.js 18.0+ (Download)
npm/yarn/pnpm package manager
Git (Download)
Modern browser with WebGL support

Quick Installation

1. Clone Repository

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

2. Install Dependencies

# Using npm
npm install

# Using yarn
yarn install

# Using pnpm (recommended)
pnpm install

3. Start Development Server

npm run dev

🎉 Success! Open http://localhost:3000 to view the application.

Environment Setup

The application works out-of-the-box without additional environment variables for basic functionality.

Development Mode

# Start development server with hot reload
npm run dev

# Build for production
npm run build

# Start production server
npm run start

# Run linting
npm run lint

🛳 Deployment

Important

The application is optimized for modern deployment platforms with built-in Next.js support.

`A` Cloud Deployment

Vercel (Recommended)

Manual Deployment:

# Install Vercel CLI
npm i -g vercel

# Deploy to Vercel
vercel --prod

Other Platforms:

Deploy with Netlify	Deploy with Railway

`B` Docker Deployment

# Build Docker image
docker build -t forward-with-her .

# Run container
docker run -p 3000:3000 forward-with-her

📖 Usage Guide

Basic Usage

Getting Started:

Explore Sections - Scroll through different content sections
Interactive 3D - Watch the 3D scene respond to your navigation
Language Toggle - Switch between English and Chinese
Gallery Interaction - Hover over gallery to pause auto-scroll

User Interface Walkthrough

Main interface with 3D scene and content sections

Customization

Adding New Languages:

// src/contexts/LanguageContext.tsx
export const translations = {
  en: { /* existing translations */ },
  zh: { /* existing translations */ },
  // Add new language
  es: {
    'nav.intro': 'Introducción',
    'nav.gallery': 'Galería',
    // ... other translations
  }
};

Customizing 3D Animations:

// src/components/AnimatedThreeScene.tsx
const sectionAnimations = {
  'introduction': {
    rotation: new THREE.Euler(0, Math.PI * 1.5, -Math.PI * 0.1),
    animation: {
      rotationSpeed: 0.001,
      swayAmount: 0.1,
      swaySpeed: 0.001
    }
  },
  // Add custom section animations
};

⌨️ Development

Local Development

Setup Development Environment:

# Clone and setup
git clone https://github.com/ChanMeng666/forward-with-her-mentorship-program.git
cd forward-with-her-mentorship-program
npm install

# Start development server
npm run dev

Development Scripts:

# Development
npm run dev          # Start dev server with hot reload
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint

# File watching and development
npm run dev -- --turbo  # Enable Turbopack (experimental)

Adding Features

Tip

Follow our component-based architecture when adding new features.

1. Create New Component:

// src/components/NewFeature.tsx
'use client';

import React from 'react';
import { useLanguage } from '@/contexts/LanguageContext';

export default function NewFeature() {
  const { t } = useLanguage();
  
  return (
    <div className="new-feature">
      <h2>{t('newFeature.title')}</h2>
      {/* Component implementation */}
    </div>
  );
}

2. Add Translations:

// src/contexts/LanguageContext.tsx
export const translations = {
  en: {
    // existing translations...
    'newFeature.title': 'New Feature',
  },
  zh: {
    // existing translations...
    'newFeature.title': '新功能',
  }
};

3. Integration Guidelines:

✅ Follow TypeScript best practices
✅ Add responsive design classes
✅ Include proper accessibility attributes
✅ Add loading states for async operations
✅ Follow existing naming conventions

🤝 Contributing

We welcome contributions! Here's how you can help improve this project:

Quick Start:

# Fork and clone the repository
git clone https://github.com/YOUR_USERNAME/forward-with-her-mentorship-program.git
cd forward-with-her-mentorship-program

# Create a new branch
git checkout -b feature/your-feature-name

# Make your changes and commit
git add .
git commit -m "feat: add amazing new feature"

# Push and create a Pull Request
git push origin feature/your-feature-name

Ways to Contribute:

🐛 Bug Reports: Help us identify and fix issues
💡 Feature Requests: Suggest new functionality
📚 Documentation: Improve our guides and examples
🎨 Design: Enhance UI/UX and accessibility
🌐 Translations: Add support for more languages
⚡ Performance: Optimize 3D rendering and loading

Code Style:

Use TypeScript for type safety
Follow existing component patterns
Add JSDoc comments for public APIs
Include translations for new text content
Test 3D features across different devices

📄 License

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

Open Source Benefits:

✅ Commercial use allowed
✅ Modification allowed
✅ Distribution allowed
✅ Private use allowed

👥 Team

_{Chan Meng}
Creator & Lead Developer

🙋‍♀️ Author

Chan Meng

LinkedIn: chanmeng666
GitHub: ChanMeng666
Email: chanmeng.dev@gmail.com
Portfolio: chanmeng.live

🚀 Building the Future of Tech Mentorship 🌟
Empowering women in technology through innovative web experiences

⭐ Star us on GitHub • 📖 Read the Documentation • 🐛 Report Issues • 💡 Request Features • 🤝 Contribute

Made with ❤️ for the Forward with Her community

</rewritten_file>

Name		Name	Last commit message	Last commit date
Latest commit History 38 Commits
.github		.github
.idea		.idea
public		public
src		src
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
LICENSE		LICENSE
README.md		README.md
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Uh oh!

License

ChanMeng666/forward-with-her-mentorship-program

Folders and files

Latest commit

History

Repository files navigation

🚀 Forward with Her

Mentorship Program Website

📸 Project Screenshots

🎬 Demo Video

TOC

🌟 Introduction

✨ Key Features

1 Interactive 3D Animations

2 Bilingual Support System

* Additional Features

🛠️ Tech Stack

🏗️ Architecture

System Architecture

Component Structure

Data Flow Architecture

⚡️ Performance

Performance Metrics

🚀 Getting Started

Prerequisites

Quick Installation

Environment Setup

Development Mode

🛳 Deployment

A Cloud Deployment

B Docker Deployment

📖 Usage Guide

Basic Usage

User Interface Walkthrough

Customization

⌨️ Development

Local Development

Adding Features

🤝 Contributing

📄 License

👥 Team

🙋‍♀️ Author

About

Topics

Resources

License

Code of conduct

Uh oh!

Stars

Watchers

Forks

Releases

Sponsor this project

Uh oh!

Packages 0

Uh oh!

Languages

`1` Interactive 3D Animations

`2` Bilingual Support System

`*` Additional Features

`A` Cloud Deployment

`B` Docker Deployment

Packages