Portfolio

This site: two portfolios, one fast page

My tech portfolio and my art as benstenny, in one site I designed, built, and run, then made up to 75% faster on phones.

Role
Designer, developer, and owner
When
2026, ongoing
Stack
Next.js · React · Supabase · Cloudinary · GSAP · Framer Motion · WebGL
Hosting
AWS Amplify
The landing page of bensontruong.cloud split in two: a glowing electric B logo over Developer Portfolio on a graphite left half, and a cut-paper B logo over Art Portfolio on a textured white right half
The front door: pick a side.
  • 3.4 sAbout page, largest content showndown from 13.6 s; score 58 to 86
  • 2.9 MBto load the art portfoliodown from 10 MB
  • 10.3 sphotography, largest content showndown from 17.9 s, with 80+ photos

What it is

  • The landing page

    One screen split in two: tech on one side, art on the other. An electric logo, drawn in WebGL, crackles between them.

  • The tech side

    My journey, the projects I build or run, and case studies that open in a window over the portfolio.

  • The art side

    Photography, films, and drawings under benstenny, with an opt-in jazz radio that keeps playing between pages and a warmer paper tone after sunset.

Measured, then fixed

A site full of motion, WebGL, and photography is easy to make slow. I ran a Lighthouse audit on a simulated phone, found where each page spent its time, and fixed the biggest causes first. Nothing shifts as pages load: layout shift is zero on every page.

  • Visible from the first frame

    Entrance animations slide in instead of fading up from transparent, so the browser can count the headline as shown right away.

  • Heavy work waits its turn

    The WebGL logo and the halftone portrait start once the browser is idle, after the page is readable.

  • The gallery is laid out on the server

    Photo proportions come from Cloudinary when the page is built, so phones don't measure 80+ images before showing the grid.

  • Media at the size it's shown

    Photos and videos re-encoded for the web, served at the width on screen, and embeds like Spotify load only on tap.

Built to keep running

  • An admin for the gallery

    A password-protected /admin to upload, name, edit, and remove photos. Writes go through server routes with signed session cookies.

  • Updates without a deploy

    The photography page rebuilds itself every minute, and immediately after a change in /admin.

  • Findable

    Canonical URLs and share images for every page, an image sitemap, and structured data describing me, my films, and my work.

  • Hosted on AWS Amplify

    Every push to GitHub builds and deploys. Server-only keys are passed in at build time and never committed.

My role

  • Designed both sides, from the type and color of each to how they meet on the landing page.
  • Built the site, the gallery admin, and the case-study window, working with Claude Code as a pair programmer.
  • Ran the performance audit and the fixes, and keep the content, résumé, and search data up to date.