feat: create chosen techs section

src/app/_components/chosenTechnologies/ChosenTechnologies.tsx

@@ -0,0 +1,71 @@
+import { Heading } from '@/components/heading/Heading';
+import { GithubBlackIcon } from '@/components/icons/github-black/GithubBlack';
+import { NextJsIcon } from '@/components/icons/next-js/NextJs';
+import { ReactIcon } from '@/components/icons/react/React';
+import { TailwindIcon } from '@/components/icons/tailwind/Tailwind';
+import { TypescriptIcon } from '@/components/icons/typescript/Typescript';
+import { Content } from '@/components/surface/content/Content';
+
+export const ChosenTechnologies = () => {
+  const techs = [
+    {
+      icon: <TypescriptIcon />,
+      techName: 'TypeScript',
+      description:
+        'O TypeScript adiciona tipagem estática ao JavaScript. Escolhi TypeScript para melhorar a robustez e a manutenibilidade do código, proporcionando maior segurança contra erros e melhorando a produtividade com autocompletar e verificação de tipos.',
+    },
+    {
+      icon: <ReactIcon />,
+      techName: 'React.js',
+      description:
+        'É uma biblioteca JavaScript para construção de interfaces de usuário. Utilizei React.js para criar componentes reutilizáveis e proporcionar uma experiência de usuário dinâmica e eficiente.',
+    },
+    {
+      icon: <NextJsIcon />,
+      techName: 'Next.js',
+      description:
+        'É um framework React para aplicações web estáticas e renderização do lado do servidor. Escolhi Next.js para melhorar o desempenho do site, facilitando a geração de páginas estáticas e a otimização de SEO.',
+    },
+    {
+      icon: <TailwindIcon />,
+      techName: 'Tailwind CSS',
+      description:
+        'É um framework CSS utilitário que permite a construção rápida e eficiente de designs personalizados. Optei por Tailwind CSS para ter um controle preciso sobre o estilo dos componentes e acelerar o desenvolvimento com suas classes utilitárias prontas para uso.',
+    },
+    {
+      icon: <GithubBlackIcon />,
+      techName: 'Github & Github Pages',
+      description:
+        'Uma plataforma de hospedagem de código-fonte e controle de versão, enquanto o Github Pages oferece hospedagem gratuita para sites estáticos. Utilizei Github para versionamento do código e colaboração, e Github Pages para hospedar o site de forma gratuita e confiável.',
+    },
+  ];
+
+  return (
+    <section className="bg-white text-black">
+      <Content className="py-10">
+        <Heading variant={'subtitle'} className={'text-black'}>
+          🔨 Tecnologias
+        </Heading>
+
+        <Heading variant="body" className="mt-3">
+          Segue abaixo as tecnologias que escolhi para desenvolver o meu site 🙃
+        </Heading>
+
+        <div className="mt-8 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
+          {techs.map((techObj) => (
+            <section
+              key={techObj.techName}
+              className="flex flex-col items-center justify-center gap-3 rounded-3xl border-2 border-dashed border-gray-500 p-4 transition-transform hover:scale-105"
+            >
+              <div className="h-[50px] w-[50px]">{techObj.icon}</div>
+              <Heading variant="body" className="font-extrabold">
+                {techObj.techName}
+              </Heading>
+              <Heading variant="body">{techObj.description}</Heading>
+            </section>
+          ))}
+        </div>
+      </Content>
+    </section>
+  );
+};

src/app/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { ChosenTechnologies } from '@/app/_components/chosenTechnologies/ChosenTechnologies';
 import { Experience } from '@/app/_components/experience/Experience';
 import { Footer } from '@/app/_components/footer/Footer';
 import { Header } from '@/app/_components/header/Header';
@@ -26,6 +27,10 @@ export default function Home() {
         <Experience />
       </FadeInWhenVisible>
 
+      <FadeInWhenVisible>
+        <ChosenTechnologies />
+      </FadeInWhenVisible>
+
       <Footer />
     </main>
   );

src/components/icons/github-black/GithubBlack.tsx

@@ -0,0 +1,13 @@
+export const GithubBlackIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <g>
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g fill="#000" transform="translate(-140 -7559)">
+          <g transform="translate(56 160)">
+            <path d="M94 7399c5.523 0 10 4.59 10 10.253 0 4.529-2.862 8.371-6.833 9.728-.507.101-.687-.219-.687-.492 0-.338.012-1.442.012-2.814 0-.956-.32-1.58-.679-1.898 2.227-.254 4.567-1.121 4.567-5.059 0-1.12-.388-2.034-1.03-2.752.104-.259.447-1.302-.098-2.714 0 0-.838-.275-2.747 1.051a9.396 9.396 0 00-2.505-.345 9.375 9.375 0 00-2.503.345c-1.911-1.326-2.751-1.051-2.751-1.051-.543 1.412-.2 2.455-.097 2.714-.639.718-1.03 1.632-1.03 2.752 0 3.928 2.335 4.808 4.556 5.067-.286.256-.545.708-.635 1.371-.57.262-2.018.715-2.91-.852 0 0-.529-.985-1.533-1.057 0 0-.975-.013-.068.623 0 0 .655.315 1.11 1.5 0 0 .587 1.83 3.369 1.21.005.857.014 1.665.014 1.909 0 .271-.184.588-.683.493-3.974-1.355-6.839-5.199-6.839-9.729 0-5.663 4.478-10.253 10-10.253"></path>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);

src/components/icons/tailwind/Tailwind.tsx

@@ -0,0 +1,8 @@
+export const TailwindIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <path
+      fill="#44a8b3"
+      d="M9 13.7q1.4-5.6 7-5.6c5.6 0 6.3 4.2 9.1 4.9q2.8.7 4.9-2.1-1.4 5.6-7 5.6c-5.6 0-6.3-4.2-9.1-4.9q-2.8-.7-4.9 2.1zm-7 8.4q1.4-5.6 7-5.6c5.6 0 6.3 4.2 9.1 4.9q2.8.7 4.9-2.1-1.4 5.6-7 5.6c-5.6 0-6.3-4.2-9.1-4.9q-2.8-.7-4.9 2.1z"
+    ></path>
+  </svg>
+);