diff --git a/TEMPLATE_AUDIT_REPORT.md b/TEMPLATE_AUDIT_REPORT.md
new file mode 100644
index 0000000..d1e35ad
--- /dev/null
+++ b/TEMPLATE_AUDIT_REPORT.md
@@ -0,0 +1,276 @@
+# Template Audit Report
+
+Generated: 2025-07-23T10:25:30.877Z
+
+Total templates found: 27
+
+## AcademicTemplate.tsx
+- **Export Name:** AcademicTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## BoldTemplate.tsx
+- **Export Name:** BoldTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## CleanMinimalistTemplate.tsx
+- **Export Name:** CleanMinimalistTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## CleanProfessionalTemplate.tsx
+- **Export Name:** CleanProfessionalTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## CorporateTemplate.tsx
+- **Export Name:** CorporateTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## CreativeColorBlocksTemplate.tsx
+- **Export Name:** CreativeColorBlocksTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## CreativeTemplate.tsx
+- **Export Name:** CreativeTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## ElegantTemplate.tsx
+- **Export Name:** ElegantTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## ExecutiveTemplate.tsx
+- **Export Name:** ExecutiveTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## MinimalistATS.tsx
+- **Export Name:** MinimalistATS
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## MinimalistProfessionalTemplate.tsx
+- **Export Name:** MinimalistProfessionalTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## MinimalistSidebarTemplate.tsx
+- **Export Name:** MinimalistSidebarTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## MinimalistTemplate.tsx
+- **Export Name:** MinimalistTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## MinimalTemplate.tsx
+- **Export Name:** MinimalTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## ModernDarkSidebarTemplate.tsx
+- **Export Name:** ModernDarkSidebarTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## ModernExecutiveTemplate.tsx
+- **Export Name:** ModernExecutiveTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## ModernProfessionalTemplate.tsx
+- **Export Name:** ModernProfessionalTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## ModernSidebarTemplate.tsx
+- **Export Name:** ModernSidebarTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## ModernTemplate.tsx
+- **Export Name:** ModernTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## ModernTimelineTemplate.tsx
+- **Export Name:** ModernTimelineTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## ModernTwoColumn.tsx
+- **Export Name:** ModernTwoColumn
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## ProfessionalBlueTemplate.tsx
+- **Export Name:** ProfessionalBlueTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## ProfessionalSidebarTemplate.tsx
+- **Export Name:** ProfessionalSidebarTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## ProfessionalSummaryTemplate.tsx
+- **Export Name:** ProfessionalSummaryTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## ProfessionalTemplate.tsx
+- **Export Name:** ProfessionalTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## TechTemplate.tsx
+- **Export Name:** TechTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
+## TimelineTemplate.tsx
+- **Export Name:** TimelineTemplate
+- **Has TemplateProps:** ✅
+- **Has Correct Export:** ✅
+- **Has Default Export:** ❌
+
+✅ No issues found
+
+---
+
diff --git a/backup/templates/AcademicTemplate.tsx b/backup/templates/AcademicTemplate.tsx
new file mode 100644
index 0000000..0f959ea
--- /dev/null
+++ b/backup/templates/AcademicTemplate.tsx
@@ -0,0 +1,383 @@
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Linkedin, Github, BookOpen, GraduationCap, Award, Briefcase, FileText, Book } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function AcademicTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications, projects, sections, customization } = data;
+
+ const visibleSections = sections.filter(section => section.isVisible).sort((a, b) => a.order - b.order);
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const formatUrl = (url: string) => {
+ if (!url) return '';
+ return url.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '');
+ };
+
+ const renderSection = (section: typeof sections[0]) => {
+ switch (section.type) {
+ case 'personalInfo':
+ return (
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+ {personalInfo.title || 'Researcher / Academic'}
+
+
+
+
+
+
+
+
+ {summary}
+
+
+
+
+
+ {education.map((edu) => (
+
+
+
+
+ {edu.degree}
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+
+
+ {formatDate(edu.graduationDate)}
+
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+ {edu.relevantCourses && edu.relevantCourses.length > 0 && (
+
+
+ Relevant Coursework:
+
+
+ {edu.relevantCourses.map((course, i) => (
+
+ {course}
+
+ ))}
+
+
+ )}
+ {edu.description && (
+
+
+ {edu.description}
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {publications.map((pub) => (
+
+
+ {pub.name}
+
+
+ {pub.description}
+
+ {pub.technologies && pub.technologies.length > 0 && (
+
+ Keywords: {' '}
+
+ {pub.technologies.join(', ')}
+
+
+ )}
+ {pub.url && (
+
+ View Publication
+
+ )}
+
+ ))}
+
+
+
+
+
+ {nonPublicationProjects.map((project) => (
+
+
+
+ {project.name}
+ {project.url && (
+
+ (View Project)
+
+ )}
+
+ {project.startDate && (
+
+ {formatDate(project.startDate)}
+ {project.endDate ? ` - ${formatDate(project.endDate)}` : ' - Present'}
+
+ )}
+
+
+ {project.description}
+
+ {project.technologies && project.technologies.length > 0 && (
+
+
+ Technologies/Methods:
+
+
+ {project.technologies.map((tech, i) => (
+
+ {tech}
+
+ ))}
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+
+
+
+ {skills.map((skill) => (
+
+
+
+ {skill.name}
+
+
+ {skill.level}
+
+
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/backup/templates/BoldTemplate.tsx b/backup/templates/BoldTemplate.tsx
new file mode 100644
index 0000000..b4feeaf
--- /dev/null
+++ b/backup/templates/BoldTemplate.tsx
@@ -0,0 +1,298 @@
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Linkedin, Github, Briefcase, GraduationCap, Code, Award, User } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function BoldTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications, projects, sections } = data;
+ const visibleSections = sections.filter(section => section.isVisible).sort((a, b) => a.order - b.order);
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const formatUrl = (url: string) => {
+ if (!url) return '';
+ return url.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '');
+ };
+
+ const renderSection = (section: typeof sections[0]) => {
+ switch (section.type) {
+ case 'personalInfo':
+ return (
+
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+ {personalInfo.title || 'Professional Title'}
+
+
+
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+
+
{personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.website && (
+
+ {formatUrl(personalInfo.website)}
+
+ )}
+ {personalInfo.linkedin && (
+
+ linkedin.com/in/...
+
+ )}
+ {personalInfo.github && (
+
+ github.com/...
+
+ )}
+
+
+
+ {summary && (
+
+
+
+
+ {summary}
+
+
+ )}
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+ {exp.jobTitle}
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {education.map((edu) => (
+
+
+
+ {edu.degree}
+
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+ {edu.achievements && edu.achievements.length > 0 && (
+
+ {edu.achievements.map((achievement, idx) => (
+
+ •
+ {achievement}
+
+ ))}
+
+ )}
+
+ ))}
+
+
+
+
+
+ {skills.map((skill) => (
+
+
+
+ {skill.name}
+
+
+ {skill.level}
+
+
+
+
+ ))}
+
+
+
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+ {project.url && (
+
+ (View Project)
+
+ )}
+
+ {project.startDate && (
+
+ {formatDate(project.startDate)}
+ {project.endDate ? ` - ${formatDate(project.endDate)}` : ' - Present'}
+
+ )}
+
+
+ {project.description}
+
+ {project.technologies && project.technologies.length > 0 && (
+
+ {project.technologies.map((tech, i) => (
+
+ {tech}
+
+ ))}
+
+ )}
+
+ ))}
+
+
+
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/backup/templates/CleanMinimalistTemplate.tsx b/backup/templates/CleanMinimalistTemplate.tsx
new file mode 100644
index 0000000..d15310a
--- /dev/null
+++ b/backup/templates/CleanMinimalistTemplate.tsx
@@ -0,0 +1,198 @@
+import { Mail, Phone, MapPin, Linkedin, Globe } from 'lucide-react';
+import { ResumeData } from '@/types/resume';
+
+type TemplateProps = {
+ data: ResumeData;
+};
+
+export function CleanMinimalistTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications } = data;
+ const accentColor = data.customization.accentColor || '#2563eb';
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ return (
+
+ {/* Header */}
+
+
+ {personalInfo.fullName}
+
+ {personalInfo.title && (
+
+ {personalInfo.title}
+
+ )}
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+ {personalInfo.linkedin && (
+
+
+ )}
+ {personalInfo.website && (
+
+
+ )}
+
+
+
+ {/* Summary */}
+ {summary && (
+
+
+ SUMMARY
+
+
+ {summary}
+
+
+ )}
+
+
+ {/* Left Column */}
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
+ PROFESSIONAL EXPERIENCE
+
+
+ {experience.map((exp) => (
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && `, ${exp.location}`}
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
+ EDUCATION
+
+
+ {education.map((edu) => (
+
+
{edu.degree}
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+
+ {edu.fieldOfStudy}
+ {formatDate(edu.graduationDate)}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+ ))}
+
+
+ )}
+
+
+ {/* Right Column */}
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
+ SKILLS
+
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+ {skill.level}
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Certifications */}
+ {certifications.length > 0 && (
+
+
+ CERTIFICATIONS
+
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
{cert.issuer}
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` • Expires: ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+ )}
+
+
+
+
+
+ {personalInfo.fullName}
+
+ {personalInfo.title && (
+
+ {personalInfo.title}
+
+ )}
+
+
+
+
+ Professional Summary
+
+
{summary}
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company} • {exp.location}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {education.map((edu) => (
+
+
+ {edu.degree}
+
+
+ {edu.school} • {edu.location}
+
+
+ {formatDate(edu.graduationDate)}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+
+ ))}
+
+
+
+
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+ {skill.level}
+
+
+
+ ))}
+
+
+
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer} • {formatDate(cert.date)}
+ {cert.expirationDate && ` • Expires: ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+ {visibleSections.map((section) => renderSection(section))}
+
+ );
+}
diff --git a/backup/templates/CorporateTemplate.tsx b/backup/templates/CorporateTemplate.tsx
new file mode 100644
index 0000000..c54df7f
--- /dev/null
+++ b/backup/templates/CorporateTemplate.tsx
@@ -0,0 +1,319 @@
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Linkedin, Github, Briefcase, GraduationCap, Code, Award, BookOpen, User } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function CorporateTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications, projects, sections, customization } = data;
+
+ const visibleSections = sections.filter(section => section.isVisible).sort((a, b) => a.order - b.order);
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const formatUrl = (url: string) => {
+ if (!url) return '';
+ return url.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '');
+ };
+
+ const renderSection = (section: typeof sections[0]) => {
+ switch (section.type) {
+ case 'personalInfo':
+ return (
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+ {personalInfo.title || 'Professional Title'}
+
+
+
+
+
+
+
+
+ {summary}
+
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {education.map((edu) => (
+
+
+
+
+ {edu.degree}
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+
+ {formatDate(edu.graduationDate)}
+
+
+ {edu.relevantCourses && edu.relevantCourses.length > 0 && (
+
+
+ Relevant Coursework:
+
+
+ {edu.relevantCourses.map((course, i) => (
+
+ {course}
+
+ ))}
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ {skills.map((skill) => (
+
+
+
+ {skill.name}
+
+
+ {skill.level}
+
+
+
+
+ ))}
+
+
+
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+ {project.url && (
+
+ (View Project)
+
+ )}
+
+ {project.startDate && (
+
+ {formatDate(project.startDate)}
+ {project.endDate ? ` - ${formatDate(project.endDate)}` : ' - Present'}
+
+ )}
+
+
+ {project.description}
+
+ {project.technologies && project.technologies.length > 0 && (
+
+ {project.technologies.map((tech, i) => (
+
+ {tech}
+
+ ))}
+
+ )}
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/backup/templates/CreativeColorBlocksTemplate.tsx b/backup/templates/CreativeColorBlocksTemplate.tsx
new file mode 100644
index 0000000..c7ec765
--- /dev/null
+++ b/backup/templates/CreativeColorBlocksTemplate.tsx
@@ -0,0 +1,220 @@
+import { ResumeData } from '@/types/resume';
+import { Briefcase, GraduationCap, User, Code, Mail, Phone, MapPin, Globe } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function CreativeColorBlocksTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, projects } = data;
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ // Color variants for different sections
+ const colorVariants = {
+ primary: 'bg-blue-600 text-white',
+ secondary: 'bg-blue-100 text-blue-900',
+ accent: 'bg-yellow-400 text-gray-900',
+ light: 'bg-gray-50 text-gray-800',
+ dark: 'bg-gray-800 text-white',
+ };
+
+ return (
+
+ {/* Header with color block */}
+
+
+
+ {personalInfo.profileImage && (
+
+
+
+ )}
+
+
{personalInfo.fullName || 'Your Name'}
+
{personalInfo.title || 'Professional Title'}
+
+
+
+
+
+
+
+ {/* Left Column */}
+
+ {/* Contact */}
+
+
CONTACT
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+
+
{personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.website && (
+
+ )}
+
+
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
+
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+ {skill.level}
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
{edu.degree}
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+ {edu.graduationDate && (
+
+ {formatDate(edu.graduationDate)}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+ )}
+
+ ))}
+
+
+ )}
+
+
+ {/* Right Column */}
+
+ {/* Summary */}
+ {summary && (
+
+
+
+
{summary}
+
+ )}
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp) => (
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {/* Projects */}
+ {projects && projects.length > 0 && (
+
+
PROJECTS
+
+ {projects.map((project) => (
+
+ ))}
+
+
+ )}
+
+
+
+
+ {customization.showProfileImage && personalInfo.profileImage && (
+
+ )}
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+
+
{personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.website && (
+
+ {formatUrl(personalInfo.website)}
+
+ )}
+ {personalInfo.linkedin && (
+
+ {formatUrl(personalInfo.linkedin)}
+
+ )}
+ {personalInfo.github && (
+
+ {formatUrl(personalInfo.github)}
+
+ )}
+
+
+
+ Skills
+
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+ {skill.level}
+
+
+
+ ))}
+
+
+
+ Certifications
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+
+ References
+
+
+ {references.map((ref) => (
+
+
+ {ref.name}
+
+
+ {ref.title}
+
+
+ {ref.company}
+
+
+ {ref.relationship}
+
+
+ {ref.email} • {ref.phone}
+
+
+ ))}
+
+
+
+ Professional Summary
+
+
+ {summary}
+
+
+
+ Work Experience
+
+
+ {experience.map((exp, index) => (
+
+
+ {index < experience.length - 1 && (
+
+ )}
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company}{exp.location && `, ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, descIndex) => (
+ {desc}
+ ))}
+
+
+ ))}
+
+
+
+ Education
+
+
+ {education.map((edu, index) => (
+
+
+ {index < education.length - 1 && (
+
+ )}
+
+
+
+
+ {edu.degree}
+
+
+ {edu.school}{edu.location && `, ${edu.location}`}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ ))}
+
+
+
+ Projects
+
+
+ {projects.map((project, index) => (
+
+
+ {index < projects.length - 1 && (
+
+ )}
+
+
+
+ {project.name}
+
+
+ {formatDate(project.startDate)}
+ {project.endDate && ` - ${formatDate(project.endDate)}`}
+
+
+
+ {project.description}
+
+ {project.technologies.length > 0 && (
+
+ {project.technologies.map((tech, techIndex) => (
+
+ {tech}
+
+ ))}
+
+ )}
+ {project.url && (
+
+ {formatUrl(project.url)}
+
+ )}
+
+ ))}
+
+
+ {/* Left Sidebar */}
+
+ {leftSections.map(renderLeftSection)}
+
+
+ {/* Right Content */}
+
+ {rightSections.map(renderRightSection)}
+
+
+
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+
+ {personalInfo.title || 'Professional Title'}
+
+
+
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+ {personalInfo.website && (
+
+
+ )}
+ {personalInfo.linkedin && (
+
+
+ )}
+
+
+
+ {summary && (
+
+
+
+
+ {summary}
+
+
+ )}
+
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+ {exp.jobTitle}
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {education.map((edu) => (
+
+
+
+ {edu.degree}
+
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+
+ ))}
+
+
+
+
+
+ {skills.map((skill) => (
+
+
+
+ {skill.name}
+
+
+ {skill.level}
+
+
+
+
+ ))}
+
+
+
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+ {project.url && (
+
+ (View Project)
+
+ )}
+
+ {project.startDate && (
+
+ {formatDate(project.startDate)}
+ {project.endDate ? ` - ${formatDate(project.endDate)}` : ' - Present'}
+
+ )}
+
+
+ {project.description}
+
+ {project.technologies && project.technologies.length > 0 && (
+
+ {project.technologies.map((tech, i) => (
+
+ {tech}
+
+ ))}
+
+ )}
+
+ ))}
+
+
+
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/backup/templates/ExecutiveTemplate.tsx b/backup/templates/ExecutiveTemplate.tsx
new file mode 100644
index 0000000..5309599
--- /dev/null
+++ b/backup/templates/ExecutiveTemplate.tsx
@@ -0,0 +1,284 @@
+import React from 'react';
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Linkedin, Github, Award, Briefcase, GraduationCap, Code, BookOpen } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function ExecutiveTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications, projects, references, sections, customization } = data;
+
+ const visibleSections = sections.filter(section => section.isVisible).sort((a, b) => a.order - b.order);
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const formatUrl = (url: string) => {
+ if (!url) return '';
+ return url.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '');
+ };
+
+ const renderSection = (section: typeof sections[0]) => {
+ switch (section.type) {
+ case 'personalInfo':
+ return (
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+ {personalInfo.jobTitle && (
+
+ {personalInfo.jobTitle}
+
+ )}
+
+
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+ {personalInfo.website && (
+
+
+ )}
+ {personalInfo.linkedin && (
+
+
+ )}
+ {personalInfo.github && (
+
+
+ )}
+
+
+
+
+
+ Executive Profile
+
+
+
+ {summary}
+
+
+
+
+ Professional Experience
+
+
+
+ {experience.map((exp) => (
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company}{exp.location && ` • ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ Education
+
+
+
+ {education.map((edu) => (
+
+
+
+
+ {edu.degree}
+
+
+ {edu.school}{edu.location && `, ${edu.location}`}
+
+
+
+ {formatDate(edu.graduationDate)}
+
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+ ))}
+
+
+
+
+ Core Competencies
+
+
+
+ {skills.map((skill) => (
+
+ •
+
+ {skill.name}{skill.level ? ` (${skill.level})` : ''}
+
+
+ ))}
+
+
+
+
+ {certifications.map((cert) => (
+
+
+
+ {cert.name}
+
+
+ {cert.date && formatDate(cert.date)}
+
+
+ {cert.issuer && (
+
+ {cert.issuer}
+
+ )}
+
+ ))}
+
+
+
+
+ Key Projects
+
+
+
+ {projects.map((project) => (
+
+
+ {project.technologies && project.technologies.length > 0 && (
+
+ Technologies: {project.technologies.join(', ')}
+
+ )}
+
+ {project.description}
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/backup/templates/MinimalTemplate.tsx b/backup/templates/MinimalTemplate.tsx
new file mode 100644
index 0000000..cb9c50e
--- /dev/null
+++ b/backup/templates/MinimalTemplate.tsx
@@ -0,0 +1,319 @@
+import React from 'react';
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Linkedin, Github } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function MinimalTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications, projects, references, sections, customization } = data;
+
+ const visibleSections = sections.filter(section => section.isVisible).sort((a, b) => a.order - b.order);
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const formatUrl = (url: string) => {
+ if (!url) return '';
+ // Remove protocol and www for cleaner display
+ return url.replace(/^https?:\/\/(www\.)?/, '');
+ };
+
+ const renderSection = (section: typeof sections[0]) => {
+ switch (section.type) {
+ case 'personalInfo':
+ return (
+
+
+ {customization.showProfileImage && personalInfo.profileImage && (
+
+ )}
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+
+
+ {(personalInfo.website || personalInfo.linkedin || personalInfo.github) && (
+
+ {personalInfo.website && (
+
+
+ )}
+ {personalInfo.linkedin && (
+
+
+ )}
+ {personalInfo.github && (
+
+
+ )}
+
+ )}
+
+
+
+ Professional Summary
+
+
+ {summary}
+
+
+
+ Work Experience
+
+
+ {experience.map((exp) => (
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company}{exp.location && `, ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+ {desc}
+ ))}
+
+
+ ))}
+
+
+
+ Education
+
+
+ {education.map((edu) => (
+
+
+
+
+ {edu.degree}
+
+
+ {edu.school}{edu.location && `, ${edu.location}`}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ ))}
+
+
+
+ Skills
+
+
+ {skills.map((skill) => (
+
+ {skill.name}
+
+ {skill.level}
+
+
+ ))}
+
+
+
+ Certifications
+
+
+ {certifications.map((cert) => (
+
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+
+
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+
+ Projects
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+
+
+ {formatDate(project.startDate)}
+ {project.endDate && ` - ${formatDate(project.endDate)}`}
+
+
+
+ {project.description}
+
+ {project.technologies.length > 0 && (
+
+ {project.technologies.map((tech, index) => (
+
+ {tech}
+
+ ))}
+
+ )}
+ {project.url && (
+
+ {formatUrl(project.url)}
+
+ )}
+
+ ))}
+
+
+
+ Professional References
+
+
+ {references.map((ref) => (
+
+
+
+
+ {ref.name}
+
+
+ {ref.title} at {ref.company}
+
+
+ {ref.relationship}
+
+
+
+
{ref.email}
+
{ref.phone}
+
+
+
+ ))}
+
+
+ {visibleSections.map(renderSection)}
+
+ );
+}
\ No newline at end of file
diff --git a/backup/templates/MinimalistATS.tsx b/backup/templates/MinimalistATS.tsx
new file mode 100644
index 0000000..8247c71
--- /dev/null
+++ b/backup/templates/MinimalistATS.tsx
@@ -0,0 +1,126 @@
+import { Mail, Phone, MapPin, Globe, Linkedin, Github, Briefcase, GraduationCap, Code, Award } from 'lucide-react';
+import { ResumeData } from '@/types/resume';
+
+type TemplateProps = {
+ data: ResumeData;
+};
+
+export function MinimalistATS({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications } = data;
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
+ };
+
+ return (
+
+ {/* Header */}
+
+
{personalInfo.fullName}
+ {personalInfo.title &&
{personalInfo.title}
}
+
+ {personalInfo.email && {personalInfo.email} }
+ {personalInfo.phone && {personalInfo.phone} }
+ {personalInfo.location && {personalInfo.location} }
+ {personalInfo.linkedin && linkedin.com/in/username }
+
+
+
+ {/* Summary */}
+ {summary && (
+
+ )}
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
EXPERIENCE
+
+ {experience.map((exp) => (
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
EDUCATION
+
+ {education.map((edu) => (
+
+
+
{edu.degree}
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+
+ ))}
+
+
+ )}
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
SKILLS
+
+ {skills.map((skill) => (
+
+ {skill.name}
+
+ ))}
+
+
+ )}
+
+ {/* Certifications */}
+ {certifications.length > 0 && (
+
+
CERTIFICATIONS
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
+ {cert.issuer} • {formatDate(cert.date)}
+
+
+ ))}
+
+
+ )}
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+
+ {personalInfo.title || 'Professional Title'}
+
+
+
+
+
+
+
+ Profile
+
+
+ {summary}
+
+
+
+
+
+ Experience
+
+
+ {experience.map((exp) => (
+
+
+
+ {exp.jobTitle}
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ Education
+
+
+ {education.map((edu) => (
+
+
+
+ {edu.degree}
+
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+ {edu.relevantCourses && edu.relevantCourses.length > 0 && (
+
+
+ Relevant Coursework:
+
+
+ {edu.relevantCourses.map((course, i) => (
+
+ {course}
+
+ ))}
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ Skills
+
+
+ {skills.map((skill) => (
+
+ {skill.name}
+
+ ))}
+
+
+
+
+
+ Projects
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+ {project.url && (
+
+ (View Project)
+
+ )}
+
+ {project.startDate && (
+
+ {formatDate(project.startDate)}
+ {project.endDate ? ` - ${formatDate(project.endDate)}` : ' - Present'}
+
+ )}
+
+
+ {project.description}
+
+ {project.technologies && project.technologies.length > 0 && (
+
+ {project.technologies.map((tech, i) => (
+
+ {tech}
+
+ ))}
+
+ )}
+
+ ))}
+
+
+
+
+
+ Certifications
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+ {cert.date && ` • ${formatDate(cert.date)}`}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/backup/templates/MinimalistSidebarTemplate.tsx b/backup/templates/MinimalistSidebarTemplate.tsx
new file mode 100644
index 0000000..29b7ff7
--- /dev/null
+++ b/backup/templates/MinimalistSidebarTemplate.tsx
@@ -0,0 +1,166 @@
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Briefcase, GraduationCap, User } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function MinimalistSidebarTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills } = data;
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const renderSidebar = () => (
+
+ {personalInfo.profileImage && (
+
+
+
+ )}
+
+
+
+
CONTACT
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+
+
{personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.website && (
+
+ {personalInfo.website.replace(/^https?:\/\//, '')}
+
+ )}
+
+
+
+ {skills.length > 0 && (
+
+
SKILLS
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+
+ {skill.level === 'Expert' ? '★★★★★' :
+ skill.level === 'Advanced' ? '★★★★☆' :
+ skill.level === 'Intermediate' ? '★★★☆☆' : '★★☆☆☆'}
+
+
+
+ ))}
+
+
+ )}
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+ {personalInfo.title || 'Professional Title'}
+
+
+ {summary && (
+
+
+
+
{summary}
+
+ )}
+
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp) => (
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+ {desc}
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
+
{edu.degree}
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+
+ ))}
+
+
+ )}
+
+ {renderSidebar()}
+ {renderMainContent()}
+
+ );
+}
diff --git a/backup/templates/MinimalistTemplate.tsx b/backup/templates/MinimalistTemplate.tsx
new file mode 100644
index 0000000..5efe0cd
--- /dev/null
+++ b/backup/templates/MinimalistTemplate.tsx
@@ -0,0 +1,261 @@
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Linkedin, Github } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function MinimalistTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications, projects, sections, customization } = data;
+
+ const visibleSections = sections.filter(section => section.isVisible).sort((a, b) => a.order - b.order);
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const formatUrl = (url: string) => {
+ if (!url) return '';
+ return url.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '');
+ };
+
+ const renderSection = (section: typeof sections[0]) => {
+ switch (section.type) {
+ case 'personalInfo':
+ return (
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+ {personalInfo.title && (
+
+ {personalInfo.title}
+
+ )}
+
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+ {personalInfo.website && (
+
+
+ )}
+ {personalInfo.linkedin && (
+
+
+ )}
+ {personalInfo.github && (
+
+
+ )}
+
+
+
+
+ About
+
+
+ {summary}
+
+
+
+ Experience
+
+
+ {experience.map((exp) => (
+
+
+
+ {exp.jobTitle}
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}{exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+ Education
+
+
+ {education.map((edu) => (
+
+
+
+ {edu.degree}
+
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}{edu.location && ` • ${edu.location}`}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+ ))}
+
+
+
+ Skills
+
+
+ {skills.map((skill) => (
+
+ {skill.name}
+
+ ))}
+
+
+
+ Certifications
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+ {cert.date && ` • ${formatDate(cert.date)}`}
+
+
+ ))}
+
+
+
+ Projects
+
+
+ {projects.map((project) => (
+
+
+ {project.technologies && project.technologies.length > 0 && (
+
+ {project.technologies.join(' • ')}
+
+ )}
+
+ {project.description}
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/backup/templates/ModernDarkSidebarTemplate.tsx b/backup/templates/ModernDarkSidebarTemplate.tsx
new file mode 100644
index 0000000..267bd3f
--- /dev/null
+++ b/backup/templates/ModernDarkSidebarTemplate.tsx
@@ -0,0 +1,192 @@
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Briefcase, GraduationCap, User } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function ModernDarkSidebarTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications } = data;
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const renderSidebar = () => (
+
+ {personalInfo.profileImage && (
+
+
+
+ )}
+
+
+
+
CONTACT
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+
+
{personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.website && (
+
+ )}
+
+
+
+ {skills.length > 0 && (
+
+
SKILLS
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+
+ {skill.level === 'Expert' ? '★★★★★' :
+ skill.level === 'Advanced' ? '★★★★☆' :
+ skill.level === 'Intermediate' ? '★★★☆☆' : '★★☆☆☆'}
+
+
+
+ ))}
+
+
+ )}
+
+ {certifications && certifications.length > 0 && (
+
+
CERTIFICATIONS
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
{cert.issuer}
+ {cert.date && (
+
+ {new Date(cert.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short' })}
+
+ )}
+
+ ))}
+
+
+ )}
+
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+ {personalInfo.title || 'Professional Title'}
+
+
+
+ {summary && (
+
+
+
+
{summary}
+
+ )}
+
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp) => (
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
+
{edu.degree}
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+
+ ))}
+
+
+ )}
+
+ {renderSidebar()}
+ {renderMainContent()}
+
+ );
+}
diff --git a/backup/templates/ModernExecutiveTemplate.tsx b/backup/templates/ModernExecutiveTemplate.tsx
new file mode 100644
index 0000000..ade357e
--- /dev/null
+++ b/backup/templates/ModernExecutiveTemplate.tsx
@@ -0,0 +1,220 @@
+import { Mail, Phone, MapPin, Linkedin, Globe, Briefcase, GraduationCap, Award, Code } from 'lucide-react';
+import { ResumeData } from '@/types/resume';
+
+type TemplateProps = {
+ data: ResumeData;
+};
+
+export function ModernExecutiveTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications } = data;
+ const accentColor = data.customization.accentColor || '#2563eb';
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ return (
+
+ {/* Sidebar */}
+
+ {/* Profile Image */}
+ {personalInfo.profileImage && (
+
+
+
+ )}
+
+ {/* Contact */}
+
+
+ Contact
+
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.linkedin && (
+
+ LinkedIn
+
+ )}
+ {personalInfo.website && (
+
+ {personalInfo.website.replace(/^https?:\/\//, '')}
+
+ )}
+
+
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
+ Skills
+
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+ {skill.level}
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Certifications */}
+ {certifications.length > 0 && (
+
+
+ Certifications
+
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
{cert.issuer}
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` • Expires: ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+ )}
+
+
+ {/* Main Content */}
+
+ {/* Header */}
+
+
+ {personalInfo.fullName}
+
+ {personalInfo.title && (
+
+ {personalInfo.title}
+
+ )}
+
+
+ {/* Summary */}
+ {summary && (
+
+
+ Professional Summary
+
+
+ {summary}
+
+
+ )}
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+
{exp.jobTitle}
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
+
{edu.degree}
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+
+ {edu.fieldOfStudy}
+ {formatDate(edu.graduationDate)}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+ ))}
+
+
+ )}
+
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+ {personalInfo.title || 'Professional Title'}
+
+
+
+
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+ {personalInfo.website && (
+
+
+ )}
+ {personalInfo.linkedin && (
+
+
+ )}
+ {personalInfo.github && (
+
+
+ )}
+
+
+
+
+
+
+ {summary}
+
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {education.map((edu) => (
+
+
+
+
+ {edu.degree}
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+
+
+ {formatDate(edu.graduationDate)}
+
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+ {edu.relevantCourses && edu.relevantCourses.length > 0 && (
+
+
+ Relevant Coursework:
+
+
+ {edu.relevantCourses.map((course, i) => (
+
+ {course}
+
+ ))}
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ {skills.map((skill) => (
+
+
+
+ {skill.name}
+
+
+ {skill.level}
+
+
+
+
+ ))}
+
+
+
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+ {project.url && (
+
+ (View Project)
+
+ )}
+
+ {project.startDate && (
+
+ {formatDate(project.startDate)}
+ {project.endDate ? ` - ${formatDate(project.endDate)}` : ' - Present'}
+
+ )}
+
+
+ {project.description}
+
+ {project.technologies && project.technologies.length > 0 && (
+
+
+ {project.technologies.map((tech, i) => (
+
+ {tech}
+
+ ))}
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/backup/templates/ModernSidebarTemplate.tsx b/backup/templates/ModernSidebarTemplate.tsx
new file mode 100644
index 0000000..25759f3
--- /dev/null
+++ b/backup/templates/ModernSidebarTemplate.tsx
@@ -0,0 +1,266 @@
+import { Mail, Phone, MapPin, Globe, Linkedin, Github, Briefcase, GraduationCap, Code, Award, User, BookOpen } from 'lucide-react';
+import { ResumeData } from '@/types/resume';
+
+type TemplateProps = {
+ data: ResumeData;
+};
+
+export function ModernSidebarTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications, projects, sections, customization } = data;
+ const visibleSections = sections.filter(section => section.isVisible).sort((a, b) => a.order - b.order);
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const renderSidebar = () => (
+
+ {personalInfo.profileImage && (
+
+
+
+ )}
+
+
+
+
CONTACT
+
+ {personalInfo.email && (
+
+ )}
+ {personalInfo.phone && (
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.website && (
+
+ )}
+ {personalInfo.linkedin && (
+
+ )}
+ {personalInfo.github && (
+
+ )}
+
+
+
+ {skills.length > 0 && (
+
+
SKILLS
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+
+ {skill.level === 'Expert' ? '★★★★★' :
+ skill.level === 'Advanced' ? '★★★★☆' :
+ skill.level === 'Intermediate' ? '★★★☆☆' : '★★☆☆☆'}
+
+
+
+ ))}
+
+
+ )}
+
+ {certifications.length > 0 && (
+
+
CERTIFICATIONS
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
{cert.issuer}
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` • Expires: ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+ )}
+
+
+
+
+ {personalInfo.fullName}
+
+ {personalInfo.title && (
+
+ {personalInfo.title}
+
+ )}
+
+
+ {summary && (
+
+
+
+
{summary}
+
+ )}
+
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
+
+
+ {edu.degree}
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+
+
+ {formatDate(edu.graduationDate)}
+
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+ ))}
+
+
+ )}
+
+ {projects.length > 0 && (
+
+
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+
+
+ {formatDate(project.startDate)}
+ {project.endDate && ` - ${formatDate(project.endDate)}`}
+
+
+
+ {project.description}
+
+ {project.technologies.length > 0 && (
+
+ {project.technologies.map((tech, idx) => (
+
+ {tech}
+
+ ))}
+
+ )}
+
+ ))}
+
+
+ )}
+
+ {renderSidebar()}
+ {renderMainContent()}
+
+ );
+}
diff --git a/backup/templates/ModernTemplate.tsx b/backup/templates/ModernTemplate.tsx
new file mode 100644
index 0000000..b338344
--- /dev/null
+++ b/backup/templates/ModernTemplate.tsx
@@ -0,0 +1,339 @@
+import React from 'react';
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Linkedin, Github } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function ModernTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications, projects, references, sections, customization } = data;
+
+ const visibleSections = sections.filter(section => section.isVisible).sort((a, b) => a.order - b.order);
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const formatUrl = (url: string) => {
+ if (!url) return '';
+ // Remove protocol and www for cleaner display
+ return url.replace(/^https?:\/\/(www\.)?/, '');
+ };
+
+ const renderSection = (section: typeof sections[0]) => {
+ switch (section.type) {
+ case 'personalInfo':
+ return (
+
+
+ {customization.showProfileImage && personalInfo.profileImage && (
+
+ )}
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+ {personalInfo.website && (
+
+
+ )}
+ {personalInfo.linkedin && (
+
+
+ )}
+ {personalInfo.github && (
+
+
+ )}
+
+
+
+
+
+
+
+ Professional Summary
+
+
+
+ {summary}
+
+
+
+
+
+ Work Experience
+
+
+
+ {experience.map((exp) => (
+
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company}{exp.location && `, ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+ {desc}
+ ))}
+
+
+ ))}
+
+
+
+
+ {education.map((edu) => (
+
+
+
+
+
+ {edu.degree}
+
+
+ {edu.school}{edu.location && `, ${edu.location}`}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ ))}
+
+
+
+
+ {skills.map((skill) => (
+
+ {skill.name}
+
+ {skill.level}
+
+
+ ))}
+
+
+
+
+ {certifications.map((cert) => (
+
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+
+
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+
+
+ {formatDate(project.startDate)}
+ {project.endDate && ` - ${formatDate(project.endDate)}`}
+
+
+
+ {project.description}
+
+ {project.technologies.length > 0 && (
+
+ {project.technologies.map((tech, index) => (
+
+ {tech}
+
+ ))}
+
+ )}
+ {project.url && (
+
+ {formatUrl(project.url)}
+
+ )}
+
+ ))}
+
+
+
+
+
+ Professional References
+
+
+
+ {references.map((ref) => (
+
+
+
+
+ {ref.name}
+
+
+ {ref.title} at {ref.company}
+
+
+ {ref.relationship}
+
+
+
+
{ref.email}
+
{ref.phone}
+
+
+
+ ))}
+
+
+ {visibleSections.map(renderSection)}
+
+ );
+}
\ No newline at end of file
diff --git a/backup/templates/ModernTimelineTemplate.tsx b/backup/templates/ModernTimelineTemplate.tsx
new file mode 100644
index 0000000..6f3528d
--- /dev/null
+++ b/backup/templates/ModernTimelineTemplate.tsx
@@ -0,0 +1,207 @@
+import { Mail, Phone, MapPin, Linkedin, Globe, Briefcase, GraduationCap, Award } from 'lucide-react';
+import { ResumeData } from '@/types/resume';
+
+type TemplateProps = {
+ data: ResumeData;
+};
+
+export function ModernTimelineTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications } = data;
+ const accentColor = data.customization.accentColor || '#3b82f6';
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ return (
+
+ {/* Header */}
+
+
+ {personalInfo.fullName}
+
+ {personalInfo.title && (
+
+ {personalInfo.title}
+
+ )}
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+
+
+
+ {/* Summary */}
+ {summary && (
+
+ )}
+
+ {/* Timeline Section */}
+
+ {/* Timeline Line */}
+
+
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp, idx) => (
+
+
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
+
+
+
{edu.degree}
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+ {edu.fieldOfStudy && (
+
+ {edu.fieldOfStudy}
+
+ )}
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+
+ ))}
+
+
+ )}
+
+
+
+ {/* Skills & Certifications */}
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
+
+
+ {skills.map((skill) => (
+
+ {skill.name}
+
+ ))}
+
+
+ )}
+
+ {/* Certifications */}
+ {certifications.length > 0 && (
+
+
+
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
+ {cert.issuer} • {formatDate(cert.date)}
+
+
+ ))}
+
+
+ )}
+
+
+ {/* Left Column */}
+
+ {/* Profile */}
+
+
+ {personalInfo.profileImage ? (
+
+ ) : (
+
+
+ {personalInfo.fullName.split(' ').map(n => n[0]).join('')}
+
+
+ )}
+
+
{personalInfo.fullName}
+ {personalInfo.title && (
+
{personalInfo.title}
+ )}
+
+
+ {/* Contact */}
+
+
Contact
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.linkedin && (
+
+ LinkedIn
+
+ )}
+
+
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
Skills
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+ {skill.level}
+
+
+
+ ))}
+
+
+ )}
+
+
+ {/* Right Column */}
+
+ {/* Summary */}
+ {summary && (
+
+
+ About Me
+
+
{summary}
+
+ )}
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
+ Work Experience
+
+
+ {experience.map((exp) => (
+
+
+
+
{exp.jobTitle}
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
+ Education
+
+
+ {education.map((edu) => (
+
+
+
+
{edu.degree}
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+
+
+ {formatDate(edu.graduationDate)}
+
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+ ))}
+
+
+ )}
+
+ {/* Certifications */}
+ {certifications.length > 0 && (
+
+
+ Certifications
+
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
+ {cert.issuer} • {formatDate(cert.date)}
+
+
+ ))}
+
+
+ )}
+
+
+
+ {personalInfo.profileImage && (
+
+
+
+ )}
+
+
{personalInfo.fullName || 'Your Name'}
+
{personalInfo.title || 'Professional Title'}
+
+
+
+
+
+
{summary}
+
+
+
+
+ {experience.map((exp) => (
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ ))}
+
+
+
+
+
+ {education.map((edu) => (
+
+
+
{edu.degree}
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+
+ ))}
+
+
+
+
+
+ {skills.map((skill) => (
+
+
+
+ {skill.name}
+
+
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/backup/templates/ProfessionalSidebarTemplate.tsx b/backup/templates/ProfessionalSidebarTemplate.tsx
new file mode 100644
index 0000000..d91b338
--- /dev/null
+++ b/backup/templates/ProfessionalSidebarTemplate.tsx
@@ -0,0 +1,175 @@
+import { Mail, Phone, MapPin, Linkedin, Globe, Briefcase, GraduationCap, Award } from 'lucide-react';
+import { ResumeData } from '@/types/resume';
+
+type TemplateProps = {
+ data: ResumeData;
+};
+
+export function ProfessionalSidebarTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications } = data;
+ const accentColor = data.customization.accentColor || '#2563eb';
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ return (
+
+ {/* Sidebar */}
+
+ {/* Profile */}
+
+ {personalInfo.profileImage ? (
+
+
+
+ ) : (
+
+
+ {personalInfo.fullName.split(' ').map(n => n[0]).join('')}
+
+
+ )}
+
{personalInfo.fullName}
+ {personalInfo.title &&
{personalInfo.title}
}
+
+
+ {/* Contact */}
+
+
Contact
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.linkedin && (
+
+ LinkedIn
+
+ )}
+
+
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
Skills
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+ {skill.level}
+
+
+
+ ))}
+
+
+ )}
+
+
+ {/* Main Content */}
+
+ {/* Summary */}
+ {summary && (
+
+
+ Professional Summary
+
+
{summary}
+
+ )}
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp) => (
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
{edu.degree}
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+
+ {edu.fieldOfStudy}
+ {formatDate(edu.graduationDate)}
+
+ {edu.gpa && (
+
GPA: {edu.gpa}
+ )}
+
+ ))}
+
+
+ )}
+
+
+ {/* Header */}
+
+
{personalInfo.fullName || 'Your Name'}
+
{personalInfo.title || 'Professional Title'}
+
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+
+
{personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.website && (
+
+ )}
+
+
+
+ {/* Summary */}
+ {summary && (
+
+
+
+
{summary}
+
+ )}
+
+
+ {/* Left Column */}
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp) => (
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
+
{edu.degree}
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+
+ ))}
+
+
+ )}
+
+
+ {/* Right Column */}
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
+
+
+ {skills.map((skill) => (
+
+
+
+ {skill.name}
+
+
+ {skill.level}
+
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Certifications */}
+ {certifications && certifications.length > 0 && (
+
+
CERTIFICATIONS
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
{cert.issuer}
+ {cert.date && (
+
+ {new Date(cert.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short' })}
+
+ )}
+
+ ))}
+
+
+ )}
+
+
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+ {personalInfo.jobTitle && (
+
+ {personalInfo.jobTitle}
+
+ )}
+
+
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+ {personalInfo.website && (
+
+
+ )}
+ {personalInfo.linkedin && (
+
+
+ )}
+ {personalInfo.github && (
+
+
+ )}
+
+
+
+
+
+ Professional Summary
+
+
+
+ {summary}
+
+
+
+
+
+ Professional Experience
+
+
+
+ {experience.map((exp) => (
+
+
+
+ {exp.jobTitle}
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+
+ {exp.company}{exp.location && ` • ${exp.location}`}
+
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+ {desc}
+ ))}
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/backup/templates/TechTemplate.tsx b/backup/templates/TechTemplate.tsx
new file mode 100644
index 0000000..cd658f7
--- /dev/null
+++ b/backup/templates/TechTemplate.tsx
@@ -0,0 +1,321 @@
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Linkedin, Github, Code, Cpu, BookOpen, Award, Briefcase, GraduationCap } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function TechTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications, projects, sections, customization } = data;
+
+ const visibleSections = sections.filter(section => section.isVisible).sort((a, b) => a.order - b.order);
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const formatUrl = (url: string) => {
+ if (!url) return '';
+ return url.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '');
+ };
+
+ const renderSection = (section: typeof sections[0]) => {
+ switch (section.type) {
+ case 'personalInfo':
+ return (
+
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+ {personalInfo.title || 'Software Engineer'}
+
+
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+ {personalInfo.linkedin && (
+
+
+ )}
+ {personalInfo.github && (
+
+
+ )}
+ {personalInfo.website && (
+
+
+ )}
+
+
+
+
+
+
+ {summary}
+
+
+
+
+
+ {skills.map((skill) => (
+
+
+
+ {skill.name}
+
+
+ {skill.level}
+
+
+
+
+ ))}
+
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+ {project.url && (
+
+ (View Project)
+
+ )}
+
+ {project.startDate && (
+
+ {formatDate(project.startDate)}
+ {project.endDate ? ` - ${formatDate(project.endDate)}` : ' - Present'}
+
+ )}
+
+
+ {project.description}
+
+ {project.technologies && project.technologies.length > 0 && (
+
+ {project.technologies.map((tech, i) => (
+
+ {tech}
+
+ ))}
+
+ )}
+
+ ))}
+
+
+
+
+
+ {education.map((edu) => (
+
+
+
+
+ {edu.degree}
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+
+ {formatDate(edu.graduationDate)}
+
+
+ {edu.relevantCourses && edu.relevantCourses.length > 0 && (
+
+
+ Relevant Coursework:
+
+
+ {edu.relevantCourses.map((course, i) => (
+
+ {course}
+
+ ))}
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/backup/templates/TimelineTemplate.tsx b/backup/templates/TimelineTemplate.tsx
new file mode 100644
index 0000000..30b9a1f
--- /dev/null
+++ b/backup/templates/TimelineTemplate.tsx
@@ -0,0 +1,183 @@
+import { Mail, Phone, MapPin, Globe, Linkedin, Github, Briefcase, GraduationCap, Code, Award } from 'lucide-react';
+import { ResumeData } from '@/types/resume';
+
+type TemplateProps = {
+ data: ResumeData;
+};
+
+export function TimelineTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications } = data;
+ const accentColor = data.customization.accentColor || '#3b82f6';
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
+ };
+
+ return (
+
+ {/* Header */}
+
+
{personalInfo.fullName}
+ {personalInfo.title && (
+
{personalInfo.title}
+ )}
+
+ {personalInfo.email && {personalInfo.email} }
+ {personalInfo.phone && {personalInfo.phone} }
+ {personalInfo.location && {personalInfo.location} }
+
+
+
+ {/* Summary */}
+ {summary && (
+
+
Professional Summary
+
{summary}
+
+ )}
+
+ {/* Timeline Section */}
+
+ {/* Timeline Line */}
+
+
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp, idx) => (
+
+
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
+
+
+
{edu.degree}
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+
+ ))}
+
+
+ )}
+
+
+
+ {/* Skills & Certifications */}
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
+
+
+ {skills.map((skill) => (
+
+ {skill.name}
+
+ ))}
+
+
+ )}
+
+ {/* Certifications */}
+ {certifications.length > 0 && (
+
+
+
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
+ {cert.issuer} • {formatDate(cert.date)}
+
+
+ ))}
+
+
+ )}
+
+
>;
+
+type TemplateLayout = 'one-column' | 'two-column' | 'sidebar' | 'creative';
+
+// Define the base SVG function with proper escaping
+const baseSvg = (content: string, colors: TemplateColors) => {
+ const { background } = colors;
+ try {
+ return `
+
+
+ `;
+ } catch (error) {
+ console.error('Error generating SVG:', error);
+ return `
+
+ Preview Error
+
+ `;
+ }
+};
+
+interface TemplatePreviewProps {
+ templateId: string;
+ className?: string;
+ isSelected?: boolean;
+ onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+}
+
+// Use TemplateMeta directly since we don't need to modify it
+
+interface TemplateColors {
+ primary: string;
+ secondary: string;
+ background: string;
+ text: string;
+ muted: string;
+}
+
+const getTemplateLayout = (templateId: string): TemplateLayout => {
+ if (templateId.includes('sidebar')) return 'sidebar';
+ if (templateId.includes('modern') || templateId.includes('creative')) return 'creative';
+ if (templateId.includes('minimalist')) return 'one-column';
+ return 'two-column';
+};
+
+const getCategoryColors = (category: TemplateCategory): TemplateColors => ({
+ [TemplateCategory.PROFESSIONAL]: {
+ primary: '#1e40af',
+ secondary: '#93c5fd',
+ background: '#ffffff',
+ text: '#111827',
+ muted: '#6b7280'
+ },
+ [TemplateCategory.MODERN]: {
+ primary: '#7c3aed',
+ secondary: '#c4b5fd',
+ background: '#f9fafb',
+ text: '#1f2937',
+ muted: '#6b7280'
+ },
+ [TemplateCategory.MINIMALIST]: {
+ primary: '#059669',
+ secondary: '#6ee7b7',
+ background: '#ffffff',
+ text: '#1f2937',
+ muted: '#6b7280'
+ },
+ [TemplateCategory.CREATIVE]: {
+ primary: '#c026d3',
+ secondary: '#f0abfc',
+ background: '#fdf4ff',
+ text: '#1f2937',
+ muted: '#6b7280'
+ },
+ [TemplateCategory.SPECIALIZED]: {
+ primary: '#d97706',
+ secondary: '#fcd34d',
+ background: '#fffbeb',
+ text: '#1f2937',
+ muted: '#6b7280'
+ },
+})[category] || {
+ primary: '#1e40af',
+ secondary: '#93c5fd',
+ background: '#ffffff',
+ text: '#111827',
+ muted: '#6b7280'
+};
+
+const generateSvgPreview = (layout: TemplateLayout, colors: TemplateColors): string => {
+ if (!colors) {
+ colors = {
+ primary: '#1e40af',
+ secondary: '#93c5fd',
+ background: '#ffffff',
+ text: '#111827',
+ muted: '#6b7280'
+ };
+ }
+ const { primary, secondary, text, muted } = colors;
+
+ switch (layout) {
+ case 'one-column':
+ return baseSvg(`
+ (null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ // Get template metadata safely
+ const template = useTemplate(templateId);
+
+ // Load preview image or generate SVG preview
+ useEffect(() => {
+ // This variable will hold the URL if we create one in this effect run.
+ let objectUrl: string | null = null;
+
+ const loadPreview = async () => {
+ if (!template) {
+ setError('Template not found');
+ setIsLoading(false);
+ return;
+ }
+
+ setIsLoading(true);
+ setError(null);
+
+ try {
+ if (template.previewImage) {
+ // If template has a preview image, use it
+ setPreviewImage(template.previewImage);
+ } else {
+ // Otherwise generate an SVG preview
+ const layout = getTemplateLayout(template.id);
+ const category = template.category || TemplateCategory.PROFESSIONAL;
+ const colors = getCategoryColors(category);
+
+ const svgContent = generateSvgPreview(layout, colors);
+ if (!svgContent) {
+ throw new Error('Failed to generate SVG content');
+ }
+ const svgBlob = new Blob([svgContent], { type: 'image/svg+xml' });
+ objectUrl = URL.createObjectURL(svgBlob);
+ setPreviewImage(objectUrl);
+ }
+ } catch (err) {
+ console.error('Error generating preview:', err);
+ setError('Failed to generate preview');
+ // Fallback to a simple SVG
+ const fallbackSvg = `
+
+
+ `;
+ const svgBlob = new Blob([fallbackSvg], { type: 'image/svg+xml' });
+ objectUrl = URL.createObjectURL(svgBlob);
+ setPreviewImage(objectUrl);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ loadPreview();
+
+ // Clean up object URL to prevent memory leaks
+ return () => {
+ if (objectUrl) {
+ URL.revokeObjectURL(objectUrl);
+ }
+ };
+ }, [template]);
+
+ if (isLoading) {
+ return (
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
+
Failed to load preview
+
+
{error}
+
+
+
+
No preview available
+
+
) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ if (onClick) {
+ onClick(e);
+ }
+ }
+ }}
+ >
+
+
{
+ setError('Failed to load preview image');
+ setPreviewImage(null);
+ }}
+ />
+
+
+
+ {template?.name || 'Untitled Template'}
+
+ {template?.category && (
+
+ {template.category}
+
+ )}
+
+ {isSelected && (
+
+
+ )}
+
('all');
+
+ // Filter templates based on search query and selected category
+ const filteredTemplates = templateRegistry.filter((template) => {
+ const matchesSearch = template.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ template.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ template.tags?.some((tag: string) => tag.toLowerCase().includes(searchQuery.toLowerCase()));
+
+ const matchesCategory = selectedCategory === 'all' ||
+ template.category === selectedCategory ||
+ (selectedCategory === 'ats' && template.atsFriendly);
+
+ return matchesSearch && matchesCategory;
+ });
+
+ return (
+
+
+
+
Choose a Template
+
+ Select a template that best fits your needs. You can change this later.
+
+
+
+
+
+
+
+
+
setSelectedCategory(value)}
+ >
+
+ {categories.map((cat) => (
+
+
+
+
+ {cat.icon}
+
+
+ {cat.name}
+
+ ))}
+
+
+
+ {filteredTemplates.length === 0 ? (
+
+
No templates found matching your criteria.
+
{
+ setSearchQuery('');
+ setSelectedCategory('all');
+ }}
+ >
+ Clear filters
+
+
+ {filteredTemplates.map((template: TemplateItem) => {
+ const isSelected = selectedTemplateId === template.id;
+ return (
+
+
+
+ onSelectTemplate(template.id)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ onSelectTemplate(template.id);
+ }
+ }}
+ className={cn(
+ 'group relative cursor-pointer overflow-hidden rounded-lg border-2 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
+ isSelected ? 'border-primary ring-2 ring-primary/20' : 'border-transparent hover:border-primary/50'
+ )}
+ >
+
+
+ {isSelected && (
+
+
+ )}
+
+
+
+
+
+
+
{template.name}
+
{template.description}
+
+
+
+ {template.category}
+
+ {template.atsFriendly && (
+
+
+ )}
+ {template.tags?.map((tag: string) => (
+
+ {tag}
+
+ ))}
+
+
+
+
+ );
+ })}
+
+
+
+
;
+
+// Helper function to create lazy-loaded template components with proper typing
+const createLazyTemplate = (
+ importFn: () => Promise,
+ exportName: keyof T & string
+): LazyTemplate => {
+ return lazy(async () => {
+ const module = await importFn();
+ return { default: module[exportName] };
+ });
+};
+
+// Lazy load all templates with proper typing
+const templates = {
+ AcademicTemplate: createLazyTemplate(
+ () => import('./templates/AcademicTemplate'),
+ 'AcademicTemplate'
+ ),
+ BoldTemplate: createLazyTemplate(
+ () => import('./templates/BoldTemplate'),
+ 'BoldTemplate'
+ ),
+ CleanMinimalistTemplate: createLazyTemplate(
+ () => import('./templates/CleanMinimalistTemplate'),
+ 'CleanMinimalistTemplate'
+ ),
+ CleanProfessionalTemplate: createLazyTemplate(
+ () => import('./templates/CleanProfessionalTemplate'),
+ 'CleanProfessionalTemplate'
+ ),
+ CorporateTemplate: createLazyTemplate(
+ () => import('./templates/CorporateTemplate'),
+ 'CorporateTemplate'
+ ),
+ CreativeColorBlocksTemplate: createLazyTemplate(
+ () => import('./templates/CreativeColorBlocksTemplate'),
+ 'CreativeColorBlocksTemplate'
+ ),
+ CreativeTemplate: createLazyTemplate(
+ () => import('./templates/CreativeTemplate'),
+ 'CreativeTemplate'
+ ),
+ ElegantTemplate: createLazyTemplate(
+ () => import('./templates/ElegantTemplate'),
+ 'ElegantTemplate'
+ ),
+ ExecutiveTemplate: createLazyTemplate(
+ () => import('./templates/ExecutiveTemplate'),
+ 'ExecutiveTemplate'
+ ),
+ // MinimalTemplate: createLazyTemplate(
+ // () => import('./templates/MinimalTemplate'),
+ // 'MinimalTemplate'
+ // ),
+ MinimalistATS: createLazyTemplate(
+ () => import('./templates/MinimalistATS'),
+ 'MinimalistATS'
+ ),
+ MinimalistProfessionalTemplate: createLazyTemplate(
+ () => import('./templates/MinimalistProfessionalTemplate'),
+ 'MinimalistProfessionalTemplate'
+ ),
+ MinimalistSidebarTemplate: createLazyTemplate(
+ () => import('./templates/MinimalistSidebarTemplate'),
+ 'MinimalistSidebarTemplate'
+ ),
+ MinimalistTemplate: createLazyTemplate(
+ () => import('./templates/MinimalistTemplate'),
+ 'MinimalistTemplate'
+ ),
+ ModernDarkSidebarTemplate: createLazyTemplate(
+ () => import('./templates/ModernDarkSidebarTemplate'),
+ 'ModernDarkSidebarTemplate'
+ ),
+ ModernExecutiveTemplate: createLazyTemplate(
+ () => import('./templates/ModernExecutiveTemplate'),
+ 'ModernExecutiveTemplate'
+ ),
+ ModernProfessionalTemplate: createLazyTemplate(
+ () => import('./templates/ModernProfessionalTemplate'),
+ 'ModernProfessionalTemplate'
+ ),
+ ModernSidebarTemplate: createLazyTemplate(
+ () => import('./templates/ModernSidebarTemplate'),
+ 'ModernSidebarTemplate'
+ ),
+ ModernTemplate: createLazyTemplate(
+ () => import('./templates/ModernTemplate'),
+ 'ModernTemplate'
+ ),
+ ModernTimelineTemplate: createLazyTemplate(
+ () => import('./templates/ModernTimelineTemplate'),
+ 'ModernTimelineTemplate'
+ ),
+ ModernTwoColumn: createLazyTemplate(
+ () => import('./templates/ModernTwoColumn'),
+ 'ModernTwoColumn'
+ ),
+ ProfessionalBlueTemplate: createLazyTemplate(
+ () => import('./templates/ProfessionalBlueTemplate'),
+ 'ProfessionalBlueTemplate'
+ ),
+ ProfessionalSidebarTemplate: createLazyTemplate(
+ () => import('./templates/ProfessionalSidebarTemplate'),
+ 'ProfessionalSidebarTemplate'
+ ),
+ ProfessionalSummaryTemplate: createLazyTemplate(
+ () => import('./templates/ProfessionalSummaryTemplate'),
+ 'ProfessionalSummaryTemplate'
+ ),
+ ProfessionalTemplate: createLazyTemplate(
+ () => import('./templates/ProfessionalTemplate'),
+ 'ProfessionalTemplate'
+ ),
+ TechTemplate: createLazyTemplate(
+ () => import('./templates/TechTemplate'),
+ 'TechTemplate'
+ ),
+ TimelineTemplate: createLazyTemplate(
+ () => import('./templates/TimelineTemplate'),
+ 'TimelineTemplate'
+ ),
+};
+
+// Template metadata with descriptions and categories
+export const templateRegistry: TemplateMeta[] = [
+ {
+ id: 'clean-professional',
+ name: 'Clean Professional',
+ description: 'A clean and professional resume template with a balanced layout.',
+ category: TemplateCategory.PROFESSIONAL,
+ component: templates.CleanProfessionalTemplate,
+ tags: ['professional', 'clean', 'ats-friendly'],
+ atsFriendly: true,
+ lastUpdated: '2025-07-23',
+ },
+ {
+ id: 'modern-executive',
+ name: 'Modern Executive',
+ description: 'A modern executive resume with a sidebar for key information.',
+ category: TemplateCategory.MODERN,
+ component: templates.ModernExecutiveTemplate,
+ tags: ['modern', 'executive', 'sidebar'],
+ atsFriendly: true,
+ lastUpdated: '2025-07-23',
+ },
+ {
+ id: 'minimalist-ats',
+ name: 'Minimalist ATS',
+ description: 'Optimized for Applicant Tracking Systems with clean typography and structure.',
+ category: TemplateCategory.MINIMALIST,
+ component: templates.MinimalistATS,
+ tags: ['minimalist', 'ats-optimized', 'clean'],
+ atsFriendly: true,
+ lastUpdated: '2025-07-23',
+ },
+ {
+ id: 'creative-color-blocks',
+ name: 'Creative Color Blocks',
+ description: 'A creative template with color blocks for a modern, eye-catching design.',
+ category: TemplateCategory.CREATIVE,
+ component: templates.CreativeColorBlocksTemplate,
+ tags: ['creative', 'colorful', 'modern'],
+ atsFriendly: false,
+ lastUpdated: '2025-07-23',
+ },
+ // Add more templates with their metadata
+ {
+ id: 'academic',
+ name: 'Academic',
+ description: 'Designed for academic and research positions with emphasis on publications.',
+ category: TemplateCategory.SPECIALIZED,
+ component: templates.AcademicTemplate,
+ tags: ['academic', 'research', 'publications'],
+ atsFriendly: true,
+ lastUpdated: '2025-07-23',
+ },
+ {
+ id: 'bold',
+ name: 'Bold',
+ description: 'A bold and confident design that makes a strong impression.',
+ category: TemplateCategory.CREATIVE,
+ component: templates.BoldTemplate,
+ tags: ['bold', 'modern', 'creative'],
+ atsFriendly: false,
+ lastUpdated: '2025-07-23',
+ },
+ {
+ id: 'clean-minimalist',
+ name: 'Clean Minimalist',
+ description: 'A minimalist design focused on content with plenty of white space.',
+ category: TemplateCategory.MINIMALIST,
+ component: templates.CleanMinimalistTemplate,
+ tags: ['minimalist', 'clean', 'simple'],
+ atsFriendly: true,
+ lastUpdated: '2025-07-23',
+ },
+ {
+ id: 'corporate',
+ name: 'Corporate',
+ description: 'A traditional corporate resume with a professional layout.',
+ category: TemplateCategory.PROFESSIONAL,
+ component: templates.CorporateTemplate,
+ tags: ['corporate', 'professional', 'traditional'],
+ atsFriendly: true,
+ lastUpdated: '2025-07-23',
+ },
+ {
+ id: 'minimalist',
+ name: 'Minimalist',
+ description: 'A clean and minimalist resume template with a focus on readability.',
+ category: TemplateCategory.MINIMALIST,
+ component: templates.MinimalistTemplate,
+ tags: ['minimalist', 'clean', 'simple'],
+ atsFriendly: true,
+ lastUpdated: '2025-07-23',
+ },
+ {
+ id: 'modern-timeline',
+ name: 'Modern Timeline',
+ description: 'A modern design with a timeline layout for work experience.',
+ category: TemplateCategory.MODERN,
+ component: templates.ModernTimelineTemplate,
+ tags: ['modern', 'timeline', 'creative'],
+ atsFriendly: true,
+ lastUpdated: '2025-07-23',
+ },
+ {
+ id: 'professional-sidebar',
+ name: 'Professional Sidebar',
+ description: 'Professional layout with a sidebar for key information.',
+ category: TemplateCategory.PROFESSIONAL,
+ component: templates.ProfessionalSidebarTemplate,
+ tags: ['professional', 'sidebar', 'modern'],
+ atsFriendly: true,
+ lastUpdated: '2025-07-23',
+ },
+];
+
+// Helper functions
+export const getTemplateById = (id: string) => {
+ return templateRegistry.find(template => template.id === id);
+};
+
+export const getTemplatesByCategory = (category: TemplateCategory) => {
+ return templateRegistry.filter(template => template.category === category);
+};
+
+export const getTemplatesByTag = (tag: string) => {
+ return templateRegistry.filter(template =>
+ template.tags?.includes(tag.toLowerCase())
+ );
+};
+
+export const getATSFriendlyTemplates = () => {
+ return templateRegistry.filter(template => template.atsFriendly);
+};
+
+// Get the lazy-loaded component for a template by ID
+export const getTemplateComponent = (templateId: string) => {
+ // Normalize the template ID to match the registry format (kebab-case to PascalCase)
+ const normalizedId = templateId
+ .toLowerCase()
+ .split('-')
+ .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+ .join('') + 'Template';
+
+ // Try to find the exact match first
+ if (normalizedId in templates) {
+ return templates[normalizedId as keyof typeof templates];
+ }
+
+ // Fallback to case-insensitive search
+ const componentKey = Object.keys(templates).find(
+ key => key.toLowerCase() === normalizedId.toLowerCase()
+ );
+
+ if (componentKey && componentKey in templates) {
+ return templates[componentKey as keyof typeof templates];
+ }
+
+ // If still not found, log a warning and return MinimalTemplate as fallback
+ console.warn(`Template component for ID "${templateId}" not found, falling back to MinimalTemplate`);
+ return templates.MinimalTemplate || templates.CleanProfessionalTemplate;
+};
+
+export default templateRegistry;
diff --git a/src/components/resume-builder/templates/AcademicTemplate.tsx b/src/components/resume-builder/templates/AcademicTemplate.tsx
new file mode 100644
index 0000000..9a90a10
--- /dev/null
+++ b/src/components/resume-builder/templates/AcademicTemplate.tsx
@@ -0,0 +1,364 @@
+import { Mail, Phone, MapPin, Globe, Linkedin, Github, Book, GraduationCap, Award, Briefcase, FileText } from 'lucide-react';
+import { TemplateProps } from './types';
+
+// Default values for customization
+const defaultCustomization = {
+ fontFamily: 'Arial, sans-serif',
+ accentColor: '#2563eb',
+ showProfileImage: true
+};
+
+export function AcademicTemplate({ data }: TemplateProps) {
+ // Destructure with default values to prevent undefined errors
+ const {
+ personalInfo = { fullName: '', email: '', phone: '', location: '' },
+ summary = '',
+ experience = [],
+ education = [],
+ skills = [],
+ certifications = [],
+ projects = [],
+ customization = defaultCustomization
+ } = data || {};
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const renderSection = (section: { type: string; id: string }) => {
+ switch (section.type) {
+ case 'personalInfo':
+ return (
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+ {personalInfo.title || 'Researcher / Academic'}
+
+
+
+
+
+
+
+
+ {summary}
+
+
+
+
+
+ {education.map((edu) => (
+
+
+
+
+
+
+ {edu.degree}
+
+
+ {edu.school}
+
+
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+ {edu.relevantCourses && edu.relevantCourses.length > 0 && (
+
+
+ Relevant Coursework:
+
+
+ {edu.relevantCourses.map((course, i) => (
+
+ {course}
+
+ ))}
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {projects.map((pub) => (
+
+ ))}
+
+
+
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+ {project.url && (
+
+ (View Project)
+
+ )}
+
+ {project.startDate && (
+
+ {formatDate(project.startDate)}
+ {project.endDate ? ` - ${formatDate(project.endDate)}` : ' - Present'}
+
+ )}
+
+
+ {project.description}
+
+ {project.technologies && project.technologies.length > 0 && (
+
+
+ Technologies:
+
+
+ {project.technologies.join(', ')}
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+
+
+
+ {skills.map((skill) => (
+
+
+
+ {skill.name}
+
+
+ {skill.level}
+
+
+
+
+ ))}
+
+
+ {data.sections.map((section) => renderSection(section))}
+
+ );
+}
diff --git a/src/components/resume-builder/templates/BoldTemplate.tsx b/src/components/resume-builder/templates/BoldTemplate.tsx
new file mode 100644
index 0000000..b4feeaf
--- /dev/null
+++ b/src/components/resume-builder/templates/BoldTemplate.tsx
@@ -0,0 +1,298 @@
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Linkedin, Github, Briefcase, GraduationCap, Code, Award, User } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function BoldTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications, projects, sections } = data;
+ const visibleSections = sections.filter(section => section.isVisible).sort((a, b) => a.order - b.order);
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const formatUrl = (url: string) => {
+ if (!url) return '';
+ return url.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '');
+ };
+
+ const renderSection = (section: typeof sections[0]) => {
+ switch (section.type) {
+ case 'personalInfo':
+ return (
+
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+ {personalInfo.title || 'Professional Title'}
+
+
+
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+
+
{personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.website && (
+
+ {formatUrl(personalInfo.website)}
+
+ )}
+ {personalInfo.linkedin && (
+
+ linkedin.com/in/...
+
+ )}
+ {personalInfo.github && (
+
+ github.com/...
+
+ )}
+
+
+
+ {summary && (
+
+
+
+
+ {summary}
+
+
+ )}
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+ {exp.jobTitle}
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {education.map((edu) => (
+
+
+
+ {edu.degree}
+
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+ {edu.achievements && edu.achievements.length > 0 && (
+
+ {edu.achievements.map((achievement, idx) => (
+
+ •
+ {achievement}
+
+ ))}
+
+ )}
+
+ ))}
+
+
+
+
+
+ {skills.map((skill) => (
+
+
+
+ {skill.name}
+
+
+ {skill.level}
+
+
+
+
+ ))}
+
+
+
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+ {project.url && (
+
+ (View Project)
+
+ )}
+
+ {project.startDate && (
+
+ {formatDate(project.startDate)}
+ {project.endDate ? ` - ${formatDate(project.endDate)}` : ' - Present'}
+
+ )}
+
+
+ {project.description}
+
+ {project.technologies && project.technologies.length > 0 && (
+
+ {project.technologies.map((tech, i) => (
+
+ {tech}
+
+ ))}
+
+ )}
+
+ ))}
+
+
+
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/src/components/resume-builder/templates/CleanMinimalistTemplate.tsx b/src/components/resume-builder/templates/CleanMinimalistTemplate.tsx
new file mode 100644
index 0000000..d15310a
--- /dev/null
+++ b/src/components/resume-builder/templates/CleanMinimalistTemplate.tsx
@@ -0,0 +1,198 @@
+import { Mail, Phone, MapPin, Linkedin, Globe } from 'lucide-react';
+import { ResumeData } from '@/types/resume';
+
+type TemplateProps = {
+ data: ResumeData;
+};
+
+export function CleanMinimalistTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications } = data;
+ const accentColor = data.customization.accentColor || '#2563eb';
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ return (
+
+ {/* Header */}
+
+
+ {personalInfo.fullName}
+
+ {personalInfo.title && (
+
+ {personalInfo.title}
+
+ )}
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+ {personalInfo.linkedin && (
+
+
+ )}
+ {personalInfo.website && (
+
+
+ )}
+
+
+
+ {/* Summary */}
+ {summary && (
+
+
+ SUMMARY
+
+
+ {summary}
+
+
+ )}
+
+
+ {/* Left Column */}
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
+ PROFESSIONAL EXPERIENCE
+
+
+ {experience.map((exp) => (
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && `, ${exp.location}`}
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
+ EDUCATION
+
+
+ {education.map((edu) => (
+
+
{edu.degree}
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+
+ {edu.fieldOfStudy}
+ {formatDate(edu.graduationDate)}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+ ))}
+
+
+ )}
+
+
+ {/* Right Column */}
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
+ SKILLS
+
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+ {skill.level}
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Certifications */}
+ {certifications.length > 0 && (
+
+
+ CERTIFICATIONS
+
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
{cert.issuer}
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` • Expires: ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+ )}
+
+
+
+
+
+ {personalInfo.fullName}
+
+ {personalInfo.title && (
+
+ {personalInfo.title}
+
+ )}
+
+
+
+
+ Professional Summary
+
+
{summary}
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company} • {exp.location}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {education.map((edu) => (
+
+
+ {edu.degree}
+
+
+ {edu.school} • {edu.location}
+
+
+ {formatDate(edu.graduationDate)}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+
+ ))}
+
+
+
+
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+ {skill.level}
+
+
+
+ ))}
+
+
+
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer} • {formatDate(cert.date)}
+ {cert.expirationDate && ` • Expires: ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+ {visibleSections.map((section) => renderSection(section))}
+
+ );
+}
diff --git a/src/components/resume-builder/templates/CorporateTemplate.tsx b/src/components/resume-builder/templates/CorporateTemplate.tsx
new file mode 100644
index 0000000..c54df7f
--- /dev/null
+++ b/src/components/resume-builder/templates/CorporateTemplate.tsx
@@ -0,0 +1,319 @@
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Linkedin, Github, Briefcase, GraduationCap, Code, Award, BookOpen, User } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function CorporateTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications, projects, sections, customization } = data;
+
+ const visibleSections = sections.filter(section => section.isVisible).sort((a, b) => a.order - b.order);
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const formatUrl = (url: string) => {
+ if (!url) return '';
+ return url.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '');
+ };
+
+ const renderSection = (section: typeof sections[0]) => {
+ switch (section.type) {
+ case 'personalInfo':
+ return (
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+ {personalInfo.title || 'Professional Title'}
+
+
+
+
+
+
+
+
+ {summary}
+
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {education.map((edu) => (
+
+
+
+
+ {edu.degree}
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+
+ {formatDate(edu.graduationDate)}
+
+
+ {edu.relevantCourses && edu.relevantCourses.length > 0 && (
+
+
+ Relevant Coursework:
+
+
+ {edu.relevantCourses.map((course, i) => (
+
+ {course}
+
+ ))}
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ {skills.map((skill) => (
+
+
+
+ {skill.name}
+
+
+ {skill.level}
+
+
+
+
+ ))}
+
+
+
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+ {project.url && (
+
+ (View Project)
+
+ )}
+
+ {project.startDate && (
+
+ {formatDate(project.startDate)}
+ {project.endDate ? ` - ${formatDate(project.endDate)}` : ' - Present'}
+
+ )}
+
+
+ {project.description}
+
+ {project.technologies && project.technologies.length > 0 && (
+
+ {project.technologies.map((tech, i) => (
+
+ {tech}
+
+ ))}
+
+ )}
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/src/components/resume-builder/templates/CreativeColorBlocksTemplate.tsx b/src/components/resume-builder/templates/CreativeColorBlocksTemplate.tsx
new file mode 100644
index 0000000..c7ec765
--- /dev/null
+++ b/src/components/resume-builder/templates/CreativeColorBlocksTemplate.tsx
@@ -0,0 +1,220 @@
+import { ResumeData } from '@/types/resume';
+import { Briefcase, GraduationCap, User, Code, Mail, Phone, MapPin, Globe } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function CreativeColorBlocksTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, projects } = data;
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ // Color variants for different sections
+ const colorVariants = {
+ primary: 'bg-blue-600 text-white',
+ secondary: 'bg-blue-100 text-blue-900',
+ accent: 'bg-yellow-400 text-gray-900',
+ light: 'bg-gray-50 text-gray-800',
+ dark: 'bg-gray-800 text-white',
+ };
+
+ return (
+
+ {/* Header with color block */}
+
+
+
+ {personalInfo.profileImage && (
+
+
+
+ )}
+
+
{personalInfo.fullName || 'Your Name'}
+
{personalInfo.title || 'Professional Title'}
+
+
+
+
+
+
+
+ {/* Left Column */}
+
+ {/* Contact */}
+
+
CONTACT
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+
+
{personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.website && (
+
+ )}
+
+
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
+
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+ {skill.level}
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
{edu.degree}
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+ {edu.graduationDate && (
+
+ {formatDate(edu.graduationDate)}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+ )}
+
+ ))}
+
+
+ )}
+
+
+ {/* Right Column */}
+
+ {/* Summary */}
+ {summary && (
+
+
+
+
{summary}
+
+ )}
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp) => (
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {/* Projects */}
+ {projects && projects.length > 0 && (
+
+
PROJECTS
+
+ {projects.map((project) => (
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+
+ {personalInfo.title || 'Professional Title'}
+
+
+
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+ {personalInfo.website && (
+
+
+ )}
+ {personalInfo.linkedin && (
+
+
+ )}
+
+
+
+ {summary && (
+
+
+
+
+ {summary}
+
+
+ )}
+
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+ {exp.jobTitle}
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {education.map((edu) => (
+
+
+
+ {edu.degree}
+
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+
+ ))}
+
+
+
+
+
+ {skills.map((skill) => (
+
+
+
+ {skill.name}
+
+
+ {skill.level}
+
+
+
+
+ ))}
+
+
+
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+ {project.url && (
+
+ (View Project)
+
+ )}
+
+ {project.startDate && (
+
+ {formatDate(project.startDate)}
+ {project.endDate ? ` - ${formatDate(project.endDate)}` : ' - Present'}
+
+ )}
+
+
+ {project.description}
+
+ {project.technologies && project.technologies.length > 0 && (
+
+ {project.technologies.map((tech, i) => (
+
+ {tech}
+
+ ))}
+
+ )}
+
+ ))}
+
+
+
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/src/components/resume-builder/templates/ExecutiveTemplate.tsx b/src/components/resume-builder/templates/ExecutiveTemplate.tsx
new file mode 100644
index 0000000..5309599
--- /dev/null
+++ b/src/components/resume-builder/templates/ExecutiveTemplate.tsx
@@ -0,0 +1,284 @@
+import React from 'react';
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Linkedin, Github, Award, Briefcase, GraduationCap, Code, BookOpen } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function ExecutiveTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications, projects, references, sections, customization } = data;
+
+ const visibleSections = sections.filter(section => section.isVisible).sort((a, b) => a.order - b.order);
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const formatUrl = (url: string) => {
+ if (!url) return '';
+ return url.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '');
+ };
+
+ const renderSection = (section: typeof sections[0]) => {
+ switch (section.type) {
+ case 'personalInfo':
+ return (
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+ {personalInfo.jobTitle && (
+
+ {personalInfo.jobTitle}
+
+ )}
+
+
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+ {personalInfo.website && (
+
+
+ )}
+ {personalInfo.linkedin && (
+
+
+ )}
+ {personalInfo.github && (
+
+
+ )}
+
+
+
+
+
+ Executive Profile
+
+
+
+ {summary}
+
+
+
+
+ Professional Experience
+
+
+
+ {experience.map((exp) => (
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company}{exp.location && ` • ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ Education
+
+
+
+ {education.map((edu) => (
+
+
+
+
+ {edu.degree}
+
+
+ {edu.school}{edu.location && `, ${edu.location}`}
+
+
+
+ {formatDate(edu.graduationDate)}
+
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+ ))}
+
+
+
+
+ Core Competencies
+
+
+
+ {skills.map((skill) => (
+
+ •
+
+ {skill.name}{skill.level ? ` (${skill.level})` : ''}
+
+
+ ))}
+
+
+
+
+ {certifications.map((cert) => (
+
+
+
+ {cert.name}
+
+
+ {cert.date && formatDate(cert.date)}
+
+
+ {cert.issuer && (
+
+ {cert.issuer}
+
+ )}
+
+ ))}
+
+
+
+
+ Key Projects
+
+
+
+ {projects.map((project) => (
+
+
+ {project.technologies && project.technologies.length > 0 && (
+
+ Technologies: {project.technologies.join(', ')}
+
+ )}
+
+ {project.description}
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/src/components/resume-builder/templates/MinimalistATS.tsx b/src/components/resume-builder/templates/MinimalistATS.tsx
new file mode 100644
index 0000000..8247c71
--- /dev/null
+++ b/src/components/resume-builder/templates/MinimalistATS.tsx
@@ -0,0 +1,126 @@
+import { Mail, Phone, MapPin, Globe, Linkedin, Github, Briefcase, GraduationCap, Code, Award } from 'lucide-react';
+import { ResumeData } from '@/types/resume';
+
+type TemplateProps = {
+ data: ResumeData;
+};
+
+export function MinimalistATS({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications } = data;
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
+ };
+
+ return (
+
+ {/* Header */}
+
+
{personalInfo.fullName}
+ {personalInfo.title &&
{personalInfo.title}
}
+
+ {personalInfo.email && {personalInfo.email} }
+ {personalInfo.phone && {personalInfo.phone} }
+ {personalInfo.location && {personalInfo.location} }
+ {personalInfo.linkedin && linkedin.com/in/username }
+
+
+
+ {/* Summary */}
+ {summary && (
+
+ )}
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
EXPERIENCE
+
+ {experience.map((exp) => (
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
EDUCATION
+
+ {education.map((edu) => (
+
+
+
{edu.degree}
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+
+ ))}
+
+
+ )}
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
SKILLS
+
+ {skills.map((skill) => (
+
+ {skill.name}
+
+ ))}
+
+
+ )}
+
+ {/* Certifications */}
+ {certifications.length > 0 && (
+
+
CERTIFICATIONS
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
+ {cert.issuer} • {formatDate(cert.date)}
+
+
+ ))}
+
+
+ )}
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+
+ {personalInfo.title || 'Professional Title'}
+
+
+
+
+
+
+
+ Profile
+
+
+ {summary}
+
+
+
+
+
+ Experience
+
+
+ {experience.map((exp) => (
+
+
+
+ {exp.jobTitle}
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ Education
+
+
+ {education.map((edu) => (
+
+
+
+ {edu.degree}
+
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+ {edu.relevantCourses && edu.relevantCourses.length > 0 && (
+
+
+ Relevant Coursework:
+
+
+ {edu.relevantCourses.map((course, i) => (
+
+ {course}
+
+ ))}
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ Skills
+
+
+ {skills.map((skill) => (
+
+ {skill.name}
+
+ ))}
+
+
+
+
+
+ Projects
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+ {project.url && (
+
+ (View Project)
+
+ )}
+
+ {project.startDate && (
+
+ {formatDate(project.startDate)}
+ {project.endDate ? ` - ${formatDate(project.endDate)}` : ' - Present'}
+
+ )}
+
+
+ {project.description}
+
+ {project.technologies && project.technologies.length > 0 && (
+
+ {project.technologies.map((tech, i) => (
+
+ {tech}
+
+ ))}
+
+ )}
+
+ ))}
+
+
+
+
+
+ Certifications
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+ {cert.date && ` • ${formatDate(cert.date)}`}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/src/components/resume-builder/templates/MinimalistSidebarTemplate.tsx b/src/components/resume-builder/templates/MinimalistSidebarTemplate.tsx
new file mode 100644
index 0000000..29b7ff7
--- /dev/null
+++ b/src/components/resume-builder/templates/MinimalistSidebarTemplate.tsx
@@ -0,0 +1,166 @@
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Briefcase, GraduationCap, User } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function MinimalistSidebarTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills } = data;
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const renderSidebar = () => (
+
+ {personalInfo.profileImage && (
+
+
+
+ )}
+
+
+
+
CONTACT
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+
+
{personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.website && (
+
+ {personalInfo.website.replace(/^https?:\/\//, '')}
+
+ )}
+
+
+
+ {skills.length > 0 && (
+
+
SKILLS
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+
+ {skill.level === 'Expert' ? '★★★★★' :
+ skill.level === 'Advanced' ? '★★★★☆' :
+ skill.level === 'Intermediate' ? '★★★☆☆' : '★★☆☆☆'}
+
+
+
+ ))}
+
+
+ )}
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+ {personalInfo.title || 'Professional Title'}
+
+
+ {summary && (
+
+
+
+
{summary}
+
+ )}
+
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp) => (
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+ {desc}
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
+
{edu.degree}
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+
+ ))}
+
+
+ )}
+
+ {renderSidebar()}
+ {renderMainContent()}
+
+ );
+}
diff --git a/src/components/resume-builder/templates/MinimalistTemplate.tsx b/src/components/resume-builder/templates/MinimalistTemplate.tsx
new file mode 100644
index 0000000..5efe0cd
--- /dev/null
+++ b/src/components/resume-builder/templates/MinimalistTemplate.tsx
@@ -0,0 +1,261 @@
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Linkedin, Github } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function MinimalistTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications, projects, sections, customization } = data;
+
+ const visibleSections = sections.filter(section => section.isVisible).sort((a, b) => a.order - b.order);
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const formatUrl = (url: string) => {
+ if (!url) return '';
+ return url.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '');
+ };
+
+ const renderSection = (section: typeof sections[0]) => {
+ switch (section.type) {
+ case 'personalInfo':
+ return (
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+ {personalInfo.title && (
+
+ {personalInfo.title}
+
+ )}
+
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+ {personalInfo.website && (
+
+
+ )}
+ {personalInfo.linkedin && (
+
+
+ )}
+ {personalInfo.github && (
+
+
+ )}
+
+
+
+
+ About
+
+
+ {summary}
+
+
+
+ Experience
+
+
+ {experience.map((exp) => (
+
+
+
+ {exp.jobTitle}
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}{exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+ Education
+
+
+ {education.map((edu) => (
+
+
+
+ {edu.degree}
+
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}{edu.location && ` • ${edu.location}`}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+ ))}
+
+
+
+ Skills
+
+
+ {skills.map((skill) => (
+
+ {skill.name}
+
+ ))}
+
+
+
+ Certifications
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+ {cert.date && ` • ${formatDate(cert.date)}`}
+
+
+ ))}
+
+
+
+ Projects
+
+
+ {projects.map((project) => (
+
+
+ {project.technologies && project.technologies.length > 0 && (
+
+ {project.technologies.join(' • ')}
+
+ )}
+
+ {project.description}
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/src/components/resume-builder/templates/ModernDarkSidebarTemplate.tsx b/src/components/resume-builder/templates/ModernDarkSidebarTemplate.tsx
new file mode 100644
index 0000000..267bd3f
--- /dev/null
+++ b/src/components/resume-builder/templates/ModernDarkSidebarTemplate.tsx
@@ -0,0 +1,192 @@
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Briefcase, GraduationCap, User } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function ModernDarkSidebarTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications } = data;
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const renderSidebar = () => (
+
+ {personalInfo.profileImage && (
+
+
+
+ )}
+
+
+
+
CONTACT
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+
+
{personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.website && (
+
+ )}
+
+
+
+ {skills.length > 0 && (
+
+
SKILLS
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+
+ {skill.level === 'Expert' ? '★★★★★' :
+ skill.level === 'Advanced' ? '★★★★☆' :
+ skill.level === 'Intermediate' ? '★★★☆☆' : '★★☆☆☆'}
+
+
+
+ ))}
+
+
+ )}
+
+ {certifications && certifications.length > 0 && (
+
+
CERTIFICATIONS
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
{cert.issuer}
+ {cert.date && (
+
+ {new Date(cert.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short' })}
+
+ )}
+
+ ))}
+
+
+ )}
+
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+ {personalInfo.title || 'Professional Title'}
+
+
+
+ {summary && (
+
+
+
+
{summary}
+
+ )}
+
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp) => (
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
+
{edu.degree}
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+
+ ))}
+
+
+ )}
+
+ {renderSidebar()}
+ {renderMainContent()}
+
+ );
+}
diff --git a/src/components/resume-builder/templates/ModernExecutiveTemplate.tsx b/src/components/resume-builder/templates/ModernExecutiveTemplate.tsx
new file mode 100644
index 0000000..ade357e
--- /dev/null
+++ b/src/components/resume-builder/templates/ModernExecutiveTemplate.tsx
@@ -0,0 +1,220 @@
+import { Mail, Phone, MapPin, Linkedin, Globe, Briefcase, GraduationCap, Award, Code } from 'lucide-react';
+import { ResumeData } from '@/types/resume';
+
+type TemplateProps = {
+ data: ResumeData;
+};
+
+export function ModernExecutiveTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications } = data;
+ const accentColor = data.customization.accentColor || '#2563eb';
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ return (
+
+ {/* Sidebar */}
+
+ {/* Profile Image */}
+ {personalInfo.profileImage && (
+
+
+
+ )}
+
+ {/* Contact */}
+
+
+ Contact
+
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.linkedin && (
+
+ LinkedIn
+
+ )}
+ {personalInfo.website && (
+
+ {personalInfo.website.replace(/^https?:\/\//, '')}
+
+ )}
+
+
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
+ Skills
+
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+ {skill.level}
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Certifications */}
+ {certifications.length > 0 && (
+
+
+ Certifications
+
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
{cert.issuer}
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` • Expires: ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+ )}
+
+
+ {/* Main Content */}
+
+ {/* Header */}
+
+
+ {personalInfo.fullName}
+
+ {personalInfo.title && (
+
+ {personalInfo.title}
+
+ )}
+
+
+ {/* Summary */}
+ {summary && (
+
+
+ Professional Summary
+
+
+ {summary}
+
+
+ )}
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+
{exp.jobTitle}
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
+
{edu.degree}
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+
+ {edu.fieldOfStudy}
+ {formatDate(edu.graduationDate)}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+ ))}
+
+
+ )}
+
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+ {personalInfo.title || 'Professional Title'}
+
+
+
+
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+ {personalInfo.website && (
+
+
+ )}
+ {personalInfo.linkedin && (
+
+
+ )}
+ {personalInfo.github && (
+
+
+ )}
+
+
+
+
+
+
+ {summary}
+
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {education.map((edu) => (
+
+
+
+
+ {edu.degree}
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+
+
+ {formatDate(edu.graduationDate)}
+
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+ {edu.relevantCourses && edu.relevantCourses.length > 0 && (
+
+
+ Relevant Coursework:
+
+
+ {edu.relevantCourses.map((course, i) => (
+
+ {course}
+
+ ))}
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ {skills.map((skill) => (
+
+
+
+ {skill.name}
+
+
+ {skill.level}
+
+
+
+
+ ))}
+
+
+
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+ {project.url && (
+
+ (View Project)
+
+ )}
+
+ {project.startDate && (
+
+ {formatDate(project.startDate)}
+ {project.endDate ? ` - ${formatDate(project.endDate)}` : ' - Present'}
+
+ )}
+
+
+ {project.description}
+
+ {project.technologies && project.technologies.length > 0 && (
+
+
+ {project.technologies.map((tech, i) => (
+
+ {tech}
+
+ ))}
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/src/components/resume-builder/templates/ModernSidebarTemplate.tsx b/src/components/resume-builder/templates/ModernSidebarTemplate.tsx
new file mode 100644
index 0000000..25759f3
--- /dev/null
+++ b/src/components/resume-builder/templates/ModernSidebarTemplate.tsx
@@ -0,0 +1,266 @@
+import { Mail, Phone, MapPin, Globe, Linkedin, Github, Briefcase, GraduationCap, Code, Award, User, BookOpen } from 'lucide-react';
+import { ResumeData } from '@/types/resume';
+
+type TemplateProps = {
+ data: ResumeData;
+};
+
+export function ModernSidebarTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications, projects, sections, customization } = data;
+ const visibleSections = sections.filter(section => section.isVisible).sort((a, b) => a.order - b.order);
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const renderSidebar = () => (
+
+ {personalInfo.profileImage && (
+
+
+
+ )}
+
+
+
+
CONTACT
+
+ {personalInfo.email && (
+
+ )}
+ {personalInfo.phone && (
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.website && (
+
+ )}
+ {personalInfo.linkedin && (
+
+ )}
+ {personalInfo.github && (
+
+ )}
+
+
+
+ {skills.length > 0 && (
+
+
SKILLS
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+
+ {skill.level === 'Expert' ? '★★★★★' :
+ skill.level === 'Advanced' ? '★★★★☆' :
+ skill.level === 'Intermediate' ? '★★★☆☆' : '★★☆☆☆'}
+
+
+
+ ))}
+
+
+ )}
+
+ {certifications.length > 0 && (
+
+
CERTIFICATIONS
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
{cert.issuer}
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` • Expires: ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+ )}
+
+
+
+
+ {personalInfo.fullName}
+
+ {personalInfo.title && (
+
+ {personalInfo.title}
+
+ )}
+
+
+ {summary && (
+
+
+
+
{summary}
+
+ )}
+
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
+
+
+ {edu.degree}
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+
+
+ {formatDate(edu.graduationDate)}
+
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+ ))}
+
+
+ )}
+
+ {projects.length > 0 && (
+
+
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+
+
+ {formatDate(project.startDate)}
+ {project.endDate && ` - ${formatDate(project.endDate)}`}
+
+
+
+ {project.description}
+
+ {project.technologies.length > 0 && (
+
+ {project.technologies.map((tech, idx) => (
+
+ {tech}
+
+ ))}
+
+ )}
+
+ ))}
+
+
+ )}
+
+ {renderSidebar()}
+ {renderMainContent()}
+
+ );
+}
diff --git a/src/components/resume-builder/templates/ModernTimelineTemplate.tsx b/src/components/resume-builder/templates/ModernTimelineTemplate.tsx
new file mode 100644
index 0000000..6f3528d
--- /dev/null
+++ b/src/components/resume-builder/templates/ModernTimelineTemplate.tsx
@@ -0,0 +1,207 @@
+import { Mail, Phone, MapPin, Linkedin, Globe, Briefcase, GraduationCap, Award } from 'lucide-react';
+import { ResumeData } from '@/types/resume';
+
+type TemplateProps = {
+ data: ResumeData;
+};
+
+export function ModernTimelineTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications } = data;
+ const accentColor = data.customization.accentColor || '#3b82f6';
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ return (
+
+ {/* Header */}
+
+
+ {personalInfo.fullName}
+
+ {personalInfo.title && (
+
+ {personalInfo.title}
+
+ )}
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+
+
+
+ {/* Summary */}
+ {summary && (
+
+ )}
+
+ {/* Timeline Section */}
+
+ {/* Timeline Line */}
+
+
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp, idx) => (
+
+
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
+
+
+
{edu.degree}
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+ {edu.fieldOfStudy && (
+
+ {edu.fieldOfStudy}
+
+ )}
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+
+ ))}
+
+
+ )}
+
+
+
+ {/* Skills & Certifications */}
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
+
+
+ {skills.map((skill) => (
+
+ {skill.name}
+
+ ))}
+
+
+ )}
+
+ {/* Certifications */}
+ {certifications.length > 0 && (
+
+
+
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
+ {cert.issuer} • {formatDate(cert.date)}
+
+
+ ))}
+
+
+ )}
+
+
+ {/* Left Column */}
+
+ {/* Profile */}
+
+
+ {personalInfo.profileImage ? (
+
+ ) : (
+
+
+ {personalInfo.fullName.split(' ').map(n => n[0]).join('')}
+
+
+ )}
+
+
{personalInfo.fullName}
+ {personalInfo.title && (
+
{personalInfo.title}
+ )}
+
+
+ {/* Contact */}
+
+
Contact
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.linkedin && (
+
+ LinkedIn
+
+ )}
+
+
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
Skills
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+ {skill.level}
+
+
+
+ ))}
+
+
+ )}
+
+
+ {/* Right Column */}
+
+ {/* Summary */}
+ {summary && (
+
+
+ About Me
+
+
{summary}
+
+ )}
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
+ Work Experience
+
+
+ {experience.map((exp) => (
+
+
+
+
{exp.jobTitle}
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
+ Education
+
+
+ {education.map((edu) => (
+
+
+
+
{edu.degree}
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+
+
+ {formatDate(edu.graduationDate)}
+
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+ ))}
+
+
+ )}
+
+ {/* Certifications */}
+ {certifications.length > 0 && (
+
+
+ Certifications
+
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
+ {cert.issuer} • {formatDate(cert.date)}
+
+
+ ))}
+
+
+ )}
+
+
+
+ {personalInfo.profileImage && (
+
+
+
+ )}
+
+
{personalInfo.fullName || 'Your Name'}
+
{personalInfo.title || 'Professional Title'}
+
+
+
+
+
+
{summary}
+
+
+
+
+ {experience.map((exp) => (
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ ))}
+
+
+
+
+
+ {education.map((edu) => (
+
+
+
{edu.degree}
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+
+ ))}
+
+
+
+
+
+ {skills.map((skill) => (
+
+
+
+ {skill.name}
+
+
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/src/components/resume-builder/templates/ProfessionalSidebarTemplate.tsx b/src/components/resume-builder/templates/ProfessionalSidebarTemplate.tsx
new file mode 100644
index 0000000..0f3eeec
--- /dev/null
+++ b/src/components/resume-builder/templates/ProfessionalSidebarTemplate.tsx
@@ -0,0 +1,175 @@
+import { Mail, Phone, MapPin, Linkedin, Briefcase, GraduationCap } from 'lucide-react';
+import { ResumeData } from '@/types/resume';
+
+type TemplateProps = {
+ data: ResumeData;
+};
+
+export function ProfessionalSidebarTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications } = data;
+ const accentColor = data.customization.accentColor || '#2563eb';
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ return (
+
+ {/* Sidebar */}
+
+ {/* Profile */}
+
+ {personalInfo.profileImage ? (
+
+
+
+ ) : (
+
+
+ {personalInfo.fullName.split(' ').map(n => n[0]).join('')}
+
+
+ )}
+
{personalInfo.fullName}
+ {personalInfo.title &&
{personalInfo.title}
}
+
+
+ {/* Contact */}
+
+
Contact
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.linkedin && (
+
+ LinkedIn
+
+ )}
+
+
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
Skills
+
+ {skills.map((skill) => (
+
+
+ {skill.name}
+ {skill.level}
+
+
+
+ ))}
+
+
+ )}
+
+
+ {/* Main Content */}
+
+ {/* Summary */}
+ {summary && (
+
+
+ Professional Summary
+
+
{summary}
+
+ )}
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp) => (
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
{edu.degree}
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+
+ {edu.relevantCourses ? edu.relevantCourses.join(', ') : ''}
+ {formatDate(edu.graduationDate)}
+
+ {edu.gpa && (
+
GPA: {edu.gpa}
+ )}
+
+ ))}
+
+
+ )}
+
+
+ {/* Header */}
+
+
{personalInfo.fullName || 'Your Name'}
+
{personalInfo.title || 'Professional Title'}
+
+
+ {personalInfo.email && (
+
+ {personalInfo.email}
+
+ )}
+ {personalInfo.phone && (
+
+
+
{personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+ {personalInfo.location}
+
+ )}
+ {personalInfo.website && (
+
+ )}
+
+
+
+ {/* Summary */}
+ {summary && (
+
+
+
+
{summary}
+
+ )}
+
+
+ {/* Left Column */}
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp) => (
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
+
{edu.degree}
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+ {edu.gpa && ` • GPA: ${edu.gpa}`}
+
+
+ ))}
+
+
+ )}
+
+
+ {/* Right Column */}
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
+
+
+ {skills.map((skill) => (
+
+
+
+ {skill.name}
+
+
+ {skill.level}
+
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Certifications */}
+ {certifications && certifications.length > 0 && (
+
+
CERTIFICATIONS
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
{cert.issuer}
+ {cert.date && (
+
+ {new Date(cert.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short' })}
+
+ )}
+
+ ))}
+
+
+ )}
+
+
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+ {personalInfo.jobTitle && (
+
+ {personalInfo.jobTitle}
+
+ )}
+
+
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+ {personalInfo.website && (
+
+
+ )}
+ {personalInfo.linkedin && (
+
+
+ )}
+ {personalInfo.github && (
+
+
+ )}
+
+
+
+
+
+ Professional Summary
+
+
+
+ {summary}
+
+
+
+
+
+ Professional Experience
+
+
+
+ {experience.map((exp) => (
+
+
+
+ {exp.jobTitle}
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+
+ {exp.company}{exp.location && ` • ${exp.location}`}
+
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+ {desc}
+ ))}
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/src/components/resume-builder/templates/TechTemplate.tsx b/src/components/resume-builder/templates/TechTemplate.tsx
new file mode 100644
index 0000000..cd658f7
--- /dev/null
+++ b/src/components/resume-builder/templates/TechTemplate.tsx
@@ -0,0 +1,321 @@
+import { ResumeData } from '@/types/resume';
+import { Mail, Phone, MapPin, Globe, Linkedin, Github, Code, Cpu, BookOpen, Award, Briefcase, GraduationCap } from 'lucide-react';
+
+interface TemplateProps {
+ data: ResumeData;
+}
+
+export function TechTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications, projects, sections, customization } = data;
+
+ const visibleSections = sections.filter(section => section.isVisible).sort((a, b) => a.order - b.order);
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+ };
+
+ const formatUrl = (url: string) => {
+ if (!url) return '';
+ return url.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '');
+ };
+
+ const renderSection = (section: typeof sections[0]) => {
+ switch (section.type) {
+ case 'personalInfo':
+ return (
+
+
+
+
+ {personalInfo.fullName || 'Your Name'}
+
+
+ {personalInfo.title || 'Software Engineer'}
+
+
+
+ {personalInfo.email && (
+
+
+ )}
+ {personalInfo.phone && (
+
+
+ {personalInfo.phone}
+
+ )}
+ {personalInfo.location && (
+
+
+ )}
+ {personalInfo.linkedin && (
+
+
+ )}
+ {personalInfo.github && (
+
+
+ )}
+ {personalInfo.website && (
+
+
+ )}
+
+
+
+
+
+
+ {summary}
+
+
+
+
+
+ {skills.map((skill) => (
+
+
+
+ {skill.name}
+
+
+ {skill.level}
+
+
+
+
+ ))}
+
+
+
+
+
+ {experience.map((exp) => (
+
+
+
+
+ {exp.jobTitle}
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.description.filter(desc => desc.trim()).map((desc, index) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+ {project.url && (
+
+ (View Project)
+
+ )}
+
+ {project.startDate && (
+
+ {formatDate(project.startDate)}
+ {project.endDate ? ` - ${formatDate(project.endDate)}` : ' - Present'}
+
+ )}
+
+
+ {project.description}
+
+ {project.technologies && project.technologies.length > 0 && (
+
+ {project.technologies.map((tech, i) => (
+
+ {tech}
+
+ ))}
+
+ )}
+
+ ))}
+
+
+
+
+
+ {education.map((edu) => (
+
+
+
+
+ {edu.degree}
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+
+ {formatDate(edu.graduationDate)}
+
+
+ {edu.relevantCourses && edu.relevantCourses.length > 0 && (
+
+
+ Relevant Coursework:
+
+
+ {edu.relevantCourses.map((course, i) => (
+
+ {course}
+
+ ))}
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ {certifications.map((cert) => (
+
+
+ {cert.name}
+
+
+ {cert.issuer}
+
+
+ {formatDate(cert.date)}
+ {cert.expirationDate && ` - ${formatDate(cert.expirationDate)}`}
+
+
+ ))}
+
+
+ {visibleSections.map(section => renderSection(section))}
+
+ );
+}
diff --git a/src/components/resume-builder/templates/TimelineTemplate.tsx b/src/components/resume-builder/templates/TimelineTemplate.tsx
new file mode 100644
index 0000000..30b9a1f
--- /dev/null
+++ b/src/components/resume-builder/templates/TimelineTemplate.tsx
@@ -0,0 +1,183 @@
+import { Mail, Phone, MapPin, Globe, Linkedin, Github, Briefcase, GraduationCap, Code, Award } from 'lucide-react';
+import { ResumeData } from '@/types/resume';
+
+type TemplateProps = {
+ data: ResumeData;
+};
+
+export function TimelineTemplate({ data }: TemplateProps) {
+ const { personalInfo, summary, experience, education, skills, certifications } = data;
+ const accentColor = data.customization.accentColor || '#3b82f6';
+
+ const formatDate = (dateStr: string) => {
+ if (!dateStr) return '';
+ const date = new Date(dateStr + '-01');
+ return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
+ };
+
+ return (
+
+ {/* Header */}
+
+
{personalInfo.fullName}
+ {personalInfo.title && (
+
{personalInfo.title}
+ )}
+
+ {personalInfo.email && {personalInfo.email} }
+ {personalInfo.phone && {personalInfo.phone} }
+ {personalInfo.location && {personalInfo.location} }
+
+
+
+ {/* Summary */}
+ {summary && (
+
+
Professional Summary
+
{summary}
+
+ )}
+
+ {/* Timeline Section */}
+
+ {/* Timeline Line */}
+
+
+
+ {/* Experience */}
+ {experience.length > 0 && (
+
+
+
+
+ {experience.map((exp, idx) => (
+
+
+
+
+
{exp.jobTitle}
+
+ {formatDate(exp.startDate)} - {exp.isCurrentJob ? 'Present' : formatDate(exp.endDate)}
+
+
+
+ {exp.company}
+ {exp.location && ` • ${exp.location}`}
+
+
+ {exp.description.map((desc, idx) => (
+
+ •
+ {desc}
+
+ ))}
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Education */}
+ {education.length > 0 && (
+
+
+
+
+ {education.map((edu) => (
+
+
+
+
+
{edu.degree}
+
+ {formatDate(edu.graduationDate)}
+
+
+
+ {edu.school}
+ {edu.location && `, ${edu.location}`}
+
+ {edu.gpa && (
+
+ GPA: {edu.gpa}
+
+ )}
+
+
+ ))}
+
+
+ )}
+
+
+
+ {/* Skills & Certifications */}
+
+ {/* Skills */}
+ {skills.length > 0 && (
+
+
+
+
+ {skills.map((skill) => (
+
+ {skill.name}
+
+ ))}
+
+
+ )}
+
+ {/* Certifications */}
+ {certifications.length > 0 && (
+
+
+
+
+ {certifications.map((cert) => (
+
+
{cert.name}
+
+ {cert.issuer} • {formatDate(cert.date)}
+
+
+ ))}
+
+
+ )}
+
+
+