static/css/index.css

@@ -21,24 +21,24 @@
 }
 
 /* Name header */
-.name {
+#name {
   font-size: calc(var(--font-size) * 2.5);
   font-weight: var(--title-weight);
   color: var(--name-color);
 }
 
-.subname {
+#subname {
   margin-top: 0;
   font-size: calc(var(--font-size) * 1.07);
   margin-bottom: 1.5em;
 }
 
-.pronouns {
+#pronouns {
   font-size: calc(var(--font-size) * 0.8);
   color: var(--pronouns-color);
 }
 
-.avatar {
+#avatar {
   width: calc(var(--font-size) * 5);
   border-radius: 50%;
   float: right;

static/js/index.js

@@ -0,0 +1,14 @@
+window.addEventListener("load", () => {
+  const tags = [
+    "Comment ça marche un PC 😵‍💫",
+    "Idiot certifié",
+    "undefined",
+    "/api/v1/love",
+    "Étudiant qui va rater son master",
+    "Peak D2 sur Valo",
+    "1312",
+  ];
+
+  let tagElement = document.getElementById("subname");
+  tagElement.textContent = tags[Math.round(Math.random() * (tags.length - 1))];
+});

templates/index.html

@@ -10,17 +10,17 @@
       {{#data}}
 
       <div>
-        <span class="name">{{fullname}}</span>
-        <span class="pronouns">(il/lui, he/him)</span>
+        <span id="name">{{fullname}}</span>
+        <span id="pronouns">(il/lui, he/him)</span>
         <img
-          class="avatar"
+          id="avatar"
           src="/icons/apple-touch-icon.png"
           alt="Avatar"
           title="Mon avatar, dessiné un jour super rapidement sur Gimp."
           loading="lazy"
         />
       </div>
-      <p class="subname">Étudiant qui va rater son master</p>
+      <p id="subname"></p>
 
       <article>
         <h1>Bienvenue !</h1>
@@ -40,11 +40,12 @@
             target="_blank"
             rel="noreferrer"
             >AGPLv3</a
-          >. Vous pouvez voir mon <a href="/portfolio">portfolio ici</a> !
+          >. Vous pouvez voir mon <a href="/portfolio">portfolio ici</a>, ainsi
+          que mes <a href="/contrib">contributions sur GitHub ici</a>.
         </p>
         <p>
-          Il m'arrive parfois d'écrire dans
-          <a href="/blog">mon blog disponible ici</a>.
+          Il m'arrive aussi, parfois, d'écrire dans
+          <a href="/blog">sur mon blog</a>.
         </p>
       </article>
 
@@ -71,5 +72,6 @@
 
       {{/data}}
     </main>
+    <script src="/js/index.js"></script>
   </body>
 </html>