From daef59ebcae02ce5de60b2a364199f2a86b7fb4e Mon Sep 17 00:00:00 2001
From: Ghian <ghiantan0418@gmail.com>
Date: Sat, 2 Nov 2024 17:45:35 +0800
Subject: [PATCH] feat: Add skills page and enhance useObserver hook (#14)

- Created a new skills page with additional skills.
- Refactored `useObserver` hook to observe elements only once on initial page load.
- Added visibility property for education and experience sections.
---
 src/components/common/hint.tsx                |  2 +-
 .../common}/skill-icon.tsx                    |  6 +-
 src/components/header/sheet-menu.tsx          | 61 +++++++++----
 src/components/header/spread-menu.tsx         | 11 ++-
 src/constants/skills.ts                       | 42 +++++++++
 src/lib/hooks/useObserver.tsx                 | 20 +++--
 src/lib/hooks/useVisibility.tsx               | 16 ++--
 src/pages/root/_components/contact/index.tsx  |  4 +-
 .../root/_components/education/index.tsx      |  2 +-
 .../root/_components/experience/index.tsx     |  2 +-
 src/pages/root/_components/skills/backend.tsx | 12 ++-
 .../root/_components/skills/frontend.tsx      | 12 ++-
 src/pages/root/_components/skills/index.tsx   | 10 ++-
 src/pages/root/_components/skills/others.tsx  | 12 ++-
 src/pages/root/_components/skills/tools.tsx   | 12 ++-
 src/pages/skills/page.tsx                     | 86 +++++++++++++++++++
 src/routes/app-routes.ts                      |  1 +
 src/routes/router.tsx                         |  4 +
 18 files changed, 268 insertions(+), 47 deletions(-)
 rename src/{pages/root/_components/skills => components/common}/skill-icon.tsx (75%)
 create mode 100644 src/pages/skills/page.tsx

diff --git a/src/components/common/hint.tsx b/src/components/common/hint.tsx
index 95a75c5..2fc764a 100644
--- a/src/components/common/hint.tsx
+++ b/src/components/common/hint.tsx
@@ -3,7 +3,7 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "../shadcn/tooltip";
+} from "@/components/shadcn/tooltip";
 
 interface HintProps {
   children: React.ReactNode;
diff --git a/src/pages/root/_components/skills/skill-icon.tsx b/src/components/common/skill-icon.tsx
similarity index 75%
rename from src/pages/root/_components/skills/skill-icon.tsx
rename to src/components/common/skill-icon.tsx
index 3105b7a..9e68b55 100644
--- a/src/pages/root/_components/skills/skill-icon.tsx
+++ b/src/components/common/skill-icon.tsx
@@ -6,15 +6,17 @@ import { cn } from "@/lib/utils";
 interface SkillIconProps {
   Icon: IconType;
   hexColor: string;
+  ariaHidden?: React.AriaAttributes["aria-hidden"];
 }
 
-const SkillIcon = ({ Icon, hexColor }: SkillIconProps) => {
+const SkillIcon = ({ Icon, hexColor, ariaHidden }: SkillIconProps) => {
   const [hovered, setHovered] = useState(false);
 
   return (
     <li
+      aria-hidden={ariaHidden}
       className={cn(
-        "rounded-full p-4 border",
+        "rounded-full p-4 border bg-foreground/5",
         hovered ? "border-foreground/15" : "border-border"
       )}
       onMouseEnter={() => setHovered(true)}
diff --git a/src/components/header/sheet-menu.tsx b/src/components/header/sheet-menu.tsx
index 25fc34b..1c90fb8 100644
--- a/src/components/header/sheet-menu.tsx
+++ b/src/components/header/sheet-menu.tsx
@@ -1,4 +1,6 @@
-import { LucideMenu } from "lucide-react";
+import { Link, useLocation } from "react-router-dom";
+import { LucideMenu, MoveLeft } from "lucide-react";
+import { useEffect, useState } from "react";
 import { useLenis } from "lenis/react";
 
 import {
@@ -12,6 +14,8 @@ import {
 } from "@/components/shadcn/sheet";
 import { Button } from "@/components/shadcn/button";
 import { ROOTMENU } from "@/constants/collections";
+import { useResize } from "@/lib/hooks/useResize";
+import { AppRoutes } from "@/routes/app-routes";
 import { Hint } from "@/components/common/hint";
 import { cn } from "@/lib/utils";
 
@@ -23,6 +27,15 @@ interface SheetMenuProps {
 
 const SheetMenu = ({ active }: SheetMenuProps) => {
   const lenis = useLenis();
+  const location = useLocation();
+  const [open, setOpen] = useState(false);
+  const { width } = useResize();
+
+  useEffect(() => {
+    if (width > 1024) {
+      setOpen(false);
+    }
+  }, [width]);
 
   const onOpenChange = (open: boolean) => {
     if (open) {
@@ -44,12 +57,19 @@ const SheetMenu = ({ active }: SheetMenuProps) => {
   };
 
   return (
-    <Sheet onOpenChange={onOpenChange}>
+    <Sheet
+      open={open}
+      onOpenChange={(open) => {
+        onOpenChange(open);
+        setOpen(open);
+      }}
+    >
       <Hint asChild label="Menu">
         <SheetTrigger asChild>
           <Button
             variant={"ghost"}
             size={"icon"}
+            aria-label="menu-toggle"
             className="lg:hidden hover:drop-shadow-primary-glow"
           >
             <LucideMenu className="w-5 h-5" />
@@ -65,20 +85,29 @@ const SheetMenu = ({ active }: SheetMenuProps) => {
         </SheetHeader>
 
         <nav className="w-full flex justify-end mt-10 flex-1">
-          <ul className="space-y-6 text-end">
-            {ROOTMENU.map((m, i) => (
-              <li
-                key={`${m.label}-${i}`}
-                className={cn(
-                  "capitalize font-semibold leading-none hover:scale-95 transition-all cursor-pointer hover:drop-shadow-primary-glow lg:hover:text-accent",
-                  active === m.label && "text-accent"
-                )}
-                onClick={() => onClick(m.label)}
-              >
-                {m.label}
-              </li>
-            ))}
-          </ul>
+          {location.pathname === "/" ? (
+            <ul className="space-y-6 text-end">
+              {ROOTMENU.map((m, i) => (
+                <li
+                  key={`${m.label}-${i}`}
+                  className={cn(
+                    "capitalize font-semibold leading-none hover:scale-95 transition-all cursor-pointer hover:drop-shadow-primary-glow lg:hover:text-accent",
+                    active === m.label && "text-accent"
+                  )}
+                  onClick={() => onClick(m.label)}
+                >
+                  {m.label}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <Link
+              to={AppRoutes.root}
+              className="flex items-center gap-x-2 hover:text-accent"
+            >
+              <MoveLeft className="size-4" /> Go home
+            </Link>
+          )}
         </nav>
 
         <SheetFooter className="fixed bottom-4 right-4">
diff --git a/src/components/header/spread-menu.tsx b/src/components/header/spread-menu.tsx
index 7975e53..166e3bc 100644
--- a/src/components/header/spread-menu.tsx
+++ b/src/components/header/spread-menu.tsx
@@ -1,3 +1,4 @@
+import { useLocation } from "react-router-dom";
 import { useLenis } from "lenis/react";
 
 import { ROOTMENU } from "@/constants/collections";
@@ -10,6 +11,7 @@ interface SpreadMenuProps {
 
 const SpreadMenu = ({ active, isMounted }: SpreadMenuProps) => {
   const lenis = useLenis();
+  const location = useLocation();
 
   const onClick = (id: string) => {
     const section = document.getElementById(id);
@@ -19,7 +21,14 @@ const SpreadMenu = ({ active, isMounted }: SpreadMenuProps) => {
   };
 
   return (
-    <nav className="hidden lg:flex-center px-4 flex-grow">
+    <nav
+      className={cn(
+        "hidden lg:flex-center px-4 flex-grow transition-opacity duration-500 ease-in-out",
+        location.pathname === "/"
+          ? "opacity-100"
+          : "opacity-0 pointer-events-none"
+      )}
+    >
       <ul
         className={cn(
           "flex-center gap-x-10 transition-opacity duration-1000 ease-in-out",
diff --git a/src/constants/skills.ts b/src/constants/skills.ts
index 2b5b49a..625c735 100644
--- a/src/constants/skills.ts
+++ b/src/constants/skills.ts
@@ -13,6 +13,10 @@ import {
   SiCss3Hex,
   SiDart,
   SiDartHex,
+  SiDocker,
+  SiDockerHex,
+  SiDotnet,
+  SiDotnetHex,
   SiExpress,
   SiExpressHex,
   SiFigma,
@@ -37,6 +41,8 @@ import {
   SiJavascriptHex,
   SiJupyter,
   SiJupyterHex,
+  SiLaravel,
+  SiLaravelHex,
   SiMongodb,
   SiMongodbHex,
   SiMysql,
@@ -57,14 +63,20 @@ import {
   SiPrismaHex,
   SiPython,
   SiPythonHex,
+  SiRailway,
+  SiRailwayHex,
   SiReact,
   SiReactHex,
   SiReacthookform,
   SiReacthookformHex,
   SiRedux,
   SiReduxHex,
+  SiRender,
+  SiRenrenHex,
   SiRive,
   SiRiveHex,
+  SiSentry,
+  SiSentryHex,
   SiShadcnui,
   SiShadcnuiHex,
   SiSupabase,
@@ -188,6 +200,16 @@ export const BACKEND = [
     hexColor: SiGoHex,
     label: "Go",
   },
+  {
+    icon: SiLaravel,
+    hexColor: SiLaravelHex,
+    label: "Laravel",
+  },
+  {
+    icon: SiDotnet,
+    hexColor: SiDotnetHex,
+    label: ".NET",
+  },
   {
     icon: SiMongodb,
     hexColor: SiMongodbHex,
@@ -251,6 +273,16 @@ export const OTHERS = [
     hexColor: SiNetlifyHex,
     label: "Netlify",
   },
+  {
+    icon: SiRender,
+    hexColor: SiRenrenHex,
+    label: "Render",
+  },
+  {
+    icon: SiRailway,
+    hexColor: SiRailwayHex,
+    label: "Railway",
+  },
   {
     icon: SiGithubpages,
     hexColor: SiGithubpagesHex,
@@ -279,6 +311,11 @@ export const OTHERS = [
 ];
 
 export const TOOLS = [
+  {
+    icon: SiDocker,
+    hexColor: SiDockerHex,
+    label: "Docker",
+  },
   {
     icon: SiGooglecolab,
     hexColor: SiGooglecolabHex,
@@ -319,4 +356,9 @@ export const TOOLS = [
     hexColor: SiPostmanHex,
     label: "Postman",
   },
+  {
+    icon: SiSentry,
+    hexColor: SiSentryHex,
+    label: "Sentry",
+  },
 ];
diff --git a/src/lib/hooks/useObserver.tsx b/src/lib/hooks/useObserver.tsx
index be82eb4..2c7f015 100644
--- a/src/lib/hooks/useObserver.tsx
+++ b/src/lib/hooks/useObserver.tsx
@@ -3,17 +3,27 @@ import { RefObject, useEffect, useState } from "react";
 interface useObserverProps {
   elementRef: RefObject<HTMLElement>;
   threshold?: number;
+  root?: Element | Document | null;
+  rootMargin?: string;
 }
 
-const useObserver = ({ elementRef, threshold = 0.1 }: useObserverProps) => {
+const useObserver = ({
+  elementRef,
+  threshold = 0.1,
+  root = null,
+  rootMargin = "0px",
+}: useObserverProps) => {
   const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
-        setIsVisible(entry.isIntersecting);
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect(); // Stop observing after it becomes visible
+        }
       },
-      { threshold: threshold }
+      { threshold: threshold, root: root, rootMargin: rootMargin }
     );
 
     const currentRef = elementRef.current;
@@ -26,11 +36,9 @@ const useObserver = ({ elementRef, threshold = 0.1 }: useObserverProps) => {
       if (currentRef) {
         observer.unobserve(currentRef);
       }
-      observer.disconnect();
     };
-  }, [elementRef, threshold]);
+  }, [elementRef, threshold, root, rootMargin]);
 
   return { isVisible };
 };
-
 export { useObserver };
diff --git a/src/lib/hooks/useVisibility.tsx b/src/lib/hooks/useVisibility.tsx
index b6c4294..ad502ea 100644
--- a/src/lib/hooks/useVisibility.tsx
+++ b/src/lib/hooks/useVisibility.tsx
@@ -3,15 +3,15 @@ import { useEffect, useState } from "react";
 const useVisibility = () => {
   const [isVisible, setIsVisible] = useState(true);
 
-  useEffect(() => {
-    const handleVisibilityChange = () => {
-      if (document.visibilityState === "hidden") {
-        setIsVisible(false);
-      } else {
-        setIsVisible(true);
-      }
-    };
+  const handleVisibilityChange = () => {
+    if (document.visibilityState === "hidden") {
+      setIsVisible(false);
+    } else {
+      setIsVisible(true);
+    }
+  };
 
+  useEffect(() => {
     document.addEventListener("visibilitychange", handleVisibilityChange);
 
     return () => {
diff --git a/src/pages/root/_components/contact/index.tsx b/src/pages/root/_components/contact/index.tsx
index 65ff332..a2c6179 100644
--- a/src/pages/root/_components/contact/index.tsx
+++ b/src/pages/root/_components/contact/index.tsx
@@ -35,8 +35,8 @@ const Contact = () => {
 
       <div
         className={cn(
-          `flex-center flex-col gap-y-6 lg:gap-y-12 flex-1 w-full h-full
-          transition-opacity duration-500 ease-in-out`,
+          `flex-center flex-col gap-y-6 lg:gap-y-12 flex-1 w-full
+           h-full transition-opacity duration-500 ease-in-out`,
           isVisible ? "opacity-100" : "opacity-0"
         )}
       >
diff --git a/src/pages/root/_components/education/index.tsx b/src/pages/root/_components/education/index.tsx
index 4118899..06415b0 100644
--- a/src/pages/root/_components/education/index.tsx
+++ b/src/pages/root/_components/education/index.tsx
@@ -37,7 +37,7 @@ const Education = () => {
         lineColor="hsl(var(--foreground) / 0.6)"
         className={cn(
           "mt-4 lg:mt-20 transition-opacity duration-500 ease-in-out",
-          isVisible ? "opacity-100" : "opacity-0"
+          isVisible ? "opacity-100 visible" : "opacity-0 invisible"
         )}
       >
         {EDUCATIONS.map((e, i) => (
diff --git a/src/pages/root/_components/experience/index.tsx b/src/pages/root/_components/experience/index.tsx
index d8e5668..e410786 100644
--- a/src/pages/root/_components/experience/index.tsx
+++ b/src/pages/root/_components/experience/index.tsx
@@ -36,7 +36,7 @@ const Experience = () => {
         lineColor="hsl(var(--foreground) / 0.6)"
         className={cn(
           "mt-4 lg:mt-20 transition-opacity duration-500 ease-in-out",
-          isVisible ? "opacity-100" : "opacity-0"
+          isVisible ? "opacity-100 visible" : "opacity-0 invisible"
         )}
       >
         {EXPERIENCES.map((e) => (
diff --git a/src/pages/root/_components/skills/backend.tsx b/src/pages/root/_components/skills/backend.tsx
index 3435515..ebfdb68 100644
--- a/src/pages/root/_components/skills/backend.tsx
+++ b/src/pages/root/_components/skills/backend.tsx
@@ -2,7 +2,7 @@ import { useVisibility } from "@/lib/hooks/useVisibility";
 import { BACKEND } from "@/constants/skills";
 import { cn } from "@/lib/utils";
 
-import { SkillIcon } from "./skill-icon";
+import { SkillIcon } from "../../../../components/common/skill-icon";
 
 const Backend = () => {
   const { isVisible } = useVisibility();
@@ -15,13 +15,21 @@ const Backend = () => {
           !isVisible && "paused"
         )}
       >
-        {BACKEND.concat(BACKEND).map((b, i) => (
+        {BACKEND.map((b, i) => (
           <SkillIcon
             key={`backend-${b.label}-${i}`}
             Icon={b.icon}
             hexColor={b.hexColor}
           />
         ))}
+        {BACKEND.map((b, i) => (
+          <SkillIcon
+            key={`backend-${b.label}-${i}`}
+            Icon={b.icon}
+            hexColor={b.hexColor}
+            ariaHidden="true"
+          />
+        ))}
       </ul>
     </div>
   );
diff --git a/src/pages/root/_components/skills/frontend.tsx b/src/pages/root/_components/skills/frontend.tsx
index abc00fb..bcf87bf 100644
--- a/src/pages/root/_components/skills/frontend.tsx
+++ b/src/pages/root/_components/skills/frontend.tsx
@@ -2,7 +2,7 @@ import { useVisibility } from "@/lib/hooks/useVisibility";
 import { FRONTEND } from "@/constants/skills";
 import { cn } from "@/lib/utils";
 
-import { SkillIcon } from "./skill-icon";
+import { SkillIcon } from "../../../../components/common/skill-icon";
 
 const Frontend = () => {
   const { isVisible } = useVisibility();
@@ -15,13 +15,21 @@ const Frontend = () => {
           !isVisible && "paused"
         )}
       >
-        {FRONTEND.concat(FRONTEND).map((f, i) => (
+        {FRONTEND.map((f, i) => (
           <SkillIcon
             key={`frontend-${f.label}-${i}`}
             Icon={f.icon}
             hexColor={f.hexColor}
           />
         ))}
+        {FRONTEND.map((f, i) => (
+          <SkillIcon
+            key={`frontend-${f.label}-${i}`}
+            Icon={f.icon}
+            hexColor={f.hexColor}
+            ariaHidden="true"
+          />
+        ))}
       </ul>
     </div>
   );
diff --git a/src/pages/root/_components/skills/index.tsx b/src/pages/root/_components/skills/index.tsx
index 239c600..5160f77 100644
--- a/src/pages/root/_components/skills/index.tsx
+++ b/src/pages/root/_components/skills/index.tsx
@@ -1,7 +1,9 @@
+import { Link } from "react-router-dom";
 import { useRef } from "react";
 
 import { QUERYELEMENT, ROOTSECTION } from "@/constants/enums";
 import { useObserver } from "@/lib/hooks/useObserver";
+import { AppRoutes } from "@/routes/app-routes";
 import { cn } from "@/lib/utils";
 
 import { GradientOverlay } from "./gradient-overlay";
@@ -34,10 +36,16 @@ const Skills = () => {
           Showcasing the skills I've developed and refined over the past 3
           years.
         </p>
+        <Link
+          to={AppRoutes.skills}
+          className="mt-2 text-sm hover:text-accent hover:drop-shadow-purple-glow underline-offset-4 hover:underline"
+        >
+          View All
+        </Link>
       </div>
       <div
         className={cn(
-          "w-full flex-center flex-col gap-y-4 relative transition-opacity duration-1000 ease-in-out",
+          "w-full h-full flex-center flex-col gap-y-4 relative transition-opacity duration-1000 ease-in-out",
           isVisible ? "opacity-100" : "opacity-0"
         )}
       >
diff --git a/src/pages/root/_components/skills/others.tsx b/src/pages/root/_components/skills/others.tsx
index 7d989da..69158f7 100644
--- a/src/pages/root/_components/skills/others.tsx
+++ b/src/pages/root/_components/skills/others.tsx
@@ -2,7 +2,7 @@ import { useVisibility } from "@/lib/hooks/useVisibility";
 import { OTHERS } from "@/constants/skills";
 import { cn } from "@/lib/utils";
 
-import { SkillIcon } from "./skill-icon";
+import { SkillIcon } from "../../../../components/common/skill-icon";
 
 const Others = () => {
   const { isVisible } = useVisibility();
@@ -15,13 +15,21 @@ const Others = () => {
           !isVisible && "paused"
         )}
       >
-        {OTHERS.concat(OTHERS).map((o, i) => (
+        {OTHERS.map((o, i) => (
           <SkillIcon
             key={`others-${o.label}-${i}`}
             Icon={o.icon}
             hexColor={o.hexColor}
           />
         ))}
+        {OTHERS.map((o, i) => (
+          <SkillIcon
+            key={`others-${o.label}-${i}`}
+            Icon={o.icon}
+            hexColor={o.hexColor}
+            ariaHidden="true"
+          />
+        ))}
       </ul>
     </div>
   );
diff --git a/src/pages/root/_components/skills/tools.tsx b/src/pages/root/_components/skills/tools.tsx
index 4680de6..6de5c0d 100644
--- a/src/pages/root/_components/skills/tools.tsx
+++ b/src/pages/root/_components/skills/tools.tsx
@@ -2,7 +2,7 @@ import { useVisibility } from "@/lib/hooks/useVisibility";
 import { TOOLS } from "@/constants/skills";
 import { cn } from "@/lib/utils";
 
-import { SkillIcon } from "./skill-icon";
+import { SkillIcon } from "../../../../components/common/skill-icon";
 
 const Tools = () => {
   const { isVisible } = useVisibility();
@@ -15,13 +15,21 @@ const Tools = () => {
           !isVisible && "paused"
         )}
       >
-        {TOOLS.concat([...TOOLS, ...TOOLS]).map((t, i) => (
+        {TOOLS.map((t, i) => (
           <SkillIcon
             key={`tools-${t.label}-${i}`}
             Icon={t.icon}
             hexColor={t.hexColor}
           />
         ))}
+        {TOOLS.map((t, i) => (
+          <SkillIcon
+            key={`tools-${t.label}-${i}`}
+            Icon={t.icon}
+            hexColor={t.hexColor}
+            ariaHidden="true"
+          />
+        ))}
       </ul>
     </div>
   );
diff --git a/src/pages/skills/page.tsx b/src/pages/skills/page.tsx
new file mode 100644
index 0000000..1d59553
--- /dev/null
+++ b/src/pages/skills/page.tsx
@@ -0,0 +1,86 @@
+import { MoveLeft } from "lucide-react";
+import { Link } from "react-router-dom";
+
+import { SkillIcon } from "@/components/common/skill-icon";
+import { AppRoutes } from "@/routes/app-routes";
+import { BACKEND, FRONTEND, OTHERS, TOOLS } from "@/constants/skills";
+
+const SkillsPage = () => {
+  return (
+    <section className="min-h-[calc(100dvh_-_56px)] space-y-2 lg:space-y-12 p-6 lg:py-6 lg:px-4 xl:px-0 mt-14">
+      <Link
+        to={AppRoutes.root}
+        className="flex items-center gap-x-2 hover:text-accent text-sm"
+      >
+        <MoveLeft className="size-4" /> Go home
+      </Link>
+
+      <div className="h-full w-full lg:pb-8">
+        <h1 className="text-xs lg:text-sm font-bold text-center tracking-widest pt-6 lg:pb-2">
+          SKILLS
+        </h1>
+        <p className="text-xl lg:text-5xl text-center">
+          Innovate, Implement, <span className="text-primary">Repeat.</span>
+        </p>
+        <p className="text-xs lg:text-sm text-muted-foreground text-center lg:mt-2 w-3/4 lg:w-full mx-auto">
+          Showcasing the skills I've developed and refined over the past 3
+          years.
+        </p>
+
+        <h4 className="text-xs lg:text-sm font-bold text-center tracking-widest mt-12">
+          FRONTEND
+        </h4>
+        <ul className="flex-center flex-wrap gap-4 mt-4">
+          {FRONTEND.map((f, i) => (
+            <SkillIcon
+              key={`frontend-${f.label}-${i}`}
+              Icon={f.icon}
+              hexColor={f.hexColor}
+            />
+          ))}
+        </ul>
+
+        <h4 className="text-xs lg:text-sm font-bold text-center tracking-widest mt-12">
+          BACKEND
+        </h4>
+        <ul className="flex-center flex-wrap gap-4 mt-4">
+          {BACKEND.map((b, i) => (
+            <SkillIcon
+              key={`backend-${b.label}-${i}`}
+              Icon={b.icon}
+              hexColor={b.hexColor}
+            />
+          ))}
+        </ul>
+
+        <h4 className="text-xs lg:text-sm font-bold text-center tracking-widest mt-12">
+          OTHERS
+        </h4>
+        <ul className="flex-center flex-wrap gap-4 mt-4">
+          {OTHERS.map((o, i) => (
+            <SkillIcon
+              key={`others-${o.label}-${i}`}
+              Icon={o.icon}
+              hexColor={o.hexColor}
+            />
+          ))}
+        </ul>
+
+        <h4 className="text-xs lg:text-sm font-bold text-center tracking-widest mt-12">
+          TOOLS
+        </h4>
+        <ul className="flex-center flex-wrap gap-4 mt-4">
+          {TOOLS.map((t, i) => (
+            <SkillIcon
+              key={`tools-${t.label}-${i}`}
+              Icon={t.icon}
+              hexColor={t.hexColor}
+            />
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export { SkillsPage };
diff --git a/src/routes/app-routes.ts b/src/routes/app-routes.ts
index 13d4abd..f9c434b 100644
--- a/src/routes/app-routes.ts
+++ b/src/routes/app-routes.ts
@@ -2,4 +2,5 @@ export const enum AppRoutes {
   root = "/",
   notFound = "*",
   github404 = "/404",
+  skills = "/skills",
 }
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index 0d978ae..9713ec0 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -5,6 +5,7 @@ import {
 } from "react-router-dom";
 
 import NotFoundPage from "@/pages/not-found/page";
+import { SkillsPage } from "@/pages/skills/page";
 import RootLayout from "@/pages/root/layout";
 import ErrorPage from "@/pages/error/page";
 import RootPage from "@/pages/root/page";
@@ -21,6 +22,9 @@ export const router = createBrowserRouter(
       {/* Root */}
       <Route index element={<RootPage />} />
 
+      {/* Skills */}
+      <Route path={AppRoutes.skills} element={<SkillsPage />} />
+
       {/* Github 404 */}
       <Route path={AppRoutes.github404} element={<NotFoundPage />} />