Merge pull request #79 from ZackGoldblum/starfield-revamp

Create /stars page (no UI)

Author: ZackGoldblum

src/App.jsx

@@ -6,7 +6,7 @@ import Research from './pages/Research';
 import Projects from './pages/Projects';
 import Bookshelf from './pages/Bookshelf';
 import About from './pages/About';
-import Space from './pages/Space';
+import Stars from './pages/Stars';
 import NotFound from './pages/NotFound';
 import Starfield from './components/Starfield';
 import './index.css';
@@ -16,7 +16,7 @@ const Router = BrowserRouter;
 function App() {
     function AppContent() {
         const location = useLocation();
-        const isSpacePage = location.pathname === '/space';
+        const isStarsPage = location.pathname === '/stars';
         const [uiVisible, setUiVisible] = useState(false);
 
         // Handle skybox loaded - trigger UI fade in
@@ -29,27 +29,33 @@ function App() {
         return (
             <>
                 <Starfield onSkyboxLoaded={handleSkyboxLoaded} uiVisible={uiVisible} />
-                <div
-                    style={{
-                        position: 'relative',
-                        zIndex: 1,
-                        opacity: uiVisible ? 1 : 0,
-                        transition: 'opacity 0.5s ease-in-out'
-                    }}
-                >
-                    {!isSpacePage && <Header />}
-                    <main>
-                        <Routes>
-                            <Route path="/" element={<Home />} />
-                            <Route path="/research" element={<Research />} />
-                            <Route path="/projects" element={<Projects />} />
-                            <Route path="/bookshelf" element={<Bookshelf />} />
-                            <Route path="/about" element={<About />} />
-                            <Route path="/space" element={<Space />} />
-                            <Route path="*" element={<NotFound />} />
-                        </Routes>
-                    </main>
-                </div>
+                {!isStarsPage && (
+                    <div
+                        style={{
+                            position: 'relative',
+                            zIndex: 1,
+                            opacity: uiVisible ? 1 : 0,
+                            transition: 'opacity 0.5s ease-in-out'
+                        }}
+                    >
+                        <Header />
+                        <main>
+                            <Routes>
+                                <Route path="/" element={<Home />} />
+                                <Route path="/research" element={<Research />} />
+                                <Route path="/projects" element={<Projects />} />
+                                <Route path="/bookshelf" element={<Bookshelf />} />
+                                <Route path="/about" element={<About />} />
+                                <Route path="*" element={<NotFound />} />
+                            </Routes>
+                        </main>
+                    </div>
+                )}
+                {isStarsPage && (
+                    <Routes>
+                        <Route path="/stars" element={<Stars />} />
+                    </Routes>
+                )}
             </>
         );
     }

src/components/Header.jsx

@@ -3,28 +3,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGithub, faLinkedin, faXTwitter, faGoogleScholar } from '@fortawesome/free-brands-svg-icons';
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 
-// function Header({ isPaused, togglePause }) {
 function Header() {
     const location = useLocation();
 
     return (
         <header style={{ margin: 0, padding: 0 }}>
-            {/* <div id="buttonsContainer">
-                <div id="starsButtonContainer">
-                    <Link to="/space">
-                        <img src="/buttons/stars.webp" id="starsButton" alt="Stars button" />
-                    </Link>
-                </div>
-                <div id="playpauseButtonContainer">
-                    <img
-                        src={isPaused ? "/buttons/play.webp" : "/buttons/pause.webp"}
-                        id="playpauseButton"
-                        alt="Play/pause button"
-                        onClick={togglePause}
-                        style={{ cursor: 'pointer' }}
-                    />
-                </div>
-            </div> */}
             <h1>
                 <Link to="/" style={{ color: 'var(--blue_color)', textDecoration: 'none' }}>Zack Goldblum</Link>
                 <span style={{ marginLeft: '20px' }}>
@@ -60,9 +43,4 @@ function Header() {
     );
 }
 
-// Header.propTypes = {
-//   isPaused: PropTypes.bool,
-//   togglePause: PropTypes.func
-// };
-
 export default Header;

src/components/Starfield.jsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import * as THREE from 'three';
 
-const Starfield = ({ onSkyboxLoaded = () => { }, uiVisible = false }) => {
+const Starfield = ({ onSkyboxLoaded = () => { }, uiVisible = false, disableScrollMotion = false }) => {
     // Three.js scene references
     const mountRef = useRef(null);
     const sceneRef = useRef(null);
@@ -318,7 +318,9 @@ const Starfield = ({ onSkyboxLoaded = () => { }, uiVisible = false }) => {
 
             // Add event listeners
             window.addEventListener('resize', handleResize);
-            window.addEventListener('scroll', handleScroll, { passive: true });
+            if (!disableScrollMotion) {
+                window.addEventListener('scroll', handleScroll, { passive: true });
+            }
             document.addEventListener('visibilitychange', handleVisibilityChange);
 
             // Initialize scroll tracking
@@ -332,7 +334,9 @@ const Starfield = ({ onSkyboxLoaded = () => { }, uiVisible = false }) => {
             // Cleanup function
             return () => {
                 window.removeEventListener('resize', handleResize);
-                window.removeEventListener('scroll', handleScroll);
+                if (!disableScrollMotion) {
+                    window.removeEventListener('scroll', handleScroll);
+                }
                 document.removeEventListener('visibilitychange', handleVisibilityChange);
                 cancelAnimationFrame(animationFrameRef.current);
 
@@ -382,8 +386,13 @@ const Starfield = ({ onSkyboxLoaded = () => { }, uiVisible = false }) => {
             scrollVelocityRef.current *= ANIMATION_CONFIG.velocityDecay;
 
             // Convert scroll velocity to speed multiplier (restore original values)
-            const velocityFactor = Math.min(scrollVelocityRef.current / ANIMATION_CONFIG.maxVelocity, 1.0);
-            const scrollAmplification = 2.5 + velocityFactor * 40;
+            let velocityFactor = 0;
+            let scrollAmplification = 2.5;
+
+            if (!disableScrollMotion) {
+                velocityFactor = Math.min(scrollVelocityRef.current / ANIMATION_CONFIG.maxVelocity, 1.0);
+                scrollAmplification = 2.5 + velocityFactor * 40;
+            }
 
             starLayersRef.current.forEach((starLayer) => {
                 if (starLayer && starLayer.userData) {
@@ -398,7 +407,7 @@ const Starfield = ({ onSkyboxLoaded = () => { }, uiVisible = false }) => {
                     // Only animate star movement if animation is enabled
                     if (starsAnimatingRef.current && starLayer.material.opacity > 0) {
                         // Flying through space motion - stars move toward camera (restore original speed)
-                        const baseFlightSpeed = 0.5;
+                        const baseFlightSpeed = 0.7;
                         const flightSpeed = baseFlightSpeed * scrollAmplification;
 
                         // Update star positions
@@ -455,7 +464,7 @@ const Starfield = ({ onSkyboxLoaded = () => { }, uiVisible = false }) => {
 
         // Return cleanup function
         return cleanup;
-    }, []); // Empty dependency array - only run once
+    }, [disableScrollMotion]); // Include disableScrollMotion dependency
 
     return (
         <div
@@ -476,7 +485,8 @@ const Starfield = ({ onSkyboxLoaded = () => { }, uiVisible = false }) => {
 // PropTypes validation
 Starfield.propTypes = {
     onSkyboxLoaded: PropTypes.func,
-    uiVisible: PropTypes.bool
+    uiVisible: PropTypes.bool,
+    disableScrollMotion: PropTypes.bool
 };
 
 export default Starfield;

src/pages/Space.jsx

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import Starfield from '../components/Starfield';
+
+const Stars = () => {
+    const [uiVisible, setUiVisible] = useState(false);
+
+    // Handle skybox loaded - but we don't need to show any UI
+    const handleSkyboxLoaded = () => {
+        // No UI to show, just keep stars visible
+        setUiVisible(true);
+    };
+
+    return (
+        <>
+            <Starfield onSkyboxLoaded={handleSkyboxLoaded} uiVisible={uiVisible} disableScrollMotion={true} />
+            {/* No additional UI elements - just the starfield */}
+        </>
+    );
+};
+
+export default Stars;