Skip to main content

​
Overview

Resume Builder supports seven standard sections plus unlimited custom sections. All sections feature auto-save functionality that persists data to localStorage.

​
Available Sections

​
Personal Information

The personal information section (~/workspace/source/src/components/Editor/PersonalInfoForm.tsx:6) captures your core contact details and professional identity. Fields:
  • Full Name
  • Job Title
  • Email
  • Phone
  • Location
  • Website
  • LinkedIn
  • GitHub
Data Structure: 
export type PersonalInfo = {
  fullName: string;
  email: string;
  phone: string;
  website: string;
  linkedin: string;
  github: string;
  location: string;
  jobTitle: string;
};
Source: ~/workspace/source/src/types.ts:3

​
Professional Summary

A brief text area for your professional summary or objective statement. 
// Simple string value stored in resume data
summary: string;
Usage: 
const { resumeData, updateSummary } = useResume();

updateSummary('Experienced software engineer with 5+ years...');
Source: ~/workspace/source/src/hooks/useResume.tsx:85

​
Experience

Work experience entries with support for multiple positions. Data Structure: 
export type Experience = {
  id: string;
  company: string;
  position: string;
  location: string;
  startDate: string;
  endDate: string;
  current: boolean;
  description: string;
};
Source: ~/workspace/source/src/types.ts:14 Operations: 
const { addExperience } = useResume();

// Creates new experience with unique ID
addExperience();
Source: ~/workspace/source/src/hooks/useResume.tsx:89

​
Education

Education history with degree and field information. Data Structure: 
export type Education = {
  id: string;
  school: string;
  degree: string;
  field: string;
  startDate: string;
  endDate: string;
  description: string;
};
Source: ~/workspace/source/src/types.ts:25

​
Skills

Skills list with optional categorization. Data Structure: 
export type Skill = {
  id: string;
  name: string;
  level?: string;
  category?: string;
};
Source: ~/workspace/source/src/types.ts:35 Adding Skills: 
const { addSkill } = useResume();

// Add a skill by name
addSkill('React');
addSkill('TypeScript');
addSkill('Node.js');
Source: ~/workspace/source/src/hooks/useResume.tsx:154

​
Projects

Showcase your projects with links and technologies. Data Structure: 
export type Project = {
  id: string;
  name: string;
  description: string;
  githubUrl: string;
  liveUrl: string;
  technologies: string[];
};
Source: ~/workspace/source/src/types.ts:42

​
Custom Sections

Create unlimited custom sections for certifications, awards, publications, or any other content. Data Structure: 
export type CustomSection = {
  id: string;
  title: string;
  items: CustomSectionItem[];
};

export type CustomSectionItem = {
  id: string;
  title: string;
  subtitle: string;
  startDate: string;
  endDate: string;
  description: string;
};
Source: ~/workspace/source/src/types.ts:60 Operations: 
const { addCustomSection } = useResume();

addCustomSection('Certifications');
Source: ~/workspace/source/src/hooks/useResume.tsx:200

​
Section Ordering

You can reorder sections using the Section Order Editor (~/workspace/source/src/components/SectionOrderEditor.tsx:17). Section Types: 
export type SectionId = 
  | 'personal-info'
  | 'summary'
  | 'experience'
  | 'projects'
  | 'education'
  | 'skills'
  | 'customSections';
Source: ~/workspace/source/src/types.ts:66 Default Order: 
export const defaultSectionOrder: SectionId[] = [
  'personal-info',
  'summary',
  'experience',
  'projects',
  'education',
  'skills',
  'customSections'
];
Source: ~/workspace/source/src/types.ts:79 Reordering Sections: 
const { reorderSections } = useResume();

const newOrder: SectionId[] = [
  'personal-info',
  'summary',
  'skills',  // Moved up
  'experience',
  'projects',
  'education',
  'customSections'
];

reorderSections(newOrder);
Source: ~/workspace/source/src/hooks/useResume.tsx:289
Section order editor with up/down arrows

​
Auto-Save Functionality

All resume data is automatically saved to localStorage whenever changes are made. This happens through React effects in the useResume hook. Implementation: 
// Auto-save to localStorage on every data change
useEffect(() => {
  if (typeof window !== 'undefined') {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(resumeData));
  }
}, [resumeData]);
Source: ~/workspace/source/src/hooks/useResume.tsx:66 Storage Key: 
const STORAGE_KEY = 'resume-builder-data';
Source: ~/workspace/source/src/hooks/useResume.tsx:4
Changes are saved automatically - you don’t need to click a “Save” button. Your resume data persists even if you close the browser.

​
Complete Resume Data Structure

export type ResumeData = {
  personalInfo: PersonalInfo;
  summary: string;
  experience: Experience[];
  education: Education[];
  skills: Skill[];
  projects: Project[];
  customSections: CustomSection[];
  sectionOrder: SectionId[];
};
Source: ~/workspace/source/src/types.ts:68

​
Initial State

When you first use the app, it starts with empty data: 
export const initialResumeData: ResumeData = {
  personalInfo: {
    fullName: '',
    email: '',
    phone: '',
    website: '',
    linkedin: '',
    github: '',
    location: '',
    jobTitle: '',
  },
  summary: '',
  experience: [],
  education: [],
  skills: [],
  projects: [],
  customSections: [],
  sectionOrder: defaultSectionOrder,
};
Source: ~/workspace/source/src/types.ts:81
Data is stored in localStorage, which is specific to your browser and device. To transfer your resume to another device, use the Export/Import feature.

Build docs developers (and LLMs) love

Get started for freeTalk to us