From 4e75e64d55e8edbfbfdc98b3a06deb27fb453be9 Mon Sep 17 00:00:00 2001
From: Caesar Schinas <caesar@caesarschinas.com>
Date: Wed, 16 Feb 2022 01:35:07 +0000
Subject: [PATCH] feat: add representative h-card

---
 index.html | 23 ++++++++++++++---------
 style.css  |  3 +++
 2 files changed, 17 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index 3da9c31..3571169 100644
--- a/index.html
+++ b/index.html
@@ -42,20 +42,24 @@
 
 		<link rel="pgpkey" href="https://keys.openpgp.org/vks/v1/by-fingerprint/5119C11D57D14127ACA1B6CFEAB09A2560EC3BC6" title="Caesar Schinas' PGP key" />
 	</head>
-	<body>
+	<body class="h-card vcard">
 		<header>
-			<h1>Caesar Schinas</h1>
+			<h1 class="p-name fn">
+				<a class="u-url u-uid url" href="https://caesarschinas.com" rel="home canonical">
+					Caesar Schinas
+				</a>
+			</h1>
 			<picture>
 				<source srcset="./images/caesar-256.webp 256w, ./images/caesar-128.webp 128w" type="image/webp" />
 				<source srcset="./images/caesar-256.jpg 256w, ./images/caesar-128.jpg 128w" type="image/jpeg" />
-				<img class="profile" src="./images/caesar-128.jpg" width="128" height="128" alt="" />
+				<img class="profile u-photo photo" src="./images/caesar-128.jpg" width="128" height="128" alt="" />
 			</picture>
-			<p class="ipa" lang="en-fonipa">
+			<p class="ipa p-ipa" lang="en-fonipa">
 				<a href="http://ipa-reader.xyz/?text=%CB%88si%CB%90z%C9%99%20%CB%88sk%C9%AAn%C9%99s&voice=Emma">
 					/ ˈsiːzə ˈskɪnəs /
 				</a>
 			</p>
-			<p class="dfn">
+			<p class="dfn p-role">
 				Sailor;&nbsp; programmer;&nbsp; web developer;&nbsp; publisher.
 			</p>
 		</header>
@@ -63,19 +67,19 @@
 			<strong>Hello.</strong> Thanks for dropping by. There’s not much to see here at the moment, but feel free to drop me a line using one of the links below.
 		</p>
 		<ul id="contact" class="contact">
-			<li><a rel="me" title="GitHub" href="https://github.com/caesar">
+			<li><a rel="me" title="GitHub" class="u-url url" href="https://github.com/caesar">
 				<svg class="icon icon-github"><use xlink:href="images/icon-defs.svg#icon-github"></use></svg>
 				GitHub
 			</a></li>
-			<li><a rel="me" title="Twitter" href="https://twitter.com/caesarschinas">
+			<li><a rel="me" title="Twitter" class="u-url url" href="https://twitter.com/caesarschinas">
 				<svg class="icon icon-twitter"><use xlink:href="images/icon-defs.svg#icon-twitter"></use></svg>
 				Twitter
 			</a></li>
-			<li><a rel="me" title="Matrix" href="https://matrix.to/#/@caesar:schinas.net">
+			<li><a rel="me" title="Matrix" class="u-url url" href="https://matrix.to/#/@caesar:schinas.net">
 				<svg class="icon icon-keybase"><use xlink:href="images/icon-defs.svg#icon-matrix"></use></svg>
 				Matrix
 			</a></li>
-			<li><a rel="me" title="Keyoxide (PGP identity proofs)" href="https://keyoxide.org/hkp/5119c11d57d14127aca1b6cfeab09a2560ec3bc6">
+			<li><a rel="me" title="Keyoxide (PGP identity proofs)" class="u-url url" href="https://keyoxide.org/hkp/5119c11d57d14127aca1b6cfeab09a2560ec3bc6">
 				<svg class="icon icon-key"><use xlink:href="images/icon-defs.svg#icon-key"></use></svg>
 				Keyoxide
 			</a></li>
@@ -88,6 +92,7 @@
 				a.text = 'email';
 				a.title = 'Email';
 				a.innerHTML = '<svg class="icon icon-envelope"><use xlink:href="images/icon-defs.svg#icon-envelope"></use></svg>';
+				a.className = 'u-email email'
 				function setHref(e) {
 					var x = 'pnrfne' + '@pnrfnefpuvanf' + '.pbz';
 					x = x.replace(/[a-zA-Z]/g, function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);});
diff --git a/style.css b/style.css
index a296fa4..8e8796c 100644
--- a/style.css
+++ b/style.css
@@ -27,6 +27,9 @@ a:hover {
 	color: #08f;
 	border-bottom-color: #08f;
 }
+h1 a {
+	border-bottom: none;
+}
 header {
 	margin: 0 0 1em;
 }
