3D Space Portfolio

Personal, immersive web portfolio with a 3D astronaut experience (React + Three.js) and an alternative One Page view. Built for my brand and learning — code is public for inspection, not intended as a template.

Overview

• Two modes: Immersive 3D and One Page (classic scroll).
• Cinematic transitions from space to section content with a 7‑state 3D navigation system.
• Mobile‑first: adaptive scaling, gesture handling, throttling, and progressive loading.

Visual Demo

Camera orbit and transitions (live demo):

gif-1.1.mp4

Inverted scroll mechanics (spatial navigation):

gif-2.1.mp4

Mobile‑optimized interface (touch / adaptive controls):

gif-3-mobile-online-video-cuttercom_dWzqu4PC.mp4

3D model workflow (Blender):

Architecture

3D Navigation State (Zustand)

idle → orbiting → zooming_in → entering → in_section → exiting → zooming_out → idle

Portfolio Mode State

The mode selector is driven by a small state machine in src/stores/navigation.store.ts:

modeStatus: selector → loading-3d → ready-3d → ready-onepage

• UI triggers only setPortfolioMode('3d'|'onepage') and show/hide of the selector.
• Store owns timeouts (5s fallback) and session intent (short‑lived in sessionStorage).

Performance Tactics

• Frameloop on demand, object reuse, throttled events, chunk preloading for 3D.
• Event listeners run only when the 3D scene is ready, reducing unnecessary work.

Getting Started

Prerequisites

• Node.js 18+ (recommended: 20+)
• npm 8+ or yarn 1.22+
• Modern browser with WebGL 2.0

Install & Run

git clone https://github.com/Joorgem/portfolio
cd portfolio
npm install

# Dev server (http://localhost:5173)
npm run dev

# Production build
npm run build

# Preview production build
npm run preview

Environment Variables

Create a .env from .env.example:

VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_PUBLIC_KEY=your_public_key
VITE_RECIPIENT_EMAIL=contato@jorgemolina.dev
VITE_RECIPIENT_NAME=Jorge

Notes:

• Restrict allowed origins in your EmailJS dashboard to prevent abuse.
• Consider adding a honeypot/Turnstile in the contact form for spam protection.

Tech Stack

• React 19, TypeScript 5.9, Vite 6
• Three.js, @react-three/fiber, @react-three/drei
• Zustand 5, Framer Motion 12, Tailwind CSS 4

License & Assets

• Code and content are covered by the terms in LICENSE.md.
• Third‑party logos and trademarks are property of their respective owners and are used here for descriptive purposes only.
• Portfolio images, models and media are not licensed for reuse.

Contact

• Live: https://jorgemolina.dev
• LinkedIn: https://linkedin.com/in/jorge-molina-539394197
• Email: contato@jorgemolina.dev

— Thanks for checking out my work! 🚀