From de2b57c10c71303b57379ef07c3fa1e7a2613c36 Mon Sep 17 00:00:00 2001
From: Tibo De Peuter <tibo@depeuter.dev>
Date: Sun, 2 Nov 2025 17:41:12 +0100
Subject: [PATCH] feat: Add GPG explainer

---
 assets/images/icons/question-mark.svg |  5 +++++
 cv.html                               | 12 +++++++++---
 i18n/en.json                          | 12 +++++++++++-
 i18n/nl.json                          | 12 +++++++++++-
 index.html                            | 16 +++++++++++-----
 style.css                             |  7 +++++++
 6 files changed, 54 insertions(+), 10 deletions(-)
 create mode 100644 assets/images/icons/question-mark.svg

diff --git a/assets/images/icons/question-mark.svg b/assets/images/icons/question-mark.svg
new file mode 100644
index 0000000..30bdabb
--- /dev/null
+++ b/assets/images/icons/question-mark.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 17V16.9929M12 14.8571C12 11.6429 15 12.3571 15 9.85714C15 8.27919 13.6568 7 12 7C10.6567 7 9.51961 7.84083 9.13733 9M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
+          stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/cv.html b/cv.html
index 7868d8b..cce54d1 100644
--- a/cv.html
+++ b/cv.html
@@ -537,12 +537,18 @@
         </div>
     </noscript>
     <p>
-        <a href="./key.asc" about="link to public PGP key">
+        <a href="./key.asc" title="Get my public PGP key" data-i18n="footer.key">
             08A9 C1C8 CF91 59C9 172A BA12 9B11 F524 3089 DB5B
         </a>
         (<a href="https://keys.openpgp.org/vks/v1/by-fingerprint/08A9C1C8CF9159C9172ABA129B11F5243089DB5B"
-            about="alternative link to public PGP key"
-            data-i18n="alternative_link">alternative&nbsp;link</a>)
+            title="Get my public PGP key (alternative link)"
+            data-i18n="footer.key_alternative">alternative&nbsp;link</a>)
+
+        <a href="https://en.wikipedia.org/wiki/Public-key_cryptography"
+           title="What is public key cryptography?"
+           data-i18n="footer.key_help">
+            <img src="/assets/images/icons/question-mark.svg" alt="" class="icon inline-icon"/>
+        </a>
     </p>
     <p>
         <span data-i18n="footer.made_with">Made with</span> <span class="heart">&hearts;</span>.
diff --git a/i18n/en.json b/i18n/en.json
index 27c6244..eaf3ae1 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -1,5 +1,4 @@
 {
-  "alternative_link": "alternative link",
   "contact": {
     "email": {
       "title": "Mail me"
@@ -78,6 +77,17 @@
     }
   },
   "footer": {
+    "key": {
+      "title": "Get my public PGP key"
+    },
+    "key_alternative": {
+      "innerHTML": "alternative&nbsp;link",
+      "title": "Get my public PGP key (alternative link)"
+    },
+    "key_help": {
+      "href": "https://en.wikipedia.org/wiki/Public-key_cryptography",
+      "title": "What is public key cryptography?"
+    },
     "made_with": "Made with",
     "source_code": "Source code"
   },
diff --git a/i18n/nl.json b/i18n/nl.json
index bf1cf94..390d942 100644
--- a/i18n/nl.json
+++ b/i18n/nl.json
@@ -1,5 +1,4 @@
 {
-  "alternative_link": "alternatieve link",
   "contact": {
     "email": {
       "title": "Stuur mij een e-mail"
@@ -78,6 +77,17 @@
     }
   },
   "footer": {
+    "key": {
+      "title": "Krijg mijn publieke PGP sleutel"
+    },
+    "key_alternative": {
+      "innerHTML": "alternatieve&nbsp;link",
+      "title": "Krijg mijn publieke PGP sleutel (alternative link)"
+    },
+    "key_help": {
+      "href": "https://nl.wikipedia.org/wiki/Asymmetrische_cryptografie",
+      "title": "Wat is asymmetrische cryptografie?"
+    },
     "made_with": "Gemaakt met",
     "source_code": "Broncode"
   },
diff --git a/index.html b/index.html
index 8767960..66804fc 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
     <main>
         <div class="landing">
             <p data-i18n="landing.title">My name is Tibo De Peuter.</p>
-            <p data-i18n="landing.subtitle">I like working with computers.</p>
+            <p data-i18n="landing.subtitle">I like to work with computers.</p>
         </div>
 
         <ul class="links">
@@ -58,7 +58,7 @@
             </li>
             <li>
                 <a href="https://www.linkedin.com/in/tdpeuter/" title="My LinkedIn account" data-i18n="contact.linkedin">
-                    <img src="assets/images/icons/linkedin.svg" alt="LinkedIn" class="icon"/>
+                    <img src="assets/images/icons/linkedin.svg" alt="" class="icon"/>
                 </a>
             </li>
         </ul>
@@ -84,12 +84,18 @@
         </div>
     </noscript>
     <p>
-        <a href="./key.asc" about="link to public PGP key">
+        <a href="./key.asc" title="Get my public PGP key" data-i18n="footer.key">
             08A9 C1C8 CF91 59C9 172A BA12 9B11 F524 3089 DB5B
         </a>
         (<a href="https://keys.openpgp.org/vks/v1/by-fingerprint/08A9C1C8CF9159C9172ABA129B11F5243089DB5B"
-            about="alternative link to public PGP key"
-            data-i18n="alternative_link">alternative&nbsp;link</a>)
+            title="Get my public PGP key (alternative link)"
+            data-i18n="footer.key_alternative">alternative&nbsp;link</a>)
+
+        <a href="https://en.wikipedia.org/wiki/Public-key_cryptography"
+           title="What is public key cryptography?"
+           data-i18n="footer.key_help">
+            <img src="/assets/images/icons/question-mark.svg" alt="" class="icon inline-icon"/>
+        </a>
     </p>
     <p>
         <span data-i18n="footer.made_with">Made with</span> <span class="heart">&hearts;</span>.
diff --git a/style.css b/style.css
index 33160c0..8a5044a 100644
--- a/style.css
+++ b/style.css
@@ -156,6 +156,13 @@ footer {
     /* Cherry red */
 }
 
+.inline-icon {
+    width: 1em;
+    height: 1em;
+
+    vertical-align: middle;
+}
+
 .quote {
     border-left: var(--line-thickness) solid var(--primary-color);
     padding-left: 10px;