# Steven Yodice-Smith — Portfolio A custom personal portfolio built around an interactive Destiny-style star map. Each planet is a clickable destination that triggers a masked transition into a section of the site. ## Stack - **React 18** + **Vite** — SPA, fast builds - **react-router-dom v6** — routing - **framer-motion** — page + transition orchestration - **three / @react-three/fiber / @react-three/drei** — WebGL planet rendering (textured spheres, directional lighting, Fresnel atmosphere glow) - Pure-CSS glitch headline (no JS animation loop) ## Credits - **Planet textures** © [Solar System Scope](https://www.solarsystemscope.com/textures/), licensed **CC BY 4.0**, derived from NASA imagery. Used for the WebGL planets on the landing Director (Mercury, Mars, Moon, and an icy body for "Europa"). - **Experience-page dusk parallax layers** — ["parallax mountain pack" / Mountain at Dusk](https://opengameart.org/content/mountain-at-dusk-background) by **ansimuz** (OpenGameArt, **CC0**). - **Experience-page rider sprite** — from the [Sideview Sci-Fi collection](https://opengameart.org/content/sideview-sci-fi-patreon-collection) by **ansimuz** (OpenGameArt, **CC0**). The supply pods and Tek Teleporter pad are original faceted-SVG recreations of ARK's prop silhouettes. - **Experience-page Utahraptor run cycle** — frames from the rendered preview of [2D Raptor Running](https://opengameart.org/content/2d-raptor-running-fbx-animation): animation by **kestrelm**, source artwork by **Fred Wierum** (**CC BY-SA 4.0**, via OpenGameArt). The assembled sprite strip (`public/ark/raptor-run.png`) is a derivative and remains available under CC BY-SA 4.0. - All rendering, shaders, and HUD design are original work. No Bungie / Destiny or Wildcard / ARK artwork is used — both themed sections are original homages. ## Architecture ``` src/ main.jsx App entry; wraps in App.jsx Routes + provider + overlay composition context/ TransitionContext.jsx The masked "fly to destination" state machine data/ destinations.js SINGLE SOURCE OF TRUTH — planets AND routes projects.js Project showcase content components/ NavBar.jsx Header: name + glitch one-liner + nav GlitchHeadline.jsx Cycling phrases with CSS glitch on swap PlanetMap.jsx Landing star map Planet.jsx One interactive, accessible planet button TransitionOverlay.jsx Masking layer — DROP YOUR DESTINY VIDEO HERE pages/ Landing / Dashboard / About / Projects / Experience PageShell.jsx Shared page layout + entrance animation ``` **One config drives everything.** Add an object to `src/data/destinations.js` and you get a new clickable planet *and* a new route. Positions are percentages of the background art, so planets track the image. ## Customizing - **Background art:** the map renders in-app by default. Drop a 16:9 image at `public/cosmos.jpg` and it's auto-detected as the backdrop, with the planets becoming invisible click-hotspots over it (see `public/README-assets.md`). - **Planet positions / sections:** edit `src/data/destinations.js`. - **Glitch phrases:** edit `DEFAULT_PHRASES` in `GlitchHeadline.jsx` (or pass a `phrases` prop). - **Custom transition video:** see the clearly marked placeholder block in `src/components/TransitionOverlay.jsx`. Per-destination clips can be named by `destination.id` (e.g. `public/transitions/about.webm`). Tune timing via `COVER_MS` / `HOLD_MS` in `TransitionContext.jsx`. ## Local development ```bash npm install npm run dev # http://localhost:5173 ``` ```bash npm run build # production build → dist/ npm run preview # serve the build locally ``` ## Deploy to Vercel This is a static SPA. `vercel.json` is included with an SPA rewrite so deep links (e.g. `/projects`) resolve to the app. **Option A — Git (recommended):** 1. Push this repo to GitHub/GitLab/Bitbucket. 2. In Vercel, **New Project → Import** the repo. 3. Framework preset auto-detects **Vite**. Defaults are correct: - Build command: `npm run build` - Output directory: `dist` 4. Deploy. Every push to the default branch ships to production. **Option B — CLI:** ```bash npm i -g vercel vercel # preview deploy vercel --prod # production deploy ``` No environment variables are required. ## Accessibility - Planets are real ``s with `aria-label`s — keyboard + screen-reader navigable. - Visible focus rings; the glitch and transitions honor `prefers-reduced-motion` (instant navigation, no flashing). # personal_website