diff --git a/README.md b/README.md index b1f1d19..f83fdc2 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ npm run lint - `profile.ts`: name, title, stance, dossier fields, links, map lock. - `dossier.ts`: the five About files. - `projects.ts`: projects, statuses, node-map positions, featured nodes. -- `public/profile/pfp.svg`: placeholder profile picture. Replace this file (or point `profile.pfp` at a new one). +- `public/profile/Mono.png`: profile picture (the favicon is a copy at `src/app/icon.png`). Replace the file, or point `profile.pfp` at a new one. - `public/terrain.svg`: hero terrain contours (Dajt elevation data). - `src/app/globals.css`: colour tokens, bracket/grid utilities, and all motion. diff --git a/public/profile/pfp.svg b/public/profile/pfp.svg deleted file mode 100644 index 876035b..0000000 --- a/public/profile/pfp.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/src/app/icon.png b/src/app/icon.png new file mode 100644 index 0000000..0a70baf Binary files /dev/null and b/src/app/icon.png differ diff --git a/src/app/icon.svg b/src/app/icon.svg deleted file mode 100644 index 079e0f0..0000000 --- a/src/app/icon.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/components/Bust.tsx b/src/components/Bust.tsx index b4220ae..aea43b1 100644 --- a/src/components/Bust.tsx +++ b/src/components/Bust.tsx @@ -8,17 +8,31 @@ import { useRef } from "react"; * "wireframe", a scan sweeps across and resolves it to solid, and on desktop * the layers tilt apart slightly with the pointer. No 3D library needed. */ -export function Bust({ src, delay = "0s", className = "" }: { src: string; delay?: string; className?: string }) { +export function Bust({ + src, + delay = "0s", + className = "", +}: { + src: string; + delay?: string; + className?: string; +}) { const tiltRef = useRef(null); const meshRef = useRef(null); function onMove(e: React.PointerEvent) { - if (e.pointerType !== "mouse" || matchMedia("(prefers-reduced-motion: reduce)").matches) return; + if ( + e.pointerType !== "mouse" || + matchMedia("(prefers-reduced-motion: reduce)").matches + ) + return; const r = e.currentTarget.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width - 0.5; const y = (e.clientY - r.top) / r.height - 0.5; - if (tiltRef.current) tiltRef.current.style.transform = `rotateX(${(-y * 8).toFixed(2)}deg) rotateY(${(x * 10).toFixed(2)}deg)`; - if (meshRef.current) meshRef.current.style.transform = `translate(${(x * -6).toFixed(1)}px, ${(y * -6).toFixed(1)}px)`; + if (tiltRef.current) + tiltRef.current.style.transform = `rotateX(${(-y * 8).toFixed(2)}deg) rotateY(${(x * 10).toFixed(2)}deg)`; + if (meshRef.current) + meshRef.current.style.transform = `translate(${(x * -6).toFixed(1)}px, ${(y * -6).toFixed(1)}px)`; } function onLeave() { @@ -28,11 +42,14 @@ export function Bust({ src, delay = "0s", className = "" }: { src: string; delay return (
-
+
{/* wireframe pass */}
{/* solid pass */} -
- Profile picture +
+ Profile picture
{/* residual mesh that floats a few px above the photo */} -
{/* Corner telemetry, pinned to the bottom of the screen-tall hero */} -