remove css reset as a dependency

components/Header/Header.module.css

@@ -14,22 +14,22 @@
   backdrop-filter: saturate(180%) blur(5px);
 }
 
-.homeImage {
+.avatar {
   width: 50px;
   height: 50px;
   border: 1px solid var(--colors-light);
   border-radius: 50%;
 }
 
-.homeLink {
+.home {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--colors-medium-dark) !important;
 }
 
-.homeLink:hover,
-.homeLink:focus-visible {
+.home:hover,
+.home:focus-visible {
   color: var(--colors-link) !important;
 }
 
@@ -56,14 +56,14 @@
     height: 5.9em;
   }
 
-  .homeImage {
+  .avatar {
     width: 70px;
     height: 70px;
     border-width: 2px;
   }
 
-  .homeLink:hover .homeImage,
-  .homeLink:focus-visible .homeImage {
+  .home:hover .avatar,
+  .home:focus-visible .avatar {
     border-color: var(--colors-link-underline);
   }
 

components/Header/Header.tsx

@@ -7,7 +7,7 @@ import type { ComponentPropsWithoutRef } from "react";
 
 import styles from "./Header.module.css";
 
-import selfieJpg from "./selfie.jpg";
+import avatarImg from "../../app/avatar.jpg";
 
 export type HeaderProps = ComponentPropsWithoutRef<"header">;
 
@@ -15,11 +15,11 @@ const Header = ({ className, ...rest }: HeaderProps) => {
   return (
     <header className={clsx(styles.header, className)} {...rest}>
       <nav className={styles.nav}>
-        <Link href="/" rel="author" aria-label={config.authorName} plain className={styles.homeLink}>
+        <Link href="/" rel="author" aria-label={config.authorName} plain className={styles.home}>
           <Image
-            src={selfieJpg}
+            src={avatarImg}
             alt={`Photo of ${config.authorName}`}
-            className={styles.homeImage}
+            className={styles.avatar}
             width={70}
             height={70}
             quality={50}

components/Menu/Menu.module.css

@@ -4,7 +4,7 @@
   margin: 0;
 }
 
-.menuItem {
+.item {
   display: inline-block;
   margin-left: 1em;
   list-style: none;
@@ -17,7 +17,7 @@
     margin-left: 1em;
   }
 
-  .menuItem {
+  .item {
     margin-left: 0;
   }
 }
@@ -28,7 +28,7 @@
   }
 
   /* the home icon is kinda redundant when space is SUPER tight */
-  .menuItem:first-of-type {
+  .item:first-of-type {
     display: none;
   }
 }

components/Menu/Menu.tsx

@@ -21,13 +21,13 @@ const Menu = ({ className, ...rest }: MenuProps) => {
         const isCurrent = item.href === `/${pathname.split("/")[1]}`;
 
         return (
-          <li className={styles.menuItem} key={item.text || index}>
+          <li className={styles.item} key={item.text || index}>
             <MenuItem {...item} current={isCurrent} />
           </li>
         );
       })}
 
-      <li className={styles.menuItem}>
+      <li className={styles.item}>
         <MenuItem
           // @ts-expect-error
           icon={ThemeToggle}