next-mdx-remote v4 (#737)

components/Name/Name.module.css

@@ -0,0 +1,45 @@
+.name {
+  display: inline-flex;
+  align-items: center;
+  color: var(--medium-dark);
+  background: none;
+  padding-bottom: 0;
+}
+
+.name .selfie {
+  width: 50px;
+  height: 50px;
+  line-height: 0;
+  padding: 0;
+}
+
+.name .selfie img {
+  border: 1px solid var(--light) !important;
+  border-radius: 50%;
+}
+
+.name:hover {
+  color: var(--link);
+}
+
+.name:hover .selfie {
+  opacity: 0.9;
+}
+
+.name span:last-of-type {
+  margin: 0 0.6em;
+  font-size: 1.2em;
+  font-weight: 500;
+  line-height: 1;
+}
+
+@media screen and (max-width: 768px) {
+  .name .selfie {
+    width: 70px;
+    height: 70px;
+  }
+
+  .name span:last-of-type {
+    display: none;
+  }
+}

components/Name/Name.tsx

@@ -0,0 +1,20 @@
+import { memo } from "react";
+import Link from "next/link";
+import Image from "next/image";
+
+import styles from "./Name.module.css";
+
+import meJpg from "../../public/static/images/me.jpg";
+
+const Name = () => (
+  <Link href="/">
+    <a className={styles.name}>
+      <div className={styles.selfie}>
+        <Image src={meJpg} alt="Photo of Jake Jarvis" width={70} height={70} quality={60} layout="intrinsic" priority />
+      </div>
+      <span>Jake Jarvis</span>
+    </a>
+  </Link>
+);
+
+export default memo(Name);