DEV Community

Tristan Deane
Tristan Deane

Posted on • Originally published at tristandeane.ca on

Project Teapot: A Reimagined Resume Experience

#showcase #webdev #javascript #frontend

Project Teapot waving animation

Live demo: teapot.tristandeane.ca

Source code: github.com/software-trizzey/project-teapot

What is Project Teapot?

Project Teapot is a silly, interactive resume scanner inspired by shop.merchant.dev. I built it after seeing the site all over X and finding no public repo to learn from.

So I reverse-engineered the flow through source inspection and network tracing, then rebuilt it in my own style.

Why Build It?

I wanted to get better at breaking down polished frontend experiences, rebuilding them from observation, and then pushing the concept with my own UX ideas.

The hard parts were mostly animation workflow and compositing. This included things like:

  • Generated clips were inconsistent across tools and prompts
  • Aspect ratio and framing mismatches made compositing tricky
  • I wrote an ffmpeg script to normalize renders into one format
  • I started with RunwayML, then moved to Veo 3.1 via the Gemini API for better first-pass output

Core UX Loop

  1. Visitor enters the scene
  2. HR-418 Robots greets them
  3. Visitor can click the resume scanner or menu to open the dialog tree
  4. Visitor uploads a resume or picks a sample
  5. Scan runs and returns feedback with insights
  6. Visitor can then exit or retry another resume

Processing Resumes

I wanted real uploads, while keeping everything local to the browser. .docx parsing uses mammothjs, and .pdf files are parsed in a web worker with PDF.js so the UI stays responsive.

After parsing, resumes go through a simple rule-based scorecard. Example: experience is +8, skills is +4, email is +2, and missing email is -20 (yes, intentionally brutal). I also score for impact signals like leadership, KPIs, and measurable outcomes.

The output is totaled out of 100, categorized as weak | medium | strong, and assigned a confidence score.

It is intentionally deterministic and transparent. This is not a production ATS, just a playful baseline for demo purposes.

What's Next

Project Teapot is dev complete. I set out to recreate and extend a specific experience, and this version delivers on that goal.

Top comments (0)