Brings back load optimizations

Author: d13

404.html

@@ -5,10 +5,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>404 | Keith Daulton | Design Technologist, User Experience Engineer, Technical Leader</title>
+    <meta name="description" content="Principal front-end web developer and designer, Keith Daulton." />
+    <meta
+      name="keywords"
+      content="front-end, design technology, design systems, front end, ui, ux, user experience, user interface, javascript, portfolio, responsive, web, developer, designer"
+    />
+    <meta name="author" content="Keith Daulton" />
 
     <link rel="icon" type="image/png" sizes="32x32" href="/meta/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/meta/favicon-16x16.png" />
 
+    <link rel="preconnect" href="https://p.typekit.net" />
+    <link rel="preconnect" href="https://use.typekit.net" />
+    <link rel="preload" href="https://use.typekit.net/bdx2zst.css" as="style" />
     <link rel="stylesheet" href="./src/styles/index.css" />
     <script type="module" src="./src/index.ts"></script>
   </head>
@@ -21,7 +30,9 @@
     <header class="header header--pinned" id="header">
       <div class="container container--wide">
         <div class="header__group">
-          <a href="/"><img class="logo" src="/media/branding/logo-square.png" alt="Keith Daulton" /></a>
+          <a href="/"
+            ><img class="logo" src="/media/branding/logo-square.webp" alt="Keith Daulton" width="28" height="28"
+          /></a>
         </div>
         <!-- <nav class="header__group" id="nav" aria-label="Main Navigation">
           <ul class="nav-inline">
@@ -93,7 +104,13 @@ <h2>Connect</h2>
                 ><d-icon-library icon="code"></d-icon-library><span class="o-sr-only">CodePen</span></a
               >
             </nav>
-            <img src="/media/branding/logo-tight.png" alt="Keith Daulton" />
+            <img
+              src="/media/branding/logo-tight.webp"
+              alt="Keith Daulton logo"
+              width="107"
+              height="128"
+              loading="lazy"
+            />
           </div>
         </div>
       </section>
@@ -104,7 +121,7 @@ <h2>Connect</h2>
       <div class="container">
         <p>&copy; Copyright 2025 Keith Daulton and respective brands. All rights reserved.</p>
         <nav>
-          <a href="404.html">get lost</a>
+          <a href="/get-lost.html">get lost</a>
           <a href="#top"><d-icon-library icon="arrow-up"></d-icon-library><span class="o-sr-only">Back to top</span></a>
         </nav>
       </div>

docs/404.html

@@ -5,10 +5,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>404 | Keith Daulton | Design Technologist, User Experience Engineer, Technical Leader</title>
+    <meta name="description" content="Principal front-end web developer and designer, Keith Daulton." />
+    <meta
+      name="keywords"
+      content="front-end, design technology, design systems, front end, ui, ux, user experience, user interface, javascript, portfolio, responsive, web, developer, designer"
+    />
+    <meta name="author" content="Keith Daulton" />
 
     <link rel="icon" type="image/png" sizes="32x32" href="/meta/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/meta/favicon-16x16.png" />
 
+    <link rel="preconnect" href="https://p.typekit.net" />
+    <link rel="preconnect" href="https://use.typekit.net" />
+    <link rel="preload" href="https://use.typekit.net/bdx2zst.css" as="style" />
     <script type="module" crossorigin src="/assets/index-ShRo7YcU.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DntqMw41.css">
   </head>
@@ -21,7 +30,9 @@
     <header class="header header--pinned" id="header">
       <div class="container container--wide">
         <div class="header__group">
-          <a href="/"><img class="logo" src="/media/branding/logo-square.png" alt="Keith Daulton" /></a>
+          <a href="/"
+            ><img class="logo" src="/media/branding/logo-square.webp" alt="Keith Daulton" width="28" height="28"
+          /></a>
         </div>
         <!-- <nav class="header__group" id="nav" aria-label="Main Navigation">
           <ul class="nav-inline">
@@ -93,7 +104,13 @@ <h2>Connect</h2>
                 ><d-icon-library icon="code"></d-icon-library><span class="o-sr-only">CodePen</span></a
               >
             </nav>
-            <img src="/media/branding/logo-tight.png" alt="Keith Daulton" />
+            <img
+              src="/media/branding/logo-tight.webp"
+              alt="Keith Daulton logo"
+              width="107"
+              height="128"
+              loading="lazy"
+            />
           </div>
         </div>
       </section>
@@ -104,7 +121,7 @@ <h2>Connect</h2>
       <div class="container">
         <p>&copy; Copyright 2025 Keith Daulton and respective brands. All rights reserved.</p>
         <nav>
-          <a href="404.html">get lost</a>
+          <a href="/get-lost.html">get lost</a>
           <a href="#top"><d-icon-library icon="arrow-up"></d-icon-library><span class="o-sr-only">Back to top</span></a>
         </nav>
       </div>

docs/index.html

@@ -5,10 +5,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>Keith Daulton | Design Technologist, User Experience Engineer, Technical Leader</title>
+    <meta name="description" content="Principal front-end web developer and designer, Keith Daulton." />
+    <meta
+      name="keywords"
+      content="front-end, design technology, design systems, front end, ui, ux, user experience, user interface, javascript, portfolio, responsive, web, developer, designer"
+    />
+    <meta name="author" content="Keith Daulton" />
 
     <link rel="icon" type="image/png" sizes="32x32" href="/meta/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/meta/favicon-16x16.png" />
 
+    <link rel="preconnect" href="https://p.typekit.net" />
+    <link rel="preconnect" href="https://use.typekit.net" />
+    <link rel="preload" href="https://use.typekit.net/bdx2zst.css" as="style" />
     <script type="module" crossorigin src="/assets/index-ShRo7YcU.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DntqMw41.css">
   </head>
@@ -21,7 +30,9 @@
     <header class="header header--pinned" id="header">
       <div class="container container--wide">
         <div class="header__group">
-          <a href="/"><img class="logo" src="/media/branding/logo-square.png" alt="Keith Daulton" /></a>
+          <a href="/"
+            ><img class="logo" src="/media/branding/logo-square.webp" alt="Keith Daulton" width="28" height="28"
+          /></a>
         </div>
         <nav class="header__group" id="nav" aria-label="Main Navigation">
           <ul class="nav-inline">
@@ -93,11 +104,20 @@ <h2>Engineer + Designer</h2>
           </div>
           <aside class="about__aside">
             <section class="phone-swap">
-              <img src="/media/features/phone-mergein-rough.png" alt="Rough Design" />
               <img
-                src="/media/features/phone-mergein-finished.png"
+                src="/media/features/phone-mergein-rough.webp"
+                alt="Rough Design"
+                width="600"
+                height="1138"
+                loading="lazy"
+              />
+              <img
+                src="/media/features/phone-mergein-finished.webp"
                 class="phone-swap__finished"
                 alt="Finished Design"
+                width="600"
+                height="1138"
+                loading="lazy"
               />
             </section>
           </aside>
@@ -159,7 +179,13 @@ <h2>Connect</h2>
                 ><d-icon-library icon="code"></d-icon-library><span class="o-sr-only">CodePen</span></a
               >
             </nav>
-            <img src="/media/branding/logo-tight.png" alt="Keith Daulton" />
+            <img
+              src="/media/branding/logo-tight.webp"
+              alt="Keith Daulton logo"
+              width="107"
+              height="128"
+              loading="lazy"
+            />
           </div>
         </div>
       </section>
@@ -170,7 +196,7 @@ <h2>Connect</h2>
       <div class="container">
         <p>&copy; Copyright 2025 Keith Daulton and respective brands. All rights reserved.</p>
         <nav>
-          <a href="404.html">get lost</a>
+          <a href="get-lost.html">get lost</a>
           <a href="#top"><d-icon-library icon="arrow-up"></d-icon-library><span class="o-sr-only">Back to top</span></a>
         </nav>
       </div>

docs/media/branding/logo-outlined.svg

@@ -5,10 +5,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>Keith Daulton | Design Technologist, User Experience Engineer, Technical Leader</title>
+    <meta name="description" content="Principal front-end web developer and designer, Keith Daulton." />
+    <meta
+      name="keywords"
+      content="front-end, design technology, design systems, front end, ui, ux, user experience, user interface, javascript, portfolio, responsive, web, developer, designer"
+    />
+    <meta name="author" content="Keith Daulton" />
 
     <link rel="icon" type="image/png" sizes="32x32" href="/meta/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/meta/favicon-16x16.png" />
 
+    <link rel="preconnect" href="https://p.typekit.net" />
+    <link rel="preconnect" href="https://use.typekit.net" />
+    <link rel="preload" href="https://use.typekit.net/bdx2zst.css" as="style" />
     <link rel="stylesheet" href="./src/styles/index.css" />
     <script type="module" src="./src/index.ts"></script>
   </head>
@@ -21,7 +30,9 @@
     <header class="header header--pinned" id="header">
       <div class="container container--wide">
         <div class="header__group">
-          <a href="/"><img class="logo" src="/media/branding/logo-square.png" alt="Keith Daulton" /></a>
+          <a href="/"
+            ><img class="logo" src="/media/branding/logo-square.webp" alt="Keith Daulton" width="28" height="28"
+          /></a>
         </div>
         <nav class="header__group" id="nav" aria-label="Main Navigation">
           <ul class="nav-inline">
@@ -93,11 +104,20 @@ <h2>Engineer + Designer</h2>
           </div>
           <aside class="about__aside">
             <section class="phone-swap">
-              <img src="/media/features/phone-mergein-rough.png" alt="Rough Design" />
               <img
-                src="/media/features/phone-mergein-finished.png"
+                src="/media/features/phone-mergein-rough.webp"
+                alt="Rough Design"
+                width="600"
+                height="1138"
+                loading="lazy"
+              />
+              <img
+                src="/media/features/phone-mergein-finished.webp"
                 class="phone-swap__finished"
                 alt="Finished Design"
+                width="600"
+                height="1138"
+                loading="lazy"
               />
             </section>
           </aside>
@@ -159,7 +179,13 @@ <h2>Connect</h2>
                 ><d-icon-library icon="code"></d-icon-library><span class="o-sr-only">CodePen</span></a
               >
             </nav>
-            <img src="/media/branding/logo-tight.png" alt="Keith Daulton" />
+            <img
+              src="/media/branding/logo-tight.webp"
+              alt="Keith Daulton logo"
+              width="107"
+              height="128"
+              loading="lazy"
+            />
           </div>
         </div>
       </section>
@@ -170,7 +196,7 @@ <h2>Connect</h2>
       <div class="container">
         <p>&copy; Copyright 2025 Keith Daulton and respective brands. All rights reserved.</p>
         <nav>
-          <a href="404.html">get lost</a>
+          <a href="get-lost.html">get lost</a>
           <a href="#top"><d-icon-library icon="arrow-up"></d-icon-library><span class="o-sr-only">Back to top</span></a>
         </nav>
       </div>