perf(layout): ⚡ optimize image loading and sizing

lloydrichards · Jun 5, 2023 · d0c2321 · d0c2321
1 parent 69df3cf
commit d0c2321
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -17,6 +17,7 @@ export default function Home() {
             alt="Lloyd Richards Portrait"
             width={400}
             height={600}
+            priority
           />
           <div className="col-span-5 self-center px-4 md:col-span-2">
             <h1 className="font-serif">Hello, I&apos;m Lloyd</h1>
@@ -38,7 +39,7 @@ export default function Home() {
         </p>
       </section>
       <SpotlightProjects />
-      <div className="w-full bg-accent py-8 px-8">
+      <div className="w-full bg-accent px-8 py-8">
         <RecentPosts posts={[...allLabs, ...allBlogs]} />
       </div>
       <section className="min-h-96 prose mt-8 w-full px-2">

diff --git a/src/components/projects/project_card/ProjectCard.tsx b/src/components/projects/project_card/ProjectCard.tsx
@@ -21,12 +21,13 @@ export const ProjectCard: React.FC<IProjectCard> = ({ project }) => {
     <Link href={project.slug} className="not-prose rounded no-underline ">
       <Card className="relative flex h-full flex-col  overflow-clip hover:shadow">
         {!!project.image && (
-          <div className="z-0 h-full w-full opacity-20 ">
+          <div className="absolute z-0 h-full w-full opacity-20 ">
             <Image
               className="object-cover blur-sm grayscale hover:blur-0 hover:grayscale-0"
               src={project.image}
               alt={project.title}
               fill
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
             />
           </div>
         )}