Added badges

Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>

data.yaml

@@ -120,6 +120,10 @@ projects:
       - color: "#00ADD8"
         name: Go
 
+badges:
+  - img: https://images.credly.com/size/110x110/images/b1eaaa0e-3e14-4bfe-9881-9ce477cfa7fc/image.png
+    url: https://www.credly.com/badges/cd63e887-72ac-49b0-8322-a4062d86d997/public_url
+
 events:
   - date: "2023-11-04"
     humanDate: "November 4th - 5th, 2023"

src/index.html

@@ -230,6 +230,13 @@
       margin-bottom: 6px;
     }
 
+    .badges a {
+      display: inline-block;
+    }
+    .badges a img {
+      width: 110px;
+    }
+
     @media only screen and (max-width: 1700px) {
       body {
         grid-template: 20vh 80vh / 100%;
@@ -291,6 +298,30 @@
       </ul>
     </section>
 
+    {{ if gt (len .events) 0 }}
+    <section id="events">
+      <h2>🗓 Upcoming Events</h2>
+
+      <ul class="events">
+        {{ range .events }}
+        <li>
+          <time datetime="{{ .date }}">{{ .humanDate }}</time>
+          <div class="details">
+            <strong><a href="{{ .url }}">{{ .eventName }}</a></strong>
+            {{ range .details }}
+            <div>
+              <span>{{ .name | html }}</span>
+              {{ if .type }}<span class="tag">{{ .type }}</span>{{ end }}
+            </div>
+            {{ end }}
+          </div>
+        </li>
+        {{ end }}
+      </ul>
+    </section>
+    {{ end }}
+
+    {{ if gt (len .projects) 0 }}
     <section id="projects">
       <h2>💻 My Open Source Projects</h2>
 
@@ -314,27 +345,21 @@
         {{ end }}
       </ul>
     </section>
+    {{ end }}
 
-    <section id="events">
+    {{ if gt (len .badges) 0 }}
-      <h2>🗓 Upcoming Events</h2>
+    <section id="badges">
+      <h2>🎖️ Badges</h2>
 
-      <ul class="events">
+      <ul class="badges">
-        {{ range .events }}
+        {{ range .badges }}
-        <li>
+        <a href="{{ .url }}" target="_blank">
-          <time datetime="{{ .date }}">{{ .humanDate }}</time>
+          <img src="{{ .img }}" />
-          <div class="details">
+        </a>
-            <strong><a href="{{ .url }}">{{ .eventName }}</a></strong>
-            {{ range .details }}
-            <div>
-              <span>{{ .name | html }}</span>
-              {{ if .type }}<span class="tag">{{ .type }}</span>{{ end }}
-            </div>
-            {{ end }}
-          </div>
-        </li>
         {{ end }}
       </ul>
     </section>
+    {{ end }}
   </main>
 </body>
 </html>