Improvements to projects and dynamic image resizing

src/templates/article.html

@@ -1,6 +1,6 @@
 {% include 'header.html' %}
 <main>
-    <section id="tech-article">
+    <section id="article">
         <h1>{{ metadata.title}} </h1>
         <p>{{ metadata.date | human_date }}</p>
         <hr />

src/templates/projects.html

@@ -15,7 +15,17 @@
     <section id="projects">
         {% for row in articles %}
         <div class="project">
-            <img class="project-thumb" src="/projects/image/{{ row.image }}">
+            <img class="project-thumb" 
+            srcset="
+                {% for i in range(200, 5100, 100) %}
+                    /projects/image/{{ row.image }}?w={{i}} {{i}}w{{"," if not loop.last}}
+                {% endfor %}
+                "
+                sizes="
+                    (max-width: 999px) 80vw,
+                    (min-width: 1000px) 20vw
+                "
+            src="/projects/image/{{ row.image }}">
             <div class="project-text">
                 {% if row.get('link') is not none %}
                 <a href="{{ row.link }}">