feat: add more projects and skills

public/locales/en-US.json

@@ -80,6 +80,9 @@
     "NodeJS": {
       "Description": "Node.js is a high-performance, open-source JavaScript runtime built on Chrome's V8 engine. It is used to develop fast and scalable network applications, command-line tools, and server-side scripts."
     },
+    "NPM": {
+      "Description": "NPM (Node Package Manager) is the default package manager for Node.js, used to install, share, and manage dependencies in JavaScript projects. It provides a large online repository of packages to simplify development."
+    },
     "PostgreSQL": {
       "Description": "PostgreSQL is a powerful, open-source object-relational database management system. It has over 15 years of active development and a proven architecture that has earned it a strong reputation for reliability, data integrity, and standards compliance."
     },
@@ -98,6 +101,9 @@
     "TypeScript": {
       "Description": "TypeScript is a superset of JavaScript developed by Microsoft that adds static typing and other enhanced features to the language. TypeScript can be used to develop large-scale JavaScript applications for any browser, host, and operating system."
     },
+    "VSCode": {
+      "Description": "Visual Studio Code is a source-code editor developed by Microsoft for Windows, Linux, and macOS. It includes support for debugging, integrated version control, syntax highlighting, intelligent code completion, snippets, and code refactoring."
+    },
     "Vercel": {
       "Description": "Vercel is a cloud platform for static sites and web applications that allows you to deploy websites in seconds. It offers continuous integration, global hosting, instant previews, and more, making it a popular choice for developers looking to deploy web applications quickly and easily."
     },
@@ -111,6 +117,12 @@
     "ViewDeploy": "View Deploy",
     "N-D-B": {
       "Description": "N-D-B is a Discord bot developed using DiscordJS and Necord an library for NestJS. It is a multipurpose bot that has several features, such as moderation, music, and fun commands. The bot is designed to be easy to use and has a simple and intuitive interface. It is constantly being updated with new features and improvements."
+    },
+    "RandomBrazil": {
+      "Description": "Random Brazil is an extension for Visual Studio Code (and other compatible IDEs) that allows you to generate and validate Brazilian document data such as CPF, CNPJ, CNH, among others. It is ideal for developers who need fictional data for testing or validating information in their applications."
+    },
+    "BiomeConfig": {
+      "Description": "Configuring a linter and formatter, such as BiomeJS, is crucial for maintaining consistent, readable, and error-free code. Linters ensure uniform coding standards and early error detection, saving debugging time. Formatters automate code structuring, enhancing readability and maintenance. These tools increase productivity by allowing developers to focus on critical tasks. They also enforce quality standards, creating a professional development environment. In CI/CD workflows, they ensure code adherence to quality standards, preserving codebase integrity."
     }
   },
   "Error": {

public/locales/pt-BR.json

@@ -80,6 +80,9 @@
     "NodeJS": {
       "Description": "Node.js é um ambiente de tempo de execução JavaScript de plataforma aberta e de alto desempenho construído no motor V8 do Chrome. Ele é usado para desenvolver aplicativos de rede rápidos e escaláveis, bem como ferramentas de linha de comando e scripts do lado do servidor."
     },
+    "NPM": {
+      "Description": "O NPM (Node Package Manager) é o gerenciador de pacotes padrão do Node.js, utilizado para instalar, compartilhar e gerenciar dependências de projetos JavaScript. Ele oferece um vasto repositório online de pacotes para facilitar o desenvolvimento."
+    },
     "PostgreSQL": {
       "Description": "PostgreSQL é um sistema de gerenciamento de banco de dados relacional de objeto de código aberto e poderoso. Ele tem mais de 15 anos de desenvolvimento ativo e uma arquitetura comprovada que ganhou uma forte reputação por confiabilidade, integridade de dados e conformidade com padrões."
     },
@@ -98,6 +101,9 @@
     "TypeScript": {
       "Description": "TypeScript é um superconjunto de JavaScript desenvolvido pela Microsoft que adiciona tipagem estática e outros recursos aprimorados à linguagem. O TypeScript pode ser usado para desenvolver aplicativos JavaScript em grande escala para qualquer navegador, host e qualquer sistema operacional."
     },
+    "VSCode": {
+      "Description": "Visual Studio Code é um editor de código-fonte desenvolvido pela Microsoft para Windows, Linux e macOS. Ele inclui suporte para depuração, controle de versão integrado, realce de sintaxe, complementação de código inteligente, snippets e refatoração de código."
+    },
     "Vercel": {
       "Description": "Vercel é uma plataforma de nuvem para sites estáticos e aplicativos da web que permite implantar sites em segundos. Ele oferece integração contínua, hospedagem global, pré-visualizações instantâneas e muito mais, tornando-o uma escolha popular para desenvolvedores que desejam implantar aplicativos da web rapidamente e com facilidade."
     },
@@ -111,6 +117,12 @@
     "ViewDeploy": "Ver Deploy",
     "N-D-B": {
       "Description": "N-D-B é um bot do Discord desenvolvido usando DiscordJS e Necord uma biblioteca para o NestJS. É um bot multipropósito que possui várias funcionalidades, como moderação, música e comandos divertidos. O bot é projetado para ser fácil de usar e possui uma interface simples e intuitiva. Ele está sendo constantemente atualizado com novos recursos e melhorias."
+    },
+    "RandomBrazil": {
+      "Description": "Random Brazil é uma extensão para o Visual Studio Code (e outras IDEs compatíveis) que permite gerar e validar dados de documentos brasileiros, como CPF, CNPJ, CNH, entre outros. Ideal para desenvolvedores que necessitam de dados fictícios para testes ou validação de informações em suas aplicações."
+    },
+    "BiomeConfig": {
+      "Description": "Configurar um linter e um formatador, como o BiomeJS, é essencial para manter um código consistente, legível e livre de erros. Linters garantem padrões uniformes de codificação e a detecção precoce de erros, economizando tempo de depuração. Formatadores automatizam a estruturação do código, melhorando sua legibilidade e manutenção. Essas ferramentas aumentam a produtividade, permitindo que os desenvolvedores se concentrem em tarefas críticas. Além disso, elas reforçam padrões de qualidade, criando um ambiente de desenvolvimento profissional. Em fluxos de trabalho CI/CD, garantem a conformidade do código com os padrões de qualidade, preservando a integridade da base de código."
     }
   },
   "Error": {

src/@types/index.d.ts

@@ -11,11 +11,13 @@ export type Techs =
   | "NestJS"
   | "NextJS"
   | "NodeJS"
+  | "NPM"
   | "PostgreSQL"
   | "Prisma"
   | "React"
   | "TailwindCSS"
   | "TypeScript"
+  | "VSCode"
   | "Vercel"
   | "Yarn";
 

src/components/about.tsx

@@ -23,9 +23,9 @@ export function About() {
 
   return (
     <section id="about" className="grid justify-center h-screen text-white">
-      <div className="mt-8 flex justify-center items-center text-4xl">
+      <h1 className="mt-8 flex justify-center items-center text-4xl">
         {t("Title")}
-      </div>
+      </h1>
       <div className="-mb-16 flex overflow-wrap break-word">
         <div className="flex-col flex gap-4">
           <img

src/components/projects/full-card.tsx

@@ -43,14 +43,12 @@ export function ProjectsFullCard({
         <DialogDescription>{t(info.description)}</DialogDescription>
         <Separator />
         <div>
-          <Button variant="link" size="sm" className="flex">
+          <Button variant="link" size="sm" className="flex" onClick={() => window.open(info.github, "_blank", "noopener noreferrer")}>
             <Icon name="GitHub" className="size-8" />
-            <Link href={info.github} />
             {t("ViewSource")}
           </Button>
-          <Button variant="link" size="sm" className="flex">
+          <Button variant="link" size="sm" className="flex" onClick={() => window.open(info.deploy, "_blank", "noopener noreferrer")}>
             <LucideUpload className="size-8" />
-            <Link href={info.deploy} />
             {t("ViewDeploy")}
           </Button>
         </div>

src/components/projects/project-carousel.tsx

@@ -18,11 +18,11 @@ interface ProjectCarouselProps {
 export function ProjectCarousel({ name }: ProjectCarouselProps) {
   const [pictures, setPictures] = useState<{ id: number, src: string; alt: string }[]>([]);
   const [loading, setLoading] = useState(true);
-
+  const nameForAssets = name.split(" ").join("");
   useEffect(() => {
     const fetchPictures = async () => {
       try {
-        const response = await fetch(`/api/images/${name}`);
+        const response = await fetch(`/api/images/${nameForAssets}`);
         if (response.ok) {
           const data = await response.json();
           setPictures(data);

src/components/projects/projects.tsx

@@ -10,7 +10,7 @@ export function ProjectsSection() {
       <div className="mt-8 flex justify-center items-center text-4xl">
         {t("Title")}
       </div>
-      <div>
+      <div className="flex items-center gap-4">
         {projects.map((project) => (
           <ProjectsSmallCard key={project.name} info={project} />
         ))}

src/components/projects/small-card.tsx

@@ -35,12 +35,12 @@ export function ProjectsSmallCard({ info }: Readonly<ProjectsSmallCardProps>) {
     });
     openState[1](true);
   }
-
+  const nameForAssets = info.name.split(" ").join("");
   return (
     <>
-      <Card className="w-[230px] card-hover cursor-pointer" onClick={handleClick}>
+      <Card className="w-[230px] h-[400px] card-hover cursor-pointer" onClick={handleClick}>
         <CardHeader>
-          <img src={`images/${info.name}/Logo.png`} alt={`${info.name} Logo`} className="w-[210px] h-[90px] rounded-sm" />
+          <img src={`images/${nameForAssets}/Logo.png`} alt={`${info.name} Logo`} className="w-[210px] h-[90px] rounded-sm" />
           <Separator />
           <CardTitle className="flex justify-center">{info.name}</CardTitle>
         </CardHeader>

src/constants/projects.ts

@@ -21,4 +21,21 @@ export const projects: Project[] = [
       "Docker",
     ],
   },
+  {
+    name: "Random Brazil",
+    description: "RandomBrazil.Description",
+    categories: [],
+    github: "https://github.com/NedcloarBR/vscode-random-brazil",
+    deploy:
+      "https://marketplace.visualstudio.com/items?itemName=nedcloarbr.random-brazil",
+    techs: ["NodeJS", "TypeScript", "JavaScript", "BiomeJS", "VSCode"],
+  },
+  {
+    name: "Biome Config",
+    description: "BiomeConfig.Description",
+    categories: [],
+    github: "https://github.com/NedcloarBR/biome-config",
+    deploy: "https://www.npmjs.com/package/@nedcloarbr/biome-config",
+    techs: ["NodeJS", "TypeScript", "JavaScript", "NPM", "BiomeJS"],
+  },
 ];

src/constants/skills.ts

@@ -85,6 +85,12 @@ export const skills: SkillData[] = [
     categories: ["Backend", "Frontend"],
     url: "https://nodejs.org/",
   },
+  {
+    name: "NPM",
+    description: "NPM.Description",
+    categories: ["Tools"],
+    url: "https://www.npmjs.com/~nedcloarbr",
+  },
   {
     name: "PostgreSQL",
     description: "PostgreSQL.Description",
@@ -121,6 +127,12 @@ export const skills: SkillData[] = [
     categories: ["ProgrammingLanguage", "Frontend", "Backend"],
     url: "https://www.typescriptlang.org/",
   },
+  {
+    name: "VSCode",
+    description: "VSCode.Description",
+    categories: ["Tools"],
+    url: "https://code.visualstudio.com/",
+  },
   {
     name: "Vercel",
     description: "Vercel.Description",