Fix scroll layout on mobile

NicholasPeretti · NicholasPeretti · commit 937eb43e5584 · 2025-03-05T19:47:32.000Z
diff --git a/components/Section.tsx b/components/Section.tsx
@@ -16,14 +16,14 @@ export default function Section({
   return (
     <section
       className={cns(
-        `w-full min-h-screen flex flex-col justify-center md:justify-start lg:justify-center items-center px-[20px] md:px-[40px] snap-start container mx-auto`,
+        `w-screen h-svh flex flex-col justify-center md:justify-start lg:justify-center items-center px-[20px] md:px-[40px] snap-start container mx-auto`,
         {
           "lg:flex-row-reverse": reverse,
           "lg:flex-row": !reverse,
         }
       )}
     >
-      <div className="flex items-center justify-center w-[220px] md:w-[450px] md:h-[50vh] mt-[40px] min-h-[]" aria-hidden>
+      <div className="flex items-center justify-center w-[220px] md:w-[450px] md:h-[40vh] mt-[40px] min-h-[]" aria-hidden>
         {illustration}
       </div>
       <div
diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -10,25 +10,34 @@ import SvgUxOriented from "../components/SvgUxOriented";
 
 export default function Home() {
   return (
-    <div className="h-full w-full">
+    <>
       <Head>
         <title>Nicholas Peretti</title>
-        <meta name="description" content="Nicholas Peretti, frontend engineer" />
+        <meta
+          name="description"
+          content="Nicholas Peretti, frontend engineer"
+        />
         <link rel="icon" href="/favicon.ico" />
         <link rel="apple-touch-icon" sizes="180x180" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      <div className="snap-y snap-mandatory w-full h-screen overflow-y-scroll">
+      <div className="snap-y snap-mandatory w-full h-full fixed overflow-y-scroll">
         <header className="flex flex-col w-full justify-between items-center h-screen overflow-x-hidden snap-start">
           <div className="flex flex-col mt-[150px]">
             <h1 className="text-[40px] w-fit font-bold bg-gradient-animation mb-[-15px] md:text-[60px] xl:text-[100px]">
               Nicholas Peretti
             </h1>
             <p className="text-[18px] md:text-[30px] xl:text-[50px] font-extralight">
-              Frontend engineer<span className="animate-blink" aria-hidden>_</span>
+              Frontend engineer
+              <span className="animate-blink" aria-hidden>
+                _
+              </span>
             </p>
           </div>
-          <SvgArrowDown className="mb-[150px] w-[50px] animate-bounce" aria-hidden />
+          <SvgArrowDown
+            className="mb-[150px] w-[50px] animate-bounce"
+            aria-hidden
+          />
         </header>
         <main>
           <Section
@@ -136,6 +145,6 @@ export default function Home() {
           </Section>
         </main>
       </div>
-    </div>
+    </>
   );
 }

Original file line number	Diff line number	Diff line change
`@@ -16,14 +16,14 @@ export default function Section({`
`16`	`16`	`return (`
`17`	`17`	`<section`
`18`	`18`	`className={cns(`
`19`		- `w-full min-h-screen flex flex-col justify-center md:justify-start lg:justify-center items-center px-[20px] md:px-[40px] snap-start container mx-auto`,
	`19`	+ `w-screen h-svh flex flex-col justify-center md:justify-start lg:justify-center items-center px-[20px] md:px-[40px] snap-start container mx-auto`,
`20`	`20`	`{`
`21`	`21`	`"lg:flex-row-reverse": reverse,`
`22`	`22`	`"lg:flex-row": !reverse,`
`23`	`23`	`}`
`24`	`24`	`)}`
`25`	`25`	`>`
`26`		`- <div className="flex items-center justify-center w-[220px] md:w-[450px] md:h-[50vh] mt-[40px] min-h-[]" aria-hidden>`
	`26`	`+ <div className="flex items-center justify-center w-[220px] md:w-[450px] md:h-[40vh] mt-[40px] min-h-[]" aria-hidden>`
`27`	`27`	`{illustration}`
`28`	`28`	`</div>`
`29`	`29`	`<div`