Resume Roaster

Skill Gap ? We got you ; )

Comment

Inspiration

Every job seeker has felt that sinking feeling — you spent hours polishing your resume, hit send on dozens of applications, and heard nothing back. We've all been there, staring at a document wondering if it's actually good or just comfortable. Resume Roaster was born from that frustration. We wanted to build something that does what a brutally honest friend with a hiring manager's eye would do — not sugarcoat, not give generic tips, but actually tell you what's wrong, what's missing, and what to do next. The "roast" format was intentional: humor disarms defensiveness, and people absorb hard truths better when they're smiling.

What it does

Resume Roaster is a single-page AI-powered web application where users paste their resume text and receive a structured, four-part analysis in seconds. The roast section delivers a witty but constructive critique of the resume's weaknesses. The skills radar identifies both the skills present in the resume and the critical ones missing for the user's apparent domain. The improvements section gives five to six specific, actionable upgrades the user can make immediately. Finally, the career roadmap lays out a step-by-step growth plan with realistic timeframes — from week one rewrites all the way to six-month networking strategies.

How we built it

The entire application lives in a single HTML file with no build step, no bundler, and no backend. The frontend is styled with Tailwind CSS via CDN and uses Lucide icons for visual consistency. The cinematic dark UI features a live canvas particle system, custom cursor with ember effects on click, animated film grain, and glassmorphism result cards — all in vanilla CSS and JavaScript. For AI, we integrated Google Gemini 2.5 Flash as the primary provider and OpenRouter as a free-tier fallback, both called directly from the browser. We engineered a strict JSON prompt contract so both providers return identical structured output. A rule-based mock AI engine handles the case where no API key is provided, ensuring the app never breaks regardless of network or quota conditions.

Challenges we ran into

The biggest challenge was getting consistent, parseable JSON out of large language models without a backend to sanitize responses. Different providers format their outputs differently — Gemini wraps responses in candidates arrays while OpenRouter follows the OpenAI chat completions shape — so we had to write provider-specific parsers while keeping a single shared prompt. Designing the mock AI engine to feel realistic without being laughably generic also took careful thought; it needed to actually read the resume text, detect real skills, and generate contextually relevant feedback rather than templated filler. On the visual side, achieving true 60fps performance with a live particle canvas, grain animation, and CSS backdrop-filter blur simultaneously required careful layering and paint optimization.

Accomplishments that we're proud of

We're proud that the app works beautifully with zero infrastructure — no server, no database, no deployment pipeline. The entire experience, from cinematic visuals to real AI analysis, ships as one file anyone can open in a browser. We're also proud of the graceful degradation architecture: the three-tier fallback system (Gemini → OpenRouter → Mock AI) means the app delivers value in every scenario. Visually, the custom cursor system, per-click ember particle bursts, triple-ring fire loader, and staggered spring-physics card reveals give it a production-grade SaaS feel that's rare in hackathon projects.

What we learned

We learned that prompt engineering for structured output is genuinely hard — small wording changes in the system prompt produce wildly different JSON shapes, and the difference between a working parse and a broken one is often a single stray markdown fence. We also learned that visual polish is multiplicative, not additive: one great animation looks nice, but five cohesive micro-interactions working together make the product feel alive. On the technical side, calling LLM APIs directly from the browser taught us the real constraints of CORS policies, key exposure tradeoffs in demo contexts, and how much variance exists in free-tier model response times.

What's next for Resume Roaster

The next version will support PDF and DOCX uploads so users don't have to copy-paste their resume. We plan to add role-specific analysis modes — the gap between a junior frontend developer's ideal resume and a principal data scientist's is enormous, and generic feedback misses that nuance. We also want to introduce a scoring dashboard that tracks resume improvements over multiple sessions, a one-click rewrite suggestion that shows before-and-after bullet transformations, and a job description matcher that cross-references the resume against a specific posting. On the infrastructure side, moving to an edge function backend would let us keep API keys server-side and open the tool to users who don't have their own keys.

Built With

  • api
  • canvas-api
  • css
  • fetch
  • gemini-2.0-flash
  • google-ai-studio
  • google-gemini-2.5-flash
  • html
  • javascript
  • lucide-icons
  • openrouter
  • tailwind-css
Share this project:

Updates