Mobile UX improvements and touch support

- Swipe left/right to flip cards on mobile
- Larger NEXT/PREV buttons for touch targets
- Adjusted ring and orb sizes
- Increased lock duration for mobile touch events
- Swipe hint text on mobile

Author: bit-nk

src/App.jsx

@@ -39,12 +39,12 @@ export default function App() {
   const fov = 65 - vs.vw * 15
 
   const toggleSection = useCallback((key) => {
-    closeLock.current = Date.now() + 800
+    closeLock.current = Date.now() + 1200
     setOpenSection((prev) => (prev === key ? null : key))
   }, [])
 
   const lockClose = useCallback(() => {
-    closeLock.current = Date.now() + 800
+    closeLock.current = Date.now() + 1200
   }, [])
 
   const closeSection = useCallback(() => {}, [])

src/components/canvas/Scene.jsx

@@ -50,7 +50,7 @@ export default function Scene({ mouseParallax, hoveredSection, openSection, togg
       {t > 0.5 && <CircuitLines position={[-3, 0, -6]} color="#06b6d4" />}
 
       {/* Energy rings — positions interpolated */}
-      <EnergyRing position={[lerp(0.8, 4, t), lerp(3, 1.5, t), lerp(5, 2, t)]} radius={lerp(0.6, 1.2, t)} color="#818cf8" speed={0.3} />
+      <EnergyRing position={[lerp(0.8, 4, t), lerp(3, 1.5, t), lerp(5, 2, t)]} radius={lerp(0.75, 1.2, t)} color="#818cf8" speed={0.3} />
       <EnergyRing position={[lerp(-0.8, -5, t), lerp(3, 1.5, t), lerp(5, 3, t)]} radius={lerp(0.6, 1.0, t)} color="#06b6d4" speed={0.25} />
       {openSection !== 'contact' && (
         <EnergyRing position={[0, lerp(1.2, 1.5, t), lerp(8, 7, t)]} radius={lerp(0.5, 0.9, t)} color="#a78bfa" speed={0.2} />

src/components/sections/ContactSection.jsx

@@ -120,7 +120,7 @@ export default function ContactSection({ hoveredSection, openSection, toggleSect
             onPointerLeave={() => { isHovered.current = false; hoveredSection.current = 'none'; document.body.style.cursor = 'auto' }}
             onClick={(e) => { e.stopPropagation(); toggleSection('contact') }}
           >
-            <icosahedronGeometry args={[0.3, 2]} />
+            <icosahedronGeometry args={[0.25, 2]} />
             <meshStandardMaterial color="#a78bfa" emissive="#a78bfa" emissiveIntensity={1.5} wireframe transparent opacity={0.7} toneMapped={false} />
           </mesh>
           <mesh visible={false}

src/components/sections/EducationSection.jsx

@@ -51,7 +51,7 @@ function PanelContent({ data, index, total, onNext, onPrev }) {
         </div>
         <div className="holo-footer">
           <button className={`holo-btn ${index <= 0 ? 'disabled' : ''}`} onClick={onPrev} disabled={index <= 0}>◀ PREV</button>
-          <span className="holo-scroll-label"><span className="scroll-icon">⟳</span>scroll to flip</span>
+          <span className="holo-scroll-label"><span className="scroll-icon">⟳</span><span className="desktop-hint">scroll to flip</span><span className="mobile-hint">swipe to flip</span></span>
           <button className={`holo-btn ${index >= total - 1 ? 'disabled' : ''}`} onClick={onNext} disabled={index >= total - 1}>NEXT ▶</button>
         </div>
       </div>
@@ -152,11 +152,42 @@ export default function EducationSection({ hoveredSection, openSection, toggleSe
     else if (e.deltaY < -15) goPrev()
   }, [isOpen, goNext, goPrev, peelData])
 
+  const touchStart = useRef({ x: 0, y: 0 })
+  const onTouchStart = useCallback((e) => {
+    if (!isOpen) return
+    touchStart.current = { x: e.touches[0].clientX, y: e.touches[0].clientY }
+  }, [isOpen])
+
+  const onTouchEnd = useCallback((e) => {
+    if (!isOpen || scrollCooldown.current || peelData) return
+    const dx = e.changedTouches[0].clientX - touchStart.current.x
+    // Swipe right = next (opposite of experience)
+    if (dx > 40) {
+      scrollCooldown.current = true
+      setTimeout(() => { scrollCooldown.current = false }, 400)
+      lockClose()
+      goNext()
+    }
+    // Swipe left = prev
+    else if (dx < -40) {
+      scrollCooldown.current = true
+      setTimeout(() => { scrollCooldown.current = false }, 400)
+      lockClose()
+      goPrev()
+    }
+  }, [isOpen, goNext, goPrev, peelData, lockClose])
+
   useEffect(() => {
     if (!isOpen) return
     window.addEventListener('wheel', onWheel)
-    return () => window.removeEventListener('wheel', onWheel)
-  }, [isOpen, onWheel])
+    window.addEventListener('touchstart', onTouchStart, { passive: true })
+    window.addEventListener('touchend', onTouchEnd)
+    return () => {
+      window.removeEventListener('wheel', onWheel)
+      window.removeEventListener('touchstart', onTouchStart)
+      window.removeEventListener('touchend', onTouchEnd)
+    }
+  }, [isOpen, onWheel, onTouchStart, onTouchEnd])
 
   const currentData = education[currentIndex]
   const cardsAhead = education.length - 1 - currentIndex

src/components/sections/ExperienceSection.jsx

@@ -53,7 +53,7 @@ function PanelContent({ data, index, total, onNext, onPrev }) {
         </div>
         <div className="holo-footer">
           <button className={`holo-btn ${index <= 0 ? 'disabled' : ''}`} onClick={onPrev} disabled={index <= 0}>◀ PREV</button>
-          <span className="holo-scroll-label"><span className="scroll-icon">⟳</span>scroll to flip</span>
+          <span className="holo-scroll-label"><span className="scroll-icon">⟳</span><span className="desktop-hint">scroll to flip</span><span className="mobile-hint">swipe to flip</span></span>
           <button className={`holo-btn ${index >= total - 1 ? 'disabled' : ''}`} onClick={onNext} disabled={index >= total - 1}>NEXT ▶</button>
         </div>
       </div>
@@ -158,11 +158,43 @@ export default function ExperienceSection({ hoveredSection, openSection, toggleS
     else if (e.deltaY < -15) goPrev()
   }, [isOpen, goNext, goPrev, peelData])
 
+  // Touch swipe support
+  const touchStart = useRef({ x: 0, y: 0 })
+  const onTouchStart = useCallback((e) => {
+    if (!isOpen) return
+    touchStart.current = { x: e.touches[0].clientX, y: e.touches[0].clientY }
+  }, [isOpen])
+
+  const onTouchEnd = useCallback((e) => {
+    if (!isOpen || scrollCooldown.current || peelData) return
+    const dx = e.changedTouches[0].clientX - touchStart.current.x
+    // Swipe left = next
+    if (dx < -40) {
+      scrollCooldown.current = true
+      setTimeout(() => { scrollCooldown.current = false }, 400)
+      lockClose()
+      goNext()
+    }
+    // Swipe right = prev
+    else if (dx > 40) {
+      scrollCooldown.current = true
+      setTimeout(() => { scrollCooldown.current = false }, 400)
+      lockClose()
+      goPrev()
+    }
+  }, [isOpen, goNext, goPrev, peelData, lockClose])
+
   useEffect(() => {
     if (!isOpen) return
     window.addEventListener('wheel', onWheel)
-    return () => window.removeEventListener('wheel', onWheel)
-  }, [isOpen, onWheel])
+    window.addEventListener('touchstart', onTouchStart, { passive: true })
+    window.addEventListener('touchend', onTouchEnd)
+    return () => {
+      window.removeEventListener('wheel', onWheel)
+      window.removeEventListener('touchstart', onTouchStart)
+      window.removeEventListener('touchend', onTouchEnd)
+    }
+  }, [isOpen, onWheel, onTouchStart, onTouchEnd])
 
   const currentData = experience[currentIndex]
   const cardsAhead = experience.length - 1 - currentIndex

src/styles/global.css

@@ -334,6 +334,14 @@ html, body, #root {
   animation: scrollBounce 1.5s ease-in-out infinite;
 }
 
+.mobile-hint { display: none; }
+.desktop-hint { display: inline; }
+
+@media (max-width: 768px) {
+  .mobile-hint { display: inline; }
+  .desktop-hint { display: none; }
+}
+
 @keyframes scrollBounce {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-2px); }
@@ -437,8 +445,9 @@ html, body, #root {
   .holo-company, .holo-school { font-size: 11px; }
   .holo-details li { font-size: 10px; line-height: 1.5; }
   .holo-meta, .holo-project { font-size: 9px; }
-  .holo-btn { font-size: 7px; padding: 3px 7px; }
-  .holo-scroll-label { font-size: 7px; }
+  .holo-btn { font-size: 10px; padding: 8px 14px; min-height: 32px; min-width: 60px; }
+  .holo-scroll-label { font-size: 8px; }
+  .holo-footer { margin-top: 14px; padding-top: 10px; }
 
   .hotspot-label { font-size: 9px; letter-spacing: 0.15em; }