Optimize mobile layout and hero image

Author: davidbingmann

src/assets/profile_picture_1200.jpeg

@@ -1,9 +1,12 @@
 import { useEffect, useRef, useState } from 'react';
-import profilePicture from '../assets/profile_picture.jpeg';
+import profilePicture800 from '../assets/profile_picture_800.jpeg';
+import profilePicture1200 from '../assets/profile_picture_1200.jpeg';
+import profilePicture2000 from '../assets/profile_picture_2000.jpeg';
 
 export default function Home() {
   const [typedCount, setTypedCount] = useState(0);
   const [hidePrompt, setHidePrompt] = useState(false);
+  const [reduceMotion, setReduceMotion] = useState(false);
   const promptRef = useRef(null);
   const [promptWidth, setPromptWidth] = useState(0);
 
@@ -22,7 +25,22 @@ export default function Home() {
   }, []);
 
   useEffect(() => {
-    let hideTimer;
+    const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const handleMotionChange = () => setReduceMotion(motionQuery.matches);
+
+    handleMotionChange();
+    motionQuery.addEventListener('change', handleMotionChange);
+
+    return () => motionQuery.removeEventListener('change', handleMotionChange);
+  }, []);
+
+  useEffect(() => {
+    if (reduceMotion) {
+      setTypedCount(totalLength);
+      setHidePrompt(true);
+      return undefined;
+    }
+
     const timer = setInterval(() => {
       setTypedCount((current) => {
         if (current >= totalLength) {
@@ -34,19 +52,20 @@ export default function Home() {
 
     return () => {
       clearInterval(timer);
-      if (hideTimer) {
-        clearTimeout(hideTimer);
-      }
     };
-  }, [totalLength]);
+  }, [reduceMotion, totalLength]);
 
   useEffect(() => {
+    if (reduceMotion) {
+      return undefined;
+    }
+
     if (typedCount === totalLength) {
       const timer = setTimeout(() => setHidePrompt(true), 500);
       return () => clearTimeout(timer);
     }
     return undefined;
-  }, [typedCount, totalLength]);
+  }, [reduceMotion, typedCount, totalLength]);
 
   useEffect(() => {
     if (promptText.length === fullPrompt.length && promptRef.current) {
@@ -56,10 +75,16 @@ export default function Home() {
 
   return (
     <div className="home">
-      <section
-        className="hero"
-        style={{ backgroundImage: `url(${profilePicture})` }}
-      >
+      <section className="hero">
+        <img
+          className="hero-image"
+          src={profilePicture1200}
+          srcSet={`${profilePicture800} 722w, ${profilePicture1200} 1083w, ${profilePicture2000} 1806w`}
+          sizes="(max-width: 900px) calc(100vw - 2rem), 852px"
+          alt="Portrait of David Bingmann"
+          decoding="async"
+          fetchPriority="high"
+        />
         <div className="hero-overlay" />
         <div className="hero-content">
           <div className="hero-command">

src/assets/profile_picture_2000.jpeg

@@ -1,5 +1,6 @@
 :root {
   color-scheme: light;
+  --page-gutter: 1.5rem;
   --bg: #f5f3ee;
   --bg-top: #ffffff;
   --surface: #ffffff;
@@ -31,6 +32,7 @@
 body {
   margin: 0;
   min-height: 100vh;
+  min-height: 100svh;
   font-family: 'Space Mono', monospace;
   color: var(--text);
   background: radial-gradient(circle at top, var(--bg-top) 0%, var(--bg) 55%);
@@ -62,14 +64,18 @@ p {
 
 .shell {
   min-height: 100vh;
+  min-height: 100svh;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 .header {
   width: 100%;
-  padding: 2.5rem 1.5rem 0;
+  padding-top: 2.5rem;
+  padding-bottom: 0;
+  padding-left: calc(var(--page-gutter) + env(safe-area-inset-left, 0px));
+  padding-right: calc(var(--page-gutter) + env(safe-area-inset-right, 0px));
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -87,12 +93,11 @@ p {
 
 .nav-link {
   color: var(--muted);
-  padding-bottom: 0.5rem;
+  padding: 0.65rem 0.35rem 0.5rem;
   border-bottom: 2px solid transparent;
   transition: color 0.2s ease, border-color 0.2s ease;
 }
 
-.nav-link:hover,
 .nav-link--active {
   color: var(--text);
   border-color: var(--accent);
@@ -107,17 +112,20 @@ p {
 
 .main {
   width: min(900px, 100%);
-  padding: 0 1.5rem 4rem;
+  padding-top: 0;
+  padding-bottom: 4rem;
+  padding-left: calc(var(--page-gutter) + env(safe-area-inset-left, 0px));
+  padding-right: calc(var(--page-gutter) + env(safe-area-inset-right, 0px));
 }
 
 .hero {
   width: 100%;
   max-width: 900px;
   margin: 0 auto;
   height: 70vh;
+  height: 70svh;
   min-height: 420px;
-  background-size: cover;
-  background-position: center;
+  background: #0b0b0b;
   position: relative;
   display: flex;
   align-items: flex-end;
@@ -127,15 +135,26 @@ p {
   overflow: hidden;
 }
 
+.hero-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 50% 30%;
+  pointer-events: none;
+}
+
 .hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 70%);
+  z-index: 1;
 }
 
 .hero-content {
   position: relative;
-  z-index: 1;
+  z-index: 2;
   text-align: center;
   padding: 0 1.5rem 2.5rem;
   animation: fadeUp 0.8s ease forwards;
@@ -229,10 +248,6 @@ p {
   transition: color 0.2s ease;
 }
 
-.social-links a:hover {
-  color: var(--text);
-}
-
 .empty-note {
   padding: 2rem;
   border: 1px dashed var(--line);
@@ -283,7 +298,10 @@ p {
 
 .footer {
   width: min(900px, 100%);
-  padding: 3rem 1.5rem 2.5rem;
+  padding-top: 3rem;
+  padding-bottom: 2.5rem;
+  padding-left: calc(var(--page-gutter) + env(safe-area-inset-left, 0px));
+  padding-right: calc(var(--page-gutter) + env(safe-area-inset-right, 0px));
   display: grid;
   justify-items: center;
   gap: 1.25rem;
@@ -308,7 +326,6 @@ p {
   transition: color 0.2s ease, border-color 0.2s ease;
 }
 
-.footer-impressum:hover,
 .footer-impressum:focus-visible {
   color: var(--text);
   border-color: var(--text);
@@ -325,11 +342,6 @@ p {
   transition: color 0.2s ease, background-color 0.2s ease;
 }
 
-.footer-links a:hover {
-  color: var(--text);
-  background-color: var(--hover);
-}
-
 .footer-icon {
   width: 18px;
   height: 18px;
@@ -370,10 +382,57 @@ p {
   }
 }
 
+@media (hover: hover) {
+  .nav-link:hover {
+    color: var(--text);
+    border-color: var(--accent);
+  }
+
+  .social-links a:hover {
+    color: var(--text);
+  }
+
+  .footer-impressum:hover {
+    color: var(--text);
+    border-color: var(--text);
+  }
+
+  .footer-links a:hover {
+    color: var(--text);
+    background-color: var(--hover);
+  }
+}
+
 @media (max-width: 720px) {
+  :root {
+    --page-gutter: 1.1rem;
+  }
+
+  .header {
+    padding-top: 1.75rem;
+  }
+
+  .nav-tabs {
+    gap: 1.25rem 1.75rem;
+  }
+
   .hero {
-    height: 60vh;
+    height: 58vh;
+    height: 58svh;
     min-height: 320px;
+    border-radius: 14px;
+  }
+
+  .hero-image {
+    object-position: 50% 24%;
+  }
+
+  .hero-command {
+    font-size: clamp(2rem, 9vw, 3rem);
+  }
+
+  .hero-content {
+    padding: 0 1.25rem 2rem;
   }
 
   .section-body {
@@ -383,6 +442,33 @@ p {
   .timeline {
     padding-left: 1rem;
   }
+
+  .timeline-item {
+    animation-delay: 0ms !important;
+  }
+}
+
+@media (max-width: 420px) {
+  :root {
+    --page-gutter: 0.95rem;
+  }
+
+  .hero-command {
+    font-size: clamp(1.85rem, 10vw, 2.6rem);
+  }
+
+  .hero-command .path {
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .section {
+    padding-top: 2.25rem;
+  }
+
+  .section-body {
+    padding: 1.25rem;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {