Sobre o Portfólio
Este portfólio foi desenvolvido com o objetivo de apresentar meus projetos, conhecimentos e experiências na área de desenvolvimento de software e análise de dados. Além de servir como uma vitrine profissional, o próprio portfólio é também um projeto de software completo, desenvolvido por mim e estruturado para permitir o gerenciamento dinâmico do conteúdo apresentado no site.
Diferentemente de um portfólio composto apenas por páginas estáticas, este site possui uma área administrativa que permite cadastrar e editar projetos, ferramentas, imagens, anexos, links e outras informações. Dessa maneira, novos conteúdos podem ser adicionados sem que seja necessário modificar diretamente o código-fonte da aplicação.
Next.js
O Next.js é o framework principal utilizado no desenvolvimento da aplicação. Ele fornece a estrutura do projeto e o sistema de rotas utilizado para organizar as diferentes páginas do site, como a página inicial, a listagem de projetos, os detalhes de cada projeto, a listagem de ferramentas, o F.A.Q. e a área administrativa.
A utilização do Next.js também permite combinar componentes executados no servidor e no cliente. Operações relacionadas ao banco de dados e à obtenção de informações podem ser realizadas no servidor, enquanto componentes que precisam de interação direta com o usuário utilizam recursos do React no lado do cliente.
TypeScript
Todo o projeto foi desenvolvido utilizando TypeScript. A linguagem adiciona tipagem estática ao JavaScript, permitindo definir de maneira mais clara quais tipos de dados são esperados pelas funções, componentes e estruturas utilizadas pela aplicação.
Isso é especialmente útil neste projeto devido à comunicação entre diferentes partes do sistema, como formulários, componentes React, consultas ao banco de dados e funções responsáveis pelo cadastro e edição das informações. A tipagem ajuda a identificar inconsistências durante o desenvolvimento e torna o código mais seguro e fácil de manter.
Tailwind CSS
O Tailwind CSS é utilizado para construir e estilizar a interface do portfólio. Através de suas classes utilitárias, foram definidos elementos como espaçamentos, tamanhos, tipografia, cores, grids, bordas, efeitos de hover e responsividade.
A responsividade permite que páginas como a galeria de projetos se adaptem a diferentes tamanhos de tela, reorganizando os elementos de acordo com o espaço disponível. O Tailwind também é utilizado nos detalhes visuais do site, como cantos arredondados, animações, transparências e efeitos aplicados aos elementos da interface.
SQLite
O SQLite é o sistema de banco de dados utilizado pelo portfólio. Nele são armazenadas as informações dinâmicas utilizadas pelo site, incluindo projetos, ferramentas, mídias, tags, links e configurações.
O banco também utiliza tabelas de relacionamento para representar associações entre diferentes entidades. Um projeto, por exemplo, pode utilizar várias ferramentas e uma mesma ferramenta pode estar presente em vários projetos. Esse relacionamento é armazenado separadamente, evitando a duplicação desnecessária de informações.
Drizzle ORM
O Drizzle ORM é utilizado como camada de comunicação entre a aplicação e o banco de dados SQLite. Através dele, as consultas e operações no banco podem ser construídas utilizando TypeScript, mantendo integração com o sistema de tipos da aplicação.
É utilizado em operações como consulta, inserção, atualização e exclusão de registros. Também é empregado nas relações entre projetos, ferramentas, mídias e tags, além das transações utilizadas durante operações que precisam modificar diferentes tabelas.
Deploy e infraestrutura
O projeto está hospedado na Vercel, responsável pelo deploy e pela disponibilização da aplicação Next.js em produção. O código-fonte é versionado no GitHub e integrado à plataforma, permitindo que novas versões sejam publicadas automaticamente a cada atualização enviada ao repositório. Para a persistência dos dados, foi utilizado o Turso como banco de dados remoto, enquanto o Cloudflare R2 é responsável pelo armazenamento das imagens e demais arquivos de mídia. O domínio personalizado foi registrado através do Registro.br e configurado via DNS para direcionar os acessos à aplicação hospedada na Vercel.