haitham/sitemente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(resume): update preview to match Gemini's exact design

Browse Source 
- 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:
Horus AI
2026-03-24 00:24:03 +01:00
parent 29312444d0
commit 4d7073cab2
1 changed files with 60 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/mission-control/resume/page.tsx
+59 -45
View File
@@ -435,10 +435,10 @@ export default function ResumeBuilderPage() {
</div>
</div>
) : (
/* Resume Preview */
/* Resume Preview - Gemini Design */
<div className="p-8">
<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 {
width: 850px;
min-height: 1100px;
@@ -446,7 +446,7 @@ export default function ResumeBuilderPage() {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
margin: 0 auto;
display: flex;
font-family: 'Roboto', sans-serif;
font-family: 'Inter', sans-serif;
}
.resume-sidebar {
width: 280px;
@@ -466,8 +466,8 @@ export default function ResumeBuilderPage() {
background: #d1d1d1;
margin: 0 auto 2rem;
}
.resume-section-header {
font-size: 1.1rem;
.section-header {
font-size: 11px;
font-weight: 700;
color: #1a1a1a;
border-bottom: 1px solid #ccc;
@@ -475,8 +475,8 @@ export default function ResumeBuilderPage() {
margin-bottom: 12px;
text-transform: capitalize;
}
.resume-main-header {
font-size: 1.6rem;
.main-header {
font-size: 16px;
font-weight: 800;
letter-spacing: 0.15em;
color: #1a1a1a;
@@ -485,6 +485,23 @@ export default function ResumeBuilderPage() {
margin-bottom: 24px;
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 {
body { background: white; }
.resume-preview { box-shadow: none; margin: 0; }
@@ -497,37 +514,33 @@ export default function ResumeBuilderPage() {
<div className="resume-photo" />
{/* Contact Section */}
<div className="mb-6">
<h3 className="resume-section-header">Contact</h3>
<div className="space-y-2 text-sm text-gray-700">
<p>📧 {personalInfo.email}</p>
<p>📱 {personalInfo.phone}</p>
<p>📍 {personalInfo.location}</p>
<p>🌐 {personalInfo.website}</p>
<p>💼 {personalInfo.linkedin}</p>
<div className="mb-8">
<h3 className="section-header">Contact</h3>
<div className="space-y-2 text-[11px] text-gray-700">
<p>{personalInfo.email}</p>
<p>{personalInfo.phone}</p>
<p>{personalInfo.location}</p>
<p>{personalInfo.website}</p>
<p>{personalInfo.linkedin}</p>
</div>
</div>
{/* Skills Section */}
<div className="mb-6">
<h3 className="resume-section-header">Skills</h3>
<div className="space-y-1">
<div className="mb-8">
<h3 className="section-header">Skills</h3>
<div className="text-[11px] text-gray-700 space-y-1 font-medium">
{skills.map((skill) => (
<div key={skill.id} className="text-sm text-gray-700">
• {skill.name}
</div>
<p key={skill.id}>• {skill.name}</p>
))}
</div>
</div>
{/* Languages Section */}
<div className="mb-6">
<h3 className="resume-section-header">Languages</h3>
<div className="space-y-1">
<div>
<h3 className="section-header">Language</h3>
<div className="text-[11px] text-gray-700 space-y-1 font-medium">
{languages.map((lang) => (
<div key={lang.id} className="text-sm text-gray-700">
• {lang.name} ({lang.level})
</div>
<p key={lang.id}>• {lang.name}</p>
))}
</div>
</div>
@@ -535,39 +548,40 @@ export default function ResumeBuilderPage() {
{/* Main Content */}
<div className="resume-main">
<h1 className="resume-main-header">{personalInfo.name}</h1>
<p className="text-lg text-gray-600 mb-6 uppercase tracking-wide">{personalInfo.title}</p>
<h1 className="main-header">{personalInfo.name}</h1>
{/* Summary */}
<div className="mb-6">
<h3 className="resume-section-header">Profile</h3>
<p className="text-sm text-gray-700 leading-relaxed">{personalInfo.summary}</p>
<div className="mb-8">
<h3 className="section-header">Profile</h3>
<p className="text-[11px] text-gray-700 leading-relaxed">{personalInfo.summary}</p>
</div>
{/* Experience */}
<div className="mb-6">
<h3 className="resume-section-header">Experience</h3>
<div className="mb-8">
<h3 className="section-header">Experience</h3>
{experiences.map((exp) => (
<div key={exp.id} className="mb-4">
<div className="flex justify-between items-start">
<div>
<h4 className="font-bold text-gray-800">{exp.title}</h4>
<p className="text-gray-600">{exp.company}</p>
<div key={exp.id} className="experience-item">
<div className="experience-dot" />
<div className="flex justify-between items-baseline mb-1">
<h4 className="text-[18px] font-bold text-gray-800 leading-none">{exp.title}</h4>
<span className="text-[12px] font-bold text-gray-400">{exp.period}</span>
</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>
<p className="text-sm text-gray-700 mt-2 leading-relaxed">{exp.description}</p>
</div>
))}
</div>
{/* Education */}
<div>
<h3 className="resume-section-header">Education</h3>
<h3 className="section-header">Education</h3>
{education.map((edu) => (
<div key={edu.id} className="mb-3">
<h4 className="font-bold text-gray-800">{edu.degree}</h4>
<p className="text-gray-600">{edu.school} • {edu.year}</p>
<div key={edu.id} className="mb-4">
<p className="text-[11px] font-bold text-gray-800 leading-tight">{edu.degree}</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>