From bbb524ea9286a4b4f8f9013b333a3aebc9515362 Mon Sep 17 00:00:00 2001
From: Morten Olsen <fbtijfdq@void.black>
Date: Wed, 3 Dec 2025 08:51:44 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20100=20on=20lighthouse=20=F0=9F=A5=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page/Header.astro | 20 ++++++++++----------
 src/components/page/Html.astro   | 19 +++++++++++++++++++
 src/pages/about.astro            | 12 ++++++++++--
 src/pages/index.astro            |  1 +
 src/pages/posts/[id]/index.astro |  3 ++-
 5 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/components/page/Header.astro b/src/components/page/Header.astro
index c9dffff..1a45785 100644
--- a/src/components/page/Header.astro
+++ b/src/components/page/Header.astro
@@ -1,36 +1,35 @@
 ---
 import { Picture } from "astro:assets";
 import { data } from "~/data/data";
-import { positionWithTeam } from "~/utils/utils.format";
 
 const currentPath = Astro.url.pathname;
 const { Content, ...profile } = data.profile;
 const currentExperience = await data.experiences.getCurrent()
 const links = {
   '/': 'Posts',
-  '/about': 'About',
+  '/about/': 'About',
 }
 ---
 
 <header class="header">
-  <div class="image">
+  <a class="image" href="/">
     <Picture
       class="picture"
       alt='Profile Picture'
       src={profile.image}
       fetchpriority="high"
       formats={['avif', 'webp', 'jpeg']}
-      width={60}
+      width={120}
     />
-  </div>
-  <div class="info">
-    <a class="name" href="/">{profile.name}</a>
+  </a>
+  <a class="info" href="/">
+    <div class="name">{profile.name}</div>
     {currentExperience && (
-      <a class="work" href="/">
+      <div  class="work">
       {currentExperience.data.position.name} @ {currentExperience.data.company.name}
-      </a>
+      </div>
     )}
-  </div>
+  </a>
   <div class="links">
     {Object.entries(links).map(([target, name]) => (
       <a class={currentPath === target ? 'link active' : 'link'} href={target}>{name}</a>
@@ -42,6 +41,7 @@ const links = {
   .header {
     max-width: var(--content-width);
     margin: 80px auto;
+    padding: 30px;
     display: grid;
     gap: var(--gap);
     align-items: center;
diff --git a/src/components/page/Html.astro b/src/components/page/Html.astro
index 6ee6da9..bed728b 100644
--- a/src/components/page/Html.astro
+++ b/src/components/page/Html.astro
@@ -49,6 +49,25 @@ const schema = JSON.stringify(jsonLd)
 	</body>
 </html>
 
+<script is:inline>
+const withFadeIn = document.querySelectorAll('[data-fadein]');
+
+withFadeIn.forEach((node) => {
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        node.classList.remove('hidden');
+        node.setAttribute('data-shown', 'true')
+      } else if (!node.hasAttribute('data-shown')) {
+        node.classList.add('hidden');
+      }
+    })
+  })
+
+  observer.observe(node);
+})
+</script>
+
 <style is:global>
 
 @view-transition {
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 4b3671f..a3d1c58 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -91,10 +91,9 @@ const jsonLd = await profile.getJsonLd();
   </main>
 </Html>
 
-<script src="../scripts/fadein.ts"></script>
-
 <style>
 .main {
+  padding: 30px;
   max-width: var(--content-width);
   margin: auto;
   display: grid;
@@ -109,6 +108,15 @@ const jsonLd = await profile.getJsonLd();
   h2 {
     font-weight: var(--fw-md);
   }
+
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "content"
+      "profiles"
+      "skills"
+      "experiences";
+  }
 }
 
 .content {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e066076..37487c2 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -46,6 +46,7 @@ const jsonLd = await profile.getJsonLd();
 
 <style>
 .main {
+  padding: 30px;
   max-width: var(--content-width);
   margin: auto;
   display: flex;
diff --git a/src/pages/posts/[id]/index.astro b/src/pages/posts/[id]/index.astro
index 4e3821a..bfc814b 100644
--- a/src/pages/posts/[id]/index.astro
+++ b/src/pages/posts/[id]/index.astro
@@ -32,6 +32,7 @@ const { Content } = await render(post);
     <Picture
       loading='eager'
       class='img'
+      fetchpriority="high"
       src={post.data.heroImage}
       widths={[320, 640, 1024, 1400]}
       formats={['avif', 'webp', 'png']}
@@ -75,7 +76,7 @@ const { Content } = await render(post);
       '. content cover';
   }
 
-  article :global(picture) {
+  article picture {
     grid-area: cover;
     position: relative;
   }