// Beautify Studio — a mini Canva-style resume designer. // Self-contained: relies on globals (React hooks, Icon/Btn/Wordmark, SAMPLE_RESUME, atsScore). const BEAUTIFY_FONTS = [ { id: 'poppins', label: 'Poppins', stack: "'Poppins', system-ui, sans-serif" }, { id: 'inter', label: 'Inter', stack: "'Inter', system-ui, sans-serif" }, { id: 'instrument', label: 'Instrument', stack: "'Instrument Serif', Georgia, serif" }, { id: 'jetbrains', label: 'JetBrains', stack: "'JetBrains Mono', ui-monospace, monospace" }, { id: 'georgia', label: 'Georgia', stack: "Georgia, 'Times New Roman', serif" }, ]; const fontStack = (id) => (BEAUTIFY_FONTS.find(f => f.id === id) || BEAUTIFY_FONTS[0]).stack; // Each template maps to a structural layout + a few preset knobs (not colors). const BEAUTIFY_TEMPLATES = [ { id: 'sidebar-left', name: 'Sidebar L', layout: 'sidebar', opts: { sidebarSide: 'left', headerStyle: 'bar' } }, { id: 'sidebar-right', name: 'Sidebar R', layout: 'sidebar', opts: { sidebarSide: 'right', headerStyle: 'bar' } }, { id: 'classic', name: 'Classic', layout: 'stacked', opts: { headerStyle: 'underline', headerAlign: 'left' } }, { id: 'banner', name: 'Banner', layout: 'band', opts: { headerStyle: 'bar' } }, { id: 'modern', name: 'Modern', layout: 'stacked', opts: { headerAlign: 'center', headerStyle: 'plain', accentName: true } }, { id: 'twocol', name: 'Two-Col', layout: 'twocolbody', opts: { headerStyle: 'bar', headerAlign: 'left' } }, { id: 'compact', name: 'Compact', layout: 'twocolbody', opts: { headerStyle: 'underline', sectionGap: 12, fontScale: 0.92 } }, { id: 'timeline', name: 'Timeline', layout: 'timeline', opts: { headerStyle: 'bar' } }, { id: 'elegant', name: 'Elegant', layout: 'stacked', opts: { headerAlign: 'center', headerStyle: 'underline', headingFont: 'instrument', uppercaseHeads: false } }, { id: 'editorial', name: 'Editorial', layout: 'stacked', opts: { headerStyle: 'underline', headingFont: 'instrument', headerAlign: 'left', uppercaseHeads: false, nameScale: 1.12 } }, { id: 'minimal', name: 'Minimal', layout: 'stacked', opts: { headerStyle: 'plain', uppercaseHeads: false, sectionGap: 22 } }, { id: 'bold', name: 'Bold', layout: 'band', opts: { headerStyle: 'bar', nameScale: 1.18 } }, ]; const templateLayout = (id) => (BEAUTIFY_TEMPLATES.find(t => t.id === id) || BEAUTIFY_TEMPLATES[0]).layout; const ACCENTS = ['#6CB274', '#1E3A8A', '#0F766E', '#7C3AED', '#E11D48', '#EA580C', '#0EA5E9', '#1A1A1A', '#B45309', '#DB2777', '#2563EB', '#059669']; const BACKGROUNDS = ['#FFFFFF', '#FAFAF7', '#F7F2EE', '#F2F6F3', '#F4F4F8', '#FFF7FB']; const SECTION_LABELS = { summary: 'Summary', experience: 'Experience', skills: 'Skills', education: 'Education', projects: 'Projects' }; const THEMES = [ { name: 'Sage Sidebar', opts: { template: 'sidebar-left', accent: '#6CB274', bg: '#FFFFFF', headingFont: 'poppins', bodyFont: 'poppins', headerStyle: 'bar', sidebarStyle: 'solid' } }, { name: 'Navy Pro', opts: { template: 'sidebar-left', accent: '#1E3A8A', bg: '#FFFFFF', headerStyle: 'bar', sidebarStyle: 'solid' } }, { name: 'Editorial', opts: { template: 'editorial', accent: '#1A1A1A', bg: '#FAFAF7', headingFont: 'instrument', bodyFont: 'georgia', headerStyle: 'underline', uppercaseHeads: false } }, { name: 'Modern Teal', opts: { template: 'modern', accent: '#0F766E', bg: '#FFFFFF', headerAlign: 'center', headerStyle: 'plain', accentName: true } }, { name: 'Banner Bold', opts: { template: 'bold', accent: '#EA580C', bg: '#FFFFFF', headerStyle: 'bar', nameScale: 1.18 } }, { name: 'Minimal Mono', opts: { template: 'minimal', accent: '#1A1A1A', bg: '#FFFFFF', headingFont: 'jetbrains', bodyFont: 'inter', headerStyle: 'plain', bulletStyle: 'dash' } }, { name: 'Violet Grid', opts: { template: 'twocol', accent: '#7C3AED', bg: '#FFFFFF', headerStyle: 'bar' } }, { name: 'Timeline Sky', opts: { template: 'timeline', accent: '#0EA5E9', bg: '#FFFFFF', headerStyle: 'bar' } }, { name: 'Rose Elegant', opts: { template: 'elegant', accent: '#DB2777', bg: '#FFF7FB', headingFont: 'instrument', bodyFont: 'georgia', headerStyle: 'underline', uppercaseHeads: false } }, { name: 'Warm Right', opts: { template: 'sidebar-right', accent: '#B45309', bg: '#FFFDF7', headerStyle: 'bar' } }, ]; const DEFAULT_OPTS = { template: 'sidebar-left', accent: '#6CB274', bg: '#FFFFFF', headingFont: 'poppins', bodyFont: 'poppins', fontScale: 1, lineHeight: 1.5, headLetterSpacing: 0.12, margin: 40, sectionGap: 18, nameScale: 1, sidebarWidth: 230, headerStyle: 'bar', headerAlign: 'left', sidebarSide: 'left', sidebarStyle: 'solid', uppercaseHeads: true, accentName: false, accentHeaderBg: false, divider: false, bulletStyle: 'dot', skillStyle: 'pills', showPhoto: false, photoShape: 'circle', showLocation: true, showLinks: true, paper: 'letter', sections: ['summary', 'experience', 'skills', 'education', 'projects'], hidden: {}, }; // --------------------------------------------------------------------------- function BeautifyDoc({ data, opts }) { const o = { ...DEFAULT_OPTS, ...opts }; const layout = templateLayout(o.template); const headingFont = fontStack(o.headingFont); const bodyFont = fontStack(o.bodyFont); const accent = o.accent; const fs = (n) => `${(n * o.fontScale).toFixed(1)}px`; const lh = o.lineHeight; const ls = `${o.headLetterSpacing}em`; const heads = (t) => (o.uppercaseHeads ? t.toUpperCase() : t); const initials = (data.name || 'You').split(' ').map(s => s[0]).slice(0, 2).join('').toUpperCase(); const role = (data.experience && data.experience[0] && data.experience[0].title) || ''; const order = o.sections.filter(s => !o.hidden[s]); const bulletChar = { dot: '•', dash: '–', arrow: '→', none: '' }[o.bulletStyle]; const SecHead = ({ children, light }) => { const color = light ? '#fff' : accent; const txt = heads(children); if (o.accentHeaderBg) return
{txt}
; if (o.headerStyle === 'bar') return
{txt}
; if (o.headerStyle === 'underline') return
{txt}
; return
{txt}
; }; const Bullets = ({ items, light }) =>
{(items || []).map((b, j) => (
{o.bulletStyle !== 'none' && {bulletChar}} {b}
))}
; const Summary = ({ light }) => data.summary ?

{data.summary}

: null; const Experience = ({ light }) =>
{(data.experience || []).map((e, i) => (
{e.title} {e.dates}
{[e.company, e.location].filter(Boolean).join(' · ')}
))}
; const TimelineExp = () =>
{(data.experience || []).map((e, i) => (
{e.title} {e.dates}
{[e.company, e.location].filter(Boolean).join(' · ')}
))}
; const Projects = ({ light }) =>
{(data.projects || []).map((p, i) =>
{p.name} — {p.desc}{p.year ? ` (${p.year})` : ''}
)}
; const Education = ({ light }) =>
{(data.education || []).map((ed, i) =>
{ed.school}
{ed.degree}{ed.year ? ` · ${ed.year}` : ''}
)}
; const Skills = ({ light }) => { const sk = data.skills || []; if (o.skillStyle === 'comma') return
{sk.join(' · ')}
; if (o.skillStyle === 'list') return
{sk.map(s =>
{s}
)}
; return
{sk.map(s => {s})}
; }; const contactLines = [ o.showLocation ? data.location : null, data.phone, data.email, ...(o.showLinks ? (data.links || []) : []), ].filter(Boolean); const Contact = ({ light }) =>
{contactLines.map((l, i) =>
{l}
)}
; const present = (id) => ({ summary: !!data.summary, experience: (data.experience || []).length > 0, projects: (data.projects || []).length > 0, skills: (data.skills || []).length > 0, education: (data.education || []).length > 0, })[id]; const Body = ({ id, light }) => ({ summary: , experience: , projects: , skills: , education: , })[id] || null; const renderSec = (id, light, timeline) => present(id) ? (
{SECTION_LABELS[id]} {timeline && id === 'experience' ? : }
) : null; const Photo = ({ size, light }) => o.showPhoto ?
{initials}
: null; const NameBlock = ({ light, center }) =>
{data.name}
{role &&
{role}
}
; const minH = o.paper === 'a4' ? 1018 : 932; const page = { background: o.bg, fontFamily: bodyFont, color: '#1a1a1a', borderRadius: 4, boxShadow: 'var(--shadow-lg)', overflow: 'hidden', minHeight: minH }; // ---- layouts ---- if (layout === 'sidebar') { const tint = o.sidebarStyle === 'tint'; const sideBg = tint ? `${accent}14` : accent; const sideLight = !tint; const sideSecs = order.filter(s => s === 'skills' || s === 'education'); const mainSecs = order.filter(s => s === 'summary' || s === 'experience' || s === 'projects'); const sidebar =
Contact
{sideSecs.map(id => renderSec(id, sideLight))}
; const main =
{mainSecs.map(id => renderSec(id, false))}
; return
{sidebar}{main}
; } if (layout === 'band') { return
{order.map(id => renderSec(id, false))}
; } if (layout === 'twocolbody') { const left = order.filter(s => s === 'experience' || s === 'projects'); const right = order.filter(s => s === 'skills' || s === 'education'); return
{order.includes('summary') && renderSec('summary', false)}
{left.map(id => renderSec(id, false))}
{right.map(id => renderSec(id, false))}
; } if (layout === 'timeline') { return
{order.map(id => renderSec(id, false, true))}
; } // stacked (classic / modern / elegant / editorial / minimal) const center = o.headerAlign === 'center'; return
{center && }
{order.map(id => renderSec(id, false))}
; } // ---- studio controls ---- function Slider({ label, value, min, max, step = 1, fmt, onChange }) { return (
{label} {fmt ? fmt(value) : value}
onChange(Number(e.target.value))} style={{ width: '100%', accentColor: 'var(--accent-primary)' }}/>
); } function Segmented({ value, options, onChange, label }) { return (
{label &&
{label}
}
{options.map(([val, lbl]) => ( ))}
); } function BToggle({ label, checked, onChange }) { return ( ); } function BeautifyMini({ id, accent }) { const layout = templateLayout(id); const line = (w, c = '#ddd', h = 2) => ({ height: h, background: c, margin: '2px 0', width: `${w}%`, borderRadius: 1 }); if (layout === 'sidebar') { const rev = id === 'sidebar-right'; return
{[80, 70, 85, 65, 80, 75].map((w, i) =>
)}
; } if (layout === 'band') return <>
{[90, 80, 70, 85, 75, 80].map((w, i) =>
)} ; if (layout === 'twocolbody') return <>
{[95, 90, 92, 85].map((w, i) =>
)}
{[80, 70, 75].map((w, i) =>
)}
; if (layout === 'timeline') return
{[85, 90, 75, 88].map((w, i) =>
)}
; // stacked const center = (BEAUTIFY_TEMPLATES.find(t => t.id === id)?.opts.headerAlign) === 'center'; return
{[85, 90, 75, 88, 70].map((w, i) =>
)}
; } function BeautifyScreen({ go, resume }) { const data = resume || SAMPLE_RESUME; const [opts, setOpts] = useState({ ...DEFAULT_OPTS }); const [tab, setTab] = useState('Themes'); const [zoom, setZoom] = useState(58); const set = (k, v) => setOpts(o => ({ ...o, [k]: v })); const score = atsScore(data); const fileBase = (data.name || 'Resume').replace(/\s+/g, '_'); const pickTemplate = (t) => setOpts(o => ({ ...o, template: t.id, ...t.opts })); const pickTheme = (th) => setOpts({ ...DEFAULT_OPTS, ...th.opts }); const moveSection = (id, dir) => setOpts(o => { const arr = [...o.sections]; const i = arr.indexOf(id); const j = i + dir; if (j < 0 || j >= arr.length) return o; [arr[i], arr[j]] = [arr[j], arr[i]]; return { ...o, sections: arr }; }); const toggleHidden = (id) => setOpts(o => ({ ...o, hidden: { ...o.hidden, [id]: !o.hidden[id] } })); const isSidebar = templateLayout(opts.template) === 'sidebar'; const TABS = ['Themes', 'Template', 'Color', 'Fonts', 'Layout', 'Sections']; return (
{/* Left rail */} {/* Preview */}
Live preview
{[50, 75, 100].map(z => ( ))}
{/* Right rail */}
); } Object.assign(window, { BeautifyScreen });