RESUMO:

Este projeto é o meu portfólio pessoal, desenvolvido para centralizar e apresentar meus trabalhos, habilidades e trajetória profissional. O grande diferencial é a construção de um painel administrativo (CMS) completo e privado, que me permite gerenciar todo o conteúdo do site — como adicionar, editar ou remover projetos e tecnologias — em tempo real, sem a necessidade de alterar o código-fonte. A plataforma foi construída utilizando tecnologias modernas, com um frontend reativo em React.js e um backend robusto provido pelos serviços do Firebase.

DESCRIÇÃO TÉCNICA:

O portfólio foi desenvolvido como uma Single-Page Application (SPA) com foco em componentização, segurança e gerenciamento de conteúdo dinâmico.

Linguagens e Ferramentas:

JavaScript

React.js (com uso extensivo de Hooks como useState, useEffect, useRef e useMemo)

Vite como ferramenta de build para um desenvolvimento rápido e otimizado.

CSS3 com Variáveis Nativas para componentização de estilos.

Bibliotecas do Ecossistema React:

react-router-dom: Para a criação de rotas e navegação entre as páginas (/ e /projects).

react-select: Para a seleção múltipla de tecnologias no formulário de projetos.

@tinymce/tinymce-react: Implementação de um editor de texto rico (WYSIWYG) para a descrição detalhada dos projetos.

react-toastify: Para feedback ao usuário através de alertas (toasts) de sucesso e erro.

react-multi-carousel: Para a exibição dos projetos em destaque na página inicial.

react-scroll: Para a implementação do scroll suave (smooth scrolling) ao navegar entre as seções da página inicial através dos links do cabeçalho.

react-tooltip: Para a criação de tooltips customizados que exibem o nome da tecnologia ao passar o mouse sobre os ícones.

Backend e Serviços (BaaS - Backend as a Service):

Firebase Authentication: Para a autenticação segura do painel de admin via provedor OAuth do GitHub.

Firestore Database: Banco de dados NoSQL utilizado para todas as operações de CRUD (Criar, Ler, Atualizar, Deletar) dos projetos e tecnologias.

Firebase Storage: Para o upload, armazenamento e exclusão de todos os arquivos de imagem (ícones de tecnologias e imagens de projetos).

EmailJS: Serviço de terceiros para o envio de e-mails através do formulário de contato, sem a necessidade de um backend próprio.

Técnicas e Arquitetura:

Operações CRUD completas no painel de admin para gerenciamento de conteúdo.

Autorização baseada em UID com Regras de Segurança (Security Rules) no Firestore e Storage para garantir que apenas o administrador possa manipular os dados.

Gerenciamento de sessão customizado, com expiração automática após 24 horas, implementado no lado do cliente com localStorage.

Manipulação dinâmica de SVGs com a técnica de mask-image do CSS para permitir a troca de cor dos ícones dinamicamente.

Uso de variáveis de ambiente (.env) para proteger chaves de API e outras informações sensíveis.