feat: improve skills area

NedcloarBR · Jan 15, 2025 · 230053e · 230053e
1 parent bbf3d4c
commit 230053e
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 31 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -29,6 +29,15 @@
   },
   "Skills": {
     "Title": "Competencies",
+    "Categories": {
+      "Frontend": "Frontend",
+      "Backend": "Backend",
+      "Database": "Databases",
+      "Library": "Libraries",
+      "Tools": "Tools",
+      "DevOps": "DevOps",
+      "ProgrammingLanguage": "Programming Languages"
+    },
     "BeekeeperStudio": {
       "Description": "Beekeeper Studio is an open-source, cross-platform SQL  client for database developers. It offers an intuitive and user-friendly   interface to interact with databases, execute SQL queries, visualize  schemas, and much more."
     },

diff --git a/public/locales/pt-BR.json b/public/locales/pt-BR.json
@@ -29,6 +29,15 @@
   },
   "Skills": {
     "Title": "Competências",
+    "Categories": {
+      "Frontend": "Frontend",
+      "Backend": "Backend",
+      "Database": "Bancos de Dados",
+      "Library": "Bibliotecas",
+      "Tools": "Ferramentas",
+      "DevOps": "DevOps",
+      "ProgrammingLanguage": "Linguagens de Programação"
+    },
     "BeekeeperStudio": {
       "Description": "Beekeeper Studio é um cliente SQL de código aberto e multiplataforma para desenvolvedores de banco de dados. Ele oferece uma interface intuitiva e fácil de usar para interagir com bancos de dados, executar consultas SQL, visualizar esquemas e muito mais."
     },

diff --git a/src/components/skills.tsx b/src/components/skills.tsx
@@ -1,54 +1,109 @@
-"use client"
+"use client";
 
 import { useTranslations } from "next-intl";
 import { Icon } from "./icon";
-import { useState } from "react";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog";
-import { Button, Separator } from "./ui";
+import { useMemo, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Button,
+  Card,
+  Separator,
+} from "@/components/ui";
 import Link from "next/link";
 import { SkillData } from "@/@types";
 import { skills } from "@/constants";
-import { track } from '@vercel/analytics';
+import { track } from "@vercel/analytics";
 
 export function Skills() {
   const t = useTranslations("Skills");
-
   const [isOpen, setIsOpen] = useState(false);
   const [dialogSkill, setDialogSkill] = useState<SkillData | null>(null);
 
-  function handleClick(skill: SkillData) {
-    track("Skills",{
-      action: "click",
-      category: "Skills",
-      label: skill.name,
-    }, {
-      flags: ["Skills"]
+  const skillsByCategory = useMemo(() => {
+    const map = new Map<string, SkillData[]>();
+    skills.forEach((skill) => {
+      const category = skill.categories[0];
+      if (!map.has(category)) {
+        map.set(category, []);
+      }
+      map.get(category)!.push(skill);
     });
+    return map;
+  }, []);
+
+  function handleClick(skill: SkillData) {
+    track(
+      "Skills",
+      {
+        action: "click",
+        category: "Skills",
+        label: skill.name,
+      },
+      {
+        flags: ["Skills"],
+      }
+    );
     setDialogSkill(skill);
     setIsOpen(true);
   }
 
   return (
-    <section id="skills" className="grid justify-center h-screen text-white" >
-      <div className="mt-8 flex justify-center items-center text-4xl">
+    <section id="skills" className="grid justify-center h-screen text-white">
+      <h1 className="mt-8 flex justify-center items-center text-4xl">
         {t("Title")}
-      </div>
+      </h1>
       <div className="flex items-center justify-center flex-wrap gap-4">
-        {skills.map((skill) => (
-          <div key={skill.name} className="flex flex-col items-center">
-            <Button variant="ghost" size="sm" onClick={() => handleClick(skill)}>
-              <Icon className="card-hover size-12 cursor-pointer" name={skill.name} extension={skill.name === "Necord" ? "png" : "svg"}/>
-            </Button>
-          </div>
-        ))}
+        {Array.from(skillsByCategory.entries()).map(
+          ([category, categorySkills]) => (
+            <Card
+              key={category}
+              className="flex flex-col items-center rounded-lg"
+            >
+              <h1 className="m-1 text-2xl mb-2">
+                {t(`Categories.${category}`)}
+              </h1>
+              <Separator className="m-2" />
+              <div className="m-2 flex items-center justify-center flex-wrap gap-2 w-96">
+                {categorySkills.map((skill) => (
+                  <Button
+                    key={skill.name}
+                    onClick={() => handleClick(skill)}
+                    className="flex items-center gap-4 card-hover"
+                    variant="link"
+                  >
+                    <Icon
+                      className="size-12"
+                      name={skill.name}
+                      extension={skill.name === "Necord" ? "png" : "svg"}
+                    />
+                  </Button>
+                ))}
+              </div>
+            </Card>
+          )
+        )}
       </div>
+
       {dialogSkill && (
         <Dialog open={isOpen} onOpenChange={(open) => setIsOpen(open)}>
           <DialogContent>
             <DialogHeader>
-              <DialogTitle >
-                <Link className="flex items-center justify-center gap-6" href={dialogSkill.url} target="_blank" rel="noopener noreferrer">
-                  <Icon className="size-12" name={dialogSkill.name} extension={dialogSkill.name === "Necord" ? "png" : "svg"}/>
+              <DialogTitle>
+                <Link
+                  className="flex items-center justify-center gap-6"
+                  href={dialogSkill.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Icon
+                    className="size-12"
+                    name={dialogSkill.name}
+                    extension={dialogSkill.name === "Necord" ? "png" : "svg"}
+                  />
                   {dialogSkill.name}
                 </Link>
               </DialogTitle>
@@ -61,5 +116,5 @@ export function Skills() {
         </Dialog>
       )}
     </section>
-  )
-}
+  );
+}
diff --git a/src/constants/skills.ts b/src/constants/skills.ts
@@ -40,7 +40,7 @@ export const skills: SkillData[] = [
   {
     name: "GitHub",
     description: "GitHub.Description",
-    categories: ["Tools"],
+    categories: ["DevOps", "Tools"],
     url: "https://github.com/NedcloarBR",
   },
   {
@@ -52,7 +52,7 @@ export const skills: SkillData[] = [
   {
     name: "JavaScript",
     description: "JavaScript.Description",
-    categories: ["Frontend", "Backend"],
+    categories: ["ProgrammingLanguage", "Frontend", "Backend"],
     url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
   },
   {
@@ -118,7 +118,7 @@ export const skills: SkillData[] = [
   {
     name: "TypeScript",
     description: "TypeScript.Description",
-    categories: ["Frontend", "Backend"],
+    categories: ["ProgrammingLanguage", "Frontend", "Backend"],
     url: "https://www.typescriptlang.org/",
   },
   {