dash.foogy
dash.foogy
entity updated 2026-07-21 live

foogy-dev

Summary: foogy’s portfolio at foogy.xyz — Astro (static) on Cloudflare Pages, Git-connected so pushing main auto-deploys; light theme. The 3-branch-card home, /ux-ui + /web3-ai routes, USD-first pricing, the Agents4.fun/DePunks case studies, and the /playgrounds section are all SHIPPED and live. Playgrounds now holds two interactive pieces — the “Soft” soft-body physics word toy and a new “Micro” managed micro-interaction library (studied from Amicro; live demos + copy-paste React/Motion recipes + one-click SKILL.md export) — with live HTML preview headers on each playground card (origin/main fe3b72d, 2026-07-20).

⚠️ Ground-truth note: the LOCAL clone at ~/Documents/localhost/foogy.dev is stale and frozen — it has a stuck .git/index.lock and sits behind origin. Do NOT trust the local disk for foogy.dev. Canonical source = origin/main on GitHub (all pushes went there via /tmp clones) and the live foogy.xyz site. Compile loops must git clone/fetch origin, not read the local working tree.

What it is

Personal portfolio / hire site for Mihael “foogy” Fugaj — a product designer who ships the front-end (design→code) and is moving toward product management. Served at foogy.xyz.

Stack / where it lives

  • Repo: github.com/mfugaj/foogy.dev (local clone is stale — see note above).
  • Astro (~5.17), static build, @astrojs/sitemap. Site URL https://foogy.xyz.
  • Hosting: Cloudflare Pages, Git-connected, production branch main, build npm run build, output dist — pushing main auto-deploys. See cloudflare-deploy.
  • Light theme (src/styles/tokens.css: bg #fff, text #111, accent #ff5a1f, Noto Sans, 8px). Stale AGENT.md/docs/project.md still describe a dark/GSAP design — ignore.

Live site structure (origin/main = live)

  • / — short about + 3 branch cards → UX/UI (/ux-ui), Web3 & AI (/web3-ai), Product (/pm) → then projects-by-year with Zevo (2026) featured at top. “Case study” labels on projects; “Currently” label on Zevo.
  • Nav: Home · UX/UI · Web3 & AI · Product · Playgrounds · Buy my time. Learn removed. (Playgrounds added 2026-07-20.)
  • /ux-ui + /web3-ai — branch pages (via [category].astro); existing case studies remapped web2→ux-ui, web3→web3-ai.
  • /pm — generic Product Manager pitch (originally Rentlio-targeted, then made role-agnostic): proof numbers, principles, Selected work, How I work.
  • /hire, /cases/[slug], /work/[slug], /404.

Case studies (src/content/case-studies/*.md)

zevo (flagship, 2026, featured, order 1), wire, samsung-eshop, haas, sancta-domenica, hive3, liberoverse, nftsweeps, traverse, agent4 (Agents4.fun), depunks. Four deepened with explicit UX-process sections (Context → Research → IA/flows → Key decisions & trade-offs → Systems → Outcome): Zevo, Wire, Samsung, Agent4.

  • Zevo — flagship. P2P EV-sharing marketplace (owners earn while idle, guests unlock contactlessly; $2M+ pre-seed; lead UX/UI). The case study frames it through a finance × technology lens (marketplace money flows: earnings, payouts, deposits, pricing) for the design→PM pitch — a positioning angle, not a claim it’s a fintech company.
  • Agent4 / Agents4.fun — links to agents4.fun; see agents4fun. (Note: agent4.fun the site is a different unrelated BNB product; the project is agents4.fun.)

/playgrounds — interactive experiments + “Soft” physics toy (SHIPPED 2026-07-20, origin/main 7932333)

The portfolio’s first interactive work — a /playgrounds section for small self-contained browser experiments, live on origin/main (auto-deploys to foogy.xyz). A “Playgrounds” nav item was added to src/site.config.ts (prefix match, before “Buy my time”); the index page src/pages/playgrounds/index.astro lists experiments from an inline array (reuses the home .branch card hover pattern).

  • “Soft” (/playgrounds/soft) — a soft-body physics word toy: type a word, then pull, squish and jiggle it. Standalone full-viewport app (its own <html> shell, not BaseLayout: topbar / left toolbar / canvas stage / dark right inspector, 100dvh, overflow:hidden). Tools: select/move, circle, rect, polygon, text, clear; inspector exposes visual (fill/gap/scale) + physics params (shape memory, smoothing, inflation, edge/weld/brace/area compliance, rotation) + toggles (fixed, rigid, debug mesh); Space=pause, Del=delete, Export PNG.
  • How it’s built (src/scripts/soft/): a hand-rolled Verlet + XPBD-style solver (engine.ts, 4 substeps × 5 iterations/frame) — bodies are rings of particles with edge/brace/weld distance constraints, per-ring signed-area constraints, and shape-matching (“shape memory”). Text → soft body (text.ts) renders text to an offscreen canvas, thresholds alpha, traces outlines with marching squares, resamples at ~11px, and classifies holes by containment parity (even-odd fill, welded to the outer ring). app.ts is the tool/pointer/inspector/export layer. Runs on canvas at 60fps, TypeScript, zero framework deps.
  • Per-letter collision squish (7932333, same session): a “one body per letter” checkbox (default on) builds baseline-aligned per-char contours so each letter is its own colliding body; contact tuning (Gap-derived collision distance, capped ~85%-inelastic contacts, heavy global damping, uprighting toward restAngle) gets the “squishy letters” look from the reference.
  • Why it matters for the pitch: this is a concrete design→code artifact — a bespoke physics engine + canvas UI, not a component-library demo — reinforcing the “designer who ships the front-end” story (job-search-strategy). View-transition-safe (initSoft() on load + astro:page-load, teardown on astro:before-swap, no-ops when #soft-app absent).

/playgrounds — “Micro” micro-interaction library (SHIPPED 2026-07-20, origin/main fe3b72d)

The second interactive piece — “Micro” (/playgrounds/micro), a managed library of springy micro-interactions studied from Amicro (amicro.vercel.app). Uses BaseLayout (wide) unlike Soft’s standalone shell. Every tile is a live, dependency-free implementation rendered from a registry (src/scripts/micro/registry.ts) across three categories — Buttons (Icon morph, Slide arrow, Pulse, Shake, Glare shine, Magnetic, Text reveal), Lists (Focus blur), Cards (Card arc fan, Cover flow) — each with a “when to use it” caption.

  • Two exports per tile: Copy code grabs the React + Motion recipe for that interaction; a per-tile skill checkbox (all selected by default) + Select all / Export skill controls emit the selected set as a single SKILL.md that any Claude/AI agent can drop into any project (src/scripts/micro/skill-export.ts). Spring physics live in spring.ts; demos in interactions.ts; wiring in app.ts.
  • Why it matters for the pitch: doubles down on the design→code + agent-tooling story — foogy packaging his own motion craft as a reusable agent skill, not just a portfolio demo (job-search-strategy).

/playgrounds index — live preview headers (fe3b72d)

The playgrounds index (src/pages/playgrounds/index.astro) now renders a live HTML preview header per project card via dedicated components (src/components/playgrounds/{SoftPreview,MicroPreview}.astro), keyed by slug — add a *Preview.astro when adding a playground. Both Soft and Micro are tagged New.

/hire pricing — SHIPPED USD-first

src/site.config.ts tiers + ethSnapshot (ETH pulled from Alchemy Prices API at build time, snapshot ~$1,556 on 2026-06-30):

  • 1 day — $600 (~0.39 ETH)
  • 3 days — $1,600 (~1.03 ETH)
  • 1 week — $2,000 (~1.29 ETH) Priced in USD, payable in ETH. (ETH is a build-time snapshot; a daily auto-refresh was discussed, not yet added.)

Decisions & lessons

  • 2026-06-29: Pages switched from direct-upload to GitHub Git integration (production branch main) — that’s why earlier wrangler-era pushes didn’t deploy. See cloudflare-deploy.
  • The local foogy.dev clone is locked/stale; all real work goes through fresh /tmp clones pushed to origin. Treat GitHub/live as canonical.
  • The D1-backed dashboard detour failed and was abandoned — see cloudflare-deploy; knowledge/state lives in plain files (this vault).

Open questions

  • Daily Alchemy ETH-price auto-refresh for /hire: discussed, not built.
  • Should the public Agents4.fun case study be aligned to the accurate two-product (Whitelist + Sweepstakes) reality? (Currently portfolio-level; the accurate spec is in agents4fun.)

Sources

  • origin/main github.com/mfugaj/foogy.dev (site.config.ts, src/pages/*, src/content/case-studies/*), verified live foogy.xyz + foogy.xyz/ux-ui.
  • foogy.dev/src/pages/playgrounds/{index,soft}.astro, src/scripts/soft/{engine,text,app}.ts, src/site.config.ts (nav), tasks/lessons.md (Playgrounds + Soft soft-body physics toy — origin/main 32d81c6/7932333, 2026-07-20)
  • foogy.dev/src/pages/playgrounds/micro.astro, src/scripts/micro/{registry,interactions,spring,skill-export,app}.ts, src/components/playgrounds/{SoftPreview,MicroPreview}.astro, src/pages/playgrounds/index.astro (Micro micro-interaction library + live preview headers — origin/main fe3b72d, 2026-07-20; fresh /tmp clone, GitHub canonical)
  • MEMORY: memory/foogy-dev-deploy.md. Related: cloudflare-deploy, agents4fun, job-search-strategy.