feat: [Design refresh] new fonts + colors + dynamic favicon + pretty …

…error page (#471)

Closes DG-164, DG-165

## What changed? Why?
Huge design refresh for fonts, colors, and dynamic favicons. There's
also a much better floral error page because plants are cool.

| Before | After |
|--------|--------|
| ![dark
before](https://github.com/user-attachments/assets/796652a9-7e92-4930-b3bf-863e4a8189b1)
| ![dark
after](https://github.com/user-attachments/assets/23e318ae-5fa6-409c-ac45-6e4f88330cc7)
|
| ![light
before](https://github.com/user-attachments/assets/6cd8924e-cb04-4a8e-b0bb-61effc85d606)
| ![light
after](https://github.com/user-attachments/assets/23ea9fda-0f14-4643-96df-6c1a42207557)
|
|
![image](https://github.com/user-attachments/assets/79e64692-991c-4799-b609-b8af38eb7bad)
|
![image](https://github.com/user-attachments/assets/52094b4f-c442-451e-b996-ab6e855df647)
|

apps/web/public/manifest.webmanifest

@@ -0,0 +1,12 @@
+{
+  "name": "Dylan Gattey",
+  "short_name": "DG",
+  "lang": "en",
+  "background_color": "#022F31",
+  "theme_color": "#F6A56F",
+  "display": "standalone",
+  "icons": [
+    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
+    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
+  ]
+}

apps/web/src/api/endpoints.ts

@@ -1,7 +1,6 @@
 import { fetchFooterLinks } from 'api/contentful/fetchFooterLinks';
 import { fetchIntroContent } from 'api/contentful/fetchIntroContent';
 import { fetchCurrentLocation } from 'api/contentful/fetchCurrentLocation';
-import { fetchPrivacyContent } from 'api/contentful/fetchPrivacyContent';
 import { fetchProjects } from 'api/contentful/fetchProjects';
 import { fetchRepoVersion } from 'api/github/fetchRepoVersion';
 import { fetchRecentlyPlayed } from 'api/spotify/fetchRecentlyPlayed';
@@ -32,9 +31,6 @@ export const endpoints = {
   // Intro block of content via Contentful
   intro: fetchIntroContent,
 
-  // Privacy block of content via Contentful
-  privacy: fetchPrivacyContent,
-
   // My current location via Contentful
   location: fetchCurrentLocation,
 

apps/web/src/components/Footer.tsx

@@ -48,7 +48,11 @@ export function Footer() {
   return (
     <Container component={Section} sx={{ padding: 0, marginTop: 12 }}>
       <footer>
-        <Divider sx={{ marginBottom: 3 }} />
+        <Divider
+          sx={{
+            marginBottom: 3,
+          }}
+        />
         <Nav
           sx={(theme) => ({
             flexDirection: 'row',
@@ -64,7 +68,7 @@ export function Footer() {
             <NavItem sx={{ padding: 0 }}>•</NavItem>
             <NavItem>{version}</NavItem>
           </NavGroup>
-          <NavGroup component="div" sx={{ columnGap: 4 }}>
+          <NavGroup component="div" sx={{ columnGap: 2 }}>
             <HorizontalStack component="ul" sx={{ padding: 0, margin: 0 }}>
               {nonIconFooterLinks?.map((link) => <FooterLink key={link.url} link={link} />)}
             </HorizontalStack>

apps/web/src/components/Header.tsx

@@ -39,7 +39,7 @@ export function Header({ headerRef }: HeaderProps) {
           sx={(theme) => ({
             backdropFilter: 'blur(16px) saturate(160%) contrast(110%)',
             backgroundColor: isScrolled
-              ? alpha(theme.palette.card.background, 0.85)
+              ? alpha(theme.palette.background.paper, 0.85)
               : theme.vars.palette.background.default,
             boxShadow: isScrolled ? theme.vars.extraShadows.card.hovered : 'none',
             willChange: 'box-shadow, background-color',

apps/web/src/components/Meta.tsx

@@ -1,8 +1,8 @@
-import type { Theme } from '@mui/material';
 import { useTheme } from '@mui/material';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
+import { useColorScheme } from 'ui/theme/useColorScheme';
 
 type MetaProps = {
   /**
@@ -28,63 +28,6 @@ export const HOMEPAGE_TITLE = 'Engineer. Problem Solver.';
 const OG_IMAGE_API_ROUTE = 'api/og';
 const GRAPH_PREFIXES = ['og', 'twitter'] as const;
 
-/**
- * Helps reduce duplication for creation of link elements
- */
-const linkFromSize = (size: string, fileType: string, rel = 'icon') => (
-  <link
-    href={`/icons/${fileType}-${size}.png`}
-    key={`${size}${fileType}link`}
-    rel={rel}
-    sizes={`${size}x${size}`}
-  />
-);
-
-/**
- * Helps reduce duplication for creation of meta elements
- */
-const metaFromSize = (size: string, fileType: string, name: string) => (
-  <meta content={`/icons/${fileType}-${size}.png`} key={`${size}${fileType}meta`} name={name} />
-);
-
-/**
- * Organizes and maps icon file sizes/names to their created elements - keep this
- * up to date with everything in public/icons/*.png
- */
-const ICONS = {
-  generic: {
-    variants: [32, 144, 192, 228],
-    element: (size: string) => linkFromSize(size, 'favicon'),
-  },
-  android: {
-    variants: [96, 128, 144, 192, 196, 512],
-    element: (size: string) => linkFromSize(size, 'prerounded'),
-  },
-  ios: {
-    variants: [57, 76, 120, 152, 167, 180, 512, 1024],
-    element: (size: string) => linkFromSize(size, 'touch-icon', 'apple-touch-icon'),
-  },
-  windows: {
-    variants: [144],
-    element: (size: string) => metaFromSize(size, 'favicon', 'msapplication-TileImage'),
-  },
-  thumbnail: {
-    variants: [152],
-    element: (size: string) => metaFromSize(size, 'touch-icon', 'thumbnail'),
-  },
-  mask: {
-    variants: ['safari-pinned-tab.svg'],
-    element: (name: string, theme: Theme) => (
-      <link
-        color={theme.vars.palette.primary.main}
-        href={`/icons/${name}`}
-        key={`${name}mask`}
-        rel="mask-icon"
-      />
-    ),
-  },
-} as const;
-
 /**
  * Small helper to create og: and twitter: elements for keys + content
  */
@@ -104,6 +47,7 @@ export function Meta({ title, description }: MetaProps) {
   const router = useRouter();
   const [pageUrl, setPageUrl] = useState('');
   const [baseUrl, setBaseUrl] = useState('');
+  const { colorScheme } = useColorScheme();
 
   useEffect(() => {
     const { host } = window.location;
@@ -139,16 +83,24 @@ export function Meta({ title, description }: MetaProps) {
         url: pageUrl,
         image: `${baseUrl}/${OG_IMAGE_API_ROUTE}/${imageTitle}?subtitle=${imageSubtitle}`,
       })}
-      <link href="/favicon.ico" key="favicon" rel="icon" />
       <meta content={theme.vars.palette.background.default} key="theme-color" name="theme-color" />
-      <meta
-        content={theme.vars.palette.background.default}
-        key="msapplication-TileColor"
-        name="msapplication-TileColor"
+      <link key="favicon" rel="icon" href="/favicon.ico" sizes="32x32" />
+      <link
+        key="svg-icon"
+        rel="icon"
+        href={`/icon${colorScheme.mode === 'dark' ? '-dark' : '-light'}.svg`}
+        type="image/svg+xml"
+      />
+      <link key="apple-touch" rel="apple-touch-icon" href="/apple-touch-icon.png" />
+      <link key="manifest" rel="manifest" href="/manifest.webmanifest" />
+      {/* Preload the error image */}
+      <link
+        as="image"
+        href="/images/error-small.jpg"
+        key="preload-error-image"
+        rel="preload"
+        type="image/jpeg"
       />
-      {Object.values(ICONS).flatMap(({ variants, element }) =>
-        variants.map((variant) => element(String(variant), theme)),
-      )}
     </Head>
   );
 }

apps/web/src/components/homepage/IntroCard.tsx

@@ -10,7 +10,7 @@ import { useLinkWithName } from 'hooks/useLinkWithName';
 /**
  * Width of the intro image on small screens
  */
-const SMALL_IMAGE_SIZE = '14em';
+const SMALL_IMAGE_SIZE = '16em';
 
 /**
  * Creates an intro information card for use on the homepage. Technically
@@ -46,10 +46,9 @@ export function IntroCard() {
         })}
         sx={(theme) => ({
           [theme.breakpoints.down('md')]: {
-            justifySelf: 'center',
-            width: SMALL_IMAGE_SIZE,
-            height: SMALL_IMAGE_SIZE,
-            borderRadius: `calc(${SMALL_IMAGE_SIZE} / 2)`,
+            minWidth: SMALL_IMAGE_SIZE,
+            maxWidth: SMALL_IMAGE_SIZE,
+            maxHeight: SMALL_IMAGE_SIZE,
           },
         })}
       >

apps/web/src/components/homepage/SpotifyCard.tsx

@@ -13,10 +13,13 @@ export function SpotifyCard() {
 
   return (
     <ContentCard
-      sx={{
+      sx={(theme) => ({
         padding: 2.5,
         display: 'flex',
-      }}
+        [theme.breakpoints.down('md')]: {
+          minWidth: 'min(max-content, inherit)',
+        },
+      })}
     >
       <TrackListing hasLogo track={track} />
     </ContentCard>