A high-end, 3D-driven personal portfolio for Haryn Murillo, showcasing 28 years of visual communications, web development, and AI engineering expertise.
This is a modern single-page application (SPA) built with React 19, Three.js (React Three Fiber), Tailwind CSS, GSAP, and Vite. It features interactive 3D components, immersive animations, and dynamic content management.
- Framework: React 19
- 3D/WebGL: Three.js, React Three Fiber (R3F), Drei
- Styling: Tailwind CSS 4 (Theme-driven)
- Animation: GSAP, Framer Motion
- Tooling: Vite
- Asset Optimization: Draco Compression
The application follows a component-based design pattern, separating concerns between 3D Canvas elements and DOM-based section components.
src/App.jsx: Main Layout & State orchestration.src/components/canvas/: Interactive 3D components (Earth, Stars, Ball).src/components/: DOM-based UI sections (Navbar, Hero, About, Tech, Works, Feedbacks).src/utils/: Global animation utilities (motion.ts) and data configuration (constants.ts).
- Model Loading: Efficient asset loading using
useGLTFwith preloading for critical 3D assets. - Particle Optimization: Intelligent particle generation in
Stars.tsxto prevent GPU overhead on mobile devices. - Responsive Scaling: Conditional rendering and viewport-aware scaling ensure a smooth experience across different devices.
- Build:
npm run build - Preview:
npm run preview - Lint:
npm run lint
This project is managed following the Conductor methodology for feature implementation. Please refer to conductor/index.md for current development tracks.
Updated: 2026-03-23