Um portfólio interativo e responsivo construído para demonstrar visualmente minhas competências em transformar dados em insights e soluções de negócio.
Este projeto é a minha vitrine profissional como desenvolvedor focado em Data Analysis e Business Intelligence. O principal objetivo é centralizar e apresentar meus projetos mais relevantes de uma forma clara, visualmente atraente e interativa.
A motivação foi criar uma plataforma que não apenas listasse meus trabalhos, mas que também demonstrasse minhas habilidades em desenvolvimento front-end, atenção ao design e capacidade de construir uma experiência de usuário agradável, transformando um simples portfólio em um projeto de software por si só.
- Data Analysis & Business Intelligence Portfolio | Alexsander Lopes Camargos
O projeto está online e totalmente funcional. Clique no botão abaixo para navegar pela aplicação.
O projeto foi construído utilizando um conjunto de tecnologias modernas de front-end, com foco em performance e manutenibilidade.
- HTML5: Estruturação semântica do conteúdo.
- Tailwind CSS: Framework utility-first para estilização rápida e responsiva.
- JavaScript (ES6+): Manipulação do DOM e interatividade.
- Sass: Utilizado na fase de desenvolvimento para modularizar e organizar os estilos customizados (compilado para CSS).
- Design Totalmente Responsivo: Experiência de usuário consistente em desktops, tablets e smartphones.
- Animações de Scroll (On-scroll): Elementos que surgem de forma suave conforme o usuário navega pela página.
- Tema de Cores Profissional: Paleta de cores (inspirada na seção Color Reference) aplicada consistentemente.
- Links Sociais e de Contato: Acesso rápido ao meu GitHub, LinkedIn e e-mail.
- Código Fonte Aberto: Disponível para a comunidade com licença MIT.
Para clonar e rodar esta aplicação em sua máquina local, você precisará ter o Git e o Node.js instalados. Siga os passos abaixo.
- Git: Você pode baixar e instalar a partir do site oficial do Git.
- Node.js: É necessário para gerenciar as dependências do projeto. Recomendamos a versão LTS. Baixe e instale a partir do site oficial do Node.js. O
npm(Node Package Manager) já vem incluído na instalação.
-
Clone o repositório:
git clone [https://github.com/alexcamargos/alexcamargos.github.io.git](https://github.com/alexcamargos/alexcamargos.github.io.git)
-
Navegue até o diretório do projeto:
cd alexcamargos.github.io -
Instale as dependências: Este comando lerá o
package.jsone instalará todas as dependências de desenvolvimento necessárias, como o próprio Tailwind CSS.npm install
-
Inicie o ambiente de desenvolvimento: Este projeto utiliza um script para compilar o Tailwind CSS em tempo real, permitindo que você veja suas alterações de estilo refletidas imediatamente.
npm run dev
-
Visualize o projeto: Após o comando anterior ser executado com sucesso, simplesmente abra o arquivo
index.htmlem seu navegador de preferência. As alterações nos seus arquivos de estilo serão compiladas automaticamente.
Se você desejar apenas gerar os arquivos finais e otimizados (por exemplo, o CSS minificado), utilize o script de build:
npm run buildA construção deste portfólio foi uma jornada de aprendizado prático. Abaixo, detalho os principais desafios técnicos que enfrentei e as competências que desenvolvi ao superá-los.
- Problema: O processo inicial de deploy era manual. A cada alteração, eu precisava gerar os arquivos de produção e enviá-los para o repositório do GitHub Pages. Este método era lento, repetitivo e suscetível a erros humanos.
- Solução: Implementei um workflow de Integração Contínua e Deploy Contínuo (CI/CD) utilizando GitHub Actions. Criei um arquivo de configuração (
.yml) que automatiza todo o processo: a cadapushpara a branch principal (main), a Action é acionada, o ambiente é configurado e o código do projeto é automaticamente publicado no GitHub Pages. - Aprendizado: Este desafio me proporcionou uma imersão prática em automação e DevOps. Aprendi a sintaxe YAML, a estruturar pipelines de CI/CD e a importância de automatizar tarefas para garantir consistência, agilidade e confiabilidade no ciclo de vida de um software.
- Problema: O framework Tailwind CSS é extremamente poderoso, mas seu arquivo CSS em ambiente de desenvolvimento é muito grande, contendo milhares de classes utilitárias. Publicar o site com este arquivo resultaria em um tempo de carregamento lento e uma má pontuação em ferramentas de performance como o Lighthouse.
- Solução: Configurei de forma precisa o arquivo
tailwind.config.js. Utilizando a funcionalidadecontent(anteriormentepurge), instruí o compilador Just-In-Time (JIT) do Tailwind a analisar todos os arquivosHTMLeJSdo projeto, removendo todas as classes não utilizadas no build final de produção. - Aprendizado: Aprofundei meu conhecimento em otimização de "assets" para front-end. Compreendi na prática o conceito de "tree-shaking" de estilos e a diferença crucial entre um build de desenvolvimento e um de produção, uma habilidade essencial para criar aplicações web rápidas e eficientes.
- Problema: Garantir que o site fosse funcional em diferentes tamanhos de tela (responsividade) era o básico. O verdadeiro desafio era manter a "narrativa" do portfólio — a história que ele conta sobre minha jornada e projetos — consistente e impactante, seja em um monitor wide-screen ou na tela de um celular.
- Solução: Adotei uma abordagem Mobile-First, projetando primeiro para a menor viewport para garantir que a hierarquia de informações e o conteúdo essencial fossem sólidos. Em seguida, utilizei as classes responsivas do Tailwind (como
md:elg:) para aprimorar progressivamente o layout em telas maiores, ajustando grades, a direção de elementos flex e o espaçamento para otimizar a experiência de leitura e a fluidez da navegação. - Aprendizado: Fui além da implementação técnica da responsividade e entrei no campo do Design de Experiência do Usuário (UX). Aprendi a tomar decisões de design conscientes para garantir que a jornada do usuário e o storytelling do projeto permaneçam coesos e eficazes, independentemente do dispositivo utilizado para acessá-lo.
Este projeto está em constante evolução. Alguns dos próximos recursos planejados são:
- Implementar um modo "dark/light".
- Realizar testes de acessibilidade (a11y) para garantir conformidade com os padrões WCAG.
- Integrar um CMS Headless (ex: Strapi, Sanity) para gerenciar o conteúdo dos projetos.
Sempre em busca de evolução, atualmente dedico meus estudos à estatística aplicada e modelagem de séries temporais. Meu propósito é claro: crescer profissionalmente, compartilhar o que aprendo e ser um agente de transformação nos projetos em que me envolvo.
Adoraria me conectar e discutir como minha paixão por dados e as habilidades demonstradas neste projeto podem agregar valor à sua organização.
| Color | Hex |
|---|---|
| Navy |  #0a192f |
| Light Navy |  #112240 |
| Lightest Navy |  #233554 |
| Slate |  #8892b0 |
| Light Slate |  #a8b2d1 |
| Lightest Slate |  #ccd6f6 |
| White |  #e6f1ff |
| Green |  #64ffda |
Copyright (c) 2022 - 2025 by Alexsander Lopes Camargos
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.