diff --git a/src/app/_components/chosenTechnologies/ChosenTechnologies.tsx b/src/app/_components/chosenTechnologies/ChosenTechnologies.tsx new file mode 100644 index 0000000..d6b5cdf --- /dev/null +++ b/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: , + 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: , + 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: , + 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: , + 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: , + 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 ( +
+ + + 🔨 Tecnologias + + + + Segue abaixo as tecnologias que escolhi para desenvolver o meu site 🙃 + + +
+ {techs.map((techObj) => ( +
+
{techObj.icon}
+ + {techObj.techName} + + {techObj.description} +
+ ))} +
+
+
+ ); +}; diff --git a/src/app/page.tsx b/src/app/page.tsx index 016ee2c..a188324 100644 --- a/src/app/page.tsx +++ b/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() { + + + +