From b7bf76977a674b08043366598a985c1aa1e6088d Mon Sep 17 00:00:00 2001
From: albugowy15 <kholidbughowi@gmail.com>
Date: Sun, 22 Jan 2023 12:53:37 +0700
Subject: [PATCH 1/4] add social media in navbar

---
 package.json                              |   1 +
 public/sitemap.xml                        |  30 +--
 src/components/layout/partials/Navbar.tsx | 195 +++++++++++------
 src/modules/blog/pages/BlogDetail.tsx     |  60 +++--
 src/styles/globals.scss                   |  88 ++++----
 src/utils/hooks/useHeadingObserver.ts     |  33 +++
 src/utils/hooks/useScrollHeadings.ts      |  53 +++++
 src/utils/hooks/useScrollSpy.ts           |  47 ++++
 yarn.lock                                 | 254 ++++++++++++----------
 9 files changed, 490 insertions(+), 271 deletions(-)
 create mode 100644 src/utils/hooks/useHeadingObserver.ts
 create mode 100644 src/utils/hooks/useScrollHeadings.ts
 create mode 100644 src/utils/hooks/useScrollSpy.ts

diff --git a/package.json b/package.json
index 6d2dd30..2d43d7e 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
+    "react-use-scrollspy": "^3.1.1",
     "reading-time": "^1.5.0",
     "rehype": "^12.0.1",
     "rehype-code-titles": "^1.1.0",
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 498569c..520d72a 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -1,18 +1,18 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://www.bughowi.com</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.bughowi.com/about</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.bughowi.com/blog</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.bughowi.com/projects</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.bughowi.com/blog/build-react-form-with-react-hook-form-and-yup</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.bughowi.com/blog/create-blog-with-mdx-contentlayer</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.bughowi.com/blog/nextjs-key-features</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.bughowi.com/blog/simple-toc-in-mdx</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.bughowi.com/blog/typescript-fundamentals</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.bughowi.com/blog/usecontext-and-redux</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.bughowi.com/projects/bughowi-com</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.bughowi.com/projects/jamjiwa</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.bughowi.com/projects/jelata</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.bughowi.com/projects/netflix-clone</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.bughowi.com/projects/nextjs-blog</loc><lastmod>2023-01-19T18:02:39.511Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.bughowi.com</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.bughowi.com/about</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.bughowi.com/blog</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.bughowi.com/projects</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.bughowi.com/blog/build-react-form-with-react-hook-form-and-yup</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.bughowi.com/blog/create-blog-with-mdx-contentlayer</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.bughowi.com/blog/nextjs-key-features</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.bughowi.com/blog/simple-toc-in-mdx</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.bughowi.com/blog/typescript-fundamentals</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.bughowi.com/blog/usecontext-and-redux</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.bughowi.com/projects/bughowi-com</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.bughowi.com/projects/jamjiwa</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.bughowi.com/projects/jelata</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.bughowi.com/projects/netflix-clone</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.bughowi.com/projects/nextjs-blog</loc><lastmod>2023-01-21T13:02:41.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>
\ No newline at end of file
diff --git a/src/components/layout/partials/Navbar.tsx b/src/components/layout/partials/Navbar.tsx
index 960b0c5..4421809 100644
--- a/src/components/layout/partials/Navbar.tsx
+++ b/src/components/layout/partials/Navbar.tsx
@@ -3,36 +3,40 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import Image from "next/image";
 import pp from "@assets/profile-picture.png";
+import clsx from "clsx";
+import { BsGithub, BsLinkedin, BsTwitter } from "react-icons/bs";
+import { AiFillCaretDown } from "react-icons/ai";
 
 const Navbar = () => {
   const [onTop, setOnTop] = useState(true);
+  const [showDropdown, setShowDropdown] = useState(false);
   const router = useRouter();
 
   function handleScroll() {
     if (onTop !== (window.scrollY === 0)) {
-      setOnTop(window.scrollY === 0);
+      setOnTop(window.scrollY == 0);
     }
+    console.log(onTop);
   }
 
   useEffect(() => {
     window.addEventListener("scroll", handleScroll);
+    console.log(onTop);
     return () => {
       window.removeEventListener("scroll", handleScroll);
     };
   });
 
   return (
-    <nav className="p-1 w-full sticky top-0 z-50">
+    <nav
+      className={clsx("p-1 w-full sticky top-0 z-50 bg-darkPrimary/70", {
+        "backdrop-filter backdrop-blur-lg border-b border-slate-500/40": !onTop,
+      })}
+    >
       <div className="container 2xl:max-w-7xl px-3 xl:px-14 mx-auto">
-        <div
-          className={`${
-            onTop
-              ? ""
-              : "bg-darkPrimary bg-opacity-50 backdrop-filter backdrop-blur-lg shadow-black/60 shadow-md rounded-md"
-          } px-3`}
-        >
-          {/* Navbar on large screen */}
-          <div className="flex justify-between items-center py-2">
+        {/* Navbar on large screen */}
+        <div className="flex items-center justify-between py-2">
+          <div className="flex items-center w-full justify-between sm:justify-start sm:gap-4">
             <Link href="/">
               <div className="flex items-center justify-start gap-2 cursor-pointer">
                 <div className="relative overflow-hidden rounded-full p-4 border-[3px] border-blueAccent object-cover">
@@ -46,73 +50,124 @@ const Navbar = () => {
                 </div>
               </div>
             </Link>
-
-            <div className="flex justify-end items-center">
-              <ul className="flex justify-around gap-1 items-center">
-                <li>
-                  <Link href="/">
-                    <p
-                      className={`${
-                        router.pathname === "/"
-                          ? "text-blue-400 bg-darkSecondary/60 rounded"
-                          : ""
-                      }
+            <ul className="flex text-sm sm:text-base gap-1 items-center">
+              <li>
+                <Link href="/blog">
+                  <p
+                    className={`${
+                      router.pathname === "/blog" ||
+                      router.pathname === "/blog/[slug]"
+                        ? "text-blue-400 bg-darkSecondary/60 rounded"
+                        : ""
+                    }
                     font-bold cursor-pointer hover:text-blueAccent hover:bg-darkSecondary hover:rounded transition-colors duration-300 px-1 py-0.5
                     `}
-                    >
-                      Home
-                    </p>
-                  </Link>
-                </li>
-                <li>
-                  <Link href="/blog">
-                    <p
-                      className={`${
-                        router.pathname === "/blog" ||
-                        router.pathname === "/blog/[slug]"
-                          ? "text-blue-400 bg-darkSecondary/60 rounded"
-                          : ""
-                      }
+                  >
+                    Blog
+                  </p>
+                </Link>
+              </li>
+              <li>
+                <Link href="/projects">
+                  <p
+                    className={`${
+                      router.pathname === "/projects" ||
+                      router.pathname === "/projects/[slug]"
+                        ? "text-blue-400 bg-darkSecondary/60 rounded"
+                        : ""
+                    }
                     font-bold cursor-pointer hover:text-blueAccent hover:bg-darkSecondary hover:rounded transition-colors duration-300 px-1 py-0.5
                     `}
-                    >
-                      Blog
-                    </p>
-                  </Link>
-                </li>
-                <li>
-                  <Link href="/projects">
-                    <p
-                      className={`${
-                        router.pathname === "/projects" ||
-                        router.pathname === "/projects/[slug]"
-                          ? "text-blue-400 bg-darkSecondary/60 rounded"
-                          : ""
-                      }
+                  >
+                    Projects
+                  </p>
+                </Link>
+              </li>
+              <li>
+                <Link href="/about">
+                  <p
+                    className={`${
+                      router.pathname === "/about"
+                        ? "text-blue-400 bg-darkSecondary/60 rounded"
+                        : ""
+                    }
                     font-bold cursor-pointer hover:text-blueAccent hover:bg-darkSecondary hover:rounded transition-colors duration-300 px-1 py-0.5
                     `}
+                  >
+                    About
+                  </p>
+                </Link>
+              </li>
+              <li className="sm:hidden relative">
+                <div
+                  className="font-bold cursor-pointer px-1.5 py-0.5 bg-darkSecondary rounded-md flex items-center gap-1 text-blue-400"
+                  onClick={() => setShowDropdown(!showDropdown)}
+                >
+                  Connect <AiFillCaretDown />
+                </div>
+                {showDropdown && (
+                  <div className="absolute flex mt-2 flex-col gap-1 rounded-lg bg-darkSecondary p-2 z-50 right-0 shadow-md shadow-slate-800">
+                    <a
+                      className="flex items-center hover:cursor-pointer text-sm gap-2 hover:bg-darkPrimary py-1 px-2 rounded-lg"
+                      href="https://github.com/albugowy15"
+                      target="_blank"
+                      rel="noreferrer"
                     >
-                      Projects
-                    </p>
-                  </Link>
-                </li>
-                <li>
-                  <Link href="/about">
-                    <p
-                      className={`${
-                        router.pathname === "/about"
-                          ? "text-blue-400 bg-darkSecondary/60 rounded"
-                          : ""
-                      }
-                    font-bold cursor-pointer hover:text-blueAccent hover:bg-darkSecondary hover:rounded transition-colors duration-300 px-1 py-0.5
-                    `}
+                      <div className="p-1.5 bg-blueAccent/70 rounded-lg">
+                        <BsGithub />
+                      </div>
+                      <p className="font-semibold">albugowy15</p>
+                    </a>
+                    <a
+                      className="flex items-center hover:cursor-pointer text-sm gap-2 hover:bg-darkPrimary py-1 px-2 rounded-lg"
+                      href="https://twitter.com/bughowy"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <div className="p-1.5 bg-blueAccent/70 rounded-lg">
+                        <BsTwitter />
+                      </div>
+                      <p className="font-semibold">bughowy</p>
+                    </a>
+                    <a
+                      className="flex items-center hover:cursor-pointer text-sm gap-2 hover:bg-darkPrimary py-1 px-2 rounded-lg"
+                      href="https://linkedin.com/in/bughowi"
+                      target="_blank"
+                      rel="noreferrer"
                     >
-                      About
-                    </p>
-                  </Link>
-                </li>
-              </ul>
-            </div>
+                      <div className="p-1.5 bg-blueAccent/70 rounded-lg">
+                        <BsLinkedin />
+                      </div>
+                      <p className="font-semibold">bughowi</p>
+                    </a>
+                  </div>
+                )}
+              </li>
+            </ul>
+          </div>
+
+          <div className="sm:flex items-center gap-4 hidden">
+            <BsGithub
+              className="cursor-pointer hover:text-blue-500 hover:transition-colors hover:duration-300"
+              size={20}
+              onClick={() =>
+                window.open("https://github.com/albugowy15", "_blank")
+              }
+            />
+            <BsTwitter
+              className="cursor-pointer hover:text-blue-500 hover:transition-colors hover:duration-300"
+              size={20}
+              onClick={() =>
+                window.open("https://twitter.com/bughowy", "_blank")
+              }
+            />
+            <BsLinkedin
+              className="cursor-pointer hover:text-blue-500 hover:transition-colors hover:duration-300"
+              onClick={() =>
+                window.open("https://linkedin.com/in/bughowi", "_blank")
+              }
+              size={20}
+            />
           </div>
         </div>
       </div>
diff --git a/src/modules/blog/pages/BlogDetail.tsx b/src/modules/blog/pages/BlogDetail.tsx
index 7fb4c3f..46e57e3 100644
--- a/src/modules/blog/pages/BlogDetail.tsx
+++ b/src/modules/blog/pages/BlogDetail.tsx
@@ -7,10 +7,14 @@ import { useMDXComponent } from "next-contentlayer/hooks";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import Credit, { CreditProps } from "@components/card/Credit";
 import clsx from "clsx";
 import { Post } from "../../../../.contentlayer/generated";
+import { useHeadingObserver } from "@utils/hooks/useHeadingObserver";
+import useScrollHeadings from "@utils/hooks/useScrollHeadings";
+import useScrollSpy from "react-use-scrollspy";
+import { useScrollspy } from "@utils/hooks/useScrollSpy";
 
 const components = {
   img: NextImage,
@@ -106,27 +110,39 @@ export default function BlogDetail({ post }: { post: Post }) {
             loading="lazy"
           />
         </div>
-        <div className="hidden xl:block sticky flex-1 top-20 z-40">
-          <h3 className="font-bold text-xl">Table of Contents</h3>
-
-          {post.headings.map((heading: any) => {
-            return (
-              <div key={heading.slug}>
-                <a
-                  href={`#${heading.slug}`}
-                  className={clsx(
-                    "block text-slate-200/80 underline-offset-2 transition-all hover:text-slate-100 hover:underline hover:decoration-slate-100 py-0.5",
-                    {
-                      "pl-4": heading.heading === 3,
-                      "pl-6": heading.heading === 4,
-                    }
-                  )}
-                >
-                  {heading.text}
-                </a>
-              </div>
-            );
-          })}
+        <div className="hidden xl:flex flex-col divide-y divide-slate-600 bg-darkSecondary/50 rounded-lg sticky flex-1 top-20 z-40 border-2 border-slate-700">
+          <div className="flex justify-between px-3 py-2 items-center">
+            <h3 className="font-bold">Table of Contents</h3>
+            <p
+              className="text-sm text-blue-300 cursor-pointer"
+              onClick={() => {
+                window.scrollTo(0, 0);
+              }}
+            >
+              Back to top
+            </p>
+          </div>
+          <div className="py-2" id="toc-container">
+            {post.headings.map((heading: any, index: number) => {
+              return (
+                <div key={heading.slug}>
+                  <a
+                    href={`#${heading.slug}`}
+                    className={clsx(
+                      "block text-slate-200/80 font-semibold text-sm py-1.5 px-3",
+                      {
+                        "pl-6": heading.heading === 3,
+                        "pl-9": heading.heading === 4,
+                      },
+                      "hover:bg-darkSecondary"
+                    )}
+                  >
+                    {heading.text}
+                  </a>
+                </div>
+              );
+            })}
+          </div>
         </div>
       </main>
     </>
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 11a7030..6844b35 100755
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -5,70 +5,70 @@
 @tailwind utilities;
 
 ::-webkit-scrollbar {
-	height: 7px;
-	width: 7px;
+  height: 7px;
+  width: 7px;
 }
 
 ::-webkit-scrollbar-thumb {
-	background: #413c58;
-	border-radius: 10px;
+  background: #413c58;
+  border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb:horizontal {
-	background: #413c58;
-	border-radius: 10px;
+  background: #413c58;
+  border-radius: 10px;
 }
 
 body {
-	@apply bg-darkPrimary text-slate-200 font-primary;
+  @apply bg-darkPrimary text-slate-200 font-primary;
 }
 
 html {
-	@apply scroll-smooth relative min-h-full;
+  @apply scroll-smooth relative min-h-full;
 }
 
 #content-space {
-	@apply text-base space-y-3;
+  @apply text-base space-y-3;
 }
 
 #content-space {
-	h1 {
-		@apply text-3xl;
-	}
-	h2 {
-		@apply text-2xl pt-6;
-	}
-	h3 {
-		@apply text-xl pt-3;
-	}
-	h4 {
-		@apply text-lg pt-1;
-	}
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		@apply font-bold scroll-my-16;
-	}
-	p {
-		@apply text-slate-200/90;
-	}
+  h1 {
+    @apply text-3xl;
+  }
+  h2 {
+    @apply text-2xl pt-6;
+  }
+  h3 {
+    @apply text-xl pt-3;
+  }
+  h4 {
+    @apply text-lg pt-1;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-bold scroll-my-16;
+  }
+  p {
+    @apply text-slate-200/90;
+  }
 
-	blockquote {
-		@apply bg-darkSecondary px-3 py-2 border-l-4 border-blueAccent text-slate-200 font-bold italic;
-	}
+  blockquote {
+    @apply bg-darkSecondary px-3 py-2 border-l-4 border-blueAccent text-slate-200 font-bold italic;
+  }
 
-	ol {
-		@apply list-decimal ml-5;
-	}
+  ol {
+    @apply list-decimal ml-5;
+  }
 
-	ul {
-		@apply list-disc ml-5;
-	}
+  ul {
+    @apply list-disc ml-5;
+  }
 
-	a {
-		@apply text-[#6d90e2] hover:underline underline-offset-2 hover:text-[#4276ee] transition-transform ease-linear;
-	}
+  a {
+    @apply text-[#6d90e2] hover:underline underline-offset-2 hover:text-[#4276ee] transition-transform ease-linear;
+  }
 }
diff --git a/src/utils/hooks/useHeadingObserver.ts b/src/utils/hooks/useHeadingObserver.ts
new file mode 100644
index 0000000..48d9729
--- /dev/null
+++ b/src/utils/hooks/useHeadingObserver.ts
@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from "react";
+
+export function useHeadingObserver() {
+  const observer = useRef<IntersectionObserver>();
+  const [activeId, setActiveId] = useState<Record<string, boolean>>();
+
+  useEffect(() => {
+    const elements = document.querySelectorAll("h2, h3, h4");
+    console.log("started useEffect");
+    const handleObserver = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry?.isIntersecting) {
+          setActiveId((prev) => ({
+            ...prev,
+            [entry.target.id]: true,
+          }));
+          console.log("activeId", activeId);
+        }
+      });
+    };
+    observer.current = new IntersectionObserver(handleObserver, {
+      threshold: 1.0,
+    });
+
+    elements.forEach((elem) => observer.current?.observe(elem));
+
+    return () => {
+      observer.current?.disconnect;
+    };
+  }, [activeId]);
+
+  return { activeId };
+}
diff --git a/src/utils/hooks/useScrollHeadings.ts b/src/utils/hooks/useScrollHeadings.ts
new file mode 100644
index 0000000..e38e678
--- /dev/null
+++ b/src/utils/hooks/useScrollHeadings.ts
@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+
+export default function useScrollHeadings(): {
+  currentVisibles: Record<string, boolean>;
+  currentSection: string;
+} {
+  // @ts-ignore
+  const [currentSection, setCurrentSection] = useState<string>(undefined);
+  const [currentVisibles, setCurrentVisibles] = useState<
+    Record<string, boolean>
+  >({});
+
+  useEffect(() => {
+    const itemElements = document.querySelectorAll<HTMLElement>("h2, h3, h4");
+    if (!itemElements.length) return () => {};
+
+    const observerCallback: IntersectionObserverCallback = (entries) => {
+      const { target, isIntersecting } = entries[0];
+      const slug = target.id as string;
+
+      setCurrentVisibles((prev) => ({
+        ...prev,
+        [slug]: isIntersecting,
+      }));
+
+      if (isIntersecting) {
+        setCurrentSection(slug);
+      }
+    };
+
+    const observers: Array<IntersectionObserver> = [];
+
+    itemElements.forEach((item) => {
+      const observer = new IntersectionObserver(observerCallback, {
+        rootMargin: "-15% 0px -10% 0px",
+        threshold: 1.0,
+      });
+
+      observers.push(observer);
+      observer.observe(item);
+    });
+    console.log(currentVisibles);
+
+    return () => {
+      observers.forEach((observer) => observer.disconnect);
+    };
+  }, [currentSection]);
+
+  return {
+    currentSection,
+    currentVisibles,
+  };
+}
diff --git a/src/utils/hooks/useScrollSpy.ts b/src/utils/hooks/useScrollSpy.ts
new file mode 100644
index 0000000..a1830ef
--- /dev/null
+++ b/src/utils/hooks/useScrollSpy.ts
@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from "react";
+
+export const useScrollspy = (
+  elements: Element[],
+  options: { offset: number; root: HTMLElement | null }
+) => {
+  const [currentIntersectingElementIndex, setCurrentIntersectingElementIndex] =
+    useState(-1);
+
+  const rootMargin = `-${(options && options.offset) || 0}px 0px 0px 0px`;
+
+  const observer = useRef<IntersectionObserver>();
+
+  useEffect(() => {
+    if (observer.current) {
+      observer.current.disconnect();
+    }
+
+    observer.current = new IntersectionObserver(
+      (entries) => {
+        // find the index of the section that is currently intersecting
+        const indexOfElementIntersecting = entries.findIndex((entry) => {
+          return entry.intersectionRatio > 0;
+        });
+
+        // set this index to the state
+        setCurrentIntersectingElementIndex(indexOfElementIntersecting);
+      },
+      {
+        root: (options && options.root) || null,
+        // use this option to handle custom offset
+        rootMargin,
+      }
+    );
+
+    const { current: currentObserver } = observer;
+
+    // observe all the elements passed as argument of the hook
+    elements.forEach((element) =>
+      element ? currentObserver?.observe(element) : null
+    );
+
+    return () => currentObserver?.disconnect();
+  }, [elements, options, rootMargin]);
+
+  return [currentIntersectingElementIndex];
+};
diff --git a/yarn.lock b/yarn.lock
index e963bf0..6110018 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -270,82 +270,82 @@
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
-"@next/env@13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.1.2.tgz#4f13e3e9d44bb17fdc1d4543827459097035f10f"
-  integrity sha512-PpT4UZIX66VMTqXt4HKEJ+/PwbS+tWmmhZlazaws1a+dbUA5pPdjntQ46Jvj616i3ZKN9doS9LHx3y50RLjAWg==
+"@next/env@13.1.4":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.1.4.tgz#ed91156ee48791ad85992d95d8e1f46a740c0d5e"
+  integrity sha512-x7ydhMpi9/xX7yVK+Fw33OuwwQWVZUFRxenK3z89fmPzQZyUk35Ynb+b7JkrhfRhDIFFvvqpzVSXeseSlBAw7A==
 
-"@next/eslint-plugin-next@13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.1.2.tgz#613deefddc9a2f3a3ef01a100cbcff54dfa03fd0"
-  integrity sha512-WGaNVvIYphdriesP6r7jq/8l7u38tzotnVQuxc1RYKLqYYApSsrebti3OCPoT3Gx0pw2smPIFHH98RzcsgW5GQ==
+"@next/eslint-plugin-next@13.1.4":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.1.4.tgz#7dd5025d40b9564fc2cc1ea4aa9661a9552ec875"
+  integrity sha512-a/T30+7Q1scom5t3L+wEBkYzCa+bhT/3DTxzxlNy4Xckw2InzcckQGeIi/larDgh5r2fSSJswhYAZEcKtuJiig==
   dependencies:
     glob "7.1.7"
 
-"@next/swc-android-arm-eabi@13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.2.tgz#eacc7757b480a8150c1aea748bf7892a4fc62f64"
-  integrity sha512-7mRz1owoGsbfIcdOJA3kk7KEwPZ+OvVT1z9DkR/yru4QdVLF69h/1SHy0vlUNQMxDRllabhxCfkoZCB34GOGAg==
-
-"@next/swc-android-arm64@13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-13.1.2.tgz#f3d41339b4f15852a589fe11820408572a512a27"
-  integrity sha512-mgjZ2eJSayovQm1LcE54BLSI4jjnnnLtq5GY5g+DdPuUiCT644gKtjZ/w2BQvuIecCqqBO+Ph9yzo/wUTq7NLg==
-
-"@next/swc-darwin-arm64@13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.2.tgz#1a20a2262aa7a250517c9a7f2efd6ac6273f8c63"
-  integrity sha512-RikoQqy109r2222UJlyGs4dZw2BibkfPqpeFdW5JEGv+L2PStlHID8DwyVYbmHfQ0VIBGvbf/NAUtFakAWlhwg==
-
-"@next/swc-darwin-x64@13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.1.2.tgz#242bb321676bd88f4cffa7eae3283215cd1185ce"
-  integrity sha512-JbDZjaTvL8gyPC5TAH6OnD4jmXPkyUxRYPvu08ZmhT/XAFBb/Cso0BdXyDax/BPCG70mimP9d3hXNKNq+A0VtQ==
-
-"@next/swc-freebsd-x64@13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.1.2.tgz#9589f7f2bebfa43a744c9e41654e743b38a318b1"
-  integrity sha512-ax4j8VrdFQ/xc3W7Om0u1vnDxVApQHKsChBbAMynCrnycZmpbqK4MZu4ZkycT+mx2eccCiqZROpbzDbEdPosEw==
-
-"@next/swc-linux-arm-gnueabihf@13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.1.2.tgz#8935b0c8f232e36c3d88cd1e1023afa8d51f7260"
-  integrity sha512-NcRHTesnCxnUvSJa637PQJffBBkmqi5XS/xVWGY7dI6nyJ+pC96Oj7kd+mcjnFUQI5lHKbg39qBWKtOzbezc4w==
-
-"@next/swc-linux-arm64-gnu@13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.1.2.tgz#3482f72e580cdfc4bbec2e55dd55d5a9bdf7038b"
-  integrity sha512-AxJdjocLtPrsBY4P2COSBIc3crT5bpjgGenNuINoensOlXhBkYM0aRDYZdydwXOhG+kN2ngUvfgitop9pa204w==
-
-"@next/swc-linux-arm64-musl@13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.1.2.tgz#3b7ca70fd813c77f618ee34a150b977cc15af9a3"
-  integrity sha512-JmNimDkcCRq7P5zpkdqeaSZ69qKDntEPtyIaMNWqy5M0WUJxGim0Fs6Qzxayiyvuuh9Guxks4woQ/j/ZvX/c8Q==
-
-"@next/swc-linux-x64-gnu@13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.1.2.tgz#51a7a889e88eb87a5ce9658842f9e8422e037ead"
-  integrity sha512-TsLsjZwUlgmvI42neTuIoD6K9RlXCUzqPtvIClgXxVO0um0DiZwK+M+0zX/uVXhMVphfPY2c5YeR1zFSIONY4A==
-
-"@next/swc-linux-x64-musl@13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.1.2.tgz#4c0dd08a6f8a7e4881c3551de29259b3cfe86e27"
-  integrity sha512-eSkyXgCXydEFPTkcncQOGepafedPte6JT/OofB9uvruucrrMVBagCASOuPxodWEMrlfEKSXVnExMKIlfmQMD7A==
-
-"@next/swc-win32-arm64-msvc@13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.1.2.tgz#589fcce82f9f7224d2399d8d7bcba9097bb50dad"
-  integrity sha512-DmXFaRTgt2KrV9dmRLifDJE+cYiutHVFIw5/C9BtnwXH39uf3YbPxeD98vNrtqqqZVVLXY/1ySaSIwzYnqeY9g==
-
-"@next/swc-win32-ia32-msvc@13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.1.2.tgz#9be05202730530631b51d7753d447dfe86095c9f"
-  integrity sha512-3+nBkuFs/wT+lmRVQNH5SyDT7I4vUlNPntosEaEP63FuYQdPLaxz0GvcR66MdFSFh2fsvazpe4wciOwVS4FItQ==
-
-"@next/swc-win32-x64-msvc@13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.1.2.tgz#c7e75033e8b8f497768c7b462ac642830141bb00"
-  integrity sha512-avsyveEvcvH42PvKjR4Pb8JlLttuGURr2H3ZhS2b85pHOiZ7yjH3rMUoGnNzuLMApyxYaCvd4MedPrLhnNhkog==
+"@next/swc-android-arm-eabi@13.1.4":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.4.tgz#7d258554b0812f693e91d1bfc940d0e386b394f7"
+  integrity sha512-5PAchzFst3In6Ml+9APvBj89H29lcPXcUqEYBVv09fWK/V4IuViKc2qOqM9pyPyw7KsqaZPmuqaG595E6jdZLA==
+
+"@next/swc-android-arm64@13.1.4":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-13.1.4.tgz#03572661993ba554c4ac6a2b99c35b5062727489"
+  integrity sha512-LCLjjRhsQ5fR9ExzR2fqxuyJe/D4Ct/YkdonVfJfqOfkEpFwUTQDOVo5GrQec4LZDk3zY+o6vZYjXbB0nD9VLA==
+
+"@next/swc-darwin-arm64@13.1.4":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.4.tgz#10189b4753b43941ffb0f396ee878176c8b4b662"
+  integrity sha512-LSc/tF1FQ1y1SwKiCdGg8IIl7+Csk6nuLcLIyQXs24UNYjXg5+7vUQXqE8y66v/Dq8qFDC9rM61QhpM9ZDftbg==
+
+"@next/swc-darwin-x64@13.1.4":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.1.4.tgz#e6574b43699bfe74e38dd620fdaecd7a1676aa0a"
+  integrity sha512-WoApDo8xfafrNc9+Mz5MwGFKUwbDHsGqLleTGZ8upegwVqDyHsYzqJQudf+loqhV58oGTOqP1eWaHn2J7dijXA==
+
+"@next/swc-freebsd-x64@13.1.4":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.1.4.tgz#96e77d986bd22b08ce12d3a5fc884494328b94b2"
+  integrity sha512-fqNyeT8G4guN8AHPIoBRhGY2GJg89FyWpuwX4o0Y3vUy/84IGZpNst3paCzaYkQSqQE/AuCpkB7hKxkN7ittXw==
+
+"@next/swc-linux-arm-gnueabihf@13.1.4":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.1.4.tgz#91b035a6c88e8d583f8b9aef465b64d05ecd1f95"
+  integrity sha512-MEfm8OC1YR9/tYHUzlQsxcSmiuf8XdO7bqh5VtG4pilScjc5I5t+tQgIDgoDGePfh5W99W23hb3s6oCFrt99rw==
+
+"@next/swc-linux-arm64-gnu@13.1.4":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.1.4.tgz#15726af0ce29450ffde593e993b0ec1beba75154"
+  integrity sha512-2wgth/KsuODzW/E7jsRoWdhKmE5oZzXcBPvf9RW+ZpBNvYQkEDlzfLA7n8DtxTU8I4oMas0mdEPdCWXrSNnVZw==
+
+"@next/swc-linux-arm64-musl@13.1.4":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.1.4.tgz#74f449a2bb7b6f6fdaa67df0fa3665ee99a826b8"
+  integrity sha512-GdWhCRljsT7rNEElEsdu4RRppd+XaQOX1IJslsh/+HU6LsJGUE8tXpa68yJjCsHZHifkbdZNeCr5SYdsN6CbAA==
+
+"@next/swc-linux-x64-gnu@13.1.4":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.1.4.tgz#dfaed86d84f11ce6c14c267ead267eab7cbea66d"
+  integrity sha512-Rsk/ojwYqMskN2eo5hUSVe7UuMV/aSjmrmJ0BCFGFPfBY9sPgmYj/oXlDDN0y5lJD9acPuiBjknLWgnOnx5JIA==
+
+"@next/swc-linux-x64-musl@13.1.4":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.1.4.tgz#6f5f184967ba00379ac179546a9575bb7aff9c21"
+  integrity sha512-gKSVPozedA2gpA+vggYnAqpDuzWFed2oxFeXxHw0aW2ALdAZswAinn1ZwXEQ5fHnVguxjZhH0+2nBxpMdF8p5Q==
+
+"@next/swc-win32-arm64-msvc@13.1.4":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.1.4.tgz#ccfa61a8ea56b55d7251f32b6c518ed0962d2923"
+  integrity sha512-+kAXIIVb7Q4LCKmi7dn9qVlG1XUf3Chgj5Rwl0rAP4WBV2TnJIgsOEC24G1Mm3jjif+qXm7SJS9YZ9Yg3Y8sSQ==
+
+"@next/swc-win32-ia32-msvc@13.1.4":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.1.4.tgz#8d164ce4de9eeaf3400ad4becdd653f68f0d9527"
+  integrity sha512-EsfzAFBVaw1zg1FzlLMgRaTX/DKY+EnAvJ6mCIJMGeSOPIj4Oy6xF2yEQ3VaRkwFpAafHJH6JNB/CGrdKFCMXw==
+
+"@next/swc-win32-x64-msvc@13.1.4":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.1.4.tgz#0eab48201b90e862c76add99c4feff00bfb0fb67"
+  integrity sha512-bygNjmnq+F9NqJXh7OfhJgqu6LGU29GNKQYVyZkxY/h5K0WWUvAE/VL+TdyMwbvQr9KByx5XLwORwetLxXCo4g==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -1589,11 +1589,11 @@ escape-string-regexp@^5.0.0:
   integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
 
 eslint-config-next@^13.1.2:
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-13.1.2.tgz#bd15be592546e3543f77f96bc55be830dd76fd41"
-  integrity sha512-zdRAQOr8v69ZwJRtBrGqAqm160ONqKxU/pV1FB1KlgfyqveGsLZmlQ7l31otwtw763901J7xdiTVkj2y3YxXZA==
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-13.1.4.tgz#f77d3f62e1b62564bd5c88c27bb5a00eb786c565"
+  integrity sha512-r7n9V4/kkiDDVFfBwI3tviGUV/jUzGI0lY3JefxceYaU18gdk2kMgNPyhHobowu1+yHZpZi8iEzRtzeTrtGRLg==
   dependencies:
-    "@next/eslint-plugin-next" "13.1.2"
+    "@next/eslint-plugin-next" "13.1.4"
     "@rushstack/eslint-patch" "^1.1.3"
     "@typescript-eslint/parser" "^5.42.0"
     eslint-import-resolver-node "^0.3.6"
@@ -1826,9 +1826,9 @@ estree-util-is-identifier-name@^1.0.0:
   integrity sha512-OVJZ3fGGt9By77Ix9NhaRbzfbDV/2rx9EP7YIDJTmsZSEc5kYn2vWcNccYyahJL2uAQZK2a5Or2i0wtIKTPoRQ==
 
 estree-util-is-identifier-name@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/estree-util-is-identifier-name/-/estree-util-is-identifier-name-2.0.1.tgz#cf07867f42705892718d9d89eb2d85eaa8f0fcb5"
-  integrity sha512-rxZj1GkQhY4x1j/CSnybK9cGuMFQYFPLq0iNyopqf14aOVLFtMv7Esika+ObJWPWiOHuMOAHz3YkWoLYYRnzWQ==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/estree-util-is-identifier-name/-/estree-util-is-identifier-name-2.1.0.tgz#fb70a432dcb19045e77b05c8e732f1364b4b49b2"
+  integrity sha512-bEN9VHRyXAUOjkKVQVvArFym08BTWB0aJPppZZr0UNyAqWsLaVfAqP7hbaTJjzHifmB5ebnR8Wm7r7yGN/HonQ==
 
 estree-util-to-js@^1.1.0:
   version "1.1.0"
@@ -1847,17 +1847,19 @@ estree-util-value-to-estree@^1.0.0:
     is-plain-obj "^3.0.0"
 
 estree-util-visit@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/estree-util-visit/-/estree-util-visit-1.2.0.tgz#aa0311a9c2f2aa56e9ae5e8b9d87eac14e4ec8f8"
-  integrity sha512-wdsoqhWueuJKsh5hqLw3j8lwFqNStm92VcwtAOAny8g/KS/l5Y8RISjR4k5W6skCj3Nirag/WUCMS0Nfy3sgsg==
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/estree-util-visit/-/estree-util-visit-1.2.1.tgz#8bc2bc09f25b00827294703835aabee1cc9ec69d"
+  integrity sha512-xbgqcrkIVbIG+lI/gzbvd9SGTJL4zqJKBFttUl5pP27KhAjtMKbX/mQXJ7qgyXpMgVy/zvpm0xoQQaGL8OloOw==
   dependencies:
     "@types/estree-jsx" "^1.0.0"
     "@types/unist" "^2.0.0"
 
 estree-walker@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-3.0.2.tgz#2d17ff18067683aaf97aed83fe0d300603db9b67"
-  integrity sha512-C03BvXCQIH/po+PNPONx/zSM9ziPr9weX8xNhYb/IJtdJ9z+L4z9VKPTB+UTHdmhnIopA2kc419ueyVyHVktwA==
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-3.0.3.tgz#67c3e549ec402a487b4fc193d1953a524752340d"
+  integrity sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==
+  dependencies:
+    "@types/estree" "^1.0.0"
 
 esutils@^2.0.2:
   version "2.0.3"
@@ -2029,9 +2031,9 @@ get-caller-file@^2.0.5:
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
 get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.3.tgz#063c84329ad93e83893c7f4f243ef63ffa351385"
-  integrity sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz#7ad1dc0535f3a2904bba075772763e5051f6d05f"
+  integrity sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==
   dependencies:
     function-bind "^1.1.1"
     has "^1.0.3"
@@ -2691,9 +2693,9 @@ isexe@^2.0.0:
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
 js-sdsl@^4.1.4:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0"
-  integrity sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.3.0.tgz#aeefe32a451f7af88425b11fdb5f58c90ae1d711"
+  integrity sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==
 
 "js-tokens@^3.0.0 || ^4.0.0":
   version "4.0.0"
@@ -2826,6 +2828,11 @@ lodash.merge@4.6.2, lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash@4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 long@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
@@ -3530,37 +3537,37 @@ next-contentlayer@^0.2.9:
     "@contentlayer/utils" "0.2.9"
 
 next-sitemap@^3.1.43:
-  version "3.1.45"
-  resolved "https://registry.yarnpkg.com/next-sitemap/-/next-sitemap-3.1.45.tgz#3ac9a18d2f9c13da27267ea9c257da8eac237a59"
-  integrity sha512-8vyvWC8KT8RIEUL9Vfiae9yGuIIiJ1IpepzbFtwZx43BaKsoi/Zk9OlmPKuQouVY726xwN7uLZPtgl2l2U+9Ug==
+  version "3.1.47"
+  resolved "https://registry.yarnpkg.com/next-sitemap/-/next-sitemap-3.1.47.tgz#3000bc9f3179ec834e3962367e7aee5ee922bf38"
+  integrity sha512-LZxCWZ6lhQBfv1cuGob3tnsaHWffQM7VDmkXXp8u3n4LD7EJAR/SamlMj3mpHa8bFeuR6TjjRqrq/7e4WSOcLQ==
   dependencies:
     "@corex/deepmerge" "^4.0.29"
     minimist "^1.2.7"
 
 next@^13.1.2:
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/next/-/next-13.1.2.tgz#4105b0cf238bb2f58d5e12dbded8cabb9785f2d9"
-  integrity sha512-Rdnnb2YH///w78FEOR/IQ6TXga+qpth4OqFSem48ng1PYYKr6XBsIk1XVaRcIGM3o6iiHnun0nJvkJHDf+ICyQ==
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/next/-/next-13.1.4.tgz#fe13ff4a656153b6249c101d79a54569c0cd05e5"
+  integrity sha512-g0oBUU+tcOPKbXTVdsDO2adc6wd/ggqauHHysPQJxuIKqZ+fwICGJht0C5D5V0A/77eQDF5EFwNdAHkFvBDsog==
   dependencies:
-    "@next/env" "13.1.2"
+    "@next/env" "13.1.4"
     "@swc/helpers" "0.4.14"
     caniuse-lite "^1.0.30001406"
     postcss "8.4.14"
     styled-jsx "5.1.1"
   optionalDependencies:
-    "@next/swc-android-arm-eabi" "13.1.2"
-    "@next/swc-android-arm64" "13.1.2"
-    "@next/swc-darwin-arm64" "13.1.2"
-    "@next/swc-darwin-x64" "13.1.2"
-    "@next/swc-freebsd-x64" "13.1.2"
-    "@next/swc-linux-arm-gnueabihf" "13.1.2"
-    "@next/swc-linux-arm64-gnu" "13.1.2"
-    "@next/swc-linux-arm64-musl" "13.1.2"
-    "@next/swc-linux-x64-gnu" "13.1.2"
-    "@next/swc-linux-x64-musl" "13.1.2"
-    "@next/swc-win32-arm64-msvc" "13.1.2"
-    "@next/swc-win32-ia32-msvc" "13.1.2"
-    "@next/swc-win32-x64-msvc" "13.1.2"
+    "@next/swc-android-arm-eabi" "13.1.4"
+    "@next/swc-android-arm64" "13.1.4"
+    "@next/swc-darwin-arm64" "13.1.4"
+    "@next/swc-darwin-x64" "13.1.4"
+    "@next/swc-freebsd-x64" "13.1.4"
+    "@next/swc-linux-arm-gnueabihf" "13.1.4"
+    "@next/swc-linux-arm64-gnu" "13.1.4"
+    "@next/swc-linux-arm64-musl" "13.1.4"
+    "@next/swc-linux-x64-gnu" "13.1.4"
+    "@next/swc-linux-x64-musl" "13.1.4"
+    "@next/swc-win32-arm64-msvc" "13.1.4"
+    "@next/swc-win32-ia32-msvc" "13.1.4"
+    "@next/swc-win32-x64-msvc" "13.1.4"
 
 nextjs-progressbar@0.0.16:
   version "0.0.16"
@@ -3982,9 +3989,9 @@ pump@^3.0.0:
     once "^1.3.1"
 
 punycode@^2.1.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.2.2.tgz#082313fe5efe0aa2d931d7aed15b99315c24e548"
-  integrity sha512-vKAcKbHEGA3cKbkNWwsA9MjHgIg4/X/xO/PnVQ/Pxt5eNC8/F726fGNlUlwwPej7NkmTg9OBWP4ovYvtdPtmXw==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
+  integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
 
 queue-microtask@^1.2.2:
   version "1.2.3"
@@ -4024,6 +4031,13 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-use-scrollspy@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/react-use-scrollspy/-/react-use-scrollspy-3.1.1.tgz#3816294290d93d85d6a13f2ec716a13db13c04e0"
+  integrity sha512-EXkQoMKqt6VF4fAxcLFsNLZksctXXmtC8LYk1Zb0Cn0MZX1LErikAoAPWWJkel3Ze7NbJRVgpIzwEX4w108tOg==
+  dependencies:
+    lodash "4.17.21"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -4705,9 +4719,9 @@ type-fest@^1.0.2:
   integrity sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==
 
 type-fest@^3.2.0:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-3.5.2.tgz#16ff97c5dc1fd6bd6d50ef3c6ba92cc9c1add859"
-  integrity sha512-Ph7S4EhXzWy0sbljEuZo0tTNoLl+K2tPauGrQpcwUWrOVneLePTuhVzcuzVJJ6RU5DsNwQZka+8YtkXXU4z9cA==
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-3.5.3.tgz#9f8cc2725aa8978ca65a4e6853e74748b0f2d27b"
+  integrity sha512-V2+og4j/rWReWvaFrse3s9g2xvUv/K9Azm/xo6CjIuq7oeGqsoimC7+9/A3tfvNcbQf8RPSVj/HV81fB4DJrjA==
 
 typed-array-length@^1.0.4:
   version "1.0.4"
@@ -4764,9 +4778,9 @@ unist-util-is@^5.0.0:
   integrity sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==
 
 unist-util-position-from-estree@^1.0.0, unist-util-position-from-estree@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unist-util-position-from-estree/-/unist-util-position-from-estree-1.1.1.tgz#96f4d543dfb0428edc01ebb928570b602d280c4c"
-  integrity sha512-xtoY50b5+7IH8tFbkw64gisG9tMSpxDjhX9TmaJJae/XuxQ9R/Kc8Nv1eOsf43Gt4KV/LkriMy9mptDr7XLcaw==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-position-from-estree/-/unist-util-position-from-estree-1.1.2.tgz#8ac2480027229de76512079e377afbcabcfcce22"
+  integrity sha512-poZa0eXpS+/XpoQwGwl79UUdea4ol2ZuCYguVaJS4qzIOMDzbqz8a3erUCOmubSZkaOuGamb3tX790iwOIROww==
   dependencies:
     "@types/unist" "^2.0.0"
 

From 530962819075dc25e9b5aaaf434bfa70320b8cbb Mon Sep 17 00:00:00 2001
From: albugowy15 <kholidbughowi@gmail.com>
Date: Sun, 22 Jan 2023 13:18:02 +0700
Subject: [PATCH 2/4] add edit page and tweet

---
 src/modules/blog/pages/BlogDetail.tsx | 34 +++++++++++++++++----------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/modules/blog/pages/BlogDetail.tsx b/src/modules/blog/pages/BlogDetail.tsx
index 46e57e3..7243d17 100644
--- a/src/modules/blog/pages/BlogDetail.tsx
+++ b/src/modules/blog/pages/BlogDetail.tsx
@@ -15,6 +15,8 @@ import { useHeadingObserver } from "@utils/hooks/useHeadingObserver";
 import useScrollHeadings from "@utils/hooks/useScrollHeadings";
 import useScrollSpy from "react-use-scrollspy";
 import { useScrollspy } from "@utils/hooks/useScrollSpy";
+import { BsTwitter } from "react-icons/bs";
+import { FaRegEdit } from "react-icons/fa";
 
 const components = {
   img: NextImage,
@@ -42,6 +44,11 @@ export default function BlogDetail({ post }: { post: Post }) {
     site_name: "Mohamad Kholid Bughowi",
   });
 
+  // https://github.com/albugowy15/bughowi.com/blob/main/src/contents/blog/build-react-form-with-react-hook-form-and-yup.mdx
+
+  const editUrl = `https://github.com/albugowy15/bughowi.com/blob/main/src/contents${post.url}.mdx`;
+  const tweetUrl = `https://twitter.com/intent/tweet?text=${post.title}&url=https://bughowi.com${post.url}&via=bughowy`;
+
   return (
     <>
       <Head>
@@ -79,18 +86,21 @@ export default function BlogDetail({ post }: { post: Post }) {
               {/* @ts-ignore */}
               <MDXContent components={components} />
             </div>
-            <div className="border-y-2 border-slate-400 mt-3">
-              <p className="py-4 flex flex-wrap items-center gap-2">
-                Categories :{" "}
-                {post.categories?.map((category, idx) => (
-                  <span
-                    className="px-1 py-0.5 bg-blueAccent text-slate-100 rounded-md"
-                    key={idx}
-                  >
-                    {category.name}
-                  </span>
-                ))}
-              </p>
+            <div className="flex justify-between mt-6">
+              <a
+                href={editUrl}
+                className="px-4 rounded hover:bg-darkSecondary transition-colors py-1 border border-slate-700 flex items-center gap-2 font-semibold"
+              >
+                <FaRegEdit color="#84DCCF" />
+                Edit this page
+              </a>
+              <a
+                href={tweetUrl}
+                className="px-4 rounded hover:bg-darkSecondary transition-colors py-1 border border-slate-700 flex items-center gap-2 font-semibold"
+              >
+                <BsTwitter color="#1DA1F2" />
+                Tweet this article
+              </a>
             </div>
           </article>
           <div className="py-4" />

From cbac1367c31e1a81f721949f2e7dcef65986777a Mon Sep 17 00:00:00 2001
From: albugowy15 <kholidbughowi@gmail.com>
Date: Sun, 22 Jan 2023 13:31:27 +0700
Subject: [PATCH 3/4] add get some post function

---
 src/pages/blog/index.tsx     |  22 ++++---
 src/pages/projects/index.tsx |  16 +++---
 src/utils/contents.ts        | 107 +++++++++++++++++++++++------------
 3 files changed, 93 insertions(+), 52 deletions(-)

diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 07b8a79..86cffe3 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -1,15 +1,21 @@
 import { Post } from "../../../.contentlayer/generated";
-import { getAllPosts } from "@utils/contents";
+import { getNPosts } from "@utils/contents";
 import Blog from "modules/blog/pages/Blog";
 
-export default function BlogPage({ posts, featuredPost }: { posts: Post[]; featuredPost: Post }) {
-	return <Blog posts={posts} featuredPost={featuredPost} />;
+export default function BlogPage({
+  posts,
+  featuredPost,
+}: {
+  posts: Post[];
+  featuredPost: Post;
+}) {
+  return <Blog posts={posts} featuredPost={featuredPost} />;
 }
 
 export async function getStaticProps() {
-	const posts = getAllPosts();
-	const featuredPost = posts.find((post) => post.isFeatured === true);
-	return {
-		props: { posts, featuredPost },
-	};
+  const posts = getNPosts(6);
+  const featuredPost = posts.find((post) => post.isFeatured === true);
+  return {
+    props: { posts, featuredPost },
+  };
 }
diff --git a/src/pages/projects/index.tsx b/src/pages/projects/index.tsx
index b7a68d4..ae7c02d 100644
--- a/src/pages/projects/index.tsx
+++ b/src/pages/projects/index.tsx
@@ -1,17 +1,17 @@
-import { getAllProjects } from "@utils/contents";
+import { getAllProjects, getNProjects } from "@utils/contents";
 import Projects from "modules/project/pages/Projects";
 import { Project } from "../../../.contentlayer/generated";
 
 export default function ProjectsPage({ projects }: { projects: Project[] }) {
-	return <Projects projects={projects} />;
+  return <Projects projects={projects} />;
 }
 
 export async function getStaticProps() {
-	const projects = getAllProjects();
+  const projects = getNProjects(6);
 
-	return {
-		props: {
-			projects,
-		},
-	};
+  return {
+    props: {
+      projects,
+    },
+  };
 }
diff --git a/src/utils/contents.ts b/src/utils/contents.ts
index 0734020..efae40e 100644
--- a/src/utils/contents.ts
+++ b/src/utils/contents.ts
@@ -4,49 +4,84 @@ import { Post } from "../../.contentlayer/generated";
 import { Options } from "rehype-pretty-code";
 
 export function getAllPosts() {
-	const posts = allPosts
-		.sort((a, b) => {
-			return compareDesc(new Date(a.date), new Date(b.date));
-		})
-		.map((post) => ({
-			description: post.description,
-			date: post.date,
-			readingTime: post.readingTime,
-			thumbnail: post.thumbnail,
-			title: post.title,
-			url: post.url,
-			categories: post.categories,
-			isFeatured: post.isFeatured,
-		}));
-
-	return posts;
+  const posts = allPosts
+    .sort((a, b) => {
+      return compareDesc(new Date(a.date), new Date(b.date));
+    })
+    .map((post) => ({
+      description: post.description,
+      date: post.date,
+      readingTime: post.readingTime,
+      thumbnail: post.thumbnail,
+      title: post.title,
+      url: post.url,
+      categories: post.categories,
+      isFeatured: post.isFeatured,
+    }));
+
+  return posts;
+}
+
+export function getNPosts(n: number) {
+  const posts = allPosts
+    .sort((a, b) => {
+      return compareDesc(new Date(a.date), new Date(b.date));
+    })
+    .map((post) => ({
+      description: post.description,
+      date: post.date,
+      readingTime: post.readingTime,
+      thumbnail: post.thumbnail,
+      title: post.title,
+      url: post.url,
+      categories: post.categories,
+      isFeatured: post.isFeatured,
+    }))
+    .slice(0, n);
+  return posts;
+}
+
+export function getNProjects(n: number) {
+  const projects = allProjects
+    .sort((a, b) => {
+      return compareDesc(new Date(a.date), new Date(b.date));
+    })
+    .map((project) => ({
+      date: project.date,
+      title: project.title,
+      description: project.description,
+      url: project.url,
+      techStack: project.techStack,
+    }))
+    .slice(0, n);
+  return projects;
 }
 
 export function getAllProjects() {
-	const projects = allProjects
-		.sort((a, b) => {
-			return compareDesc(new Date(a.date), new Date(b.date));
-		})
-		.map((project) => ({
-			date: project.date,
-			title: project.title,
-			description: project.description,
-			url: project.url,
-			techStack: project.techStack,
-		}));
-
-	return projects;
+  const projects = allProjects
+    .sort((a, b) => {
+      return compareDesc(new Date(a.date), new Date(b.date));
+    })
+    .map((project) => ({
+      date: project.date,
+      title: project.title,
+      description: project.description,
+      url: project.url,
+      techStack: project.techStack,
+    }));
+
+  return projects;
 }
 
 export function formatDate(post: Post) {
-	const dateString = format(parseISO(post.date), "LLLL y, d");
-	return dateString;
+  const dateString = format(parseISO(post.date), "LLLL y, d");
+  return dateString;
 }
 
 export const rehypePrettyCodeOptions: Partial<Options> = {
-	// use a prepackaged theme
-	theme: "dracula",
-	onVisitHighlightedLine(node) {
-		node.properties.className.push("line--highlighted");
-	},
+  // use a prepackaged theme
+  theme: "dracula",
+  onVisitHighlightedLine(node) {
+    node.properties.className.push("line--highlighted");
+  },
 };

From 9797e67285bc7082df7082a5c6d31953a0d004b2 Mon Sep 17 00:00:00 2001
From: albugowy15 <kholidbughowi@gmail.com>
Date: Sun, 22 Jan 2023 13:31:41 +0700
Subject: [PATCH 4/4] restyle intro and newsletter box

---
 src/components/layout/partials/Subscribe.tsx | 94 ++++++++++++--------
 src/modules/home/components/Intro.tsx        |  2 +-
 2 files changed, 57 insertions(+), 39 deletions(-)

diff --git a/src/components/layout/partials/Subscribe.tsx b/src/components/layout/partials/Subscribe.tsx
index 7fc217e..7e1cefc 100644
--- a/src/components/layout/partials/Subscribe.tsx
+++ b/src/components/layout/partials/Subscribe.tsx
@@ -3,47 +3,65 @@ import { useSubscribeToNewsletter } from "@utils/form";
 import SocialMedia from "./SocialMedia";
 
 const Subscribe = () => {
-	const { form, subscribe, inputEl } = useSubscribeToNewsletter();
+  const { form, subscribe, inputEl } = useSubscribeToNewsletter();
 
-	return (
-		<footer className='mx-auto p-5 w-full'>
-			<div className='bg-darkSecondary w-full max-w-xl rounded border border-gray-700 p-5 mx-auto'>
-				<p className='font-bold text-lg'>Subscribe to the newsletter</p>
+  return (
+    <footer className="mx-auto p-5 w-full">
+      <div className="bg-darkSecondary w-full max-w-xl rounded border border-gray-700 p-5 mx-auto">
+        <p className="font-bold text-lg">Subscribe to the newsletter</p>
 
-				<p className='py-1'>Get emails from me about web development, android, tech, and early access to new articles.</p>
-				<form onSubmit={subscribe} className='w-full mx-auto mt-1' method='post' target='_blank'>
-					<div className='flex flex-wrap w-full items-center justify-center gap-2'>
-						<input
-							type='email'
-							ref={inputEl}
-							id='email'
-							className='flex-auto bg-darkPrimary border border-darkSecondary text-slate-400 text-sm rounded focus:ring-blue-500 focus:border-blue-500 block p-2'
-							placeholder='name@gmail.com'
-							required
-						/>
-						<button type='submit' className='flex-1 w-28 p-1.5 text-center text-slate-200 bg-blueAccent rounded font-bold hover:bg-blue-500 transition-colors'>
-							{form.state === Form.Loading ? <span>Loading...</span> : "Subscribe"}
-						</button>
-					</div>
+        <p className="py-1">
+          Get emails from me about web development, programming, tech, and early
+          access to new articles.
+        </p>
+        <form
+          onSubmit={subscribe}
+          className="w-full mx-auto mt-1"
+          method="post"
+          target="_blank"
+        >
+          <div className="flex flex-wrap w-full items-center justify-center gap-2">
+            <input
+              type="email"
+              ref={inputEl}
+              id="email"
+              className="flex-auto bg-darkPrimary border border-darkSecondary text-slate-400 text-sm rounded focus:ring-blue-500 focus:border-blue-500 block p-2"
+              placeholder="name@gmail.com"
+              required
+            />
+            <button
+              type="submit"
+              className="flex-1 w-28 p-1.5 text-center text-slate-200 bg-blueAccent rounded font-bold hover:bg-blue-500 transition-colors"
+            >
+              {form.state === Form.Loading ? (
+                <span>Loading...</span>
+              ) : (
+                "Subscribe"
+              )}
+            </button>
+          </div>
 
-					{form.state === Form.Success ? (
-						<div className='mt-4'>
-							<span className='font-bold text-green-600'>
-								<span>&#128522;</span> Thank you for subscribing my newsletters
-							</span>
-						</div>
-					) : (
-						<span></span>
-					)}
-				</form>
-			</div>
-			<p className='text-center mt-8'>Find Me!</p>
-			<SocialMedia />
-			<div>
-				<p className='text-center text-xs mt-8 opacity-60'>&copy; 2022 bughowi.com - Built with Next.js, Tailwind, Contentlayer, Vercel</p>
-			</div>
-		</footer>
-	);
+          {form.state === Form.Success ? (
+            <div className="mt-4">
+              <span className="font-bold text-green-600">
+                <span>&#128522;</span> Thank you for subscribing my newsletters
+              </span>
+            </div>
+          ) : (
+            <span></span>
+          )}
+        </form>
+      </div>
+      <p className="text-center mt-8">Find Me!</p>
+      <SocialMedia />
+      <div>
+        <p className="text-center text-xs mt-8 opacity-60">
+          &copy; 2022 bughowi.com - Built with Next.js, Tailwind, Contentlayer,
+          Vercel
+        </p>
+      </div>
+    </footer>
+  );
 };
 
 export default Subscribe;
diff --git a/src/modules/home/components/Intro.tsx b/src/modules/home/components/Intro.tsx
index 0edbbba..a5bc3be 100644
--- a/src/modules/home/components/Intro.tsx
+++ b/src/modules/home/components/Intro.tsx
@@ -7,7 +7,7 @@ import { HiOutlineNewspaper } from "react-icons/hi";
 
 const Intro = () => {
   return (
-    <section className="flex items-center justify-between my-28">
+    <section className="flex items-center justify-between min-h-screen md:min-h-fit md:my-28">
       <div className="flex-1 max-w-2xl text-center md:text-left">
         <p className="text-4xl lg:text-5xl font-black mb-3 bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-blue-600  to-blue-400">
           Mohamad Kholid Bughowi