cv.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CV – Roel de Jong</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=News+Cycle:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <script type="module" src="site-header.js"></script>
  <style>
    html, body { height: 100%; background: #f7fafc; }

    .cv-page {
      padding-top: 60px;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .cv-toolbar {
      padding: 0.6rem 1.5rem;
      background: #fff;
      border-bottom: 1px solid #e2e8f0;
      display: flex;
      justify-content: flex-end;
      gap: 0.6rem;
    }
    .cv-toolbar a {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: #2b6cb0;
      color: #fff;
      text-decoration: none;
      padding: 0.4rem 1rem;
      border-radius: 5px;
      font-size: 0.85rem;
      font-weight: 600;
      transition: background 0.15s;
    }
    .cv-toolbar a:hover { background: #21568f; }
    .cv-toolbar svg { width: 14px; height: 14px; }
    .cv-embed-wrap {
      flex: 1;
      position: relative;
      overflow: hidden;
    }
    .cv-embed {
      position: absolute;
      top: 0;
      left: 0;
      border: none;
      width: 100%;
      height: 100%;
      transform-origin: top left;
    }
  </style>
</head>
<body>

<site-header active="cv"></site-header>

<main class="cv-page">
  <h1 class="visually-hidden">Curriculum Vitae of Roel de Jong</h1>
  <div class="cv-toolbar">
    <a href="https://docs.google.com/document/d/1WmBpj9NsFSwFfTtkKLUIlDCOaudItPhyOD2GfDmb7Lg/export?format=pdf"
       download="Roel-de-Jong-CV.pdf">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
           stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
        <polyline points="7 10 12 15 17 10"/>
        <line x1="12" y1="15" x2="12" y2="3"/>
      </svg>
      Download as PDF
    </a>
    <a href="https://docs.google.com/document/d/1WmBpj9NsFSwFfTtkKLUIlDCOaudItPhyOD2GfDmb7Lg/edit?usp=sharing"
       target="_blank" rel="noopener noreferrer">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
           stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
        <polyline points="15 3 21 3 21 9"/>
        <line x1="10" y1="14" x2="21" y2="3"/>
      </svg>
      Open in Google Docs
    </a>
  </div>
  <div class="cv-embed-wrap">
    <iframe
      class="cv-embed"
      src="https://docs.google.com/document/d/1WmBpj9NsFSwFfTtkKLUIlDCOaudItPhyOD2GfDmb7Lg/preview"
      title="CV of Roel de Jong"
      loading="lazy">
    </iframe>
  </div>
</main>

<script>
  // Google Docs reflows to the iframe width; on narrow screens that "mashes"
  // the document. Render it at a fixed desktop width and scale it to fit.
  (function () {
    const DESIGN_WIDTH = 900;
    const wrap = document.querySelector('.cv-embed-wrap');
    const frame = document.querySelector('.cv-embed');
    const fit = () => {
      const w = wrap.clientWidth;
      const h = wrap.clientHeight;
      if (w >= DESIGN_WIDTH) {
        frame.style.width = '100%';
        frame.style.height = '100%';
        frame.style.transform = 'none';
        return;
      }
      const scale = w / DESIGN_WIDTH;
      frame.style.width = `${DESIGN_WIDTH}px`;
      frame.style.height = `${h / scale}px`;
      frame.style.transform = `scale(${scale})`;
    };
    fit();
    window.addEventListener('resize', fit);
    window.addEventListener('orientationchange', fit);
  })();
</script>

</body>
</html>