Bug fixes and miscellaneous improvements (#8)

* Improved styling of Navbar

* Fixed initial width of svg render on homepage

* Added logos to homepage and favicons

* Updated config to use vite plugin explicitly with TanstackStart

* Separates .dockerignore to ensure it is used correctly in builds.

Author: andrew-s28

.dockerignore renamed to backend/.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+public
+mdx
+.github
+.output
+.tanstack
+.vscode
+db.sqlite3
+.env
+.venv

frontend/.dockerignore

@@ -20,6 +20,7 @@ const navStyles = {
     h-[3rem]
     rounded-full
     w-30
+    min-w-30
     transition-all
     dark:hover:bg-gray-600/20
     hover:bg-gray-300/50
@@ -49,21 +50,28 @@ export default function Navbar() {
       <nav
         className={cn(
           navStyles.nav,
-          "justify-between px-5 grid-cols-3 max-w-6xl hidden md:grid"
+          "justify-between px-5 grid-cols-3 max-w-6xl hidden md:grid-cols-[150px_1fr_150px] md:grid"
         )}
       >
         <Link
           to="/"
           activeProps={{ className: navStyles.active }}
           inactiveProps={{ className: navStyles.inactive }}
           activeOptions={{ exact: true }}
-          className="flex cursor-pointer items-center justify-center px-1 py-0 m-0 size-[3rem] rounded-full bg-transparent shadow-none border-solid focus-visible:ring-1 focus-visible:ring-blue-500 hover:bg-gray-600/20"
+          className="flex cursor-pointer items-center justify-center px-1 py-0 m-0 size-[3rem] rounded-full bg-transparent shadow-none border-solid focus-visible:ring-1 focus-visible:ring-blue-500 hover:bg-gray-600/20 justify-self-start"
           resetScroll
           aria-label="Home page link"
         >
-          <HomeIcon className="p-0" size={32} aria-label="Home icon" />
+          {/* <HomeIcon className="p-0" size={32} aria-label="Home icon" /> */}
+          <img src="/static/logo.svg" alt="Logo" className="h-8 dark:hidden" />
+          <img
+            src="/static/logo-light.svg"
+            alt="Logo"
+            className="h-8 hidden dark:inline"
+          />
+          <span className="sr-only">Home</span>
         </Link>
-        <div className="align-middle grow-0 flex px-5">
+        <div className="align-middle grow-0 flex px-5 justify-self-stretch justify-center">
           <Link
             to={BlogRoute.to}
             activeProps={{ className: navStyles.active }}
@@ -92,7 +100,7 @@ export default function Navbar() {
             About
           </Link>
         </div>
-        <div className="flex items-center justify-end grow-0">
+        <div className="flex items-center justify-self-end">
           <div className="px-2">
             <GitHub githubLink={"https://github.com/andrew-s28/"} />
           </div>

frontend/package-lock.json

@@ -84,7 +84,7 @@ export function initialTheme() {
   // https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management/#scripts
   return {
     children: `
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    let prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     if (!("theme" in localStorage)) {
       localStorage.setItem("theme", prefersDark ? "dark" : "light");
     }

frontend/src/components/Navbar.tsx

@@ -37,24 +37,47 @@ export const Route = createRootRoute({
     scripts: [initialTheme()],
     links: [
       { rel: "stylesheet", href: appCss },
+      // For iPhone
       {
         rel: "apple-touch-icon",
+        type: "image/png",
         sizes: "180x180",
-        href: "/apple-touch-icon.png",
+        href: "/public/favicon-180x180.png",
+      },
+      // For iPad
+      {
+        rel: "apple-touch-icon",
+        type: "image/png",
+        sizes: "167x167",
+        href: "/public/favicon-167x167.png",
+      },
+      // For Google and Android
+      {
+        rel: "icon",
+        type: "image/png",
+        sizes: "192x192",
+        href: "/public/favicon-192x192.png",
+      },
+      {
+        rel: "icon",
+        type: "image/png",
+        sizes: "48x48",
+        href: "/public/favicon-48x48.png",
       },
+      // For all browsers
       {
         rel: "icon",
         type: "image/png",
         sizes: "32x32",
-        href: "/favicon-32x32.png",
+        href: "/public/favicon-32x32.png",
       },
       {
         rel: "icon",
         type: "image/png",
         sizes: "16x16",
-        href: "/favicon-16x16.png",
+        href: "/public/favicon-16x16.png",
       },
-      { rel: "icon", href: "/favicon.ico" },
+      { rel: "icon", href: "/public/favicon.ico" },
       { rel: "preconnect", href: "https://fonts.googleapis.com" },
       {
         rel: "preconnect",

frontend/src/components/ThemeProvider.tsx

@@ -23,7 +23,7 @@ function zip(...arrays: (string[] | number[])[]): (string | number)[][] {
 
 function IntroCard() {
   return (
-    <div className="flex flex-col h-full align-middle justify-center m-5">
+    <div className="flex flex-col h-full align-middle justify-center m-2 translate-y-[-8px]">
       <motion.div
         initial={{ opacity: 0, translateY: 20 }}
         animate={{
@@ -33,13 +33,22 @@ function IntroCard() {
         }}
         exit={{ opacity: 0, translateY: 20 }}
       >
-        <div className="bg-night-sky-950 text-dawn-pink-100 rounded-3xl px-5 py-2 w-fit mx-auto">
+        <div className="dark:bg-night-sky-950 bg-dawn-pink-100 dark:text-dawn-pink-100 text-night-sky-950 rounded-3xl px-5 py-2 w-fit mx-auto">
           <h1 className="text-[clamp(2rem,6vw,4rem)] text-center font-serif ">
             Andrew Scherer
           </h1>
           <h2 className="text-center text-[clamp(1rem,1vw,2rem)]">
             Physical Oceanographer <br /> Software Developer
           </h2>
+          <div className="flex justify-center mt-2">
+            <Link to="/about" className="group" resetScroll>
+              <div className="rounded dark:bg-dawn-pink-100 bg-night-sky-950 px-4 dark:text-night-sky-950 text-dawn-pink-100">
+                <span className="group-hover:font-bold after:content-[attr(title)] after:font-bold after:h-0 after:block after:invisible after:overflow-hidden after:bg-transparent bg-transparent">
+                  Learn More
+                </span>
+              </div>
+            </Link>
+          </div>
         </div>
       </motion.div>
     </div>
@@ -62,7 +71,7 @@ function Starfield({ configs }: { configs: StarfieldConfig[] }) {
 
   const { width: widthInit } = useWidth();
   const { height: heightInit } = useHeight();
-  const width = widthInit || 1920; // Fallback to 1920 if width is not available
+  const width = widthInit || 10000; // Fallback to 10000 if width is not available
   const height = heightInit || 400; // Fallback to 400 if height is not available
   const prefersReducedMotion = usePrefersReducedMotion();
 
@@ -370,7 +379,7 @@ function Waves({
     "10 0 10-10 20-10 2.34 0 4.25 1.9 4.25 4.25 0-1.03-.84-1.87-1.88-1.87-2.1 0-3.81 1.7-3.81 3.81 0 2.1 1.71 3.81 3.81 3.81 ";
   const waveWidth = 125;
   const { width: widthInit } = useWidth();
-  const width = widthInit || 600; // Fallback to 600 if width is not available
+  const width = widthInit || 5000; // Fallback to 10000 if width is not available
   const waveRepeat = Math.max(Math.ceil(width / waveWidth), 10);
   const path = `M0 0C10 0 10-10 20-10c2.35 0 4.25 1.9 4.25 4.25 0-1.03-.84-1.87-1.87-1.87-2.11 0-3.81 1.7-3.81 3.81 0 2.1 1.7 3.81 3.81 3.81 ${wavePath.repeat(waveRepeat)}`;
   const color = `${backgroundColor || ""} ${strokeColor || ""}`;
@@ -575,10 +584,10 @@ function Background() {
         <NightSky />
       </div>
       <div className="absolute top-90 left-0">
-        <div className="flex h-30 justify-start w-full absolute animate-waves-top motion-reduce:animate-none motion-reduce:-translate-20">
+        <div className="flex h-30 justify-start w-full absolute animate-waves-top delay-1000 motion-reduce:animate-none motion-reduce:-translate-20">
           <Waves backgroundColor="fill-ocean-500" />
         </div>
-        <div className="flex h-30 justify-start w-full absolute animate-waves-middle motion-reduce:animate-none motion-reduce:-translate-10">
+        <div className="flex h-30 justify-start w-full absolute animate-waves-middle delay-1000 motion-reduce:animate-none motion-reduce:-translate-10">
           <Waves backgroundColor="fill-ocean-600" />
         </div>
         <div className="flex h-30 justify-start w-full absolute animate-waves-bottom">

frontend/src/routes/__root.tsx

@@ -19,9 +19,6 @@ body {
   overflow-x: hidden;
   margin-right: calc(-1 * (100vw - 100%));
 }
-/* li::before {
-  content: "▶";
-} */
 
 @theme {
   --breakpoint-xs: 420px;