ResumeMatch

"ResumeMatch: Beat the Bot. Get the Interview."

Comment

🚀 ResumeMatch: Beat the Bot, Get the Interview "It’s not that you aren't qualified. It’s that the robot couldn't read your story."

💡 Inspiration We have all been there. You spend hours tailoring your resume, you hit "Submit," and then... silence. You enter the "Black Hole" of online job applications. The sad reality is that 75% of resumes are never seen by a human eye. They are filtered out by Applicant Tracking Systems (ATS) simply because they lack specific keywords found in the Job Description (JD). We didn't want to build just another resume builder. We wanted to build a translator. We were inspired by the millions of talented developers, designers, and professionals who are rejected not for a lack of skill, but for a lack of "keywords." ResumeMatch was born to level the playing field, giving power back to the candidate.

💻 What it does ResumeMatch is a "Zero-Setup" browser tool that acts as your personal ATS simulator and career coach.

  1. Instant Gap Analysis: You paste your Resume and the Job Description. The tool strips away the noise and finds the signal.
  2. The Match Score ($S$): It calculates a compatibility percentage, visually showing you exactly how the ATS sees you.
  3. Keyword Detection: It highlights the specific skills (e.g., "Kubernetes", "Agile", "Figma") that you missed.
  4. AI Optimization: This is the magic. With one click, it uses Google's Gemini AI to rewrite your Professional Summary, naturally weaving in those missing keywords so you pass the filter without lying.

⚙️ How we built it We wanted this to be lightweight, fast, and accessible. No heavy frameworks, no complex build steps—just pure web craftsmanship. • Frontend: Built entirely with HTML5, CSS3 (Glassmorphism design), and Vanilla JavaScript (ES6+). We used CSS Grid and Flexbox for a responsive, modern layout that feels like a native app. • The Logic: We implemented a custom tokenization algorithm in the browser. It cleans the text, removes "Stop Words" (common words like "and", "the", "with"), and compares the sets. • The Mathematics: To calculate the compatibility score S, we utilized the Jaccard Index concept, simplified for keyword matching: |R ∩ J| S= ----------- × 100 |J| Where: o R is the set of unique keywords in the Resume. o J is the set of unique keywords in the Job Description. • AI Integration: We used the fetch() API to communicate with Google Gemini 1.5 Flash. We engineered a specific prompt context that instructs the AI to act as a "Professional Resume Writer," ensuring the output is professional, not robotic.

🚧 Challenges we ran into • The "Stop Word" Noise: Initially, our algorithm said resumes were a 100% match because both texts contained the word "the" 50 times! We had to curate a robust Set of stop words to filter out grammatical noise and focus purely on skills. • Prompt Engineering: Getting the AI to simply add keywords without rewriting the whole resume into a hallucination was tricky. We had to iterate on the system prompt multiple times to ensure it kept the user's original tone. • Glassmorphism CSS: Achieving that frosty, translucent glass look without a library required complex CSS layering (backdrop-filter, rgba gradients, and box-shadow manipulation) to ensure it looked good in Dark Mode.

🏆 Accomplishments that we're proud of • Visual Polish: The UI feels like a premium SaaS product with smooth animations (staggered entry, floating cards, confetti celebrations). • Speed: Because it runs locally in the browser (except for the AI call), the keyword analysis is instantaneous ($<10ms$). • Real Impact: Seeing the AI take a generic summary and transform it into a targeted, keyword-rich pitch that sounds better than what we could write manually.

🧠 What we learned • The Power of Vanilla JS: You don't always need React or Vue. Modern JavaScript is incredibly powerful for DOM manipulation and state management in small-to-medium apps.

Built With

Share this project:

Updates