Resume Builder

A resume builder with real-time preview, 10 templates, drag-and-drop sections, and desktop support.

Built with AI assistance. See AI_WORKFLOW.md for details.

---

🔗 Quick Links

🌐 Live Demo	shiva-kar.github.io/resume-builder
📥 Downloads	Latest Release
💻 Source Code	GitHub Repository
📖 Documentation	See Below

---

📥 Downloads

Platform	Download	Description
🌐 Web App	Launch Online	No installation required
🖥️ Windows Installer	Resume-Builder-Beta-0.3-win.exe	Full installation with uninstaller
🖥️ Windows Portable	Resume-Builder-Beta-0.3-Portable.exe	No installation, run anywhere
📦 Source Code	Clone Repository	Build from source

---

✨ Features

🎨 10 Professional Templates

Template	Style	Best For
Harvard	Classic academic	Academia, research, traditional industries
Tech	Modern with accent bar	Software, engineering, tech startups
Minimal	Clean typography	Design, writing, consulting
Bold	Strong contrast	Leadership, executive roles
Neo	Grid-based modern	Creative tech, product design
Portfolio	Sidebar layout	Designers, artists, creatives
Corporate	Professional cards	Finance, consulting, enterprise
Creative	Asymmetric design	Marketing, advertising, media
Elegant	Refined serif	Legal, executive, luxury brands
Modern	Two-column sidebar	General professional use

📝 Core Functionality

• Real-time DOM Preview - See changes instantly without PDF regeneration
• Drag & Drop Sections - Reorder sections using @dnd-kit
• Page Size Options - A4 (default), Letter, Legal
• Per-Section Font Controls - Customize heading, subheading, and body text sizes
• SVG Icons in PDF - Professional icons for contact info
• Dark/Light Mode - Full theme support with unique template visuals
• Persistent State - Data saved to localStorage via Zustand
• AI Enhancement Ready - Structure ready for OpenAI integration

📋 Section Types

• ✅ Personal Information (with contact icons)
• ✅ Experience (with date ranges)
• ✅ Education
• ✅ Skills (tag-based input)
• ✅ Projects
• ✅ Certifications
• ✅ Custom Sections (with field templates)

🖥️ Desktop App (Electron)

• Native Windows application
• Offline functionality
• Fast startup
• Portable version available

---

🧠 How This Was Built

I built this project using AI tools (like GitHub Copilot and Claude) inside VS Code. Instead of writing every line manually, I:

• Wrote clear prompts to describe what I needed
• Let AI generate code, then reviewed and tested it
• Fixed issues by explaining the problem to AI
• Learned from the code AI produced

This is how I approach most of my projects — using AI as a tool to build things faster while learning along the way.

---

⚙️ Development Approach

I'm a student learning to code, and I use AI tools to help me build projects that would otherwise take much longer.

My workflow:

• Describe what I want to build
• Get AI to generate code
• Test and fix any issues
• Learn from the process

This project is a good example of what's possible when you combine basic programming knowledge with AI assistance.

---

🛠️ Tech Stack

Category	Technology
Framework	Next.js 14 (App Router, Static Export)
Language	TypeScript 5 (Strict mode)
Styling	Tailwind CSS 3 + clsx + tailwind-merge
UI Components	Radix Primitives (Shadcn/UI patterns)
Icons	Lucide React
State Management	Zustand with persist middleware
Drag & Drop	@dnd-kit/core + @dnd-kit/sortable
PDF Engine	@react-pdf/renderer
Desktop	Electron 39 + electron-builder
Validation	Zod schemas
Deployment	GitHub Pages (gh-pages)

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/shiva-kar/resume-builder.git
cd resume-builder

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 in your browser.

Build Commands

# Web build (static export)
npm run build

# Deploy to GitHub Pages
npm run deploy

# Windows desktop app
npm run electron:build

# Portable Windows app
npm run electron:build:portable

Release Commands

# Full release (prompts for confirmation)
npm run release

# Quick patch release (Beta 0.4 → Beta 0.4.1)
npm run release:quick

# Minor release (Beta 0.4 → Beta 0.5)
npm run release:minor

# Major release (Beta → Stable 1.0)
npm run release:major

---

📁 Project Structure

resume-builder/
├── .github/
│   └── workflows/
│       └── release.yml          # CI/CD automation
├── electron/
│   └── main.js                  # Electron main process
├── public/
│   └── icon.png                 # App icon
├── scripts/
│   └── release.js               # Release automation script
├── src/
│   ├── app/
│   │   ├── globals.css          # Global styles + dark mode
│   │   ├── layout.tsx           # Root layout
│   │   └── page.tsx             # Main application
│   ├── components/
│   │   ├── editor/
│   │   │   ├── CustomSectionForm.tsx
│   │   │   ├── EducationForm.tsx
│   │   │   ├── ExperienceForm.tsx
│   │   │   ├── FormInput.tsx
│   │   │   ├── PersonalInfoForm.tsx
│   │   │   ├── SectionWrapper.tsx
│   │   │   ├── SkillsForm.tsx
│   │   │   └── index.ts
│   │   └── pdf/
│   │       ├── LivePreview.tsx   # DOM-based preview
│   │       ├── PDFViewer.tsx     # PDF generation
│   │       ├── PreviewCanvas.tsx # Template renderers
│   │       ├── ResumePDF.tsx     # PDF document structure
│   │       └── index.ts
│   └── lib/
│       ├── ai.ts                # AI enhancement (OpenAI ready)
│       ├── schema.ts            # Zod schemas + types
│       ├── store.ts             # Zustand state management
│       └── utils.ts             # Utility functions
├── CHANGELOG.md                 # Version history
├── LICENSE                      # MIT License
├── package.json
├── release.bat                  # Windows release helper
├── tailwind.config.ts
└── tsconfig.json

---

📖 Usage

Creating Your Resume

1. Personal Info - Fill in your name, title, contact details
2. Add Sections - Click section buttons (Experience, Education, Skills, etc.)
3. Drag to Reorder - Drag section headers to rearrange
4. Customize Fonts - Click ⚙️ gear icon on any section
5. Toggle Visibility - Click 👁️ eye icon to hide/show sections
6. Export PDF - Click "Export PDF" button to download

Customization Options

Option	Description
Template	Choose from 10 unique professional designs
Page Size	A4 (default), Letter, Legal
Accent Color	Pick from preset colors or custom hex
Font Sizes	Global + per-section controls
Dark Mode	Toggle with sun/moon icon

Custom Sections

Create custom sections with various field types:

• text - Single line text input
• textarea - Multi-line with bullet helper
• date - Single date (month/year)
• dateRange - Start and end date
• link - URL input with icon
• tags - Tag bubbles (press Enter to add)

Quick Templates:

• Basic (Title + Description)
• Project (Name, URL, Duration, Technologies, Description)
• Certification (Name, Issuer, Date, Credential URL)

---

� Release Status

This project is currently in Beta.

Phase	Versions	Status
Alpha	Alpha 0.1 - Alpha 0.7	✅ Completed
Beta	Beta 0.1 - Beta 0.4	🚧 Current
Stable	1.0+	⏳ Planned

Earlier versions were released as Alpha builds for testing and experimentation.

The first public Beta release is Beta 0.1.

No stable (1.0) release yet.

---

📜 Changelog

See CHANGELOG.md for full version history.

Recent Releases

[Beta 0.4] - 2026-02-21

• Fixed skills, custom sections, and markdown not rendering in PDF export
• Fixed certifications/projects auto-enable when added via Build Your Story
• Export pipeline stability and typography consistency across all 10 templates
• Shared formatting utilities extracted to dedicated modules

[Beta 0.3] - 2026-01-10

• Multi-LLM support with 40+ AI models across 4 providers
• OpenAI, Anthropic, Groq, and Mistral integration
• Corrected model names with verified API model IDs

[Beta 0.2] - 2026-01-10

• Improved template consistency between Preview and PDF
• Auto-generate resume feature for HR teams
• Fixed rendering across all 10 templates

[Beta 0.1] - 2026-01-09

• First Beta release
• Electron desktop app support
• MIT License added

[Alpha 0.7] - 2024-12-19

• SVG Icons in PDF Export
• 10 Unique Template Renderers
• Dark Mode Theme Selector

---

🖼️ Screenshots

---

⚠️ Known Issues (Beta)

Issue	Description
PDF Export Formatting	PDF export formatting does not fully match preview in some edge cases
Font Styles	Font styles and sizes may differ slightly between Preview and PDF
Markdown Formatting	Markdown and bullet formatting may be inconsistent in certain templates
Theme Differences	Some themes have minor layout differences between Preview and PDF

We are actively working on improving these areas and welcome community contributions.

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Priority Areas for Contribution

We especially welcome contributions for:

• 🔧 Fixing PDF export formatting - Help match PDF output to Preview
• 🎨 Matching Preview and PDF layouts - Ensure visual consistency
• 📝 Improving font consistency - Unified typography across exports
• ✍️ Preserving markdown styling - Bold, italic, and bullet support
• 🎯 Stabilizing theme exports - Template-specific fixes

How to Contribute

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

MIT License - see the LICENSE file for details.

Copyright (c) 2025-2026 Shiva Kar

---

👤 Author

Shiva Kar

• GitHub: @shiva-kar
• Repository: resume-builder

---

⭐ Star this repo if you find it useful!

Made with ❤️ by Shiva Kar