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 Display</title>
  <style>
    body {
      font-family: "Courier New", Courier, monospace;
      margin: 20px;
    }
    h1 {
      
    }
    .cv-entry {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .date {
      width: 20%;
      font-weight: bold;
      color: blue;
    }
    .details {
      width: 75%;
    }
  </style>
</head>
<body>
  <h1>Curriculum Vitae</h1>
  <div id="cv"></div>

  <script>
    async function fetchCVData() {
      const response = await fetch('https://raw.githubusercontent.com/mstcroix/bio/main/CV.json');
      const cvData = await response.json();
      return cvData;
    }

    function displayCV(cvData) {
      const cvContainer = document.getElementById('cv');
      cvData.forEach(entry => {
        const cvEntry = document.createElement('div');
        cvEntry.classList.add('cv-entry');

        const date = document.createElement('div');
        date.classList.add('date');
        date.textContent = entry.Year;

        const details = document.createElement('div');
        details.classList.add('details');
        details.textContent = `${entry.Position} at ${entry.Company} (${entry.Country})`;

        cvEntry.appendChild(date);
        cvEntry.appendChild(details);
        cvContainer.appendChild(cvEntry);
      });
    }

    // Fetch and display the CV data
    fetchCVData().then(displayCV).catch(error => {
      console.error('Error fetching CV data:', error);
    });
  </script>
</body>
</html>