fix: ats resume builder UI and backend extraction handling

- Added theme color picker to ResumeBuilder
- Formatted certifications to properly display issuer and name
- Fixed Chrome autofill background bug on login pages
- Removed headers/footers in PDF export via print CSS
- Made ats_service skill extraction robust to non-list JSON values
- Improved ATS Checker error reporting for unreadable image-based PDFs

backend/src/ingestion/pdf_reader.py

@@ -35,4 +35,4 @@ def parse_pdf(path: str) -> str:
     except Exception as e:
         print(f"❌ pypdf also failed for {path}: {e}")
 
-    raise ValueError(f"Unable to extract text from PDF: {path}")
+    raise ValueError("We couldn't extract any readable text from this PDF. If you generated this using 'Microsoft Print to PDF', please try using Chrome/Edge's native 'Save as PDF' option instead, as Microsoft Print to PDF often converts text into unreadable images.")

backend/src/services/ats_service.py

@@ -58,17 +58,24 @@ def calculate_ats_score(resume_data: dict, job_data: dict) -> dict:
     # --- 1. Skill Matching (Weight: 60%) ---
     # Merge all job skills into a set for easier lookup
     job_skills = set()
-    if job_data.get("technical_skills"):
-        job_skills.update([s.lower() for s in job_data["technical_skills"]])
-    if job_data.get("skills"):
-        job_skills.update([s.lower() for s in job_data["skills"]])
+    
+    def safe_add_skills(target_set, data_dict, key):
+        if not data_dict: return
+        items = data_dict.get(key)
+        if items:
+            if isinstance(items, list):
+                for s in items:
+                    if isinstance(s, str): target_set.add(s.lower())
+            elif isinstance(items, str):
+                target_set.add(items.lower())
+
+    safe_add_skills(job_skills, job_data, "technical_skills")
+    safe_add_skills(job_skills, job_data, "skills")
     
     # Merge all resume skills
     resume_skills = set()
-    if resume_data.get("technical_skills"):
-        resume_skills.update([s.lower() for s in resume_data["technical_skills"]])
-    if resume_data.get("skills"):
-        resume_skills.update([s.lower() for s in resume_data["skills"]])
+    safe_add_skills(resume_skills, resume_data, "technical_skills")
+    safe_add_skills(resume_skills, resume_data, "skills")
 
     # Calculate overlaps
     found_skills = job_skills.intersection(resume_skills)

src/components/ResumeBuilder.jsx

@@ -26,9 +26,9 @@ export default function ResumeBuilder({ analysisResult, onBack }) {
                 id: Date.now() + idx,
                 company: exp.company || '',
                 role: exp.role || '',
-                startDate: exp.start_date || '',
+                startDate: exp.years || exp.start_date || '',
                 endDate: exp.end_date || '',
-                description: Array.isArray(exp.responsibilities) ? exp.responsibilities.map(r => `• ${r}`).join('\n') : (exp.responsibilities || '')
+                description: Array.isArray(exp.responsibilities) ? exp.responsibilities.map(r => `• ${r}`).join('\n') : (exp.responsibilities || exp.description || '')
             }))
             : [{ id: 1, company: '', role: '', startDate: '', endDate: '', description: '' }]
     );
@@ -38,18 +38,51 @@ export default function ResumeBuilder({ analysisResult, onBack }) {
             ? resumeData.education.map((edu, idx) => ({
                 id: Date.now() + idx,
                 institution: edu.institution || '',
-                degree: edu.degree || '',
-                startDate: edu.start_date || '',
-                endDate: edu.end_date || ''
+                degree: edu.course || edu.degree || '',
+                startDate: edu.year || edu.start_date || '',
+                endDate: edu.end_date || '',
+                location: edu.location || ''
             }))
             : [{ id: 1, institution: '', degree: '', startDate: '', endDate: '' }]
     );
 
+    const [projects, setProjects] = useState(
+        resumeData.projects?.length > 0
+            ? resumeData.projects.map((proj, idx) => ({
+                id: Date.now() + idx,
+                name: proj.title || proj.name || '',
+                description: proj.description || '',
+                link: proj.link || ''
+            }))
+            : [{ id: 1, name: '', description: '', link: '' }]
+    );
+
+    const [certifications, setCertifications] = useState(
+        resumeData.certifications?.length > 0
+            ? resumeData.certifications.map((cert, idx) => {
+                if (typeof cert === 'string') {
+                    const parts = cert.split(/ - | – | — |: /);
+                    if (parts.length > 1) {
+                        return { id: Date.now() + idx, issuer: parts[0].trim(), name: parts.slice(1).join(' - ').trim(), date: '' };
+                    }
+                    return { id: Date.now() + idx, name: cert, issuer: '', date: '' };
+                }
+                return {
+                    id: Date.now() + idx,
+                    name: cert.name || cert.title || '',
+                    issuer: cert.issuer || '',
+                    date: cert.date || ''
+                };
+            })
+            : [{ id: 1, name: '', issuer: '', date: '' }]
+    );
+
     const initialSkills = [];
     if (resumeData.technical_skills) initialSkills.push(...resumeData.technical_skills);
     if (resumeData.skills) initialSkills.push(...resumeData.skills);
 
     const [skills, setSkills] = useState(initialSkills.join(', '));
+    const [themeColor, setThemeColor] = useState('#000000');
 
     // Drag and Drop Handlers
     const handleDragStart = (e, keyword) => {
@@ -76,6 +109,15 @@ export default function ResumeBuilder({ analysisResult, onBack }) {
         }
     };
 
+    const handleProjectDrop = (e, id, currentValue) => {
+        e.preventDefault();
+        const draggedText = e.dataTransfer.getData("text/plain");
+        if (draggedText) {
+            const separator = currentValue ? ' ' : '';
+            updateProject(id, 'description', `${currentValue}${separator}${draggedText}`);
+        }
+    };
+
     const handleDragOver = (e) => {
         e.preventDefault(); // Necessary to allow dropping
     };
@@ -110,6 +152,15 @@ export default function ResumeBuilder({ analysisResult, onBack }) {
         setEducation(prev => prev.filter(edu => edu.id !== id));
     };
 
+    const addProject = () => setProjects(prev => [...prev, { id: Date.now(), name: '', description: '', link: '' }]);
+    const updateProject = (id, field, value) => setProjects(prev => prev.map(proj => proj.id === id ? { ...proj, [field]: value } : proj));
+    const removeProject = (id) => setProjects(prev => prev.filter(proj => proj.id !== id));
+
+    const addCertification = () => setCertifications(prev => [...prev, { id: Date.now(), name: '', issuer: '', date: '' }]);
+    const updateCertification = (id, field, value) => setCertifications(prev => prev.map(cert => cert.id === id ? { ...cert, [field]: value } : cert));
+    const removeCertification = (id) => setCertifications(prev => prev.filter(cert => cert.id !== id));
+
+
     const handlePrint = () => {
         window.print();
     };
@@ -141,6 +192,18 @@ export default function ResumeBuilder({ analysisResult, onBack }) {
         paddingBottom: '0.5rem'
     };
 
+    const resumeSectionHeaderStyle = {
+        fontSize: '14px',
+        fontVariant: 'small-caps',
+        fontWeight: 'bold',
+        textTransform: 'uppercase',
+        borderBottom: `1px solid ${themeColor}`,
+        color: themeColor,
+        paddingBottom: '2px',
+        marginBottom: '8px',
+        letterSpacing: '1px'
+    };
+
     return (
         <div style={{ display: 'grid', gridTemplateColumns: 'minmax(300px, 1fr) 1.5fr', gap: '2rem', height: 'calc(100vh - 150px)' }}>
 
@@ -155,12 +218,26 @@ export default function ResumeBuilder({ analysisResult, onBack }) {
                     >
                         <ArrowLeftIcon /> Back to Analysis
                     </button>
-                    <button
-                        onClick={handlePrint}
-                        style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', backgroundColor: '#FBBF24', color: 'black', border: 'none', padding: '0.5rem 1rem', borderRadius: '0.5rem', fontWeight: 'bold', cursor: 'pointer' }}
-                    >
-                        <DownloadIcon /> Export PDF
-                    </button>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', backgroundColor: 'rgba(255,255,255,0.05)', padding: '0.25rem 0.5rem', borderRadius: '0.5rem', border: '1px solid rgba(255,255,255,0.1)' }}>
+                            <label style={{ fontSize: '0.75rem', color: '#d1d5db' }}>Theme Color</label>
+                            <div style={{ position: 'relative', width: '24px', height: '24px', borderRadius: '4px', backgroundColor: themeColor, border: '1px solid rgba(255,255,255,0.2)', overflow: 'hidden' }}>
+                                <input
+                                    type="color"
+                                    value={themeColor}
+                                    onChange={(e) => setThemeColor(e.target.value)}
+                                    style={{ position: 'absolute', top: '-10px', left: '-10px', width: '50px', height: '50px', cursor: 'pointer', opacity: 0 }}
+                                    title="Change Resume Theme Color"
+                                />
+                            </div>
+                        </div>
+                        <button
+                            onClick={handlePrint}
+                            style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', backgroundColor: '#FBBF24', color: 'black', border: 'none', padding: '0.5rem 1rem', borderRadius: '0.5rem', fontWeight: 'bold', cursor: 'pointer' }}
+                        >
+                            <DownloadIcon /> Export PDF
+                        </button>
+                    </div>
                 </div>
 
                 {/* Fix Your Gaps Panel */}
@@ -289,6 +366,62 @@ export default function ResumeBuilder({ analysisResult, onBack }) {
                         ))}
                     </div>
 
+                    {/* Projects */}
+                    <div style={{ marginBottom: '2rem' }}>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+                            <h3 style={{ ...sectionHeaderStyle, borderBottom: 'none', marginBottom: 0 }}>Projects</h3>
+                            <button onClick={addProject} style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', background: 'none', border: '1px solid #FBBF24', color: '#FBBF24', padding: '0.25rem 0.5rem', borderRadius: '0.25rem', cursor: 'pointer', fontSize: '0.75rem' }}>
+                                <PlusIcon size={14} /> Add Project
+                            </button>
+                        </div>
+                        {projects.map((proj, index) => (
+                            <div key={proj.id} style={{ backgroundColor: 'rgba(0,0,0,0.2)', padding: '1rem', borderRadius: '0.5rem', marginBottom: '1rem', position: 'relative' }}>
+                                {index > 0 && (
+                                    <button onClick={() => removeProject(proj.id)} style={{ position: 'absolute', top: '1rem', right: '1rem', background: 'none', border: 'none', color: '#EF4444', cursor: 'pointer' }} title="Remove Project">
+                                        <TrashIcon size={16} />
+                                    </button>
+                                )}
+                                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginBottom: '1rem' }}>
+                                    <div><label style={labelStyle}>Project Name</label><input style={{ ...inputStyle, marginBottom: 0 }} value={proj.name} onChange={e => updateProject(proj.id, 'name', e.target.value)} placeholder="E-commerce App" /></div>
+                                    <div><label style={labelStyle}>Link (Optional)</label><input style={{ ...inputStyle, marginBottom: 0 }} value={proj.link} onChange={e => updateProject(proj.id, 'link', e.target.value)} placeholder="github.com/..." /></div>
+                                </div>
+                                <label style={labelStyle}>Description (Bullet points recommended)</label>
+                                <textarea
+                                    style={{ ...inputStyle, minHeight: '60px', resize: 'vertical', marginBottom: 0 }}
+                                    value={proj.description}
+                                    onChange={e => updateProject(proj.id, 'description', e.target.value)}
+                                    onDrop={(e) => handleProjectDrop(e, proj.id, proj.description)}
+                                    onDragOver={handleDragOver}
+                                    placeholder="• Developed using React..."
+                                />
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Certifications */}
+                    <div style={{ marginBottom: '2rem' }}>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+                            <h3 style={{ ...sectionHeaderStyle, borderBottom: 'none', marginBottom: 0 }}>Certifications</h3>
+                            <button onClick={addCertification} style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', background: 'none', border: '1px solid #FBBF24', color: '#FBBF24', padding: '0.25rem 0.5rem', borderRadius: '0.25rem', cursor: 'pointer', fontSize: '0.75rem' }}>
+                                <PlusIcon size={14} /> Add Certification
+                            </button>
+                        </div>
+                        {certifications.map((cert, index) => (
+                            <div key={cert.id} style={{ backgroundColor: 'rgba(0,0,0,0.2)', padding: '1rem', borderRadius: '0.5rem', marginBottom: '1rem', position: 'relative' }}>
+                                {index > 0 && (
+                                    <button onClick={() => removeCertification(cert.id)} style={{ position: 'absolute', top: '1rem', right: '1rem', background: 'none', border: 'none', color: '#EF4444', cursor: 'pointer' }} title="Remove Certification">
+                                        <TrashIcon size={16} />
+                                    </button>
+                                )}
+                                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '1rem' }}>
+                                    <div><label style={labelStyle}>Name</label><input style={{ ...inputStyle, marginBottom: 0 }} value={cert.name} onChange={e => updateCertification(cert.id, 'name', e.target.value)} placeholder="AWS Cloud Practitioner" /></div>
+                                    <div><label style={labelStyle}>Issuer</label><input style={{ ...inputStyle, marginBottom: 0 }} value={cert.issuer} onChange={e => updateCertification(cert.id, 'issuer', e.target.value)} placeholder="Amazon Web Services" /></div>
+                                    <div><label style={labelStyle}>Date / Year</label><input style={{ ...inputStyle, marginBottom: 0 }} value={cert.date} onChange={e => updateCertification(cert.id, 'date', e.target.value)} placeholder="YYYY" /></div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+
                     {/* Skills */}
                     <div>
                         <h3 style={sectionHeaderStyle}>Skills</h3>
@@ -316,7 +449,7 @@ export default function ResumeBuilder({ analysisResult, onBack }) {
                     display: 'flex',
                     justifyContent: 'center'
                 }}
-                className="print-container no-print hide-scrollbar" // Wrapper won't print, only content below
+                className="hide-scrollbar" // Wrapper shouldn't have no-print so children can print
             >
                 {/* Actual Paper Element */}
                 <div
@@ -324,82 +457,125 @@ export default function ResumeBuilder({ analysisResult, onBack }) {
                     className="resume-print-area"
                     style={{
                         backgroundColor: 'white',
-                        color: '#333333',
+                        color: 'black',
                         width: '100%',
-                        maxWidth: '800px',
-                        minHeight: '1056px', // ~8.5x11 aspect ratio
+                        maxWidth: '850px',
+                        minHeight: '1100px', // ~8.5x11 aspect ratio
                         padding: '40px 50px',
                         boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.5)',
-                        fontFamily: "'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif",
-                        lineHeight: '1.5',
+                        fontFamily: "'Times New Roman', Times, serif",
+                        lineHeight: '1.4',
                         boxSizing: 'border-box'
                     }}
                 >
                     {/* Header */}
                     <div style={{ textAlign: 'center', marginBottom: '20px' }}>
-                        <h1 style={{ fontSize: '36px', fontWeight: '800', margin: '0 0 5px 0', color: '#1e3a8a', letterSpacing: '-0.5px' }}>
+                        <h1 style={{ fontSize: '36px', fontWeight: 'normal', margin: '0 0 10px 0', letterSpacing: '1px', color: themeColor }}>
                             {personalInfo.fullName || 'Your Name'}
                         </h1>
-                        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '10px', fontSize: '14px', color: '#555555' }}>
-                            {personalInfo.location && <span>{personalInfo.location}</span>}
-                            {personalInfo.location && (personalInfo.phone || personalInfo.email) && <span style={{ color: '#ccc' }}>•</span>}
-                            {personalInfo.phone && <span>{personalInfo.phone}</span>}
-                            {personalInfo.phone && personalInfo.email && <span style={{ color: '#ccc' }}>•</span>}
-                            {personalInfo.email && <span style={{ color: '#1e3a8a' }}>{personalInfo.email}</span>}
-                            {personalInfo.linkedin && <><span style={{ color: '#ccc' }}>•</span><span style={{ color: '#1e3a8a' }}>{personalInfo.linkedin}</span></>}
-                            {personalInfo.portfolio && <><span style={{ color: '#ccc' }}>•</span><span style={{ color: '#1e3a8a' }}>{personalInfo.portfolio}</span></>}
+                        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '16px', fontSize: '13px' }}>
+                            {personalInfo.phone && (
+                                <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M6.62 10.79a15.053 15.053 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.11-.27c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A19 19 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.11l-2.2 2.2z"></path></svg>
+                                    {personalInfo.phone}
+                                </div>
+                            )}
+                            {personalInfo.email && (
+                                <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></svg>
+                                    {personalInfo.email}
+                                </div>
+                            )}
+                            {personalInfo.linkedin && (
+                                <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path></svg>
+                                    {personalInfo.linkedin}
+                                </div>
+                            )}
+                            {personalInfo.portfolio && (
+                                <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg>
+                                    {personalInfo.portfolio}
+                                </div>
+                            )}
                         </div>
                     </div>
 
-                    {/* Summary Preview */}
+                    {/* Summary */}
                     {summary && (
-                        <div style={{ marginBottom: '20px' }}>
-                            <p style={{ fontSize: '15px', color: '#444444', margin: 0, textAlign: 'justify' }}>
+                        <div style={{ marginBottom: '16px' }}>
+                            <h2 style={resumeSectionHeaderStyle}>
+                                Summary
+                            </h2>
+                            <p style={{ fontSize: '13px', margin: 0, textAlign: 'justify' }}>
                                 {summary}
                             </p>
                         </div>
                     )}
 
-                    {/* Skills Preview */}
+                    {/* Education */}
+                    {education.some(edu => edu.institution || edu.degree) && (
+                        <div style={{ marginBottom: '16px' }}>
+                            <h2 style={resumeSectionHeaderStyle}>
+                                Education
+                            </h2>
+                            {education.map(edu => (
+                                (edu.institution || edu.degree) ? (
+                                    <div key={edu.id} style={{ marginBottom: '8px' }}>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '13px' }}>
+                                            <span style={{ fontWeight: 'bold' }}>{edu.institution}</span>
+                                            <span>{edu.location || ''}</span>
+                                        </div>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '13px', fontStyle: 'italic' }}>
+                                            <span>{edu.degree}</span>
+                                            <span>{edu.startDate} {edu.startDate && edu.endDate && '–'} {edu.endDate}</span>
+                                        </div>
+                                    </div>
+                                ) : null
+                            ))}
+                        </div>
+                    )}
+
+                    {/* Technical Skills */}
                     {skills && (
-                        <div style={{ marginBottom: '20px' }}>
-                            <h2 style={{ fontSize: '16px', fontWeight: '700', color: '#1e3a8a', textTransform: 'uppercase', borderBottom: '2px solid #1e3a8a', paddingBottom: '4px', marginBottom: '12px', letterSpacing: '0.5px' }}>
+                        <div style={{ marginBottom: '16px' }}>
+                            <h2 style={resumeSectionHeaderStyle}>
                                 Technical Skills
                             </h2>
-                            <p style={{ fontSize: '15px', color: '#333333', margin: 0, lineHeight: '1.6' }}>
+                            <p style={{ fontSize: '13px', margin: 0 }}>
                                 {skills}
                             </p>
                         </div>
                     )}
 
-                    {/* Experience Preview */}
+                    {/* Professional Experience */}
                     {experience.some(exp => exp.company || exp.role) && (
-                        <div style={{ marginBottom: '20px' }}>
-                            <h2 style={{ fontSize: '16px', fontWeight: '700', color: '#1e3a8a', textTransform: 'uppercase', borderBottom: '2px solid #1e3a8a', paddingBottom: '4px', marginBottom: '12px', letterSpacing: '0.5px' }}>
-                                Professional Experience
+                        <div style={{ marginBottom: '16px' }}>
+                            <h2 style={resumeSectionHeaderStyle}>
+                                Experience
                             </h2>
                             {experience.map(exp => (
                                 (exp.company || exp.role) ? (
-                                    <div key={exp.id} style={{ marginBottom: '16px' }}>
-                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '2px' }}>
-                                            <div style={{ fontWeight: '700', fontSize: '16px', color: '#222222' }}>{exp.role || 'Role'}</div>
-                                            <div style={{ fontSize: '14px', color: '#666666', fontStyle: 'italic', whiteSpace: 'nowrap' }}>
-                                                {exp.startDate} {exp.startDate && exp.endDate && '–'} {exp.endDate}
-                                            </div>
+                                    <div key={exp.id} style={{ marginBottom: '12px' }}>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '13px' }}>
+                                            <span style={{ fontWeight: 'bold' }}>{exp.role}</span>
+                                            <span style={{ fontWeight: 'bold' }}>{exp.startDate} {exp.startDate && exp.endDate && '–'} {exp.endDate}</span>
+                                        </div>
+                                        <div style={{ fontSize: '13px', fontStyle: 'italic', marginBottom: '4px' }}>
+                                            {exp.company}
                                         </div>
-                                        <div style={{ fontSize: '15px', color: '#1e3a8a', fontWeight: '600', marginBottom: '8px' }}>{exp.company}</div>
                                         {exp.description && (
-                                            <div style={{ fontSize: '14px', color: '#444444' }}>
-                                                {exp.description.split('\n').map((line, i) => (
-                                                    <div style={{ display: 'flex', marginBottom: '4px' }} key={i}>
-                                                        {line.trim().startsWith('•') || line.trim().startsWith('-') ? (
-                                                            <span style={{ marginRight: '8px', color: '#1e3a8a' }}>•</span>
-                                                        ) : line.trim() ? (
-                                                            <span style={{ marginRight: '8px', color: '#1e3a8a' }}>•</span>
-                                                        ) : null}
-                                                        <span style={{ flex: 1 }}>{line.replace(/^[•-]\s*/, '')}</span>
-                                                    </div>
-                                                ))}
+                                            <div style={{ fontSize: '13px' }}>
+                                                {exp.description.split('\n').map((line, i) => {
+                                                    const trimmedLine = line.trim();
+                                                    if (!trimmedLine) return null;
+                                                    return (
+                                                        <div style={{ display: 'flex', marginBottom: '2px', paddingLeft: '16px' }} key={i}>
+                                                            <span style={{ marginRight: '8px' }}>–</span>
+                                                            <span>{trimmedLine.replace(/^[•-]\s*/, '')}</span>
+                                                        </div>
+                                                    );
+                                                })}
                                             </div>
                                         )}
                                     </div>
@@ -408,22 +584,55 @@ export default function ResumeBuilder({ analysisResult, onBack }) {
                         </div>
                     )}
 
-                    {/* Education Preview */}
-                    {education.some(edu => edu.institution || edu.degree) && (
-                        <div style={{ marginBottom: '20px' }}>
-                            <h2 style={{ fontSize: '16px', fontWeight: '700', color: '#1e3a8a', textTransform: 'uppercase', borderBottom: '2px solid #1e3a8a', paddingBottom: '4px', marginBottom: '12px', letterSpacing: '0.5px' }}>
-                                Education
+                    {/* Projects */}
+                    {projects.some(proj => proj.name || proj.description) && (
+                        <div style={{ marginBottom: '16px' }}>
+                            <h2 style={resumeSectionHeaderStyle}>
+                                Projects
                             </h2>
-                            {education.map(edu => (
-                                (edu.institution || edu.degree) ? (
-                                    <div key={edu.id} style={{ marginBottom: '12px' }}>
-                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '2px' }}>
-                                            <div style={{ fontWeight: '700', fontSize: '15px', color: '#222222' }}>{edu.institution || 'Institution'}</div>
-                                            <div style={{ fontSize: '14px', color: '#666666', fontStyle: 'italic', whiteSpace: 'nowrap' }}>
-                                                {edu.startDate} {edu.startDate && edu.endDate && '–'} {edu.endDate}
+                            {projects.map(proj => (
+                                (proj.name || proj.description) ? (
+                                    <div key={proj.id} style={{ marginBottom: '10px' }}>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '13px', marginBottom: '4px' }}>
+                                            <span><strong style={{ fontWeight: 'bold' }}>{proj.name}</strong>{proj.link ? ` | ${proj.link}` : ''}</span>
+                                        </div>
+                                        {proj.description && (
+                                            <div style={{ fontSize: '13px' }}>
+                                                {proj.description.split('\n').map((line, i) => {
+                                                    const trimmedLine = line.trim();
+                                                    if (!trimmedLine) return null;
+                                                    return (
+                                                        <div style={{ display: 'flex', marginBottom: '2px', paddingLeft: '16px' }} key={i}>
+                                                            <span style={{ marginRight: '8px' }}>–</span>
+                                                            <span>{trimmedLine.replace(/^[•-]\s*/, '')}</span>
+                                                        </div>
+                                                    );
+                                                })}
                                             </div>
+                                        )}
+                                    </div>
+                                ) : null
+                            ))}
+                        </div>
+                    )}
+
+                    {/* Certifications */}
+                    {certifications.some(cert => cert.name || cert.issuer) && (
+                        <div style={{ marginBottom: '16px' }}>
+                            <h2 style={resumeSectionHeaderStyle}>
+                                Certifications
+                            </h2>
+                            {certifications.map(cert => (
+                                (cert.name || cert.issuer) ? (
+                                    <div key={cert.id} style={{ marginBottom: '4px', fontSize: '13px' }}>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                                            <span>
+                                                {cert.issuer && <strong style={{ fontWeight: 'bold' }}>{cert.issuer}</strong>}
+                                                {cert.issuer && cert.name && ' — '}
+                                                {cert.name && <span>{cert.name}</span>}
+                                            </span>
+                                            <span>{cert.date}</span>
                                         </div>
-                                        <div style={{ fontSize: '15px', color: '#444444' }}>{edu.degree}</div>
                                     </div>
                                 ) : null
                             ))}

src/index.css

@@ -1,10 +1,13 @@
-body, html, #root {
+body,
+html,
+#root {
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
   box-sizing: border-box;
 }
+
 body {
   margin: 0;
 }
@@ -16,7 +19,7 @@ body {
 .dark-select {
   background-color: #111827;
   color: rgb(51, 8, 8);
-  border: 1px solid rgba(255,255,255,0.2);
+  border: 1px solid rgba(255, 255, 255, 0.2);
   padding: 0.75rem;
   border-radius: 0.5rem;
   color-scheme: dark;
@@ -35,8 +38,10 @@ body {
 }
 
 .hide-scrollbar {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
 }
 
 /* ===============================
@@ -46,33 +51,41 @@ body {
   body * {
     visibility: hidden;
   }
-  
-  .print-container, .print-container * {
+
+  .resume-print-area,
+  .resume-print-area * {
     visibility: visible;
   }
-  
-  .print-container {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100vw;
-    margin: 0;
-    padding: 0;
-    background: white !important;
+
+  /* Force ancestors to be static so absolute positioning aligns to the page */
+  body, html, #root, .no-print-bg {
+    position: static !important;
+    margin: 0 !important;
+    padding: 0 !important;
   }
 
-  .no-print {
-    display: none !important;
+  .hide-scrollbar {
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    overflow: visible !important;
+    display: block !important;
   }
-  
+
   .resume-print-area {
+    position: relative !important;
+    margin: 0 auto !important;
     width: 100% !important;
     max-width: none !important;
-    padding: 0 !important;
     box-shadow: none !important;
+    background-color: white !important;
   }
-  
+
+  .no-print {
+    display: none !important;
+  }
+
   @page {
-    margin: 1cm;
+    margin: 0;
   }
 }

src/pages/AdminLogin.jsx

@@ -69,7 +69,7 @@ export default function AdminLogin({ onNavigate }) {
       alignItems: 'center', justifyContent: 'center', overflow: 'hidden',
       backgroundColor: '#020617', color: 'white', fontFamily: "'Montserrat', sans-serif", padding: '1rem',
     }}>
-      <style>{`@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); input:-webkit-autofill { -webkit-text-fill-color: #fff !important; -webkit-box-shadow: 0 0 0px 1000px rgba(239, 68, 68, 0.1) inset !important; }`}</style>
+      <style>{`@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-text-fill-color: #fff !important; }`}</style>
 
       {/* --- 🔴 FIXED BACK BUTTON --- */}
       <button

src/pages/AppliLogin.jsx

@@ -98,7 +98,7 @@ export default function AppliLogin({ onNavigate }) {
 
   return (
     <div style={{ position: 'relative', minHeight: '100vh', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1rem', overflow: 'hidden', backgroundColor: '#020617', color: 'white', fontFamily: "'Montserrat', sans-serif" }}>
-      <style>{`@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); input:-webkit-autofill { -webkit-text-fill-color: #fff !important; -webkit-box-shadow: 0 0 0px 1000px rgba(251, 191, 36, 0.1) inset !important; }`}</style>
+      <style>{`@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-text-fill-color: #fff !important; }`}</style>
 
       {/* --- 🔴 FIXED BACK BUTTON (Z-INDEX 999) --- */}
       <button

src/pages/ApplicantATS.jsx

@@ -65,7 +65,8 @@ export default function ApplicantATS({ onNavigate }) {
             });
 
             if (!response.ok) {
-                throw new Error("Analysis failed. Please try again.");
+                const errData = await response.json().catch(() => null);
+                throw new Error(errData?.detail || "Analysis failed. Please try again.");
             }
 
             const result = await response.json();
@@ -77,7 +78,7 @@ export default function ApplicantATS({ onNavigate }) {
             }
         } catch (error) {
             console.error("ATS Check Error:", error);
-            alert("An error occurred during analysis. Check console for details.");
+            alert(`Analysis Error: ${error.message}`);
         } finally {
             setIsAnalyzing(false);
         }