Redesign my personal portfolio page into a high-end, modern, dark cosmic/tech theme. Keep the layout: large hero with name and subtitle, an About section, and an Achievements cards row. Preserve the central glowing orb visual but make it crisper and layered. Use a dark background with soft animated stars and a subtle vertical parallax on scroll. Add micro-animations: slow orbital glow behind the hero text, gentle reveal fade-up for About copy, and hover lift + soft neon border on achievement cards. Use a sleek geometric sans-serif for headings and a legible rounded sans for body text. Color palette: deep space black (#0b0f14), indigo/violet gradient orb (from #2a2bf7 to #8b49ff), accent cyan (#00b7ff) and subtle lavender highlights (#c9b5ff). Add subtle glassmorphism cards with gentle blur and 0.6 opacity. Export assets for web (SVG for icons, 2x PNG for orb, CSS variables if possible). Deliver desktop + mobile responsive artboards. Include Lottie-ready micro-interactions for orb glow and card hover. Tone: confident, technical, creative
I've completed the redesign with a high-end cosmic/tech theme featuring the exact color palette you requested (deep space black #0b0f14, indigo/violet gradient #2a2bf7 to #8b49ff, cyan accent #00b7ff, and lavender highlights #c9b5ff). The orb is now crisper with three layered orbital rings, enhanced gradients, and precise 6s pulse/35s rotation timing. Added Space Grotesk for geometric headings and Inter for rounded body text, glassmorphism cards with 0.6 opacity that scale to 1.03 on hover with soft neon borders, fade-up scroll reveals with 550ms smooth easing, and a slow orbital glow behind the hero text for that confident, technical, creative tone.
Fixed the export mismatch by changing from a default export to a named export in the Globe component.
I found the issue. In the About and Achievements components, the cleanup function in useEffect is trying to call observer.unobserve(sectionRef.current) but sectionRef.current might be null at cleanup time. I need to store the ref value in the effect.
Fixed the "Cannot convert object to primitive value" error by storing the ref value in a variable before the cleanup function. This prevents issues when the ref becomes null during component unmount and the cleanup tries to access it.