portfolio

samerm.tech

Personal engineering portfolio of Samer Marmash — mechanical engineering @ Rice, class of 2028. The site is a CAD viewport that decides to become a real machine: blueprint → object → motion.

Built with Next.js (App Router) + TypeScript, React Three Fiber + drei, GSAP ScrollTrigger + Lenis, Tailwind. One persistent WebGL canvas behind the DOM; every scene is a <View> into it. See DESIGN.md for the full system, lib/pressTimeline.ts for the scroll choreography.

Run it

npm install
npm run dev        # http://localhost:3000
npm run build      # production build (all text prerendered)

Deployment

The site is a full static export (output: "export" → out/). GitHub Pages deploys it automatically: every push to main runs .github/workflows/deploy.yml, which builds and publishes out/. One-time setting: repo Settings → Pages → Source = “GitHub Actions” (the workflow attempts to flip this itself on first run). The custom domain samerm.tech carries over via public/CNAME.

It also deploys to Vercel as-is (framework preset: Next.js, zero config) if you ever want previews or server features — the export config doesn’t prevent it.

The site is fully reviewable right now: every 3D model has a procedural placeholder and every photo slot renders as a blueprint frame until its file exists.

what to hand Samer

The complete list of things only Samer can supply. If this list grows, something has gone wrong.

  1. Two CAD exports (see scripts/prepare-models.md for export settings and the node-naming convention, then run each through node scripts/optimize-glb.mjs <file>):
    • press-assembly.glb — the CASE press, with Node_* names set in CAD
    • retinex.glb — the retinal screener, any node names
  2. A folder of photographs — the shot list is /public/photo-manifest.json (20 shots, each with a one-line description). Save each as /public/photos/{slot-id}.jpg. They appear on the site with zero code changes.

That’s it. The e-bike, prosthetic hand, and antenna-mount models are authored in code as deliberate blueprint-register reconstructions — they are not waiting on CAD and never will be.

repo map

app/                    routes (/, /case-chocolates, /projects/*)
components/gl/          the WebGL system (one canvas, materialize shader, models)
components/home|case/   homepage acts + CASE page interactives
lib/pressTimeline.ts    the entire scroll choreography, as tunable keyframes
lib/systemModules.ts    CASE project status — one enum per module
scripts/                CAD → GLB pipeline (prepare-models.md + optimize-glb.mjs)
public/photos/          photographs   public/models/  optimized GLBs
public/photo-manifest.json   the shot list
DESIGN.md               tokens, architecture, how to add a project page