fix: 100 on lighthouse 🥳

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>
-    {currentExperience && (
-      <a class="work" href="/">
-      {currentExperience.data.position.name} @ {currentExperience.data.company.name}
   </a>
-    )}
+  <a class="info" href="/">
+    <div class="name">{profile.name}</div>
+    {currentExperience && (
+      <div  class="work">
+      {currentExperience.data.position.name} @ {currentExperience.data.company.name}
       </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;

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 {

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 {

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;

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;
   }