pre-render optimizations

components/Header/Header.module.css

@@ -14,22 +14,22 @@
   backdrop-filter: saturate(180%) blur(5px);
 }
 
-.selfieImage {
+.homeImage {
   width: 50px;
   height: 50px;
   border: 1px solid var(--colors-light);
   border-radius: 50%;
 }
 
-.selfieLink {
+.homeLink {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--colors-mediumDark) !important;
 }
 
-.selfieLink:hover,
-.selfieLink:focus-visible {
+.homeLink:hover,
+.homeLink:focus-visible {
   color: var(--colors-link) !important;
 }
 
@@ -46,7 +46,6 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  max-width: var(--sizes-maxLayoutWidth);
   margin: 0 auto;
 }
 
@@ -56,14 +55,14 @@
     height: 5.9em;
   }
 
-  .selfieImage {
+  .homeImage {
     width: 70px;
     height: 70px;
     border-width: 2px;
   }
 
-  .selfieLink:hover .selfieImage,
-  .selfieLink:focus-visible .selfieImage {
+  .homeLink:hover .homeImage,
+  .homeLink:focus-visible .homeImage {
     border-color: var(--colors-linkUnderline);
   }
 

components/Header/Header.tsx

@@ -2,7 +2,8 @@ import clsx from "clsx";
 import Link from "../Link";
 import Image from "../Image";
 import Menu from "../Menu";
-import config from "../../lib/config";
+import * as config from "../../lib/config";
+import { MAX_WIDTH } from "../../lib/config/constants";
 import type { ComponentPropsWithoutRef } from "react";
 
 import styles from "./Header.module.css";
@@ -14,12 +15,12 @@ export type HeaderProps = ComponentPropsWithoutRef<"header">;
 const Header = ({ className, ...rest }: HeaderProps) => {
   return (
     <header className={clsx(styles.header, className)} {...rest}>
-      <nav className={styles.nav}>
-        <Link href="/" rel="author" title={config.authorName} plain className={styles.selfieLink}>
+      <nav className={styles.nav} style={{ maxWidth: MAX_WIDTH }}>
+        <Link href="/" rel="author" title={config.authorName} plain className={styles.homeLink}>
           <Image
             src={selfieJpg}
             alt={`Photo of ${config.authorName}`}
-            className={styles.selfieImage}
+            className={styles.homeImage}
             width={70}
             height={70}
             quality={60}