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

components/ContactForm/ContactForm.module.css

@@ -7,6 +7,8 @@
   color: var(--text);
   background-color: var(--super-duper-light);
   border-color: var(--light);
+  /* light-dark theme switch fading */
+  transition: background 0.25s ease;
 }
 
 .input:focus {
@@ -18,12 +20,6 @@
   border-color: var(--error);
 }
 
-.input,
-.btn_submit {
-  /* light-dark theme switch fading */
-  transition: background 0.25s ease;
-}
-
 .textarea {
   height: 12em;
   min-height: 6em;

components/Header/Header.module.css

@@ -29,13 +29,11 @@
 
   .menu {
     max-width: 325px;
-    margin-left: 2.5em;
   }
 }
 
 @media screen and (max-width: 380px) {
   .menu {
     max-width: 225px;
-    margin-left: 1.6em;
   }
 }

components/Icons/index.ts

@@ -1,26 +1,20 @@
-// emoji from Twemoji: https://twemoji.twitter.com/
-export { default as BotIcon } from "../../node_modules/twemoji/assets/svg/1f916.svg";
-export { default as ContactIcon } from "../../node_modules/twemoji/assets/svg/1f4ec.svg";
-export { default as DateIcon } from "../../node_modules/twemoji/assets/svg/1f4c5.svg";
-export { default as EditIcon } from "../../node_modules/twemoji/assets/svg/270f.svg";
-export { default as FloppyIcon } from "../../node_modules/twemoji/assets/svg/1f4be.svg";
-export { default as HeartIcon } from "../../node_modules/twemoji/assets/svg/2764.svg";
-export { default as HomeIcon } from "../../node_modules/twemoji/assets/svg/1f3e1.svg";
-export { default as LaptopIcon } from "../../node_modules/twemoji/assets/svg/1f4bb.svg";
-export { default as LicenseIcon } from "../../node_modules/twemoji/assets/svg/1f4dc.svg";
-export { default as LockIcon } from "../../node_modules/twemoji/assets/svg/1f510.svg";
-export { default as MailIcon } from "../../node_modules/twemoji/assets/svg/2709.svg";
-export { default as NotesIcon } from "../../node_modules/twemoji/assets/svg/1f5d2.svg";
-export { default as PrivacyIcon } from "../../node_modules/twemoji/assets/svg/1f575.svg";
-export { default as ProjectsIcon } from "../../node_modules/twemoji/assets/svg/1f468-200d-1f4bb.svg";
-export { default as SendIcon } from "../../node_modules/twemoji/assets/svg/1f4e4.svg";
-export { default as SirenIcon } from "../../node_modules/twemoji/assets/svg/1f6a8.svg";
-export { default as TagIcon } from "../../node_modules/twemoji/assets/svg/1f3f7.svg";
-export { default as TapeIcon } from "../../node_modules/twemoji/assets/svg/1f4fc.svg";
-export { default as ViewsIcon } from "../../node_modules/twemoji/assets/svg/1f440.svg";
-export { default as WaveIcon } from "../../node_modules/twemoji/assets/svg/1f44b.svg";
+// Icons from various packs, imported directly from the package's SVG files instead of their exports so they're all
+// processed consistently via svgr/webpack into React components.
+// NOTE: each node_modules/ directory *must* be listed in svgr's webpack config in next.config.js.
 
-// https://primer.style/octicons/
+// feather icons: https://feathericons.com/
+export { default as ContactIcon } from "../../node_modules/feather-icons/dist/icons/mail.svg";
+export { default as DateIcon } from "../../node_modules/feather-icons/dist/icons/calendar.svg";
+export { default as EditIcon } from "../../node_modules/feather-icons/dist/icons/edit.svg";
+export { default as HomeIcon } from "../../node_modules/feather-icons/dist/icons/home.svg";
+export { default as MoonIcon } from "../../node_modules/feather-icons/dist/icons/moon.svg";
+export { default as NotesIcon } from "../../node_modules/feather-icons/dist/icons/edit-3.svg";
+export { default as ProjectsIcon } from "../../node_modules/feather-icons/dist/icons/code.svg";
+export { default as SunIcon } from "../../node_modules/feather-icons/dist/icons/sun.svg";
+export { default as TagIcon } from "../../node_modules/feather-icons/dist/icons/tag.svg";
+export { default as ViewsIcon } from "../../node_modules/feather-icons/dist/icons/eye.svg";
+
+// octicons: https://primer.style/octicons/
 export { default as CheckOcticon } from "../../node_modules/@primer/octicons/build/svg/check-16.svg";
 export { default as ClipboardOcticon } from "../../node_modules/@primer/octicons/build/svg/paste-16.svg";
 export { default as ForkOcticon } from "../../node_modules/@primer/octicons/build/svg/repo-forked-16.svg";
@@ -28,5 +22,9 @@ export { default as OctocatOcticon } from "../../node_modules/@primer/octicons/b
 export { default as StarOcticon } from "../../node_modules/@primer/octicons/build/svg/star-16.svg";
 export { default as XOcticon } from "../../node_modules/@primer/octicons/build/svg/x-16.svg";
 
-// https://simpleicons.org/
+// emoji from Twemoji: https://twemoji.twitter.com/
+export { default as HeartIcon } from "../../node_modules/twemoji/assets/svg/2764.svg";
+export { default as SendIcon } from "../../node_modules/twemoji/assets/svg/1f4e4.svg";
+
+// simple icons: https://simpleicons.org/
 export { default as NextjsLogo } from "../../node_modules/simple-icons/icons/nextdotjs.svg";

components/Menu/Menu.module.css

@@ -7,39 +7,19 @@
 .menu_item {
   list-style: none;
   display: inline-flex;
-  margin-left: 1.8em;
-}
-
-.menu_item .link {
-  display: inline-flex;
-  align-items: center;
-  color: var(--medium-dark);
-}
-
-.menu_item .link:hover {
-  color: var(--link);
+  margin-left: 1em;
 }
 
 .menu_item .icon {
-  width: 1.6em;
-  height: 1.6em;
-}
-
-.menu_item .label {
-  font-size: 0.95em;
-  font-weight: 500;
-  margin-left: 0.8em;
-  line-height: 1;
-}
-
-.menu_item.theme_toggle {
-  margin-left: 1.25em;
+  width: 1.25em;
+  height: 1.25em;
 }
 
 @media screen and (max-width: 768px) {
   .menu {
     width: 100%;
     justify-content: space-between;
+    margin-left: 1em;
   }
 
   .menu_item {
@@ -50,19 +30,14 @@
     width: 1.8em;
     height: 1.8em;
   }
-
-  /* hide text next to emojis on mobile */
-  .menu_item .label {
-    display: none;
-  }
-
-  .menu_item.theme_toggle {
-    margin-left: -0.3em;
-  }
 }
 
-/* the home icon is redundant when space is SUPER tight */
 @media screen and (max-width: 380px) {
+  .menu {
+    margin-left: 1.4em;
+  }
+
+  /* the home icon is redundant when space is SUPER tight */
   .menu_item:first-of-type {
     display: none;
   }

components/Menu/Menu.tsx

@@ -1,6 +1,7 @@
 import { memo } from "react";
-import Link from "next/link";
+import { useRouter } from "next/router";
 import classNames from "classnames";
+import MenuLink from "../MenuLink/MenuLink";
 import ThemeToggle from "../ThemeToggle/ThemeToggle";
 import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../Icons";
 
@@ -12,43 +13,44 @@ type Props = {
 
 const links = [
   {
-    icon: <HomeIcon className={classNames("icon", styles.icon)} />,
+    icon: <HomeIcon className={classNames("icon", styles.icon)} aria-hidden={true} />,
     text: "Home",
     href: "/",
   },
   {
-    icon: <NotesIcon className={classNames("icon", styles.icon)} />,
+    icon: <NotesIcon className={classNames("icon", styles.icon)} aria-hidden={true} />,
     text: "Notes",
-    href: "/notes/",
+    href: "/notes",
   },
   {
-    icon: <ProjectsIcon className={classNames("icon", styles.icon)} />,
+    icon: <ProjectsIcon className={classNames("icon", styles.icon)} aria-hidden={true} />,
     text: "Projects",
-    href: "/projects/",
+    href: "/projects",
   },
   {
-    icon: <ContactIcon className={classNames("icon", styles.icon)} />,
+    icon: <ContactIcon className={classNames("icon", styles.icon)} aria-hidden={true} />,
     text: "Contact",
-    href: "/contact/",
+    href: "/contact",
   },
 ];
 
-const Menu = ({ className }: Props) => (
+const Menu = ({ className }: Props) => {
+  const router = useRouter();
+
+  return (
     <ul className={classNames(styles.menu, className)}>
       {links.map((link, index) => (
         <li key={index} className={styles.menu_item}>
-        <Link href={link.href} prefetch={false}>
-          <a className={styles.link}>
-            {link.icon} <span className={styles.label}>{link.text}</span>
-          </a>
-        </Link>
+          {/* kinda weird/hacky way to determine if the *first part* of the current path matches this href */}
+          <MenuLink {...link} current={link.href === `/${router.pathname.split("/")[1]}`} />
         </li>
       ))}
 
-    <li className={classNames(styles.theme_toggle, styles.menu_item)}>
+      <li className={styles.menu_item}>
         <ThemeToggle className={styles.icon} />
       </li>
     </ul>
-);
+  );
+};
 
 export default memo(Menu);

components/MenuLink/MenuLink.module.css

@@ -0,0 +1,35 @@
+.link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--medium-dark);
+  line-height: 1;
+  padding: 0.6em;
+}
+
+.link:hover,
+.link.current {
+  border-bottom: 3px solid;
+  margin-bottom: -3px;
+}
+
+.link:hover {
+  border-color: var(--kinda-light);
+}
+
+.link.current {
+  border-color: var(--link-underline);
+}
+
+.label {
+  font-size: 0.95em;
+  font-weight: 500;
+  margin-top: 0.1em;
+  margin-left: 0.8em;
+}
+
+@media screen and (max-width: 768px) {
+  /* hide text next to emojis on mobile */
+  .label {
+    display: none;
+  }
+}

components/MenuLink/MenuLink.tsx

@@ -0,0 +1,24 @@
+import classNames from "classnames/bind";
+import Link from "next/link";
+import { ReactNode } from "react";
+
+import styles from "./MenuLink.module.css";
+const cx = classNames.bind(styles);
+
+type Props = {
+  href: string;
+  icon: ReactNode;
+  text: string;
+  current?: boolean;
+  className?: string;
+};
+
+const MenuLink = ({ href, icon, text, current, className }: Props) => (
+  <Link href={href} prefetch={false}>
+    <a className={cx(styles.link, { current: !!current }, className)}>
+      {icon} <span className={styles.label}>{text}</span>
+    </a>
+  </Link>
+);
+
+export default MenuLink;

components/RepositoryCard/RepositoryCard.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import { intlFormat, formatDistanceToNowStrict } from "date-fns";
 import { StarOcticon, ForkOcticon } from "../Icons";
-import { RepoType } from "../../types";
+import type { RepoType } from "../../types";
 
 import styles from "./RepositoryCard.module.css";
 

components/Selfie/Selfie.module.css

@@ -36,4 +36,12 @@
   .name {
     display: none;
   }
+
+  .selfie img {
+    border-width: 2px !important;
+  }
+
+  .link:hover .selfie img {
+    border-color: var(--link-underline) !important;
+  }
 }

components/Selfie/Selfie.tsx

@@ -5,7 +5,7 @@ import classNames from "classnames";
 
 import styles from "./Selfie.module.css";
 
-import meJpg from "../../public/static/images/me.jpg";
+import selfieJpg from "../../public/static/images/selfie.jpg";
 
 type Props = {
   className?: string;
@@ -15,7 +15,15 @@ const Selfie = ({ className }: Props) => (
   <Link href="/">
     <a className={classNames(styles.link, className)}>
       <div className={styles.selfie}>
-        <Image src={meJpg} alt="Photo of Jake Jarvis" width={70} height={70} quality={60} layout="intrinsic" priority />
+        <Image
+          src={selfieJpg}
+          alt="Photo of Jake Jarvis"
+          width={70}
+          height={70}
+          quality={60}
+          layout="intrinsic"
+          priority
+        />
       </div>
       <span className={styles.name}>Jake Jarvis</span>
     </a>

components/ThemeToggle/BulbIcon.tsx

@@ -1,37 +0,0 @@
-import { memo } from "react";
-import classNames from "classnames";
-
-type Props = {
-  on?: boolean;
-  className?: string;
-};
-
-// modified from Twemoji lightbulb:
-const BulbIcon = ({ on = false, className }: Props) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" className={classNames("icon", className)}>
-    <g fill="none">
-      <path
-        d="m30 11.376c0 6.6229714-5.2272727 7.6515429-5.2272727 13.824 0 3.1865143-3.2649546 3.4549714-5.75 3.4549714-2.1463182 0-6.8853637-.8012571-6.8853637-3.4570285 0-6.1693715-5.1373636-7.1979429-5.1373636-13.8219429 0-6.20331429 5.5252273-11.232 11.5867727-11.232 6.0636364 0 11.4132273 5.02868571 11.4132273 11.232z"
-        fill={on ? "#ffd983" : "#cccbcb"}
-      />
-      <path
-        d="m22.8564091 33.4285714c0 .8516572-2.3355455 2.5714286-4.3564091 2.5714286s-4.3564091-1.7197714-4.3564091-2.5714286c0-.8516571 2.3345-.5142857 4.3564091-.5142857 2.0208636 0 4.3564091-.3373714 4.3564091.5142857z"
-        fill={on ? "#b9c9d9" : "#ccd6dd"}
-      />
-      <path
-        d="m23.4209545 10.5870857c-.4087727-.4021714-1.0695-.4021714-1.4782727 0l-3.4426818 3.3870857-3.4426818-3.3870857c-.4087727-.4021714-1.0695-.4021714-1.4782727 0-.4087728.4021714-.4087728 1.0522286 0 1.4544l3.8755 3.8129143v10.8884571c0 .5688.4683636 1.0285715 1.0454545 1.0285715s1.0454545-.4597715 1.0454545-1.0285715v-10.8884571l3.8755-3.8129143c.4087728-.4021714.4087728-1.0522286 0-1.4544z"
-        fill={on ? "#ffcc4d" : "#7d7a72"}
-      />
-      <path
-        d="m24.7727273 31.8857143c0 1.1355428-.9367273 2.0571428-2.0909091 2.0571428h-8.3636364c-1.1541818 0-2.0909091-.9216-2.0909091-2.0571428v-6.1714286h12.5454546z"
-        fill="#99aab5"
-      />
-      <path
-        d="m12.2262273 32.9142857c-.5018182 0-.9450909-.3569143-1.0297728-.8598857-.0951363-.5595429.289591-1.0902857.8593637-1.1828571l12.5454545-2.0571429c.5687273-.1008 1.1081818.2849143 1.2022728.8454857.0951363.5595429-.289591 1.0902857-.8593637 1.1828572l-12.5454545 2.0571428c-.0575.0102857-.1160455.0144-.1725.0144zm0-4.1142857c-.5018182 0-.9450909-.3569143-1.0297728-.8598857-.0951363-.5595429.289591-1.0902857.8593637-1.1828572l12.5454545-2.0571428c.5687273-.0997714 1.1081818.2849143 1.2022728.8454857.0951363.5595429-.289591 1.0902857-.8593637 1.1828571l-12.5454545 2.0571429c-.0575.0102857-.1160455.0144-.1725.0144z"
-        fill="#ccd6dd"
-      />
-    </g>
-  </svg>
-);
-
-export default memo(BulbIcon);

components/ThemeToggle/ThemeToggle.module.css

@@ -1,6 +1,14 @@
 .button {
   border: 0;
-  padding: 0;
+  padding: 0.6em;
+  margin-right: -0.6em;
   background: none;
   cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  color: var(--medium-dark);
+}
+
+.button:hover {
+  color: var(--warning);
 }

components/ThemeToggle/ThemeToggle.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, memo } from "react";
 import { useTheme } from "next-themes";
-import BulbIcon from "./BulbIcon";
+import classNames from "classnames";
+import { SunIcon, MoonIcon } from "../Icons";
 
 import styles from "./ThemeToggle.module.css";
 
@@ -12,18 +13,27 @@ const ThemeToggle = ({ className }: Props) => {
   const [mounted, setMounted] = useState(false);
   const { resolvedTheme, setTheme } = useTheme();
 
-  // render a dummy bulb until we're fully mounted and self-aware
+  // render a dummy button until we're fully mounted and self-aware
   useEffect(() => setMounted(true), []);
-  if (!mounted) return <BulbIcon on={false} className={className} />;
+  if (!mounted) {
+    return (
+      <button className={styles.button} aria-hidden={true}>
+        <SunIcon className={classNames("icon", className)} />
+      </button>
+    );
+  }
 
   return (
     <button
       className={styles.button}
       onClick={() => setTheme(resolvedTheme === "light" ? "dark" : "light")}
       title={resolvedTheme === "light" ? "Toggle Dark Mode" : "Toggle Light Mode"}
-      aria-hidden={true}
     >
-      <BulbIcon on={resolvedTheme === "light"} className={className} />
+      {resolvedTheme === "light" ? (
+        <SunIcon className={classNames("icon", className)} />
+      ) : (
+        <MoonIcon className={classNames("icon", className)} />
+      )}
     </button>
   );
 };

next.config.js

@@ -49,12 +49,14 @@ module.exports = (phase, { defaultConfig }) => {
             path.resolve(__dirname, "components/icons"),
             // slight workaround to grab svg files from these packages directly instead of through their exports:
             path.resolve(__dirname, "node_modules/@primer/octicons/build/svg"),
+            path.resolve(__dirname, "node_modules/feather-icons/dist/icons"),
             path.resolve(__dirname, "node_modules/simple-icons/icons"),
             path.resolve(__dirname, "node_modules/twemoji/assets/svg"),
           ],
           use: [
             {
               loader: "@svgr/webpack",
+              /** @type {import('@svgr/webpack').LoaderOptions} */
               options: {
                 icon: true,
                 typescript: true,

package.json

@@ -38,6 +38,7 @@
     "escape-goat": "^4.0.0",
     "fathom-client": "^3.4.0",
     "faunadb": "^4.4.1",
+    "feather-icons": "^4.28.0",
     "feed": "^4.2.2",
     "formik": "^2.2.9",
     "gray-matter": "^4.0.3",

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>

styles/colors.css

@@ -14,6 +14,7 @@
   --link-underline: rgba(14, 109, 194, 0.4);
   --success: #44a248;
   --error: #ff1b1b;
+  --warning: #f78200;
 
   /* Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight */
   --code-text: #313131;
@@ -45,6 +46,7 @@
   --link-underline: rgba(136, 199, 255, 0.4);
   --success: #78df55;
   --error: #ff5151;
+  --warning: #f2b702;
 
   /* Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments */
   --code-text: #e4e4e4;

yarn.lock

@@ -2110,7 +2110,7 @@ character-reference-invalid@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
   integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
 
-classnames@^2.3.1:
+classnames@^2.2.5, classnames@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@@ -2256,6 +2256,11 @@ core-js-pure@^3.20.2:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.20.3.tgz#6cc4f36da06c61d95254efc54024fe4797fd5d02"
   integrity sha512-Q2H6tQ5MtPtcC7f3HxJ48i4Q7T9ybPKgvWyuH7JXIoNa2pm0KuBnycsET/qw1SLLZYfbsbrZQNMeIOClb+6WIA==
 
+core-js@^3.1.3:
+  version "3.20.3"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.20.3.tgz#c710d0a676e684522f3db4ee84e5e18a9d11d69a"
+  integrity sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag==
+
 cosmiconfig@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
@@ -3027,6 +3032,14 @@ faunadb@^4.4.1:
     object-assign "^4.1.0"
     util-deprecate "^1.0.2"
 
+feather-icons@^4.28.0:
+  version "4.28.0"
+  resolved "https://registry.yarnpkg.com/feather-icons/-/feather-icons-4.28.0.tgz#e1892a401fe12c4559291770ff6e68b0168e760f"
+  integrity sha512-gRdqKESXRBUZn6Nl0VBq2wPHKRJgZz7yblrrc2lYsS6odkNFDnA4bqvrlEVRUPjE1tFax+0TdbJKZ31ziJuzjg==
+  dependencies:
+    classnames "^2.2.5"
+    core-js "^3.1.3"
+
 feed@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/feed/-/feed-4.2.2.tgz#865783ef6ed12579e2c44bbef3c9113bc4956a7e"