Update about page image loading

ALPHAAAL · Apr 15, 2024 · 96f2f5d · 96f2f5d
1 parent e9b0c41
commit 96f2f5d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 16 deletions.
diff --git a/src/components/About/index.tsx b/src/components/About/index.tsx
@@ -15,7 +15,7 @@ type JobRole = {
     }[];
 }
 
-const VyondIcon = <LazyImage className='mr-3' needSrcSet={false} width={35} height={35} src='vyond' placeholderImage={hashToDataUrl("X+sGDwJXSIeHeIiAepp32FeGhIr3qHgP")} />;
+const VyondIcon = <LazyImage className='mr-3' needSrcSet={false} width={35} height={35} src='vyond' />;
 const BenoveltyIcon = <LazyImage className='mr-3' needSrcSet={false} width={35} height={35} src='benovelty' />;
 const VYOND_ROLES = [
     {
@@ -91,8 +91,8 @@ export default function About() {
         <div>
             <div className="w-full sm:mt-10">
                 <div className='grid grid-cols-1 gap-y-6 sm:pr-3 lg:grid-cols-2 lg:grid-rows-[auto_1fr]'>
-                    <div className='lg:col-start-2 lg:pl-10'>
-                        <LazyImage src={'DSC01603'} placeholderImage={hashToDataUrl('aggSDwKZaIiPd3h7h1d3iIh4dwVYN4AB')} />
+                    <div className='lg:col-start-2 lg:pl-10 max-w-sm xl:max-w-xl mx-auto'>
+                        <LazyImage width={500} height={500} src={'DSC01603'} placeholderImage={hashToDataUrl('aggSDwKZaIiPd3h7h1d3iIh4dwVYN4AB')} />
                     </div>
                     <div className='lg:col-start-1 lg:row-start-1 lg:row-span-2'>
                         <h1 className="mt-3 text-6xl font-bold">Alex Lau</h1>

diff --git a/src/components/Gallery/index.tsx b/src/components/Gallery/index.tsx
@@ -5,7 +5,7 @@ import IMAGE_JSON from '../../assets/img/images.json';
 
 const images = Object.values(IMAGE_JSON).map(({ name, width, height, hash }) => {
     return (
-        <LazyImage key={hash} src={name} width={width} height={height} placeholderImage={hashToDataUrl(hash)} />
+        <LazyImage className='mb-3' key={hash} src={name} width={width} height={height} placeholderImage={hashToDataUrl(hash)} />
     );
 });
 

diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
@@ -8,9 +8,11 @@ import IMAGE_JSON from '../../assets/img/images.json';
 const images = Object.values(IMAGE_JSON).map(({ name, hash, width, height }) => {
     const sh = window.screen.height;
     const newHeight = sh > 1280 ? Math.min(400, height) : Math.min(300, height);
+    const scale = newHeight / height;
+    const newWidth = Math.floor(width * scale);
 
     return (
-        <LazyImage key={hash} src={name} height={newHeight} width={width} placeholderImage={hashToDataUrl(hash)} className='max-h-[300px] xl:max-h-[400px]' />
+        <LazyImage key={hash} src={name} height={newHeight} width={newWidth} placeholderImage={hashToDataUrl(hash)} className='max-h-[300px] xl:max-h-[400px]' />
     );
 });
 const mobileImages = Object.values(IMAGE_JSON).map(({ name, hash, width, height }) => {

diff --git a/src/components/LazyImage/index.tsx b/src/components/LazyImage/index.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo } from "react"
+import clsx from "clsx";
 
 type LazyImageProps = React.ComponentProps<'img'> & {
     placeholderImage?: string;
@@ -19,16 +20,16 @@ export default function LazyImage(props: LazyImageProps) {
     }, [placeholderImage]);
 
     return (
-        <img
-            className={className}
-            style={style}
-            src={`/assets/images/${src}.webp`}
-            srcSet={needSrcSet ? `/assets/images/${src}.webp 1920w, /assets/images/${src}_mobile.webp 375w`: undefined}
-            decoding="async"
-            loading="lazy"
-            width={width}
-            height={height}
-            alt={src}
-        />
+        <div style={style} className={clsx("flex-none self-center", className)}>
+            <img
+                src={`/assets/images/${src}.webp`}
+                srcSet={needSrcSet ? `/assets/images/${src}.webp 1920w, /assets/images/${src}_mobile.webp 375w` : undefined}
+                decoding="async"
+                loading="lazy"
+                width={width}
+                height={height}
+                alt={src}
+            />
+        </div>
     )
 }