Modern Two-Column CV html Template with Photo

HTML source

<!doctype html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="An editable, fictional frontend developer CV with a responsive layout and A4 print styling.">
  <title>Alex Morgan — Frontend Developer CV</title>
  
</head>
<body>
  <!-- CUSTOMIZE: All names, organizations, achievements, and credentials below
       are fictional examples. Replace them with your own accurate details.
       PHOTO: Create an images folder beside index.html and save your portrait as
       images/profile.jpg. Update its alt text to describe the person pictured.
       Open index.html in a browser; print at 100% scale on A4 with browser
       headers and footers disabled. Extra content may continue onto more pages. -->
  <div class="cv">
    <aside class="sidebar" aria-label="Contact, skills, and education">
      <div class="portrait">
        <img src="images/image.jpg" alt="Portrait of Alex Morgan" width="144" height="144">
      </div>

      <!-- CUSTOMIZE: Contact details and link destinations. -->
      <section class="sidebar-section" aria-labelledby="contact-heading">
        <h2 id="contact-heading">Contact</h2>
        <dl class="contact-list">
          <div><dt>Phone</dt><dd><a href="tel:+12025550147">+1 (202) 555-0147</a></dd></div>
          <div><dt>Email</dt><dd><a href="mailto:alex.morgan@example.com">alex.morgan@example.com</a></dd></div>
          <div><dt>Location</dt><dd>Portland, Oregon, USA</dd></div>
          <div><dt>Portfolio</dt><dd><a href="https://example.com/alex">example.com/alex</a></dd></div>
          <div><dt>LinkedIn</dt><dd><a href="https://www.linkedin.com/">Alex Morgan on LinkedIn</a></dd></div>
        </dl>
      </section>

      <section class="sidebar-section" aria-labelledby="skills-heading">
        <h2 id="skills-heading">Skills</h2>
        <ul class="plain-list skill-list">
          <li><strong>Frontend</strong><span>HTML5, CSS3, JavaScript, TypeScript, React</span></li>
          <li><strong>Interface design</strong><span>Responsive layouts, accessibility, design systems</span></li>
          <li><strong>Tools &amp; practice</strong><span>Git, Figma, Vite, Vitest, Playwright</span></li>
        </ul>
      </section>

      <section class="sidebar-section" aria-labelledby="education-heading">
        <h2 id="education-heading">Education</h2>
        <div class="education-entry">
          <h3>B.S. in Computer Science</h3>
          <p>Cascadia Coast University</p>
          <p class="sidebar-muted">Graduated 2020</p>
        </div>
      </section>

      <section class="sidebar-section" aria-labelledby="languages-heading">
        <h2 id="languages-heading">Languages</h2>
        <ul class="plain-list language-list">
          <li><strong>English</strong> — Native proficiency</li>
          <li><strong>Spanish</strong> — Professional working proficiency</li>
        </ul>
      </section>
    </aside>

    <main class="main-content">
      <!-- CUSTOMIZE: Your name, professional title, and introduction. -->
      <header class="identity">
        <p class="eyebrow">Curriculum vitae</p>
        <h1>Alex<br>Morgan</h1>
        <p class="professional-title">Frontend Developer</p>
        <div class="accent-line" aria-hidden="true"></div>
      </header>

      <section class="main-section" aria-labelledby="profile-heading">
        <h2 id="profile-heading">Professional profile</h2>
        <p>Frontend developer with six years of experience building accessible, responsive web applications. Combines thoughtful interface design with maintainable code, clear communication, and a practical focus on performance and usability.</p>
      </section>

      <!-- CUSTOMIZE: Roles, dates, and measurable achievements. -->
      <section class="main-section" aria-labelledby="experience-heading">
        <h2 id="experience-heading">Work experience</h2>
        <article class="experience-entry">
          <h3>Frontend Developer</h3>
          <p class="organization">Northline Digital · Portland, OR</p>
          <p class="dates"><time datetime="2023-03">Mar 2023</time> — Present</p>
          <ul class="achievements">
            <li>Built a reusable React component library adopted across four customer-facing products.</li>
            <li>Reduced median page load time by 32% through route splitting and image optimization.</li>
            <li>Resolved 24 accessibility issues and added keyboard testing to the release checklist.</li>
          </ul>
        </article>
        <article class="experience-entry">
          <h3>Junior Frontend Developer</h3>
          <p class="organization">Cedar &amp; Finch Studio · Portland, OR</p>
          <p class="dates"><time datetime="2020-07">Jul 2020</time> — <time datetime="2023-02">Feb 2023</time></p>
          <ul class="achievements">
            <li>Delivered 12 responsive client websites in collaboration with designers and backend developers.</li>
            <li>Created shared layout patterns that cut new page implementation time by 20%.</li>
            <li>Added automated checks for core user journeys, reducing recurring checkout defects.</li>
          </ul>
        </article>
      </section>

      <section class="main-section" aria-labelledby="projects-heading">
        <h2 id="projects-heading">Selected projects</h2>
        <article class="project-entry">
          <h3>Fieldnotes — Reading companion</h3>
          <p>A responsive reading tracker with accessible filters, saved lists, and browser-based storage.</p>
          <a href="https://example.com/projects/fieldnotes">Explore the Fieldnotes project <span aria-hidden="true">↗</span></a>
        </article>
        <article class="project-entry">
          <h3>Open Pantry — Community directory</h3>
          <p>A lightweight directory helping neighbors find food resources through clear, mobile-friendly search.</p>
          <a href="https://example.com/projects/open-pantry">View the Open Pantry case study <span aria-hidden="true">↗</span></a>
        </article>
      </section>

      <section class="main-section" aria-labelledby="certifications-heading">
        <h2 id="certifications-heading">Certifications</h2>
        <!-- Fictional credentials and issuers; replace with earned certifications. -->
        <ul class="plain-list certification-list">
          <li><strong>Accessible Web Interfaces</strong><span>Inclusive Web Academy · 2024</span></li>
          <li><strong>Advanced Frontend Engineering</strong><span>Pacific Code Institute · 2022</span></li>
        </ul>
      </section>
    </main>
  </div>


</body></html>

CSS source

/* CUSTOMIZE: Change the color, typography, and spacing variables here.
   Keep text/background combinations high contrast after changing colors. */
:root {
  --navy: #142e3b;
  --teal: #147d79;
  --teal-light: #83d5cc;
  --charcoal: #263741;
  --muted: #596b75;
  --white: #ffffff;
  --sidebar-soft: #cfdee4;
  --rule: #dce4e7;
  --screen: #e7ecee;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --body-size: 10pt;
  --leading: 1.46;
  --section-gap: 6mm;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 32px 16px;
  background: var(--screen);
  color: var(--charcoal);
  font-family: var(--font);
  font-size: var(--body-size);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal); text-underline-offset: 3px; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; border-radius: 1px; }
p, h1, h2, h3, ul, dl, dd { margin: 0; }
h2 { font-size: 9pt; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.14em; }
h3 { font-size: 10.5pt; line-height: 1.35; font-weight: 700; }
.cv {
  display: grid;
  grid-template-columns: 32% minmax(0, 68%);
  width: 100%;
  max-width: 210mm;
  min-height: 281mm;
  margin-inline: auto;
  background: var(--white);
  box-shadow: 0 12px 48px #142e3b20;
}
.sidebar { min-width: 0; padding: 11mm 7mm; background: var(--navy); color: var(--white); }
.portrait {
  width: 36mm;
  aspect-ratio: 1;
  margin: 0 auto 9mm;
  border: 3px solid var(--teal-light);
  border-radius: 50%;
  background: #294653;
}
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; color: var(--white); font-size: 9pt; text-align: center; }
.sidebar-section + .sidebar-section { margin-top: 8mm; }
.sidebar h2 { padding-bottom: 3mm; margin-bottom: 4mm; border-bottom: 1px solid #ffffff35; color: var(--teal-light); }
.sidebar a { color: inherit; }
.sidebar a:focus-visible { outline-color: var(--teal-light); }
.contact-list { font-size: 9pt; }
.contact-list > div + div { margin-top: 3mm; }
.contact-list dt { color: var(--sidebar-soft); font-size: 8pt; margin-bottom: 0.5mm; }
.contact-list dd, .sidebar p, .sidebar li { overflow-wrap: anywhere; }
.plain-list { padding: 0; list-style: none; }
.skill-list { font-size: 9pt; }
.skill-list li + li { margin-top: 4mm; }
.skill-list strong, .skill-list span { display: block; }
.skill-list span { color: var(--sidebar-soft); margin-top: 1mm; }
.education-entry h3 { font-size: 9.5pt; margin-bottom: 1.5mm; }
.education-entry p, .language-list { font-size: 9pt; }
.sidebar-muted { color: var(--sidebar-soft); margin-top: 1mm; }
.language-list li + li { margin-top: 2.5mm; }
.main-content { min-width: 0; padding: 11mm 9mm 10mm; }
.identity { margin-bottom: 8mm; }
.eyebrow { color: var(--muted); font-size: 8pt; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 3mm; }
h1 { font-size: 37pt; line-height: 0.98; letter-spacing: -0.055em; font-weight: 750; overflow-wrap: anywhere; }
.professional-title { margin-top: 4mm; font-size: 13pt; color: var(--muted); }
.accent-line { width: 13mm; height: 1mm; background: var(--teal); margin-top: 5mm; }
.main-section + .main-section { margin-top: var(--section-gap); }
.main-section > h2 { color: var(--teal); padding-bottom: 2.5mm; border-bottom: 1px solid var(--rule); margin-bottom: 3.5mm; }
.organization { margin-top: 1mm; font-size: 9.5pt; }
.dates { font-size: 8.5pt; color: var(--muted); margin-top: 0.5mm; }
.experience-entry + .experience-entry { margin-top: 4mm; }
.achievements { padding-left: 4mm; margin-top: 2mm; font-size: 9.5pt; }
.achievements li + li { margin-top: 1mm; }
.achievements li::marker { color: var(--teal); }
.project-entry + .project-entry { margin-top: 3.5mm; }
.project-entry p { margin-top: 1mm; font-size: 9.5pt; }
.project-entry a { display: inline-block; margin-top: 1mm; font-size: 9pt; font-weight: 600; }
.certification-list { font-size: 9pt; }
.certification-list li + li { margin-top: 2mm; }
.certification-list span { display: block; color: var(--muted); font-size: 8.5pt; }

@media screen and (max-width: 640px) {
  body { padding: 0; font-size: 11pt; }
  .cv { grid-template-columns: minmax(0, 1fr); min-height: 0; box-shadow: none; }
  .sidebar, .main-content { padding: 30px 26px; }
  .portrait { margin-bottom: 28px; }
  .sidebar-section + .sidebar-section { margin-top: 26px; }
  .main-content { padding-block: 36px; }
  h1 { font-size: clamp(36pt, 12vw, 46pt); }
}

/* PRINT: A4 has 194 × 281 mm of usable space with these margins.
   The white sidebar is a deliberate fallback: CSS cannot detect whether the
   browser's "Background graphics" option is enabled. For navy color printing,
   enable that option and change the print .sidebar background to var(--navy),
   color to var(--white), and its descendant color override to inherit.
   No fixed content height: longer CVs can flow onto additional pages. */
@page { size: A4 portrait; margin: 8mm; }
@media print {
  html, body { background: var(--white); }
  body { padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cv { width: 100%; max-width: none; min-height: 0; grid-template-columns: 32% minmax(0, 68%); box-shadow: none; }
  .sidebar { padding: 7mm 6mm; background: var(--white); color: var(--charcoal); border-right: 1px solid var(--rule); }
  .sidebar h2 { color: var(--teal); border-bottom-color: var(--rule); }
  .sidebar .sidebar-muted, .sidebar .skill-list span, .sidebar .contact-list dt { color: var(--muted); }
  .portrait { background: var(--white); }
  .portrait img { color: var(--charcoal); }
  .main-content { padding: 7mm 7mm 7mm 8mm; }
  .experience-entry, .education-entry, .project-entry, .certification-list li { break-inside: avoid; page-break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  p, li { orphans: 2; widows: 2; }
}

JavaScript source