Add customizable title

src/app/sections/Introduction.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image"
 import type { ComponentProps } from "react"
 import portrait from "public/portrait.jpg"
+import { CustomizableTitle } from "src/components/miscellaneous/CustomizableTitle"
 import { TofuPolaroid } from "src/components/miscellaneous/TofuPolaroid"
 import { Characters } from "src/components/utils/Characters"
 
@@ -26,20 +27,20 @@ export function Introduction(props: ComponentProps<"section">) {
           </div>
           <TofuPolaroid className="bottom-[-4.35rem] right-[-3.65rem] w-[8.5rem]" />
         </div>
-        <h1 className="mb-1 mt-5 text-2xl font-semibold text-gray-800 dark:text-white">
+        <h1 className="mb-2.5 mt-5 text-2xl font-semibold text-gray-800 dark:text-white">
           Marc Bouchenoire
         </h1>
-        <p className="text-lg text-gray-400 dark:text-gray-450">
-          Detail-obsessed Design Engineer
+        <p className="text-lg leading-none text-gray-400 dark:text-gray-450">
+          Detail-obsessed <CustomizableTitle />
         </p>
       </div>
-      <div className="my-10 text-gray-500 dark:text-gray-350">
+      <div className="mb-10 mt-11 text-gray-500 dark:text-gray-350">
         <p className="my-4 max-w-[64ch] leading-loose">
           Designing and building{" "}
           <em className="delightful cursor-text">
             <Characters>delightful</Characters>
           </em>{" "}
-          products, interfaces, and&nbsp;APIs.
+          products, interactions, and&nbsp;APIs.
         </p>
         <p className="my-4 max-w-[56ch] leading-loose">
           I’m currently living in Amsterdam and working on collaborative

src/components/miscellaneous/CustomizableTitle.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { clsx } from "clsx"
+import { useCallback, useState } from "react"
+import type { ChangeEvent, ComponentProps } from "react"
+
+interface CustomizableTitleSelectProps extends ComponentProps<"span"> {
+  /**
+   * The options to select from.
+   */
+  options: string[]
+}
+
+/**
+ * A custom `select` component.
+ *
+ * @param props - A set of `span` props.
+ * @param props.options - The options to select from.
+ * @param [props.className] - A list of one or more classes.
+ */
+function CustomizableTitleSelect({
+  options,
+  className,
+  ...props
+}: CustomizableTitleSelectProps) {
+  const [value, setValue] = useState(options[0])
+
+  const handleChange = useCallback((event: ChangeEvent<HTMLSelectElement>) => {
+    setValue(event.target.value)
+  }, [])
+
+  return (
+    <span
+      className={clsx(
+        className,
+        "focusable-within tra relative m-[-0.1ch] inline-block rounded-sm p-[0.1ch] transition duration-100"
+      )}
+      {...props}
+    >
+      <span aria-hidden className="pointer-events-none">
+        {value}
+        <span className="text-gray-300 dark:text-gray-550">*</span>
+      </span>
+      <select
+        className="absolute inset-0 h-full w-full cursor-context-menu opacity-0"
+        onChange={handleChange}
+        value={value}
+      >
+        {options.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    </span>
+  )
+}
+
+/**
+ * Display a customizable 2-word title.
+ *
+ * @param props - A set of `span` props.
+ */
+export function CustomizableTitle(props: ComponentProps<"span">) {
+  return (
+    <span {...props}>
+      <CustomizableTitleSelect
+        options={["Design", "Product", "Interaction", "API"]}
+      />{" "}
+      <CustomizableTitleSelect
+        options={["Engineer", "Designer", "Crafter", "Connoisseur"]}
+      />
+    </span>
+  )
+}

src/styles/main.css

@@ -133,6 +133,10 @@
     @apply box-decoration-clone focus:!decoration-transparent focus:outline-none focus:ring focus:ring-gray-500/40 dark:focus:ring-gray-400/40;
   }
 
+  .focusable-within {
+    @apply box-decoration-clone focus-within:!decoration-transparent focus-within:outline-none focus-within:ring focus-within:ring-gray-500/40 dark:focus-within:ring-gray-400/40;
+  }
+
   .highlight::after {
     @apply pointer-events-none absolute inset-0 z-10;
 
@@ -150,7 +154,7 @@
   }
 
   .polaroid-highlight::after {
-    @apply shadow-polaroid pointer-events-none absolute inset-0 z-10;
+    @apply pointer-events-none absolute inset-0 z-10 shadow-polaroid;
 
     content: "";
     border-radius: inherit;