Resume Site

Create a project scaffold for a personal resume / CV website:

FILES:
- index.html
- assets/css/style.css
- assets/js/main.js

In style.css, define CSS custom properties on :root:
- Font families: a clean sans-serif for body, a slightly
  heavier sans-serif or elegant serif for headings
- Type scale: at least 6 steps from sm to 5xl
- Spacing scale: at least 8 steps from xs to 5xl
- Colors: a neutral, professional palette. Dark background,
  light text, one subtle accent color for links and
  highlights (a muted blue or teal works well)
- Border radii: sm (4px), md (8px), lg (16px), full (9999px)
- Transitions: fast (0.15s), base (0.2s), slow (0.3s)
- Max content width: 900px (resume sites should be narrow
  and readable, like a real document)
- A full CSS reset (box-sizing, margin, padding)

In index.html, set up a minimal HTML5 document with lang="en",
viewport meta, and links to the stylesheet and script. Leave the
body empty for now.

Build the header and hero for this resume site:

NAVIGATION:
- Simple horizontal nav at the top
- Name or logo on the left
- Anchor links on the right: Experience, Skills, Projects,
  Contact
- No sticky behavior (this is a single-page document feel)

HERO (centered layout):
- Circular photo placeholder (160x160) using <img> with
  a subtle border
- Full name as <h1>, large and prominent
- Job title directly below (e.g. "Senior Frontend Engineer")
- Contact links row: email, LinkedIn, GitHub separated
  by subtle dividers
  - Each is an <a> with an inline SVG icon and text label
  - Email uses mailto:, LinkedIn and GitHub open in new tabs
- Location below contacts (e.g. "San Francisco, CA")
- Short professional summary (2-3 sentences max) below
  a divider line

RESPONSIVE:
- Contact links wrap on mobile
- Photo scales down slightly on small screens

Use CSS custom properties for all values. BEM naming.

Build the work experience section for this resume site:

LAYOUT:
- Section <h2>: "Experience"
- Add id="experience" for anchor navigation
- Vertical timeline layout with a thin line on the left

TIMELINE ENTRIES:
- 3-4 job entries, most recent first
- Each entry is an <article> element containing:
  - Date range on top (e.g. "2022 – Present"), muted text
  - Job title (<h3>), bold
  - Company name and location, secondary text
  - 3-4 bullet points describing accomplishments
    (use action verbs: built, led, shipped, reduced)
  - Use an <ul> for bullet points

TIMELINE STYLING:
- Vertical line: 2px wide, muted color, runs along the
  left side of all entries
- Each entry has a small circle dot on the timeline line
- Current/most-recent entry dot is highlighted with the
  accent color
- Entries are spaced apart with generous padding

RESPONSIVE:
- Timeline line hides on mobile, entries stack normally
- Date ranges appear above job titles on all sizes

Use BEM naming for CSS classes.

Build the skills and education sections for this resume site:

SKILLS SECTION:
- Section <h2>: "Skills"
- Add id="skills" for anchor navigation
- Group skills by category using <h3> subheadings:
  - "Languages & Frameworks" (e.g. JavaScript, TypeScript,
    React, Node.js, Python)
  - "Tools & Platforms" (e.g. Git, Docker, AWS, Figma)
  - "Soft Skills" (e.g. Technical Leadership, Mentoring,
    Cross-functional Collaboration)
- Each skill is a pill/tag element:
  - Rounded border (border-radius: full)
  - Subtle border, dark background, light text
  - Laid out with flexbox and gap for natural wrapping

EDUCATION SECTION:
- Section <h2>: "Education"
- Add id="education" for anchor navigation
- 2 entries, each containing:
  - Degree name (<h3>), e.g. "B.S. Computer Science"
  - University name, secondary text
  - Graduation year, muted text
- No bullet points. Keep this minimal.

Both sections should feel lighter than the Experience
section. Use consistent spacing with the rest of the page.

Build the projects section for this resume site:

LAYOUT:
- Section <h2>: "Selected Projects"
- Add id="projects" for anchor navigation
- 2-column grid of project cards (stack on mobile)
- 3-4 project cards total

EACH PROJECT CARD:
- Thumbnail placeholder at the top (16:9 aspect ratio,
  dark background)
- Project name (<h3>) below the thumbnail
- One-sentence description
- Tech stack as a comma-separated list in muted text
- Two text links at the bottom: "Live Demo ↗" and
  "Source Code ↗"
  - External links with target="_blank" rel="noopener noreferrer"
- Card has a subtle border, slight hover elevation
  (translate or shadow change on hover)

STYLING:
- Cards use consistent border and background with
  the page theme
- Hover state: subtle lift (translateY -2px) + shadow
- Thumbnail uses aspect-ratio: 16/9 with object-fit: cover
- Links use the accent color

Keep the section visually lighter than Experience.
This is a supplement, not the focus.

Build the testimonials section for this resume site:

LAYOUT:
- Section <h2>: "What colleagues say"
- Single-column layout, max-width matching the page
- 2-3 testimonial blocks stacked vertically

EACH TESTIMONIAL:
- Use <figure>, <blockquote>, <figcaption>
- Decorative opening quote mark via CSS ::before
  (large, muted, positioned top-left)
- Quote text: 2-3 sentences, slightly larger font
  than body text, with subtle left border or
  background tint
- Attribution below the quote:
  - Small circular photo placeholder
  - Name (bold)
  - Title and company (muted text)
- Cards have subtle borders, no heavy backgrounds

STYLING:
- Each testimonial is separated by generous whitespace
- Blockquote text uses a slightly different font weight
  or style (italic or light) to feel like a quote
- Left border accent in the accent color (2-3px wide)

Keep this minimal and professional. These are colleague
endorsements, not marketing testimonials.

Build the contact section and footer for this resume site:

CONTACT SECTION:
- Section <h2>: "Get in touch"
- Add id="contact" for anchor navigation
- Centered layout with a distinct background (slightly
  lighter or darker than the page)
- Short sentence: "Open to opportunities. Let's talk."
- 3-column row of contact method cards:
  - Email: envelope icon + email address (mailto link)
  - LinkedIn: LinkedIn icon + profile URL (external link)
  - GitHub: GitHub icon + profile URL (external link)
  - Each card has an SVG icon, label text, subtle border
- "Download Resume" button below the cards:
  - Links to a PDF file (href="resume.pdf")
  - download attribute so it downloads instead of navigating
  - Filled button style matching the accent color

FOOTER:
- Use <footer> with role="contentinfo"
- Simple, minimal layout:
  - Left: "Built with HTML, CSS, and JavaScript"
  - Right: social icon links (GitHub, LinkedIn, Twitter/X)
    with aria-labels and target="_blank"
- Bottom: copyright line
- Thin top border to separate from content

RESPONSIVE:
- Contact cards stack vertically on mobile
- Footer text centers on small screens

Finalize this resume site for production:

SEO:
- Complete <head> meta tags:
  - <title>: "Jane Doe - Senior Frontend Engineer"
  - meta description (150-160 characters)
  - Open Graph: og:title, og:description, og:image (1200x630),
    og:url, og:type="profile"
  - Twitter card: summary_large_image
  - Canonical URL
  - Favicon and theme-color
- Add JSON-LD structured data using the Person schema:
  name, jobTitle, url, sameAs (social links), image,
  worksFor, alumniOf
- Verify heading hierarchy: single h1 (the person's name),
  no skipped levels

PRINT STYLESHEET:
- Add @media print styles that:
  - Hide navigation, footer, and decorative elements
  - Use black text on white background
  - Show full URLs after links using ::after content
  - Remove shadows, borders, and backgrounds
  - Set page margins for A4/Letter paper
  - Ensure the entire resume fits on 1-2 pages
  - Hide the "Download Resume" button

PERFORMANCE:
- Add loading="lazy" to all images below the fold
- Add width and height attributes to every <img>
- Add fetchpriority="high" to the hero photo
- Add <link rel="preconnect"> for external font domains
- Minify the CSS

ACCESSIBILITY:
- Color contrast meets WCAG AA (4.5:1 text, 3:1 large)
- Full keyboard navigation: tab through the entire page,
  verify focus order
- Skip link as first focusable element
- All links have descriptive text (no "click here")

DEPLOYMENT:
- Add a netlify.toml or vercel.json with:
  - Custom 404 page
  - Security headers
  - Cache-Control for static assets
  - Redirect from www to non-www (or vice versa)
  - Custom domain configuration notes
- Create a README.md with setup instructions