Build a stunning personal website from a resume PDF. Use this skill whenever the user wants to create a personal website, portfolio site, or online resume from a PDF resume/CV. Also trigger when the user mentions converting a resume to a website, building a portfolio from their CV, or wants a personal landing page based on their professional background.
Build a distinctive, production-grade personal website from a resume PDF. The website should reflect the user's profession, personality, and design preferences — not look like a generic template.
Before writing a single line of code, internalize this: the biggest failure mode in AI-generated websites is aesthetic convergence — every site ends up looking vaguely the same. Avoid this at all costs. Your job is to make something that feels genuinely, specifically designed for this person.
Choose fonts that are beautiful, unusual, and appropriate to the person's field. The goal is a pairing that someone would notice and comment on — not a safe fallback.
Banned fonts (overused to the point of invisibility): Inter, Roboto, Arial, Helvetica, system-ui, -apple-system, Space Grotesk, Poppins. These are defaults, not choices.
Distinctive Google Fonts to draw from (pick the right ones for the profession and aesthetic — don't use all of them):
Clean but Distinctive Sans-Serifs:
For Body Text (readable, distinctive):
For Technical / Developer Aesthetic:
For Expressive / Niche Aesthetics:
Pairing principle: Pick one display/headline font and one body font. They should contrast — a high-drama serif headline with a clean sans body, or a precise monospace headline with a warm serif body. Boring pairings are pairings where both fonts feel the same weight.
Commit to a strong, cohesive palette. Timid palettes that spread color evenly feel amateur. One dominant color + one sharp accent + careful neutrals is almost always stronger than three equally-weighted colors.
Banned color combinations (clichéd, expected):
Distinctive palette archetypes to draw from (adapt, don't copy exactly):
#1a2e1a + warm gold #c9a84c + cream #f5f0e8 — organic authority#0d1b2a + electric cyan #00d4ff + white — technical precision#1a1208 + amber #f59e0b + ivory — editorial warmth#2a2a2a + rust #c0392b + off-white #fafaf7 — bold confidence#3d0c02 + champagne #e8d5b7 + ivory — academic luxury#0e0e0e + acid lime #a8d729 + white — technical edge#2c3e50 + deep coral #ff6b4a + cream — warm modernism#fafaf8 + ink #1a1a2e + terracotta #c4602a — grounded warmth#1a0533 + hot pink #ff6b9d + white — creative maximalismActively vary between light and dark themes across different users. Don't default to dark because it "looks more technical" — a light site with a strong editorial palette can be just as striking.
Use CSS custom properties for every color:
:root {
--color-bg: #1a2e1a;
--color-surface: #243824;
--color-accent: #c9a84c;
--color-text: #f5f0e8;
--color-muted: #8a9e8a;
}
One well-orchestrated entrance sequence creates more delight than ten scattered micro-interactions. Think of the page load as a single choreographed moment.
Effective patterns:
/* Staggered reveal on load — apply with increasing animation-delay */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-name { animation: fadeUp 0.6s ease forwards; animation-delay: 0.1s; }
.hero-title { animation: fadeUp 0.6s ease forwards; animation-delay: 0.25s; }
.hero-tagline { animation: fadeUp 0.6s ease forwards; animation-delay: 0.4s; }
.hero-cta { animation: fadeUp 0.6s ease forwards; animation-delay: 0.55s; }
opacity: 0 as default and animate to opacity: 1 — clean, compositabletransition: all 0.2s ease — fast enough to feel responsiveIntersectionObserver + a CSS class toggle for sections entering the viewportwidth or clip-path transforms feel precise and intentionalAvoid: particle.js / canvas particle effects, excessive bouncing, parallax that fights the content, animations that delay content visibility for more than ~1 second total.
Solid colors are the lazy default. Every background should have at least one layer of depth or texture.
Techniques:
/* Mesh gradient — multiple radial gradients layered */