migrate app from svelte

templates/components/footer.html

@@ -0,0 +1,17 @@
+{% macro footer(last_updated) %}
+<style>
+    #footer {
+        color: rgb(149, 166, 180);
+        text-align: center;
+        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        margin-top: 200px;
+        margin-bottom: 25px;
+    }
+</style>
+
+<div id="footer">
+	Made by Evan Scherrer -- Last updated {{ last_updated }} <br>
+	<i> No generative AI was used for the content of this website </i>
+</div>
+{%- endmacro %}
+

templates/components/header.html

@@ -0,0 +1,6 @@
+{% macro header(text, link="/") -%}
+  <div class="container">
+    <h1>{{text}}</h1>
+    <a class="back" href={{link}}>⬅back</a>
+  </div>
+{%- endmacro %}

templates/components/picture.html

@@ -0,0 +1,29 @@
+{% macro picture(src, caption, alt_text="a picture of my cute dog") -%}
+
+<style>
+    .picture {
+        margin: 0px;
+        margin-bottom: 10px;
+    }
+
+    .picture img {
+        max-width: 100%;
+        width: auto;
+        border: 1px solid #eeeeeea0;
+        border-radius: 4px;
+        box-shadow: 0px 0px 8px #12181b;
+    }
+
+    .picture p {
+        margin: 0;
+        margin-top: 5px;
+    }
+</style>
+
+<div class="main-panel picture">
+	<img src={{src}} alt={{alt_text}} style="height: calc(100% - ({{(caption|length / 28) | round(0, 'ceil') | int * 32}} px)">
+    {% if caption %}
+      <p>{{caption}}</p>
+    {% endif %}
+</div>
+{%- endmacro %}

templates/components/portfolio_item.html

@@ -0,0 +1,29 @@
+{% macro portfolioItem(title, description, link, site="GitHub ↗") -%}
+<style>
+    .portfolioItem {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        background-color: #12181b;
+        padding: 20px;
+        border: 1px solid #EEEEEE;
+        border-radius: 4px;
+        box-shadow: 0px 0px 8px #12181b;
+        width: 40%;
+    }
+
+    .portfolioItem h3 {
+        margin: 0px;
+    }
+
+    .portfolioItem p {
+        flex-grow: 1;
+    }
+</style>
+
+<div class="portfolioItem">
+    <h3>{{title}}</h3>
+    <p>{{description}}</p>
+    <a href={{link}} target="_blank">{{site}}</a>
+</div>
+{%- endmacro %}