clearing out the canvas

components/Header/index.js

@@ -9,7 +9,7 @@ const Header = ({ handleWorkScroll, handleAboutScroll, isBlog }) => {
   const router = useRouter();
 
   return (
-    <>
+    <div className="max-w-4xl mx-auto">
       <Popover className="block tablet:hidden mt-5">
         {({ open }) => (
           <>
@@ -31,7 +31,7 @@ const Header = ({ handleWorkScroll, handleAboutScroll, isBlog }) => {
               </div>
             </div>
             <Popover.Panel
-              className={`absolute top-14 right-10 w-5/12 z-10 p-2 bg-white shadow-md rounded-md`}
+              className={`absolute top-8 right-0 w-8/12 z-10 p-2 bg-white shadow-md rounded-md`}
             >
               <div className="grid grid-cols-1">
                 <Button classes="bg-white" onClick={() => router.push('/')}>
@@ -89,7 +89,7 @@ const Header = ({ handleWorkScroll, handleAboutScroll, isBlog }) => {
           </Button>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

components/Socials/index.js

@@ -1,16 +1,14 @@
-import React from "react";
-import Button from "../Button";
-
-import yourData from "../../data/portfolio.json";
+import React from 'react';
+import Button from '../Button';
 
 const Socials = ({ className }) => {
   return (
     <div className={`${className} flex flex-wrap mob:flex-nowrap link`}>
-      {yourData.socials.map((social, index) => (
+      {/* {yourData.socials.map((social, index) => (
         <Button key={index} onClick={() => window.open(social.link)}>
           {social.title}
         </Button>
-      ))}
+      ))} */}
     </div>
   );
 };