projects

src/components/Project.svelte

@@ -2,4 +2,41 @@
   export let project
 </script>
 
-<div>{project.title}</div>
+<style>
+  h2 {
+    font-size: 2em;
+    margin-bottom: 0.75em;
+  }
+
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  section {
+    margin-bottom: 4em;
+  }
+
+  ion-icon {
+    transform: translateY(0.25em);
+  }
+</style>
+
+<section>
+  <div>
+    <h2>{project.name}</h2>
+  </div>
+
+  <div>
+    <b>{project.title}</b>
+    <b>{project.date}</b>
+  </div>
+
+  <p>{project.body}</p>
+
+  <ion-icon name="link-outline" />
+  <a href={project.link}>{project.link.replace(/https?:\/\//, '')}</a>
+
+</section>

static/global.css

@@ -26,7 +26,7 @@ h5,
 h6 {
   font-family: 'Playfair Display', serif;
   font-weight: normal;
-  margin: 0 0.5em 0 0;
+  margin: 0.5em 0;
 }
 
 p {
@@ -40,4 +40,5 @@ p {
 
 a {
   color: inherit;
+  text-decoration: none;
 }