Codebase general review

.github/workflows/deploy.yml

@@ -25,7 +25,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - run: npm install
+      - run: npm ci
       - run: npm run build
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3

package.json

@@ -5,10 +5,12 @@
     "stage": "surge . chrisbolin.surge.sh"
   },
   "dependencies": {
-    "eslint-config-next": "^14.2.6",
-    "next": "^14.2.6",
+    "next": "^14.2.35",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
+  "devDependencies": {
+    "eslint-config-next": "^14.2.35"
+  },
   "license": "MIT"
 }

pages/_app.js

@@ -1,4 +1,4 @@
-require("./style.css");
+import "./style.css";
 
 export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />;

pages/style.css

@@ -162,7 +162,7 @@ hr {
   font-size: 21vw;
   display: inline-block;
   text-align: center;
-  max-width: 50wv;
+  max-width: 50vw;
 }
 
 button {

src/head.js

@@ -6,11 +6,11 @@ export default () => (
     <title>Chris Bolin</title>
 
     <meta
-      name="Description"
+      name="description"
       content="Chris Bolin is a software engineer and artist based in Denver."
     />
 
-    <link rel="icon" sizes="16x16 32x32 64x64" href="favicon.ico" />
+    <link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico" />
 
     <meta
       name="viewport"

src/link.js

@@ -51,22 +51,38 @@ const links = {
   email: "mailto:chrisbolin@protonmail.com",
 };
 
-const Link = ({ name, children }) => (
-  <a
-    href={links[name] || console.error("NOT FOUND:", name, children)}
-    rel="noopener noreferrer"
-    className="Link"
-    children={children}
-  />
-);
+const Link = ({ name, children }) => {
+  const href = links[name];
+  if (!href && process.env.NODE_ENV !== "production") {
+    // Avoid side-effects during render in production; still warn in dev.
+    // eslint-disable-next-line no-console
+    console.error("Link not found:", name, children);
+  }
+
+  return (
+    <a
+      href={href || "#"}
+      rel="noopener noreferrer"
+      className="Link"
+      aria-disabled={!href}
+      onClick={(e) => {
+        if (!href) e.preventDefault();
+      }}
+    >
+      {children}
+    </a>
+  );
+};
 
 export const ClientOnlyLink = (props) => {
   const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), [setMounted]);
+  useEffect(() => setMounted(true), []);
   if (mounted) return <Link {...props} />; // if mounted on client, render as usual
-  return false; // if rendered on server
+  return null; // if rendered on server
 };
 
-export const LinkButton = (props) => <button className="Button" {...props} />;
+export const LinkButton = (props) => (
+  <button type="button" className="Button" {...props} />
+);
 
 export default Link;

src/themes/card/back.js

@@ -1,27 +1,21 @@
-import { useState, useContext } from "react";
-
 import Content from "../../content";
+import { ChangeThemeButton } from "../theme-context";
 
 export default function Back({ x, style }) {
   const minX = 0.6;
   if (x < minX) return null;
-  // Text does not show until minX
-  const display = x > minX ? null : "none";
   const progress = (x - minX) / (1 - minX);
-  const [activeSection, setActiveSection] = useState(null);
-  const clearActiveSection = (e) => {
-    setActiveSection(null);
-    e.stopPropagation();
-  };
   const combinedStyle = {
-    display,
     opacity: progress,
     filter: `brightness(${progress})`,
     ...style,
   };
 
   return (
     <div className="CleanBack" style={combinedStyle}>
+      <div style={{ textAlign: "right" }}>
+        <ChangeThemeButton />
+      </div>
       <div className="content">
         <Content />
       </div>

src/themes/card/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useCallback } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 
 import { limitUnit, isMobile } from "../../utils/general";
 import Back from "./back";
@@ -11,16 +11,6 @@ const colors = [
   { value: "var(--color-e)", barXScale: 3.5, gradientPosition: "100%" },
 ];
 
-const radialBackground = `
-  radial-gradient(
-    circle at top right,
-    black 0%,
-    ${colors.map(
-      ({ value, gradientPosition }) => `${value} ${gradientPosition}`
-    )}
-    )
-`;
-
 const ColorBar = ({ x, width, left, color }) => {
   const height = limitUnit(x) * 100;
   return (
@@ -49,7 +39,7 @@ const CardFront = ({ x, mounted }) => {
         wannabe polymath
         <hr />
       </div>
-      <div className={`scroll ${mounted || "hidden"}`} style={scrollStyle}>
+      <div className={`scroll ${mounted ? "" : "hidden"}`} style={scrollStyle}>
         (scroll)
       </div>
       {colors.map(({ value, barXScale }, index) => (
@@ -142,34 +132,38 @@ const SkipLink = () => (
   </a>
 );
 
-const SkipDestination = () => <div id="down"></div>;
+const SkipDestination = () => <div id="down" tabIndex={-1}></div>;
 
 export default () => {
   const [x, setX] = useState(0);
   const [mounted, setMounted] = useState(false);
+  // Keep server/client initial render consistent; decide mobile-only after mount.
+  const [scrollLength, setScrollLength] = useState(3);
 
-  const scrollLength = useMemo(() => (isMobile() ? 1.5 : 3));
-  const handleScroll = useCallback(
-    () =>
-      setX(
-        limitUnit(window.scrollY / (window.innerHeight * (scrollLength - 1)))
-      ),
-    [setX]
-  );
+  const handleScroll = useCallback(() => {
+    setX(
+      limitUnit(window.scrollY / (window.innerHeight * (scrollLength - 1)))
+    );
+  }, [scrollLength]);
+
+  useEffect(() => {
+    setScrollLength(isMobile() ? 1.5 : 3);
+  }, []);
 
   useEffect(() => {
-    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("scroll", handleScroll, { passive: true });
     window.addEventListener("resize", handleScroll);
-    window.addEventListener("touchmove", handleScroll);
+    window.addEventListener("touchmove", handleScroll, { passive: true });
 
     setMounted(true);
+    handleScroll();
 
     return () => {
       window.removeEventListener("scroll", handleScroll);
       window.removeEventListener("resize", handleScroll);
       window.removeEventListener("touchmove", handleScroll);
     };
-  }, [setMounted]);
+  }, [handleScroll]);
 
   const backgroundTransitionPoint = 0.95;
   const backgroundAlpha =

src/themes/simple/index.js

@@ -1,5 +1,17 @@
-import { Main, Make, Talk, Work } from "../../content";
+import React from "react";
+
+import Content from "../../content";
+import { ChangeThemeButton } from "../theme-context";
 
 export default function SimpleApp() {
-  return;
+  return (
+    <div className="CleanBack">
+      <div style={{ textAlign: "right" }}>
+        <ChangeThemeButton />
+      </div>
+      <div className="content">
+        <Content />
+      </div>
+    </div>
+  );
 }

src/themes/theme-context.js

@@ -6,7 +6,10 @@ export const THEME_SIMPLE = "THEME_SIMPLE";
 
 const THEME_DEFAULT = THEME_CARD;
 
-const ThemeContext = createContext();
+const ThemeContext = createContext({
+  theme: THEME_DEFAULT,
+  changeTheme: () => {},
+});
 
 export const ThemeProvider = ({ children }) => {
   const [theme, setTheme] = useState(THEME_DEFAULT);

src/utils/general.js

@@ -4,7 +4,7 @@ export const limitUnit = (x) => limit(x, 0, 1);
 
 export const isMobile = () => {
   if (typeof navigator === "undefined") return false;
-  return navigator.userAgent.match(/Mobile|iP(hone|od|ad)|Android|IEMobile/);
+  return !!navigator.userAgent.match(/Mobile|iP(hone|od|ad)|Android|IEMobile/);
 };
 
 const WINDOW_FALLBACK = {