Add the personal projects section.

components/personal-projects.typ

@@ -0,0 +1,41 @@
+#import "../utilities/icon-with-text.typ": icon_with_text
+#import "../utilities/localize.typ": localize
+
+#let personal_project(data, language) = {
+  let personal_project_name = localize(data, "name", language)
+
+  let personal_project_heading = heading(level: 3, link(data.link, personal_project_name));
+
+  let personal_project_header = if "header_image" in data {
+    icon_with_text(
+      clip_icon: true,
+      icon: "../" + data.header_image,
+      icon_alt_text: personal_project_name,
+      icon_size: 1.4em,
+      personal_project_heading,
+    )
+  } else {
+    personal_project_heading
+  }
+
+  // Use a grid to space out the header and the body.
+  grid(
+    gutter: 0.5em,
+    // Use another grid to position the title and date.
+    grid(
+      columns: (1fr, auto),
+      personal_project_header,
+      align(horizon, text(size: 0.9em, localize(data, "date", language))),
+    ),
+    // The body can contain Typst code so we use `eval()` to render it.
+    eval(localize(data, "body", language)),
+  )
+}
+
+#let personal_projects_section(data, language) = [
+  == #localize(data.locale, "personal_projects", language)
+
+  #for data in data.personal_projects {
+    personal_project(data, language)
+  }
+]