Yet another small fix

components/hiddenemail.tsx

@@ -0,0 +1,22 @@
+import React, { useState, useEffect } from "react";
+
+const HiddenEmail = ({
+  email,
+  alt,
+  althref,
+}: {
+  email: string;
+  alt: string;
+  althref: string;
+}) => {
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    setVisible(true);
+  }, []);
+
+  return (
+    <a href={visible ? `mailto:${email}` : althref}>{visible ? email : alt}</a>
+  );
+};
+
+export default HiddenEmail;

pages/index.tsx

@@ -4,6 +4,7 @@ import Layout from "../components/layout";
 import styled from "styled-components";
 import IconLink from "components/iconlink";
 import ScrollMe from "components/scrollme";
+import HiddenEmail from "components/hiddenemail";
 import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
 import { faGit, faGithub } from "@fortawesome/free-brands-svg-icons";
 
@@ -108,10 +109,11 @@ const Page: NextPageWithLayout = () => {
       <Section>
         <h2 id="about">/almqv</h2>
         <p>
-          I am a {secondsToYears(getAge())} year old{" "}
-          <em>Computer Science & Engineering student</em> with a passion for{" "}
-          <em>physics</em>, <em>programming</em>, <em>mathematics</em> and
-          anything <em>*NIX</em> <Nem>(Linux, UNIX etc)</Nem> related.
+          I am a {secondsToYears(getAge())}-year-old{" "}
+          <em>Computer Science and Engineering student</em> with a passion for{" "}
+          <em>engineering</em>, <em>programming</em>, and <em>mathematics</em>.
+          I also have an interest in <em>physics</em> and <em>*NIX</em>{" "}
+          <Nem>(Linux, UNIX, etc)</Nem> systems.
         </p>
         {/*TODO: Add GitHub code frequency/contrib here*/}
         <p className="topmargin">
@@ -155,23 +157,7 @@ const Page: NextPageWithLayout = () => {
         <h2 id="contact">Contact</h2>
         <p>
           You can contact me through email. And if you prefer it, you can
-          contact me using PGP. Do note that my{" "}
-          <em>email address below is encrypted</em> as a precaution against bots
-          et cetera. <em>Do not worry, it is easy to crack</em>. Alternatively
-          you could query for my email with my PGP fingerprint (key-id) on some
-          PGP key server (i.e. the{" "}
-          <a href="https://pgp.mit.edu/" target="_blank" rel="noreferrer">
-            MIT
-          </a>{" "}
-          or{" "}
-          <a
-            href="https://keyserver.ubuntu.com/"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Ubuntu
-          </a>{" "}
-          key-server).
+          contact me using PGP.
         </p>
         <CList>
           <li>
@@ -179,7 +165,13 @@ const Page: NextPageWithLayout = () => {
             <Code>68B2 9768 49F0 3C72 38AE B081 E31A 99CE 3E75 A158</Code>
           </li>
           <li>
-            Email: <Code>cnlueXpkaXZmZ0B0em52eS5wYnoK</Code>
+            Email:{" "}
+            <HiddenEmail
+              email="elalmqvist@gmail.com"
+              alt="[hidden, solve this to view: cnlueXpkaXZmZ0B0em52eS5wYnoK]"
+              althref="#contact"
+            />{" "}
+            {/* <Code>cnlueXpkaXZmZ0B0em52eS5wYnoK</Code> */}
           </li>
           <li>
             GitHub:{" "}