changed padding

app/components/About.tsx

@@ -4,7 +4,7 @@ import photo from '../../public/David.jpg'
 export default function About() {
   return (
     <section
-      className="mt-[90px] py-[40px] sm:py-[50px] md:py-[70px] lg:py-[120px] lg:mt-[50px] lg:max-w-[74%] xl:max-w-[68%] lg:mx-auto xl:mt-[100px] 2xl:max-w-[1000px]"
+      className="mt-[20px] py-[40px] sm:py-[50px] md:py-[70px] lg:py-[120px] lg:mt-[50px] lg:max-w-[74%] xl:max-w-[68%] lg:mx-auto xl:mt-[100px] 2xl:max-w-[1000px]"
       id="about"
     >
       <div className="flex flex-col lg:flex-row lg:justify-between lg:gap-[5%]">

app/components/Hero.tsx

@@ -5,11 +5,11 @@ export default function Hero() {
     <section className="py-[40px] sm:py-[70px] lg:px-[80px] xl:mt-[50px] xl:px-[150px] 2xl:mx-auto 2xl:mt-[100px] 2xl:max-w-[1140px] 2xl:py-[50px] 2xl:px-0">
       <h2 className="ml-[2px] text-[17px] md:text-[18px]">Hi, my name is</h2>
 
-      <h1 className="mt-[20px] text-[40px] font-[800] leading-[46px] sm:text-[50px] sm:leading-[56px] md:mt-[30px] md:text-[58px] md:leading-[64px] lg:text-[64px] lg:leading-[70px] xl:mt-[40px] xl:text-[72px] xl:leading-[80px]">
+      <h1 className="mt-[20px] text-[44px] font-[800] leading-[50px] sm:text-[54px] sm:leading-[60px] md:mt-[30px] md:text-[58px] md:leading-[64px] lg:text-[64px] lg:leading-[70px] xl:mt-[40px] xl:text-[72px] xl:leading-[80px]">
         David Bazashvili.
       </h1>
 
-      <h2 className="mt-[5px] text-[40px] font-[800] leading-[46px] sm:text-[50px] sm:leading-[56px] md:text-[58px] md:leading-[64px] lg:text-[64px] lg:leading-[70px] xl:text-[72px] xl:leading-[80px]">
+      <h2 className="mt-[5px] text-[44px] font-[800] leading-[50px] sm:text-[54px] sm:leading-[60px] md:text-[58px] md:leading-[64px] lg:text-[64px] lg:leading-[70px] xl:text-[72px] xl:leading-[80px]">
         I build things for the web.
       </h2>
 

app/components/Nav.tsx

@@ -63,20 +63,20 @@ export default function Nav() {
             </li>
             <li>
               <a
-                href="#playground"
+                href="#work"
                 className="flex w-full items-center justify-center gap-2"
               >
                 <span className="">03. </span>
-                Playground
+                Work
               </a>
             </li>
             <li>
               <a
-                href="#work"
+                href="#playground"
                 className="flex w-full items-center justify-center gap-2"
               >
                 <span className="">04. </span>
-                Work
+                Playground
               </a>
             </li>
             <li>
@@ -136,22 +136,22 @@ export default function Nav() {
             </li>
             <li className="block w-full">
               <a
-                href="#playground"
+                href="#work"
                 className="flex w-full flex-col items-center justify-center"
                 onClick={toggleMenu}
               >
                 <span>03 . </span>
-                Playground
+                Work
               </a>
             </li>
             <li className="block w-full">
               <a
-                href="#work"
+                href="#playground"
                 className="flex w-full flex-col items-center justify-center"
                 onClick={toggleMenu}
               >
                 <span>04 . </span>
-                Work
+                Playground
               </a>
             </li>
             <li className="block w-full">

app/components/Skills.tsx

@@ -24,9 +24,11 @@ export default function Skills() {
 				<span className="mt-[3px] text-[19px] font-normal sm:mt-[4px] md:text-[20px] xl:text-[21px]">
 					02.
 				</span>
+
 				<h2 className="whitespace-nowrap mr-[10px] text-[26px] font-semibold sm:mr-[10px] sm:text-[28px] lg:text-[30px] xl:text-[32px]">
 					Skills
 				</h2>
+
 				<span className="inline-block h-[1px] w-full lg:w-[70%] bg-black"></span>
 			</div>
 
@@ -35,6 +37,7 @@ export default function Skills() {
 			</p>
 
 			<div className='flex flex-col md:flex-row gap-8 mt-[40px] text-[16px] md:text-[17px] xl:text-[18px]'>
+
 				<ul className='flex flex-col gap-8'>
 					<li className="flex justify-start items-center gap-6">
 						<div className='w-16 h-16'>

app/components/Work.tsx

@@ -0,0 +1,19 @@
+export default function Work() {
+    return (
+        <section className="mx-auto mt-[20px] py-[40px] sm:py-[50px] md:py-[70px] lg:py-[100px] lg:px-[80px] xl:py-[120px] xl:px-[150px] 2xl:max-w-[1140px]">
+
+            <div className="flex flex-nowrap justify-start items-center gap-[8px] md:gap-[13px]">
+				<span className="mt-[3px] text-[19px] font-normal sm:mt-[4px] md:text-[20px] xl:text-[21px]">
+					03.
+				</span>
+
+				<h2 className="whitespace-nowrap mr-[10px] text-[26px] font-semibold sm:mr-[10px] sm:text-[28px] lg:text-[30px] xl:text-[32px]">
+					Some things I've built
+				</h2>
+
+				<span className="inline-block h-[1px] w-full lg:w-[70%] bg-black"></span>
+			</div>
+
+        </section>
+    )
+}

app/page.tsx

@@ -1,6 +1,7 @@
 import Nav from './components/Nav'
 import Hero from './components/Hero'
 import About from './components/About'
+import Work from './components/Work'
 import SocialLinks from './components/SocialLinks'
 import Email from './components/Email'
 
@@ -16,11 +17,12 @@ const inter = Inter({
 export default function Home() {
   return (
     <main className={`${inter.className} overflow-hidden`}>
-      <div className="relative mx-auto px-[30px] lg:max-w-[calc(100vw-80px)] lg:px-0 2xl:max-w-[calc(100vw-140px)]">
+      <div className="relative mx-auto px-[20px] lg:max-w-[calc(100vw-80px)] lg:px-0 2xl:max-w-[calc(100vw-140px)]">
         <Nav />
         <Hero />
         <About />
         <Skills />
+        <Work />
 
         <SocialLinks />
         <Email />