About page

src/components/certificate/certificate.astro

@@ -0,0 +1,85 @@
+---
+import { Image } from "astro:assets";
+import Stamp from "./stamp.svg";
+
+interface Props {
+  degreeType: string;
+  institution: string;
+  degree: string;
+  tagline: string;
+  year: string;
+}
+
+const { degreeType, institution, degree, tagline, year } = Astro.props;
+---
+
+<div class="certificate">
+  <h4 class="type">{degreeType}</h4>
+  <hr class="divider"/>
+  <p class="undertitle">of achievement</p>
+
+  <h3 class="degree">{degree}</h3>
+  <p class="tagline">{tagline}</p>
+
+  <div class="bottom">
+    <p class="institution">{institution}</p>
+    <p class="year">{year}</p>
+  </div>
+  <Image class="stamp" src={Stamp} alt=""/>
+</div>
+
+<style lang="scss">
+  .certificate {
+    min-width: 500px;
+    min-height: 300px;
+    max-width: 500px;
+    max-height: 300px;
+    color: black;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #fff3d1;
+    position: relative;
+  }
+
+  .type {
+    font-size: 30px;
+    font-weight: bold;
+    margin: 20px 0 0 0;
+  }
+
+  .divider {
+    border: 1px black solid;
+    width: 200px;
+    margin: 5px;
+  }
+
+  .undertitle {
+    margin: 0;
+  }
+
+  .degree {
+    font-size: 40px;
+    margin: 20px 0 0 0;
+  }
+
+  .tagline {
+    margin: 0;
+  }
+
+  .bottom {
+    margin-top: auto;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding:  0 20px;
+  }
+
+  .stamp {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    bottom: -40px;
+  }
+</style>

src/components/cv-download-button/cv-download-button.astro

@@ -0,0 +1,30 @@
+---
+---
+<button class="cv">
+  download CV
+</button>
+
+<script>
+  // Find all buttons with the `alert` class on the page.
+  const buttons = document.querySelectorAll('button.cv');
+
+  // Handle clicks on each button.
+  buttons.forEach((button) => {
+    button.addEventListener('click', () => {
+      alert('Button was clicked!');
+    });
+  });
+</script>
+
+<style lang="scss">
+  .cv {
+    width: 200px;
+    height: 40px;
+    border: none;
+    background-color: #212121;
+    color: #484848;
+    text-align: center;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+</style>

src/components/header/header.tsx

@@ -22,6 +22,7 @@ const Header = ({ title }: { title?: string }) => {
       <div className={`${styles.menu} ${menuOpen && styles.menu__open}`}>
         <nav className={`${styles.menu__links}`}>
           <a href="/projects">projects</a>
+          <a href="/about">about</a>
           {/* <a href="/photography">photography</a>
           <a href="/contact">contact</a> */}
         </nav>

src/components/page/page.astro

@@ -3,10 +3,11 @@ import Header from "../header/header.tsx";
 import Footer from "../footer/footer.astro";
 interface Props {
   title: string;
+  centered: boolean;
   children: any;
 }
 
-const { title, children } = Astro.props;
+const { title, centered, children } = Astro.props;
 ---
 
 <div class="page">
@@ -19,6 +20,9 @@ const { title, children } = Astro.props;
 
 <style lang="scss">
   .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     text-align: justify;
     box-sizing: border-box;
     max-width: 1200px;

src/components/profile/profile.astro

@@ -0,0 +1,30 @@
+---
+import { Image } from "astro:assets";
+import Pic from "./profile-pic.jpg";
+import DownloadButton from "../cv-download-button/cv-download-button.astro"
+---
+<div class="profile">
+  <Image class="picture" src={Pic} alt="Profile picture of a very handsome young man in full suit during a christmas dinner" />
+  <h3 class="name">Jort Willemsen</h3>
+  <DownloadButton />
+</div>
+
+<style lang="scss">
+  .profile {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  .name {
+    font-size: 25px;
+    color: white; 
+  }
+
+  .picture {
+    width: 200px;
+    height: 200px;
+    aspect-ratio: 1;
+    border-radius: 500px;
+  }
+</style>

src/components/technology.astro

@@ -0,0 +1,82 @@
+---
+import { getCollection } from "astro:content";
+import Project from "./project/project.astro";
+interface Props {
+  name: string;
+  tags: string[];
+}
+const { name, tags } = Astro.props;
+
+const projects = await getCollection("projects", ({ data }) => {
+  return tags.some((r) => data.tags.includes(r));
+});
+---
+
+<div class="tech">
+  <div class="head">
+    <h3 class="name">{name}</h3>
+    <hr class="div" />
+  </div>
+  <div class="tags">
+    {tags.map((tag: string) => <div class="tag">{tag}</div>)}
+  </div>
+  {
+    projects.slice(0, 2).map((project) => (
+      <Project
+        title={project.data.title}
+        link={`projects/${project.slug}`}
+        description={project.data.description}
+        picture={project.data.image.url}
+      />
+    ))
+  }
+</div>
+
+<style lang="scss">
+  .tech {
+    width: 100%;
+    margin-bottom: 40px;
+  }
+
+  .name {
+    font-size: 40px;
+    color: white;
+    margin: 0;
+  }
+
+  .div {
+    flex-grow: 1;
+    height: 0px;
+    margin-left: 20px;
+    border: 3px white solid;
+  }
+
+  .head {
+    margin-bottom: 10px;
+    align-items: center;
+    display: flex;
+  }
+
+  .tags {
+    display: flex;
+    overflow-x: auto;
+    width: 100%;
+    max-height: 30px;
+    cursor: pointer;
+  }
+
+  .tag {
+    display: inline-block;
+    text-align: left;
+    white-space: nowrap;
+    font-size: 20px;
+    margin-right: 15px;
+    background-color: #82cac2;
+    color: black;
+    padding: 5px 10px;
+    border-radius: 100px;
+    font-family: "Courier New", Courier, monospace;
+    font-weight: bold;
+    width: max-content;
+  }
+</style>

src/pages/about.astro

@@ -0,0 +1,104 @@
+---
+import Profile from "../components/profile/profile.astro";
+import Page from "../components/page/page.astro";
+import Certificate from "../components/certificate/certificate.astro";
+import Technology from "../components/technology.astro";
+---
+
+<html transition:animate="fade" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="stylesheet" href="https://use.typekit.net/zil5gof.css" />
+    <link rel="stylesheet" href="/styles/global.css" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>Tungstun</title>
+  </head>
+  <body>
+    <Page title="About" centered>
+      <Profile />
+
+      <section class="academic">
+        <h3>Academic experience</h3>
+        <div class="documents">
+          <Certificate
+            degreeType="DIPLOMA"
+            institution="Leidscherijn College"
+            degree="HAVO"
+            tagline="Natuur & Techniek"
+            year="from 2014 to 2019"
+          />
+
+          <Certificate
+            degreeType="DIPLOMA"
+            institution="Hogeschool Utrecht"
+            degree="HBO ICT"
+            tagline="Software Engineering"
+            year="from 2019 to 2023"
+          />
+          <Certificate
+            degreeType="CERTIFICATE"
+            institution="Stap in"
+            degree="Leiderschap"
+            tagline=""
+            year="2021"
+          />
+        </div>
+      </section>
+
+      <section class="techology">
+        <h3>Techonological experience</h3>
+        <Technology
+          name="Frontend development"
+          tags={[
+            "Frontend",
+            "React",
+            "Astro",
+            "Website",
+            "Wordpress"
+          ]}
+        />
+        <Technology
+          name="Backend development"
+          tags={[
+            "Backend",
+            "C#",
+            "Dotnet",
+            "Java",
+            "Spring Boot",
+          ]}
+        />
+        <Technology
+          name="Logo design"
+          tags={[
+            "Logo",
+            "Design"
+          ]}
+        />
+      </section>
+    </Page>
+  </body>
+</html>
+
+<style lang="scss">
+  section {
+    & > h3 {
+      width: 100%;
+      text-align: center;
+      color: white;
+      font-size: 30px;
+    }
+    border-radius: 5px;
+    margin: 25px;
+    width: 100%;
+  }
+
+  .documents {
+    height: 340px;
+    display: flex;
+    gap: 20px;
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+</style>