From dbdc6eabcdce7e4ed2b954107dc67221b85364a2 Mon Sep 17 00:00:00 2001 From: Bruno Menegidio Date: Tue, 23 Jul 2024 18:14:17 -0300 Subject: [PATCH] refactor: componentizes technology details card --- .../ChosenTechnologies.tsx | 27 +++++++ .../chosen-technologies/data/techs.ts | 44 ++++++++++++ .../tech-card/TechCard.tsx | 13 ++++ .../chosenTechnologies/ChosenTechnologies.tsx | 71 ------------------- src/app/page.tsx | 2 +- 5 files changed, 85 insertions(+), 72 deletions(-) create mode 100644 src/app/_components/chosen-technologies/ChosenTechnologies.tsx create mode 100644 src/app/_components/chosen-technologies/data/techs.ts create mode 100644 src/app/_components/chosen-technologies/tech-card/TechCard.tsx delete mode 100644 src/app/_components/chosenTechnologies/ChosenTechnologies.tsx diff --git a/src/app/_components/chosen-technologies/ChosenTechnologies.tsx b/src/app/_components/chosen-technologies/ChosenTechnologies.tsx new file mode 100644 index 0000000..8121931 --- /dev/null +++ b/src/app/_components/chosen-technologies/ChosenTechnologies.tsx @@ -0,0 +1,27 @@ +import { Heading } from '@/components/heading/Heading'; +import { Content } from '@/components/surface/content/Content'; + +import { techs } from './data/techs'; +import { TechCard } from './tech-card/TechCard'; + +export const ChosenTechnologies = () => { + return ( +
+ + + 🔨 Tecnologias + + + + Segue abaixo as tecnologias que escolhi para desenvolver o meu site 🙃 + + +
+ {techs.map((techData) => ( + + ))} +
+ +
+ ); +}; diff --git a/src/app/_components/chosen-technologies/data/techs.ts b/src/app/_components/chosen-technologies/data/techs.ts new file mode 100644 index 0000000..800832f --- /dev/null +++ b/src/app/_components/chosen-technologies/data/techs.ts @@ -0,0 +1,44 @@ +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'; + +export type Tech = { + icon: () => React.JSX.Element; + techName: string; + description: string; +}; + +export const techs: Tech[] = [ + { + 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.', + }, +]; diff --git a/src/app/_components/chosen-technologies/tech-card/TechCard.tsx b/src/app/_components/chosen-technologies/tech-card/TechCard.tsx new file mode 100644 index 0000000..f708b44 --- /dev/null +++ b/src/app/_components/chosen-technologies/tech-card/TechCard.tsx @@ -0,0 +1,13 @@ +import { Heading } from '@/components/heading/Heading'; + +import { Tech } from '../data/techs'; + +export const TechCard = ({ techData }: { techData: Tech }) => ( +
+
{}
+ + {techData.techName} + + {techData.description} +
+); diff --git a/src/app/_components/chosenTechnologies/ChosenTechnologies.tsx b/src/app/_components/chosenTechnologies/ChosenTechnologies.tsx deleted file mode 100644 index d6b5cdf..0000000 --- a/src/app/_components/chosenTechnologies/ChosenTechnologies.tsx +++ /dev/null @@ -1,71 +0,0 @@ -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 a188324..00fc414 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,6 @@ 'use client'; -import { ChosenTechnologies } from '@/app/_components/chosenTechnologies/ChosenTechnologies'; +import { ChosenTechnologies } from '@/app/_components/chosen-technologies/ChosenTechnologies'; import { Experience } from '@/app/_components/experience/Experience'; import { Footer } from '@/app/_components/footer/Footer'; import { Header } from '@/app/_components/header/Header';