kjelsrud.dev/src/pages/cv.astro

---
import SectionContainer from "../components/SectionContainer.astro";
import resume from "../data/resume.json";
---

<SectionContainer>
  <main class="flex flex-col gap-2 mt-4 cv">
    <h1 class="text-3xl font-extrabold">{resume.basics.name}</h1>

    <!-- PROFILE -->
    <div>
      <h2>Profile</h2>
      <p>{resume.basics.summary}</p>
    </div>

    <!-- WORK -->
    <div>
      <h2>Relevant work</h2>
      <div class="flex flex-col gap-2">
        {
          resume.work.map((work) => (
            <div>
              <div class="flex gap-2 flex-wrap items-center justify-between">
                <div class="flex gap-2 flex-wrap items-center">
                  <h4>{work.position}</h4>
                  <p class="font-bold">
                    <a href={work.url}>{work.name}</a>
                  </p>
                </div>
                <p class="cv-date">
                  {work.startDate} - {work.endDate}
                </p>
              </div>

              <ul>
                {work.highlights.map((highlight) => (
                  <li>{highlight}</li>
                ))}
              </ul>
            </div>
          ))
        }
      </div>
    </div>

    <!-- EDUCATION -->
    <div>
      <h2>Education</h2>
      <div class="flex flex-col gap-2">
        {
          resume.education.map((education) => (
            <div class="flex md:gap-2 flex-wrap items-center justify-between">
              <div class="flex md:gap-2 flex-wrap items-center">
                <h4>{education.area}</h4>
                <p class="font-bold">
                  <a href={education.url}>{education.institution}</a>
                </p>
              </div>
              <p class="cv-date">
                {education.startDate} - {education.endDate}
              </p>
              {education.description ? (
                <ul>
                  <li class="text-s">{education.description}</li>
                </ul>
              ) : null}
            </div>
          ))
        }
      </div>
    </div>

    <!-- VOLUNTEER -->
    <div>
      <h2>Volunteer work</h2>
      <div class="flex flex-col gap-2">
        {
          resume.volunteer.map((volunteer) => (
            <div>
              <div class="flex gap-2 flex-wrap items-center justify-between">
                <div class="flex gap-2 flex-wrap items-center">
                  <h4>{volunteer.organization}</h4>
                  <p class="font-bold">
                    <a href={volunteer.url}>{volunteer.position}</a>
                  </p>
                </div>
                <p class="cv-date">
                  {volunteer.startDate} - {volunteer.endDate}
                </p>
              </div>

              <ul>
                {volunteer.highlights.map((highlight) => (
                  <li>{highlight}</li>
                ))}
              </ul>
            </div>
          ))
        }
      </div>
    </div>

    <!-- SKILLS -->
    <div>
      <h2>Skills</h2>
      <div class="flex flex-col gap-2">
        {
          resume.skills.map((skill) => (
            <div>
              <h4>{skill.name}</h4>
              <div>{skill.keywords.join(", ")}</div>
            </div>
          ))
        }
      </div>
    </div>
  </main>
</SectionContainer>