import { Canvas } from "@react-three/fiber"; import { OrbitControls, Text, Sphere, MeshDistortMaterial } from "@react-three/drei"; import { useRef, useState } from "react"; import { useFrame } from "@react-three/fiber"; import { Mesh } from "three"; import { useNavigate } from "react-router-dom"; import { Button } from "@/components/ui/button"; import { ArrowLeft, Home } from "lucide-react"; interface Planet { name: string; color: string; position: [number, number, number]; route: string; description: string; } const planets: Planet[] = [ { name: "Creative Works", color: "#8B5CF6", position: [-4, 2, 0], route: "/portfolio/creative", description: "Digital art & design projects" }, { name: "Development", color: "#06B6D4", position: [4, -1, 0], route: "/portfolio/development", description: "Web & software development" }, { name: "Photography", color: "#F59E0B", position: [0, 3, -2], route: "/portfolio/photography", description: "Visual storytelling & captures" }, { name: "Writing", color: "#EF4444", position: [-2, -2, 1], route: "/portfolio/writing", description: "Articles, stories & content" }, { name: "Music", color: "#10B981", position: [3, 2, 2], route: "/portfolio/music", description: "Compositions & audio works" } ]; function PlanetSphere({ planet, onClick, isHovered, onHover }: { planet: Planet; onClick: () => void; isHovered: boolean; onHover: (hover: boolean) => void; }) { const meshRef = useRef(null); useFrame((state) => { if (meshRef.current) { meshRef.current.rotation.x = state.clock.elapsedTime * 0.2; meshRef.current.rotation.y = state.clock.elapsedTime * 0.3; // Gentle floating animation meshRef.current.position.y = planet.position[1] + Math.sin(state.clock.elapsedTime + planet.position[0]) * 0.1; } }); return ( onHover(true)} onPointerOut={() => onHover(false)} scale={isHovered ? 1.2 : 1} > {/* Planet label */} {planet.name} {isHovered && ( {planet.description} )} ); } export default function Cosmos() { const navigate = useNavigate(); const [hoveredPlanet, setHoveredPlanet] = useState(null); const handlePlanetClick = (route: string) => { navigate(route); }; return (

{/* Navigation */}

{/* Title */}

The Cosmos

Click planets to explore

{/* Instructions */}

Use mouse to orbit • Click planets to enter their portfolio • Scroll to zoom Touch to orbit • Tap planets to explore

{/* 3D Scene */}

{/* Floating cosmic elements */}

); }