Pagespeed hates this one trick!

src/components/NavigationBar.tsx

@@ -107,8 +107,8 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
                   aria-label={item.tooltip}
                   data-tip={item.tooltip}
                 >
-                  <Icon size={18} class="sm:w-5 sm:h-5" />
-                  <span class="sr-only">{item.name}</span>
+                    <Icon size={18} class="sm:w-5 sm:h-5" />
+                    <span class="sr-only">{item.name}</span>
                 </a>
               </li>
             );

src/components/SocialLinks.astro

@@ -1,38 +1,44 @@
 ---
-import { Icon } from 'astro-icon/components';
-import SpotifyIcon from './SpotifyIcon';
-import { socialLinks } from '../config/data';
+import { Icon } from "astro-icon/components";
+import SpotifyIcon from "./SpotifyIcon";
+import { socialLinks } from "../config/data";
 
 // Helper function to check if icon is a string (Astro icon)
 function isAstroIcon(icon: any): icon is string {
-  return typeof icon === 'string';
+    return typeof icon === "string";
 }
 
 // Helper function to check if icon is SpotifyIcon component
 function isSpotifyIcon(icon: any): boolean {
-  return icon === SpotifyIcon;
+    return icon === SpotifyIcon;
 }
 ---
 
-<div class="flex flex-row gap-1 sm:gap-4 text-3xl">
-  {socialLinks.map((link) => {
-    if (isSpotifyIcon(link.icon)) {
-      return (
-        <SpotifyIcon profileUrl={link.url} client:load />
-      );
-    } else if (isAstroIcon(link.icon)) {
-      return (
-        <a
-          href={link.url}
-          target={link.url.startsWith('http') ? '_blank' : undefined}
-          rel={link.url.startsWith('http') ? 'noopener noreferrer' : undefined}
-          aria-label={link.ariaLabel}
-          class="hover:text-primary transition-colors"
-        >
-          <Icon name={link.icon} />
-        </a>
-      );
+<div class="flex flex-row gap-4 text-3xl">
+    {
+        socialLinks.map((link) => {
+            if (isSpotifyIcon(link.icon)) {
+                return <SpotifyIcon profileUrl={link.url} client:load />;
+            } else if (isAstroIcon(link.icon)) {
+                return (
+                    <a
+                        href={link.url}
+                        target={
+                            link.url.startsWith("http") ? "_blank" : undefined
+                        }
+                        rel={
+                            link.url.startsWith("http")
+                                ? "noopener noreferrer"
+                                : undefined
+                        }
+                        aria-label={link.ariaLabel}
+                        class="hover:text-primary transition-colors"
+                    >
+                        <Icon name={link.icon} />
+                    </a>
+                );
+            }
+            return null;
+        })
     }
-    return null;
-  })}
 </div>

src/components/TechLinks.astro

@@ -1,28 +1,30 @@
 ---
-import { Icon } from 'astro-icon/components';
-import { techLinks } from '../config/data';
+import { Icon } from "astro-icon/components";
+import { techLinks } from "../config/data";
 
 // Helper function to check if icon is a string (Astro icon)
 function isAstroIcon(icon: any): icon is string {
-  return typeof icon === 'string';
+    return typeof icon === "string";
 }
 ---
 
-<div class="flex flex-row gap-1 sm:gap-4 text-3xl">
-  {techLinks.map((link) => {
-    if (isAstroIcon(link.icon)) {
-      return (
-        <a
-          href={link.url}
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label={link.ariaLabel}
-          class="hover:text-primary transition-colors"
-        >
-          <Icon name={link.icon} />
-        </a>
-      );
+<div class="flex flex-row gap-4 text-3xl">
+    {
+        techLinks.map((link) => {
+            if (isAstroIcon(link.icon)) {
+                return (
+                    <a
+                        href={link.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        aria-label={link.ariaLabel}
+                        class="hover:text-primary transition-colors"
+                    >
+                        <Icon name={link.icon} />
+                    </a>
+                );
+            }
+            return null;
+        })
     }
-    return null;
-  })}
-</div>
+</div>

src/config/data.ts

@@ -43,8 +43,6 @@ export const personalInfo: PersonalInfo = {
   profileImage: {
     src: logo,
     alt: "A drawing of Atridad Lahiji by Shelze!",
-    width: 150,
-    height: 150,
   },
   tagline: "Researcher, Full-Stack Developer, and IT Professional.",
   description: "Researcher, Full-Stack Developer, and IT Professional.",

src/pages/index.astro

@@ -10,9 +10,12 @@ import { personalInfo, homepageSections } from "../config/data";
     <Image
         src={personalInfo.profileImage.src}
         alt={personalInfo.profileImage.alt}
-        height={personalInfo.profileImage.height}
-        width={personalInfo.profileImage.width}
-        loading="eager"
+        width={300}
+        height={300}
+        layout="constrained"
+        priority={true}
+        class="rounded-full mx-auto"
+        style="max-width: 12rem; width: 100%;"
     />
 
     <h1
@@ -21,15 +24,19 @@ import { personalInfo, homepageSections } from "../config/data";
         {personalInfo.name}
     </h1>
 
-    <h2 class="text-xl sm:text-3xl font-bold text-center">
+    <h2 class="text-xl sm:text-3xl font-bold text-center mx-6">
         {personalInfo.tagline}
     </h2>
 
-    <h3 class="text-lg sm:text-2xl font-bold">{homepageSections.socialLinks.title}</h3>
+    <h3 class="text-lg sm:text-2xl font-bold">
+        {homepageSections.socialLinks.title}
+    </h3>
 
     <SocialLinks />
 
-    <h3 class="text-lg sm:text-2xl font-bold">{homepageSections.techStack.title}</h3>
+    <h3 class="text-lg sm:text-2xl font-bold">
+        {homepageSections.techStack.title}
+    </h3>
 
     <TechLinks />
 </Layout>

src/types/index.ts

@@ -91,8 +91,8 @@ export interface PersonalInfo {
   profileImage: {
     src: ImageMetadata;
     alt: string;
-    width: number;
-    height: number;
+    width?: number;
+    height?: number;
   };
   tagline: string;
   description?: string;