less corny header and note meta icons (#746)

* less corny header and note meta icons

* swap out more twemojis

* indicate active page in nav bar

* update favicons

* extract `<MenuLink />` into its own component

* change hover effect to an underline

* cropped header photo

pages/birthday.tsx

@@ -2,7 +2,6 @@ import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
 import PageTitle from "../components/PageTitle/PageTitle";
 import Video from "../components/Video/Video";
-import { TapeIcon } from "../components/Icons";
 
 import thumbnail from "../public/static/images/birthday/thumb.png";
 
@@ -16,9 +15,7 @@ const Birthday = () => (
       }}
     />
 
-    <PageTitle>
-      <TapeIcon /> 1996.MOV
-    </PageTitle>
+    <PageTitle>📼 1996.MOV</PageTitle>
 
     <Content>
       <Video

pages/cli.tsx

@@ -5,7 +5,6 @@ import Image from "../components/Image/Image";
 import Blockquote from "../components/Blockquote/Blockquote";
 import CodeBlock from "../components/CodeBlock/CodeBlock";
 import { H2 } from "../components/Heading/Heading";
-import { BotIcon } from "../components/Icons";
 
 import cliImg from "../public/static/images/cli/screenshot.png";
 
@@ -19,9 +18,7 @@ const CLI = () => (
       }}
     />
 
-    <PageTitle>
-      <BotIcon /> CLI
-    </PageTitle>
+    <PageTitle>🤖 CLI</PageTitle>
 
     <Content>
       <Blockquote>

pages/contact.tsx

@@ -2,7 +2,6 @@ import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
 import PageTitle from "../components/PageTitle/PageTitle";
 import ContactForm from "../components/ContactForm/ContactForm";
-import { MailIcon, LockIcon } from "../components/Icons";
 
 const Contact = () => (
   <>
@@ -13,9 +12,7 @@ const Contact = () => (
       }}
     />
 
-    <PageTitle>
-      <MailIcon /> Contact Me
-    </PageTitle>
+    <PageTitle>📬 Contact Me</PageTitle>
 
     <Content>
       <div className="wrapper">
@@ -32,7 +29,7 @@ const Contact = () => (
           , or <a href="sms:+1-617-917-3737">text me</a>.
         </p>
         <p>
-          <LockIcon /> You can grab my public key here:{" "}
+          🔐 You can grab my public key here:{" "}
           <a href="/pubkey.asc" title="My Public PGP Key" target="_blank" rel="pgpkey authn noopener">
             <code className="pubkey">6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39</code>
           </a>

pages/index.tsx

@@ -1,16 +1,12 @@
 import Content from "../components/Content/Content";
 import ColorfulLink from "../components/ColorfulLink/ColorfulLink";
-import { WaveIcon, LockIcon } from "../components/Icons";
 
 const Index = () => (
   <>
     <Content>
       <div className="home">
         <h1>
-          Hi there! I'm Jake.{" "}
-          <span className="wave">
-            <WaveIcon />
-          </span>
+          Hi there! I'm Jake. <span className="wave">👋</span>
         </h1>
 
         <h2>
@@ -269,7 +265,7 @@ const Index = () => (
               darkColor="#959595"
               external
             >
-              <LockIcon /> 2B0C 9CF2 51E6 9A39
+              🔐 2B0C 9CF2 51E6 9A39
             </ColorfulLink>
           </sup>
           ,{" "}
@@ -325,6 +321,7 @@ const Index = () => (
       .home .wave {
         display: inline-block;
         margin-left: 0.1em;
+        font-size: 1.2em;
         animation: wave 5s infinite;
         animation-delay: 1s;
         transform-origin: 65% 80%;

pages/license.tsx

@@ -4,7 +4,6 @@ import PageTitle from "../components/PageTitle/PageTitle";
 import HorizontalRule from "../components/HorizontalRule/HorizontalRule";
 import Blockquote from "../components/Blockquote/Blockquote";
 import { H2, H3 } from "../components/Heading/Heading";
-import { LicenseIcon } from "../components/Icons";
 
 const License = () => (
   <>
@@ -15,9 +14,7 @@ const License = () => (
       }}
     />
 
-    <PageTitle>
-      <LicenseIcon /> License
-    </PageTitle>
+    <PageTitle>📜 License</PageTitle>
 
     <Content>
       <p>

pages/previously.tsx

@@ -4,7 +4,6 @@ import PageTitle from "../components/PageTitle/PageTitle";
 import Figure from "../components/Figure/Figure";
 import IFrame from "../components/IFrame/IFrame";
 import HorizontalRule from "../components/HorizontalRule/HorizontalRule";
-import { FloppyIcon, SirenIcon } from "../components/Icons";
 
 /* eslint-disable camelcase */
 import img_wayback from "../public/static/images/previously/wayback.png";
@@ -35,9 +34,7 @@ const Previously = () => (
       }}
     />
 
-    <PageTitle>
-      <FloppyIcon /> Previously on...
-    </PageTitle>
+    <PageTitle>🕰️ Previously on...</PageTitle>
 
     <Content>
       <Figure src={img_wayback} alt="Timeline of this website's past." priority>
@@ -51,7 +48,7 @@ const Previously = () => (
       <HorizontalRule />
 
       <p>
-        <SirenIcon /> <strong>Trigger warning:</strong> marquees, Comic Sans MS, popups,{" "}
+        🚨 <strong>Trigger warning:</strong> marquees, Comic Sans MS, popups,{" "}
         <code>
           color: <span className="limegreen">limegreen</span>
         </code>

pages/privacy.tsx

@@ -6,7 +6,6 @@ import Image from "../components/Image/Image";
 import IFrame from "../components/IFrame/IFrame";
 import { H2 } from "../components/Heading/Heading";
 import Blockquote from "../components/Blockquote/Blockquote";
-import { PrivacyIcon } from "../components/Icons";
 
 import faunaImg from "../public/static/images/privacy/fauna_hits.png";
 
@@ -19,9 +18,7 @@ const Privacy = () => (
       }}
     />
 
-    <PageTitle>
-      <PrivacyIcon /> Privacy
-    </PageTitle>
+    <PageTitle>🕵️ Privacy</PageTitle>
 
     <Content>
       <p>Okay, this is an easy one. 😉</p>

pages/projects.tsx

@@ -3,9 +3,8 @@ import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
 import PageTitle from "../components/PageTitle/PageTitle";
 import RepositoryCard from "../components/RepositoryCard/RepositoryCard";
-import { ProjectsIcon } from "../components/Icons";
 import type { GetStaticProps } from "next";
-import { RepoType } from "../types";
+import type { RepoType } from "../types";
 
 type Props = {
   repos: RepoType[];
@@ -20,9 +19,7 @@ const Projects = ({ repos }: Props) => (
       }}
     />
 
-    <PageTitle>
-      <ProjectsIcon /> Projects
-    </PageTitle>
+    <PageTitle>💾 Projects</PageTitle>
 
     <Content>
       <div className="wrapper">

pages/uses.tsx

@@ -4,7 +4,6 @@ import Content from "../components/Content/Content";
 import PageTitle from "../components/PageTitle/PageTitle";
 import Image from "../components/Image/Image";
 import { H2 } from "../components/Heading/Heading";
-import { LaptopIcon } from "../components/Icons";
 
 import desktopImg from "../public/static/images/uses/bigsur.png";
 
@@ -18,9 +17,7 @@ const Uses = () => (
       }}
     />
 
-    <PageTitle>
-      /uses <LaptopIcon />
-    </PageTitle>
+    <PageTitle>/uses 💻</PageTitle>
 
     <Content>
       <p>