Layout update

ALPHAAAL · Apr 1, 2024 · 578fc9c · 578fc9c
1 parent ee36678
commit 578fc9c
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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>