From 4d7073cab27d694a1ecbd8d6f520dbc8e7aa226d Mon Sep 17 00:00:00 2001
From: Horus AI <horus@hostpioneers.com>
Date: Tue, 24 Mar 2026 00:24:03 +0100
Subject: [PATCH] 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
---
 app/mission-control/resume/page.tsx | 106 ++++++++++++++++------------
 1 file changed, 60 insertions(+), 46 deletions(-)

diff --git a/app/mission-control/resume/page.tsx b/app/mission-control/resume/page.tsx
index d4846fa..a7c894d 100644
--- a/app/mission-control/resume/page.tsx
+++ b/app/mission-control/resume/page.tsx
@@ -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>
-                      <span className="text-sm text-gray-500">{exp.period}</span>
+                  <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>
+                    <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>