DEV Community

Jagadees Var rao
Jagadees Var rao

Posted on

I was tired of "Free" Resume Builders hiding PDFs behind paywalls, so I built an open-source alternative (with Gemini AI & 93+ Speed Score)

#opensource #showdev #webdev #javascript

We've all been there:

You spend 45 minutes meticulously filling out your work history, projects, and credentials on a "free" resume builder. You click the shiny "Download PDF" button, and...

💳 "Enter your credit card to activate your $1.99 trial."

It's one of the most frustrating dark patterns on the web.

To solve this, I built ZenResume—a completely free, client-side, open-source resume builder with zero paywalls, zero accounts, and zero tracking.

🚀 Try it out here: ZenResume - Free Resume Builder
⭐ Star it on GitHub: jagadeesvarrao-design/resume-builder

🛑 The Problem vs. 🌿 The Solution

  • Download PDF:
    • Corporate Builders: Hidden behind a sneaky $1.99 trial credit card prompt.
    • ZenResume: 100% free, one-click instant download.
  • Data Ownership:
    • Corporate Builders: Saved on remote databases (often sold to recruiters).
    • ZenResume: 100% client-side (uses local browser storage + download/import JSON backup files).
  • Layout Swapping:
    • Corporate Builders: Often resets or messes up your input fields.
    • ZenResume: Switch templates instantly with zero data loss.
  • Import System:
    • Corporate Builders: Manual, painful copy-pasting.
    • ZenResume: Smart Gemini AI text import to populate fields automatically.
  • Page Load Speed:
    • Corporate Builders: Bloated with tracking scripts (mobile score under 40).
    • ZenResume: Optimized performance budget (mobile score 93+).

🛠️ The Tech Stack & Architecture

I wanted the app to be as lightweight and fast as possible. There are no heavy frameworks, node modules, or compile steps:

  • Structure: Semantic HTML5 (with JSON-LD Structured Data Schema for search engines).
  • Styling: Custom Vanilla CSS3 using a calming HSL color system (Sage & Slate).
  • Logic: Pure ES6 JavaScript.
  • State Management: Reactive LocalStorage sync (saves your progress on every single keystroke).

⚡ How I Optimized the Mobile Performance Score to 93+

Since recruiters and search engines favor fast sites, I spent a lot of time optimizing the performance budget:

  1. Forced Reflow Decoupling: I deferred all calculations that query hidden DOM dimensions (clientWidth) to execute only after the editor workspace becomes visible, eliminating startup rendering blockages.
  2. Delayed Font & Library Loads: FontAwesome and Google Fonts are preloaded asynchronously to prevent FCP (First Contentful Paint) delays.
  3. Interaction-Based AdSense Loading: To monetize without blocking the initial page speed crawler, Google AdSense scripts are lazy-loaded only on the first user interaction (scroll, touch, or mouse move).

🎯 Supported Templates

It includes multiple ATS-friendly single-column layouts and our newly released "Modern Double-Column Split" template, designed specifically to pass Applicant Tracking Systems by exporting clean, searchable vector text instead of flat images.

I'd love for you to check it out, star the repo, and let me know what features you want me to code next!

👉 Build your resume on ZenResume

Top comments (0)