page heading

sass/styles/components/about-card.scss

@@ -0,0 +1,57 @@
+.about-card {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-around;
+
+  width: max-content;
+  max-width: 95vw;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 2em;
+  margin-bottom: 2em;
+
+  .profile-photo-container {
+    max-width: 150px;
+    height: max-content;
+    margin: 0;
+    padding: 0;
+
+    & > img {
+      width: 100%;
+    }
+  }
+
+  .text-container {
+    margin-left: 1em;
+    height: max-content;
+
+    .intro-text {
+      margin-bottom: 1em;
+
+      h1,
+      p {
+        margin: 0;
+        line-height: 1em;
+      }
+    }
+
+    .quick-links {
+      height: max-content;
+
+      ul {
+        margin: 0;
+        padding: 0;
+
+        li {
+          list-style-type: none;
+
+          line-height: 1.25em;
+          margin: 0;
+          padding: 0;
+        }
+        padding: 0;
+      }
+    }
+  }
+}

sass/styles/components/heading-card.scss

@@ -0,0 +1,32 @@
+.heading-card {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+
+  width: max-content;
+  max-width: 95vw;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 2em;
+  margin-bottom: 2em;
+
+  .profile-photo-container {
+    width: 50px;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .text-container {
+    margin-left: 1em;
+    height: max-content;
+
+    h1,
+    p {
+      margin: 0;
+      line-height: 1em;
+    }
+  }
+}

templates/base.html

@@ -13,6 +13,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" type="image/jpg" href="{{config.extra.profile_photo}}" />
     {% include "components/metadata/advertise-rss.html" %}
     {% include "components/metadata/opengraph.html" %}
 
@@ -54,6 +55,9 @@
     {# The whole page #}
     <div class="page">
 
+        {# Allow pages to override the content before the navbar #}
+        {% block page_start %}{% endblock page_start %}
+
         {# Navbar #}
         <div class="container">
             {% include "components/navbar.html" %}
@@ -74,6 +78,8 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
         crossorigin="anonymous"></script>
+
+    {% include "components/metadata/analytics.html" %}
 </body>
 
 </html>

templates/components/about-card.html

@@ -0,0 +1,46 @@
+{% block component_styles %}
+{{ super() }}
+<link rel="stylesheet" href="/styles/components/about-card.css">
+{% endblock component_styles %}
+
+<div class="about-card">
+    <div class="profile-photo-container">
+        <img src="{{config.extra.profile_photo}}" alt="Profile Photo">
+    </div>
+    <div class="text-container">
+        <div class="intro-text">
+            <h1>{{config.extra.name}}</h1>
+            <p>{{config.extra.profession}}</p>
+        </div>
+        <div class="quick-links">
+            <ul>
+                <li>
+                    <a href="mailto:{{config.extra.email}}" rel="me">
+                        <i class="las la-envelope"></i>
+                        {{config.extra.email}}
+                    </a>
+                </li>
+                <li>
+                    <a href="https://github.com/{{config.extra.github}}" rel="me">
+                        <i class="lab la-github"></i>
+                        {{config.extra.github}}
+                    </a>
+                </li>
+                <li>
+                    <a href="https://linkedin.com/in/{{config.extra.linkedin}}" rel="me">
+                        <i class="lab la-linkedin"></i>
+                        {{config.extra.linkedin}}
+                    </a>
+                </li>
+                <li>
+                    <a href="/contact">
+                        ...&nbsp;&nbsp;more
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+{# Mastodon requires this to exist somewhere, so why not here #}
+<a rel="me" href="https://social.ewpratten.com/@evan" style="display:none;"></a>

templates/components/heading-card.html

@@ -0,0 +1,14 @@
+{% block component_styles %}
+{{ super() }}
+<link rel="stylesheet" href="/styles/components/heading-card.css">
+{% endblock component_styles %}
+
+<div class="heading-card">
+    <div class="profile-photo-container">
+        <img src="{{config.extra.profile_photo}}" alt="Profile Photo">
+    </div>
+    <div class="text-container">
+        <h1>{{config.extra.name}}</h1>
+        <p>{{config.extra.profession}}</p>
+    </div>
+</div>

templates/components/metadata/analytics.html

@@ -0,0 +1,9 @@
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-5912H4H03P"></script>
+<script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', 'G-5912H4H03P');
+</script>

templates/index.html

@@ -8,6 +8,9 @@
 {% endblock variable_wormhole %}
 
 {# Page content #}
+{% block page_start %}
+{% include "components/about-card.html" %}
+{% endblock page_start %}
 {% block content %}
- {{ section.content | safe }}
+{{ section.content | safe }}
 {% endblock content %}

templates/page.html

@@ -9,6 +9,13 @@
 {% endblock variable_wormhole %}
 
 {# Page content #}
+{% block page_start %}
+{% include "components/heading-card.html" %}
+{% endblock page_start %}
 {% block content %}
- {{ page.content | safe }}
+<h1 style="margin-bottom:0;padding-bottom:0;">{{page.title}}</h1>
+<em>{{page.description}}</em>
+<br><br>
+
+{{ page.content | safe }}
 {% endblock content %}

templates/section.html

@@ -8,6 +8,9 @@
 {% endblock variable_wormhole %}
 
 {# Page content #}
+{% block page_start %}
+{% include "components/heading-card.html" %}
+{% endblock page_start %}
 {% block content %}
  {{ section.content | safe }}
 {% endblock content %}