From 578fc9cc09ae730f4af3190ce8ea0c73e8443aa9 Mon Sep 17 00:00:00 2001
From: Alex Lau <cyalexlau@yahoo.com.hk>
Date: Mon, 1 Apr 2024 13:09:19 +0800
Subject: [PATCH] Layout update

---
 src/components/About/index.tsx  | 8 ++++----
 src/components/Home/index.tsx   | 6 +++---
 src/components/Layout/index.tsx | 2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/About/index.tsx b/src/components/About/index.tsx
index 4c80e0b..6b4ec69 100644
--- a/src/components/About/index.tsx
+++ b/src/components/About/index.tsx
@@ -90,13 +90,13 @@ export default function About() {
     return (
         <div>
             <div className="w-full sm:mt-10">
-                <div className='grid grid-cols-1 gap-y-6 sm:pr-3 sm:grid-cols-2 sm:grid-rows-[auto_1fr]'>
-                    <div className='sm:col-start-2 sm:pl-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={ImageMap.ProfilePic.src} placeholderImage={ImageMap.ProfilePic.hash} />
                     </div>
-                    <div className='sm:col-start-1 sm:row-start-1 sm:row-span-2'>
+                    <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>
-                        <div className='mt-4 leading-relaxed sm:leading-loose text-lg tracking-wider'>
+                        <div className='mt-4 leading-relaxed lg:leading-loose text-lg tracking-wider'>
                             <p>
                                 Hi there! I am a software engineer from Hong Kong with a passion for developing high-performance software and crafting fluid web application with React. I have experience in building an experimental 2D vector graphics renderer with Rust + WebGPU + WASM, and since that project, I fell in love with computer graphics and Rust, so in my free time, I like to watch YouTube tutorials about those topics and implement related fun projects.
                             </p>
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
index 1caebe5..3950a9b 100644
--- a/src/components/Home/index.tsx
+++ b/src/components/Home/index.tsx
@@ -7,7 +7,7 @@ import IMAGE_JSON from '../../assets/img/images.json';
 
 const images = Object.values(IMAGE_JSON).map(({ name, hash }) => {
     return (
-        <LazyImage key={hash} src={`/assets/images/${name}.webp`} placeholderImage={hashToDataUrl(hash)} className=' max-h-[400px]' />
+        <LazyImage key={hash} src={`/assets/images/${name}.webp`} placeholderImage={hashToDataUrl(hash)} className='max-h-[300px] xl:max-h-[400px]' />
     );
 });
 const mobileImages = Object.values(IMAGE_JSON).map(({ name, hash }) => {
@@ -38,10 +38,10 @@ export default function Home() {
                     </span>
                 </div>
                 <SocialRow className='mt-3' shouldShowName={false} />
-                <div className='hidden -translate-x-[15%] w-[calc(100vw)] sm:flex flex-col sm:flex-row mt-3 sm:mt-48 sm:overflow-scroll scroll-smooth scrollbar-hide [&>*]:mr-8'>
+                <div className='hidden md:-translate-x-[10%] lg:-translate-x-[15%] w-screen sm:flex sm:flex-row py-10 sm:py-20 sm:overflow-scroll scroll-smooth scrollbar-hide [&>*]:mr-8'>
                     {images}
                 </div>
-                <div className='grid grid-cols-2 gap-x-5 gap-y-3 mt-3 sm:hidden'>
+                <div className='grid grid-cols-2 gap-x-5 gap-y-3 mt-12 sm:hidden'>
                     {mobileImages}
                 </div>
             </div>
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index d1e1ea6..18c53c2 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -31,7 +31,7 @@ export default function Layout() {
                                 <NavigationMenu />
                             </div>
                         </div>
-                        <div className="grow">
+                        <div className="grow mt-16 sm:mt-24">
                             <Outlet />
                         </div>
                     </div>