html: basics: align image and add title

1 files changed, 24 insertions, 4 deletions

diff --git a/html/basics/default.nix b/html/basics/default.nix
index d7f7a90..af65013 100644
--- a/html/basics/default.nix
+++ b/html/basics/default.nix
@@ -1,17 +1,37 @@
 { html, data, ... }:
 
-let basics = data.basics;
+let
+  basics = data.basics;
+  col = html.div {
+    class = "col";
+    style = "align-self: center";
+  };
+  center = container: content:
+    container { style = "text-align: center"; } content;
 in {
   title = "About me";
   priority = 0;
   body = with html;
     with data.basics;
     lines [
+      br
       (div { class = "row"; } [
-        (div { class = "col"; } [ (imgWith { src = avatar; }) ])
-        (div { class = "col"; } (dl [
+        (col [
+          (imgWith {
+            src = avatar;
+            style = ''
+              border-radius: 50%;
+              padding-left: 20%;
+              padding-right: 20%;
+            '';
+          })
+          (center h3 name)
+          (center p (with institution; [ position br "@ ${href url name}" ]))
+        ])
+        (col (dl [
           (dt "${icon "las la-at"} e-mail")
-          (dd (for email (email: "${mailto email.address} (${email.name}) ${br}")))
+          (dd (for email
+            (email: "${mailto email.address} (${email.name}) ${br}")))
           (dt "${icon "las la-key"} keys")
           (dd (for keys.pgp (name: path: href path name)))
           (dt "${icon "las la-map-marker"} address")