Polishing touches and tweaks

web/config/tailwind.config.js

@@ -142,4 +142,16 @@ export const theme = {
 
 export const darkMode = ['class', '[data-theme="dark"]']
 export const plugins = [require('daisyui')]
-export const daisyui = { themes: ['light', 'dark'] }
+export const daisyui = {
+  themes: [
+    'light',
+    {
+      dark: {
+        ...require('daisyui/src/theming/themes')['dark'],
+        'base-100': '#212121',
+        'base-200': '#1d1d1d',
+        'base-300': '#191919',
+      },
+    },
+  ],
+}

web/src/components/ColorPicker/ColorPicker.tsx

@@ -22,6 +22,7 @@ const ColorPicker = ({ color, setColor }: ColorPickerProps) => {
           <HexColorInput color={color} className="w-16" />
         </label>
         <button
+          type="button"
           className="btn btn-square btn-sm"
           onClick={async () => {
             try {
@@ -35,6 +36,7 @@ const ColorPicker = ({ color, setColor }: ColorPickerProps) => {
           <Icon path={mdiContentCopy} className="size-4" />
         </button>
         <button
+          type="button"
           className="btn btn-square btn-sm  "
           onClick={async () => {
             try {

web/src/components/ContactCard/ContactCard/ContactCard.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useLayoutEffect } from 'react'
 
 import SocialLinksCell from 'src/components/Social/SocialLinksCell'
 
@@ -12,7 +12,7 @@ const ContactCard = ({ portraitUrl }: ContactCardProps) => {
 
   const observedDiv = useRef(null)
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!observedDiv.current) return
 
     const resizeObserver = new ResizeObserver(() => {

web/src/components/FormTextList/FormTextList.tsx

@@ -4,6 +4,7 @@ import Icon from '@mdi/react'
 
 interface FormTextListProps {
   name: string
+  hint?: string
   itemPlaceholder: string
   icon?: string
   list: string[]
@@ -13,6 +14,7 @@ interface FormTextListProps {
 
 const FormTextList = ({
   name,
+  hint,
   itemPlaceholder,
   icon,
   list,
@@ -23,8 +25,12 @@ const FormTextList = ({
     <div className="flex flex-col space-y-2 bg-base-100 rounded-xl">
       <div className="flex space-x-2 justify-between">
         <div className="flex items-center">
-          <p className="font-semibold">{name}</p>
+          <p className="font-semibold text-center">{name}</p>
         </div>
+        <div className="flex gap-2 items-center">
+          {hint && (
+            <p className="opacity-70 text-xs font-light text-center">{hint}</p>
+          )}
           <button
             className="btn btn-square btn-sm"
             type="button"
@@ -33,6 +39,7 @@ const FormTextList = ({
             <Icon path={mdiPlus} className="size-4" />
           </button>
         </div>
+      </div>
       {list.map((item, i) => (
         <label
           className={`input input-bordered pr-2 flex items-center space-x-2 w-full ${errors[i] && 'input-error'}`}
@@ -53,11 +60,11 @@ const FormTextList = ({
             }
           />
           <button
-            className="btn btn-square btn-sm flex-none"
+            className="btn btn-square btn-error btn-sm flex-none"
             type="button"
             onClick={() => setList(list.filter((_, j) => j !== i))}
           >
-            <Icon path={mdiDelete} className="size-4 text-error" />
+            <Icon path={mdiDelete} className="size-4" />
           </button>
         </label>
       ))}

web/src/components/Portrait/PortraitForm/PortraitForm.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 
 import { Meta, UploadResult } from '@uppy/core'
 import type {
@@ -56,13 +56,7 @@ const CREATE_PORTRAIT_MUTATION: TypedDocumentNode<
 `
 
 const PortraitForm = ({ portrait }: PortraitFormProps) => {
-  const [fileId, _setFileId] = useState<string>(portrait?.fileId)
+  const [fileId, setFileId] = useState<string>(portrait?.fileId)
-  const fileIdRef = useRef<string>(fileId)
-
-  const setFileId = (fileId: string) => {
-    _setFileId(fileId)
-    fileIdRef.current = fileId
-  }
 
   const unloadAbortController = new AbortController()
 
@@ -96,7 +90,7 @@ const PortraitForm = ({ portrait }: PortraitFormProps) => {
     setFileId(result.successful[0]?.uploadURL)
     window.addEventListener(
       'beforeunload',
-      (e) => handleBeforeUnload(e, [fileIdRef.current]),
+      (e) => handleBeforeUnload(e, [fileId]),
       {
         once: true,
         signal: unloadAbortController.signal,

web/src/components/Project/Project/Project.tsx

@@ -46,18 +46,23 @@ const Project = ({ project }: Props) => {
           <>
             <h2 className="font-bold text-3xl w-fit">Links</h2>
             <div className="flex flex-col gap-2 w-fit">
+              <ul className="list-none">
                 {project.links.map((link, i) => (
+                  <li key={i}>
+                    <div className="flex gap-2 items-center justify-start">
+                      <Icon path={mdiLinkVariant} className="size-4" />
                       <a
-                  key={i}
                         href={link}
                         target="_blank"
                         rel="noreferrer"
-                  className="btn btn-wide"
+                        className="list-item link link-hover"
                       >
-                  <Icon path={mdiLinkVariant} className="size-5" />
                         {link}
                       </a>
+                    </div>
+                  </li>
                 ))}
+              </ul>
             </div>
           </>
         )}

web/src/components/Project/ProjectForm/ProjectForm.tsx

@@ -198,6 +198,7 @@ const ProjectForm = (props: ProjectFormProps) => {
       <div className={`${!pickerVisible && 'pt-2'}`}>
         <FormTextList
           name="Links"
+          hint="Short links are recommended"
           itemPlaceholder="URL"
           icon={mdiLinkVariant}
           list={links}
@@ -246,16 +247,13 @@ const ProjectForm = (props: ProjectFormProps) => {
                       <div className="card-actions rounded-md justify-end">
                         <button
                           type="button"
-                          className="btn btn-square btn-sm shadow-xl"
+                          className="btn btn-square btn-sm btn-error shadow-xl"
                           onClick={() => {
                             setToDelete([...toDelete, fileId])
                             setFileIds(fileIds.filter((id) => id !== fileId))
                           }}
                         >
-                          <Icon
+                          <Icon path={mdiDelete} className="size-4" />
-                            path={mdiDelete}
-                            className="size-4 text-error"
-                          />
                         </button>
                       </div>
                     </div>

web/src/components/Resume/ResumeForm/ResumeForm.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 
 import { Meta, UploadResult } from '@uppy/core'
 import type {
@@ -55,13 +55,7 @@ const CREATE_RESUME_MUTATION: TypedDocumentNode<
 `
 
 const ResumeForm = ({ resume }: ResumeFormProps) => {
-  const [fileId, _setFileId] = useState<string>(resume?.fileId)
+  const [fileId, setFileId] = useState<string>(resume?.fileId)
-  const fileIdRef = useRef<string>(fileId)
-
-  const setFileId = (fileId: string) => {
-    _setFileId(fileId)
-    fileIdRef.current = fileId
-  }
 
   const unloadAbortController = new AbortController()
 
@@ -95,7 +89,7 @@ const ResumeForm = ({ resume }: ResumeFormProps) => {
     setFileId(result.successful[0]?.uploadURL)
     window.addEventListener(
       'beforeunload',
-      (e) => handleBeforeUnload(e, [fileIdRef.current]),
+      (e) => handleBeforeUnload(e, [fileId]),
       {
         once: true,
         signal: unloadAbortController.signal,

web/src/components/ThemeToggle/ThemeToggle.tsx

@@ -8,7 +8,7 @@ const DARK_THEME = 'dark'
 
 const ThemeToggle = () => {
   const [theme, setTheme] = useState(
-    localStorage.getItem('theme') ? localStorage.getItem('theme') : LIGHT_THEME
+    localStorage.getItem('theme') ?? LIGHT_THEME
   )
 
   const handleToggle = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -37,13 +37,8 @@ const ThemeToggle = () => {
         checked={theme === DARK_THEME}
         onChange={handleToggle}
       />
-
+      <Icon path={mdiWeatherSunny} className="swap-off size-8 text-warning" />
-      <Icon
+      <Icon path={mdiWeatherNight} className="swap-on size-8 text-primary" />
-        path={mdiWeatherSunny}
-        className="swap-off size-8 text-yellow-500"
-      />
-
-      <Icon path={mdiWeatherNight} className="swap-on size-8 text-blue-500" />
     </label>
   )
 }

web/src/components/Title/Titles/Titles.tsx

@@ -23,6 +23,12 @@ export const Titles = ({ titles, className }: TitlesProps) => {
               backDelay={1000}
               startWhenVisible
               loop
+              onStringTyped={(pos, self) => {
+                if (pos === 0) {
+                  self.stop()
+                  setTimeout(() => self.start(), 2500)
+                }
+              }}
             />
           </>
         )}

web/src/components/Title/TitlesForm/TitlesForm.tsx

@@ -56,6 +56,9 @@ const TitlesForm = ({ titles }: TitlesFormProps) => {
 
   return (
     <Form onSubmit={onSubmit} className="max-w-80 space-y-2">
+      <p className="text-center opacity-70">
+        The first one gets displayed for longer
+      </p>
       {Array.from({ length: MAX_TITLES }).map((_, i) => (
         <Label key={i} name={`title${i}`} className="form-control w-full">
           <Label

web/src/lib/tus.ts

@@ -8,9 +8,8 @@ export const deleteFile = async (fileId: string) => {
   })
 }
 
-export const handleBeforeUnload = (_e: BeforeUnloadEvent, files: string[]) => {
+export const handleBeforeUnload = (_e: BeforeUnloadEvent, files: string[]) =>
   batchDelete(files)
-}
 
 export const batchDelete = (files: string[]) => {
   for (const file of files) deleteFile(file)

web/src/pages/HomePage/HomePage.tsx

@@ -1,3 +1,7 @@
+import { mdiCompass, mdiContacts } from '@mdi/js'
+import Icon from '@mdi/react'
+
+import { Link, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
 
 import TitlesCell from 'src/components/Title/TitlesCell'
@@ -7,11 +11,27 @@ const HomePage = () => {
     <>
       <Metadata title="Home" />
 
-      <div className="hero min-h-64">
+      <div className="hero min-h-[calc(100vh-6rem)]">
-        <div className="hero-content">
+        <div className="hero-content flex flex-col gap-8">
-          <div className="max-w-xl text-center">
+          <div className="text-center">
             <TitlesCell className="text-primary" />
           </div>
+          <div className="flex gap-2">
+            <Link
+              to={routes.projects()}
+              className="btn btn-primary btn-outline sm:btn-wide btn-lg"
+            >
+              <Icon path={mdiCompass} className="size-6" />
+              Explore
+            </Link>
+            <Link
+              to={routes.contact()}
+              className="btn btn-primary btn-outline sm:btn-wide btn-lg"
+            >
+              <Icon path={mdiContacts} className="size-6" />
+              Contact
+            </Link>
+          </div>
         </div>
       </div>
     </>