A high-performance, interactive 3D web experience built for the 2026 WeCoded Gender Equity Challenge. This project utilizes immersive technology to dismantle professional stereotypes, demonstrating that talent, intellect, and courage have no gender.
The "Gender Equity" project is an interactive gallery of 10 essential professions. By placing male and female avatars side-by-side in identical professional gear—ranging from Software Engineering to Firefighting—the application visually reinforces that professional capability is a universal human trait.
Each profession features a detailed narrative and historical icons (both male and female) who pioneered their respective fields, bridging the gap between historical legacy and future potential.
Screen.Recording.2026-03-27.at.6.mp4
This project leverages a "production-ready" modern web stack for maximum performance and visual fidelity:
- Framework: Next.js 16.2 (App Router)
- 3D Engine: Three.js via @react-three/fiber & @react-three/drei
- State Management: Redux Toolkit
- Animations: Framer Motion
- Styling: Tailwind CSS 4.0
- Type Safety: TypeScript
- Icons: Lucide React
Using Three.js, the app renders high-quality male and female avatars. Users can interact with the scene, observing how professional identity is uniform regardless of gender.
A curated list of 10 professions (Doctor, Engineer, Pilot, etc.) provides:
- Empowering Descriptions: Focused on skill, grit, and intellect.
- Historical Context: Spotlighting male and female trail-blazers like Ada Lovelace and Alan Turing.
Integrated with Framer Motion for seamless transitions between profession data and Lucide React for a clean, modern interface.
Built with Redux Toolkit to manage global states (like the currently selected profession/outfit) and TypeScript for robust, error-free development.
├── public/ # Static assets (3D .glb models, textures, branding)
├── src/
│ ├── app/ # Next.js App Router (Layouts and Main Entry)
│ ├── components/ # React components (UI & R3F Canvas logic)
│ ├── constants/ # Global constants and configuration strings
│ ├── contexts/ # React Contexts for local state/theme management
│ ├── json/ # Profession metadata and descriptive content
│ ├── pages/ # (If applicable) Legacy routes or specific API routes
│ ├── store/ # Redux Toolkit (Slices, Store configuration)
│ └── types/ # TypeScript interfaces and type definitions
├── next.config.ts # next configuration
├── tsconfig.json # ts configuration
└── package.json # Project dependencies and scripts
First, install the dependencies:
npm install
# or
yarn installThen, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
The application showcases 10 diverse fields where professional excellence is defined by skill and dedication, not gender.
| Profession | Key Highlight | Male & Female Pioneers |
|---|---|---|
| Journalist | Investigating complex issues and shaping the public narrative. | James Baldwin & Nellie Bly |
| Farmer | Mastering agricultural science and global food security. | George Washington Carver & Karen Washington |
| Firefighter | Bravery, rapid response, and specialized technical rescue. | Patrick Hardison & Molly Williams |
| Software Engineer | Architecture of digital systems and logical problem-solving. | Alan Turing & Ada Lovelace |
| Mechanic | Technical mastery of machinery and precision engineering. | Henry Ford & Patrice Banks |
| Nurse | Clinical expertise and advanced medical patient advocacy. | James Derham & Florence Nightingale |
| Pilot | Technical precision and navigation of complex flight systems. | Charles Lindbergh & Amelia Earhart |
| Police Officer | Public safety through de-escalation and high emotional intelligence. | August Vollmer & Alice Stebbins Wells |
| Retail Sales | Interpersonal communication and global business operations. | Marshall Field & Madam C.J. Walker |
| Doctor | Leadership in medical science and the rigorous art of healing. | Dr. Jonas Salk & Dr. Elizabeth Blackwell |
This project was developed for the 2026 WeCoded Challenge. Feedback and suggestions to improve the 3D models or expand the profession list are welcome!
Designed & Developed by UsmanDevCraft