v4

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": []
+}

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/babel", "next/core-web-vitals"]
 }

_posts/49139961-ec0a-4e11-90b6-165fd4337534.md

@@ -0,0 +1,13 @@
+---
+date: '2023-01-20T11:48:00.834Z'
+title: New Blog
+tagline: Amazing New Blog
+preview: >-
+  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+  when an unknown printer took a galley of type and scrambled it to make a type
+  specimen book.
+image: >-
+  https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80
+---
+# New Blog

components/Button/index.js

@@ -1,38 +1,30 @@
-import React from "react";
-import { useTheme } from "next-themes";
-import data from "../../data/portfolio.json";
+import React from 'react';
+import { motion } from 'framer-motion';
 
 const Button = ({ children, type, onClick, classes }) => {
-  const { theme } = useTheme();
-  if (type === "primary") {
+  if (type === 'primary') {
     return (
-      <button
+      <motion.button
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
         onClick={onClick}
         type="button"
-        className={`text-sm tablet:text-base p-1 laptop:p-2 m-1 laptop:m-2 rounded-lg ${
-          theme === "dark" ? "bg-white text-black" : "bg-black text-white"
-        }  transition-all duration-300 ease-out first:ml-0 hover:scale-105 active:scale-100 link ${
-          data.showCursor && "cursor-none"
-        }  ${classes}`}
+        className={`text-sm tablet:text-base p-2 laptop:p-2 laptop:m-2 rounded-lg bg-gray-800 hover:bg-gray-900 text-white transition-all duration-300 ease-out first:ml-0 ${classes}`}
       >
         {children}
-      </button>
+      </motion.button>
     );
   }
   return (
-    <button
+    <motion.button
+      whileHover={{ scale: 1.05 }}
+      whileTap={{ scale: 0.95 }}
       onClick={onClick}
       type="button"
-      className={`text-sm tablet:text-base p-1 laptop:p-2 m-1 laptop:m-2 rounded-lg flex items-center transition-all ease-out duration-300 ${
-        theme === "dark"
-          ? "hover:bg-slate-600 text-white"
-          : "hover:bg-slate-100"
-      } hover:scale-105 active:scale-100  tablet:first:ml-0  ${
-        data.showCursor && "cursor-none"
-      } ${classes} link`}
+      className={`text-sm tablet:text-base p-2 laptop:p-2 m-1 laptop:m-2 rounded-lg flex items-center hover:bg-gray-100 ${classes}`}
     >
       {children}
-    </button>
+    </motion.button>
   );
 };
 

components/Header/index.js

@@ -1,197 +1,95 @@
-import { Popover } from "@headlessui/react";
-import { useTheme } from "next-themes";
-import { useRouter } from "next/router";
-import React, { useEffect, useState } from "react";
-import Button from "../Button";
-// Local Data
-import data from "../../data/portfolio.json";
+import React from 'react';
+import { Popover } from '@headlessui/react';
+import { useRouter } from 'next/router';
+
+// Components
+import Button from '../Button';
 
 const Header = ({ handleWorkScroll, handleAboutScroll, isBlog }) => {
   const router = useRouter();
-  const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  const { name, showBlog, showResume } = data;
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
 
   return (
-    <>
+    <div className="max-w-4xl mx-auto">
       <Popover className="block tablet:hidden mt-5">
         {({ open }) => (
           <>
-            <div className="flex items-center justify-between p-2 laptop:p-0">
+            <div className="flex items-center justify-between laptop:p-0">
               <h1
-                onClick={() => router.push("/")}
-                className="font-medium p-2 laptop:p-0 link"
+                onClick={() => router.push('/')}
+                className="font-medium laptop:p-0 link"
               >
-                {name}.
+                Chetan Verma
               </h1>
 
               <div className="flex items-center">
-                {data.darkMode && (
-                  <Button
-                    onClick={() =>
-                      setTheme(theme === "dark" ? "light" : "dark")
-                    }
-                  >
-                    <img
-                      className="h-6"
-                      src={`/images/${
-                        theme === "dark" ? "moon.svg" : "sun.svg"
-                      }`}
-                    ></img>
-                  </Button>
-                )}
-
                 <Popover.Button>
                   <img
                     className="h-5"
-                    src={`/images/${
-                      !open
-                        ? theme === "dark"
-                          ? "menu-white.svg"
-                          : "menu.svg"
-                        : theme === "light"
-                        ? "cancel.svg"
-                        : "cancel-white.svg"
-                    }`}
+                    src={`/images/${!open ? 'menu.svg' : 'cancel.svg'}`}
                   ></img>
                 </Popover.Button>
               </div>
             </div>
             <Popover.Panel
-              className={`absolute right-0 z-10 w-11/12 p-4 ${
-                theme === "dark" ? "bg-slate-800" : "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`}
             >
-              {!isBlog ? (
-                <div className="grid grid-cols-1">
-                  <Button onClick={handleWorkScroll}>Work</Button>
-                  <Button onClick={handleAboutScroll}>About</Button>
-                  {showBlog && (
-                    <Button onClick={() => router.push("/blog")}>Blog</Button>
-                  )}
-                  {showResume && (
-                    <Button
-                      onClick={() =>
-                        window.open("mailto:hello@chetanverma.com")
-                      }
-                    >
-                      Resume
-                    </Button>
-                  )}
-
-                  <Button
-                    onClick={() => window.open("mailto:hello@chetanverma.com")}
-                  >
-                    Contact
-                  </Button>
-                </div>
-              ) : (
-                <div className="grid grid-cols-1">
-                  <Button onClick={() => router.push("/")} classes="first:ml-1">
-                    Home
-                  </Button>
-                  {showBlog && (
-                    <Button onClick={() => router.push("/blog")}>Blog</Button>
-                  )}
-                  {showResume && (
-                    <Button
-                      onClick={() => router.push("/resume")}
-                      classes="first:ml-1"
-                    >
-                      Resume
-                    </Button>
-                  )}
-
-                  <Button
-                    onClick={() => window.open("mailto:hello@chetanverma.com")}
-                  >
-                    Contact
-                  </Button>
-                </div>
-              )}
+              <div className="grid grid-cols-1">
+                <Button classes="bg-white" onClick={() => router.push('/')}>
+                  Home
+                </Button>
+                <Button classes="bg-white" onClick={() => router.push('/blog')}>
+                  Blog
+                </Button>
+                <Button classes="bg-white" onClick={handleWorkScroll}>
+                  Work
+                </Button>
+                <Button classes="bg-white" onClick={handleAboutScroll}>
+                  About
+                </Button>
+                <Button classes="bg-white" onClick={() => router.push('/blog')}>
+                  Blog
+                </Button>
+                <Button
+                  classes="bg-white"
+                  onClick={() => window.open('mailto:hello@chetanverma.com')}
+                >
+                  Resume
+                </Button>
+                <Button
+                  type="primary"
+                  onClick={() => window.open('mailto:hello@chetanverma.com')}
+                >
+                  Contact
+                </Button>
+              </div>
             </Popover.Panel>
           </>
         )}
       </Popover>
       <div
-        className={`mt-10 hidden flex-row items-center justify-between sticky ${
-          theme === "light" && "bg-white"
-        } dark:text-white top-0 z-10 tablet:flex`}
+        className={`mt-6 hidden flex-row items-center justify-between sticky top-0 z-10 tablet:flex`}
       >
-        <h1
-          onClick={() => router.push("/")}
-          className="font-medium cursor-pointer mob:p-2 laptop:p-0"
-        >
-          {name}.
-        </h1>
-        {!isBlog ? (
+        <div className="w-full flex justify-between">
           <div className="flex">
+            <Button onClick={() => router.push('/')} classes="first:ml-0">
+              Home
+            </Button>
             <Button onClick={handleWorkScroll}>Work</Button>
             <Button onClick={handleAboutScroll}>About</Button>
-            {showBlog && (
-              <Button onClick={() => router.push("/blog")}>Blog</Button>
-            )}
-            {showResume && (
-              <Button
-                onClick={() => router.push("/resume")}
-                classes="first:ml-1"
-              >
-                Resume
-              </Button>
-            )}
-
-            <Button onClick={() => window.open("mailto:hello@chetanverma.com")}>
-              Contact
+            <Button onClick={() => router.push('/blog')}>Blog</Button>
+            <Button onClick={() => router.push('/resume')} classes="first:ml-1">
+              Resume
             </Button>
-            {mounted && theme && data.darkMode && (
-              <Button
-                onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-              >
-                <img
-                  className="h-6"
-                  src={`/images/${theme === "dark" ? "moon.svg" : "sun.svg"}`}
-                ></img>
-              </Button>
-            )}
           </div>
-        ) : (
-          <div className="flex">
-            <Button onClick={() => router.push("/")}>Home</Button>
-            {showBlog && (
-              <Button onClick={() => router.push("/blog")}>Blog</Button>
-            )}
-            {showResume && (
-              <Button
-                onClick={() => router.push("/resume")}
-                classes="first:ml-1"
-              >
-                Resume
-              </Button>
-            )}
-
-            <Button onClick={() => window.open("mailto:hello@chetanverma.com")}>
-              Contact
-            </Button>
-
-            {mounted && theme && data.darkMode && (
-              <Button
-                onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-              >
-                <img
-                  className="h-6"
-                  src={`/images/${theme === "dark" ? "moon.svg" : "sun.svg"}`}
-                ></img>
-              </Button>
-            )}
-          </div>
-        )}
+          <Button
+            type="primary"
+            onClick={() => window.open('mailto:hello@chetanverma.com')}
+          >
+            Contact
+          </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>
   );
 };