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
2026-04-17 09:28:43 -04:00 · 2022-01-27 10:06:26 -05:00
parent f1e2917b08
commit 283eb62446
38 changed files with 193 additions and 177 deletions
--- a/components/ContactForm/ContactForm.module.css
+++ b/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;
--- a/components/Header/Header.module.css
+++ b/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;
  }
 }
--- a/components/Icons/index.ts
+++ b/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";
--- a/components/Menu/Menu.module.css
+++ b/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;
  }
--- a/components/Menu/Menu.tsx
+++ b/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) => (
-  <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>
-      </li>
-    ))}
+const Menu = ({ className }: Props) => {
+  const router = useRouter();

-    <li className={classNames(styles.theme_toggle, styles.menu_item)}>
-      <ThemeToggle className={styles.icon} />
-    </li>
-  </ul>
-);
+  return (
+    <ul className={classNames(styles.menu, className)}>
+      {links.map((link, index) => (
+        <li key={index} className={styles.menu_item}>
+          {/* 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={styles.menu_item}>
+        <ThemeToggle className={styles.icon} />
+      </li>
+    </ul>
+  );
+};

 export default memo(Menu);
--- a/components/MenuLink/MenuLink.module.css
+++ b/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;
+  }
+}
--- a/components/MenuLink/MenuLink.tsx
+++ b/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;
--- a/components/RepositoryCard/RepositoryCard.tsx
+++ b/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";

--- a/components/Selfie/Selfie.module.css
+++ b/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;
+  }
 }
--- a/components/Selfie/Selfie.tsx
+++ b/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>
--- a/components/ThemeToggle/BulbIcon.tsx
+++ b/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);
--- a/components/ThemeToggle/ThemeToggle.module.css
+++ b/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);
 }
--- a/components/ThemeToggle/ThemeToggle.tsx
+++ b/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>
  );
 };