fix(resume): update preview to match Gemini's exact design
- Smaller font sizes (9-11px) - Experience with border-left line and dots - Education formatting with specific sizes - Skills/Languages as bullet lists - Main-header and section-header styling
This commit is contained in:
@@ -435,10 +435,10 @@ export default function ResumeBuilderPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
/* Resume Preview */
|
/* Resume Preview - Gemini Design */
|
||||||
<div className="p-8">
|
<div className="p-8">
|
||||||
<style>{`
|
<style>{`
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||||
.resume-preview {
|
.resume-preview {
|
||||||
width: 850px;
|
width: 850px;
|
||||||
min-height: 1100px;
|
min-height: 1100px;
|
||||||
@@ -446,7 +446,7 @@ export default function ResumeBuilderPage() {
|
|||||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Inter', sans-serif;
|
||||||
}
|
}
|
||||||
.resume-sidebar {
|
.resume-sidebar {
|
||||||
width: 280px;
|
width: 280px;
|
||||||
@@ -466,8 +466,8 @@ export default function ResumeBuilderPage() {
|
|||||||
background: #d1d1d1;
|
background: #d1d1d1;
|
||||||
margin: 0 auto 2rem;
|
margin: 0 auto 2rem;
|
||||||
}
|
}
|
||||||
.resume-section-header {
|
.section-header {
|
||||||
font-size: 1.1rem;
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1a1a1a;
|
color: #1a1a1a;
|
||||||
border-bottom: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
||||||
@@ -475,8 +475,8 @@ export default function ResumeBuilderPage() {
|
|||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
.resume-main-header {
|
.main-header {
|
||||||
font-size: 1.6rem;
|
font-size: 16px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.15em;
|
letter-spacing: 0.15em;
|
||||||
color: #1a1a1a;
|
color: #1a1a1a;
|
||||||
@@ -485,6 +485,23 @@ export default function ResumeBuilderPage() {
|
|||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
.experience-item {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 32px;
|
||||||
|
border-left: 2px solid #e5e5e5;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
}
|
||||||
|
.experience-dot {
|
||||||
|
position: absolute;
|
||||||
|
left: -9px;
|
||||||
|
top: 4px;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: #333;
|
||||||
|
border: 3px solid white;
|
||||||
|
border-radius: 9999px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
@media print {
|
@media print {
|
||||||
body { background: white; }
|
body { background: white; }
|
||||||
.resume-preview { box-shadow: none; margin: 0; }
|
.resume-preview { box-shadow: none; margin: 0; }
|
||||||
@@ -497,37 +514,33 @@ export default function ResumeBuilderPage() {
|
|||||||
<div className="resume-photo" />
|
<div className="resume-photo" />
|
||||||
|
|
||||||
{/* Contact Section */}
|
{/* Contact Section */}
|
||||||
<div className="mb-6">
|
<div className="mb-8">
|
||||||
<h3 className="resume-section-header">Contact</h3>
|
<h3 className="section-header">Contact</h3>
|
||||||
<div className="space-y-2 text-sm text-gray-700">
|
<div className="space-y-2 text-[11px] text-gray-700">
|
||||||
<p>📧 {personalInfo.email}</p>
|
<p>{personalInfo.email}</p>
|
||||||
<p>📱 {personalInfo.phone}</p>
|
<p>{personalInfo.phone}</p>
|
||||||
<p>📍 {personalInfo.location}</p>
|
<p>{personalInfo.location}</p>
|
||||||
<p>🌐 {personalInfo.website}</p>
|
<p>{personalInfo.website}</p>
|
||||||
<p>💼 {personalInfo.linkedin}</p>
|
<p>{personalInfo.linkedin}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Skills Section */}
|
{/* Skills Section */}
|
||||||
<div className="mb-6">
|
<div className="mb-8">
|
||||||
<h3 className="resume-section-header">Skills</h3>
|
<h3 className="section-header">Skills</h3>
|
||||||
<div className="space-y-1">
|
<div className="text-[11px] text-gray-700 space-y-1 font-medium">
|
||||||
{skills.map((skill) => (
|
{skills.map((skill) => (
|
||||||
<div key={skill.id} className="text-sm text-gray-700">
|
<p key={skill.id}>• {skill.name}</p>
|
||||||
• {skill.name}
|
|
||||||
</div>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Languages Section */}
|
{/* Languages Section */}
|
||||||
<div className="mb-6">
|
<div>
|
||||||
<h3 className="resume-section-header">Languages</h3>
|
<h3 className="section-header">Language</h3>
|
||||||
<div className="space-y-1">
|
<div className="text-[11px] text-gray-700 space-y-1 font-medium">
|
||||||
{languages.map((lang) => (
|
{languages.map((lang) => (
|
||||||
<div key={lang.id} className="text-sm text-gray-700">
|
<p key={lang.id}>• {lang.name}</p>
|
||||||
• {lang.name} ({lang.level})
|
|
||||||
</div>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -535,39 +548,40 @@ export default function ResumeBuilderPage() {
|
|||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<div className="resume-main">
|
<div className="resume-main">
|
||||||
<h1 className="resume-main-header">{personalInfo.name}</h1>
|
<h1 className="main-header">{personalInfo.name}</h1>
|
||||||
<p className="text-lg text-gray-600 mb-6 uppercase tracking-wide">{personalInfo.title}</p>
|
|
||||||
|
|
||||||
{/* Summary */}
|
{/* Summary */}
|
||||||
<div className="mb-6">
|
<div className="mb-8">
|
||||||
<h3 className="resume-section-header">Profile</h3>
|
<h3 className="section-header">Profile</h3>
|
||||||
<p className="text-sm text-gray-700 leading-relaxed">{personalInfo.summary}</p>
|
<p className="text-[11px] text-gray-700 leading-relaxed">{personalInfo.summary}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Experience */}
|
{/* Experience */}
|
||||||
<div className="mb-6">
|
<div className="mb-8">
|
||||||
<h3 className="resume-section-header">Experience</h3>
|
<h3 className="section-header">Experience</h3>
|
||||||
{experiences.map((exp) => (
|
{experiences.map((exp) => (
|
||||||
<div key={exp.id} className="mb-4">
|
<div key={exp.id} className="experience-item">
|
||||||
<div className="flex justify-between items-start">
|
<div className="experience-dot" />
|
||||||
<div>
|
<div className="flex justify-between items-baseline mb-1">
|
||||||
<h4 className="font-bold text-gray-800">{exp.title}</h4>
|
<h4 className="text-[18px] font-bold text-gray-800 leading-none">{exp.title}</h4>
|
||||||
<p className="text-gray-600">{exp.company}</p>
|
<span className="text-[12px] font-bold text-gray-400">{exp.period}</span>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-sm text-gray-500">{exp.period}</span>
|
<p className="text-[14px] font-bold text-blue-600 mb-3">{exp.company}</p>
|
||||||
|
<div className="text-[11px] text-gray-600 space-y-1.5 leading-snug whitespace-pre-line">
|
||||||
|
{exp.description}
|
||||||
</div>
|
</div>
|
||||||
<p className="text-sm text-gray-700 mt-2 leading-relaxed">{exp.description}</p>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Education */}
|
{/* Education */}
|
||||||
<div>
|
<div>
|
||||||
<h3 className="resume-section-header">Education</h3>
|
<h3 className="section-header">Education</h3>
|
||||||
{education.map((edu) => (
|
{education.map((edu) => (
|
||||||
<div key={edu.id} className="mb-3">
|
<div key={edu.id} className="mb-4">
|
||||||
<h4 className="font-bold text-gray-800">{edu.degree}</h4>
|
<p className="text-[11px] font-bold text-gray-800 leading-tight">{edu.degree}</p>
|
||||||
<p className="text-gray-600">{edu.school} • {edu.year}</p>
|
<p className="text-[10px] text-gray-600">{edu.school}</p>
|
||||||
|
<p className="text-[9px] text-gray-400 font-bold">{edu.year}</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user