Image description
Image description

Creating a professional resume shouldn't feel like a daunting task. That’s why I built a sleek, responsive Resume Builder that allows anyone to craft beautiful resumes in minutes. Whether you’re a student, developer, or job-seeker — this tool is designed for you!

✨ Key Features

✅ 4 Unique Templates
✅ Form-based Input Interface
✅ PDF Export Functionality
✅ Fully Responsive Design
✅ Tailwind-Powered UI
✅ Customizable & Open Source

💻 Tech Stack

  • Frontend: HTML5, Tailwind CSS, JavaScript
  • PDF Library: html2pdf.js
  • Fonts: Google Fonts
  • Hosting: GitHub Pages

🧠 Why I Built This

I noticed many resume builders out there are either too complex or behind a paywall. So I asked myself:

"Why not build something simple, stylish, and open-source?"

And that's exactly what I did — a free, modern resume builder anyone can use and customize.

🖼️ Available Templates

  1. Sidebar Design — Neatly organized layout with personal info on the side.
  2. Header Design — Eye-catching header with a clean two-column format.
  3. Timeline Design — Great for showcasing experience with a vertical timeline.
  4. Card Design — Minimal card layout with hover animations and clean typography.

📥 How It Works (Under the Hood)

🧾 1. User Input 

id="resumeForm">
   type="text" id="name" placeholder="Full Name" required />

🎨 2. Template Selection Logic 

const template = document.getElementById('template').value;
window.location.href = `templates/${template}.html?${params}`;

📄 3. PDF Generation 

const opt = {
  margin: 0.2,
  filename: 'resume.pdf',
  image: { type: 'jpeg', quality: 0.98 },
  html2canvas: { scale: 2 },
  jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf().set(opt).from(document.getElementById('resume-content')).save();

📱 Responsive Design Sample 

.resume-container {
  width: 8.5in;
  min-height: 11in;
  margin: 0 auto;
  padding: 1in;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

🚀 Getting Started 

git clone https://github.com/Anticoder03/resume-builder.git
cd resume-builder
open index.html  # or just double click the file

Then, just fill the form and generate your PDF!

🏗️ Development Process

🔹 Planning Phase

  • Defined user needs & ideal features
  • Created mockups & UI flows
  • Designed responsive breakpoints

🔹 Development Phase

  • Built input form with Tailwind CSS
  • Added 4 switchable templates
  • Implemented html2pdf.js for download

🔹 Testing & Optimization

  • Cross-browser & mobile tested
  • Print styles refined
  • PDF quality tuned

⚙️ Challenges & Solutions

🐞 PDF Rendering Glitches

Fixed by optimizing html2canvas settings and using useCORS.

📱 Mobile Responsiveness

Used Tailwind's responsive classes and adjusted layout with breakpoints.

🧪 Form Data Validation

Implemented custom JS validation and feedback messages.

🎭 Smooth Template Switching

Used fade transitions and lightweight rendering logic.

🔮 Future Plans

  • Dark Mode
  • More Templates
  • Multi-language Support
  • AI-Powered Resume Suggestions
  • Backend for Save/Edit functionality

📚 Key Learnings

✅ Mastered responsive design & media queries
✅ Gained practical experience with html2pdf.js
✅ Understood how to collect, validate, and pass form data via query params
✅ Refined UI/UX practices for web apps

🔗 Useful Links

🙌 Final Words

This project has been a labor of love — merging functionality with elegant design. I hope it helps you or inspires your next side project!

If you found this helpful, consider giving it a ⭐ on GitHub or sharing it with friends.

Feel free to drop feedback or connect on LinkedIn!