Portfólio
Projeto autoral + front-end do zero | HTML, CSS e JavaScript
- Plataforma
- HTML, CSS e JavaScript
- Período
- ago. de 2024 a jul. de 2025
- Stack
- HTML
- CSS
- JavaScript
- JSON
- Git
Visão geral
Meu portfólio pessoal é um projeto autoral criado para representar com precisão minha identidade visual e minha trajetória como desenvolvedor front-end. A proposta vai além de exibir trabalhos, ele foi pensado como uma experiência de marca pessoal, com uma estética moderna, criativa e profissional baseada em uma paleta de laranja e cinza.
Contexto e objetivo
O desenvolvimento se estendeu por cerca de 11 meses, conciliando estudos em Análise e Desenvolvimento de Sistemas com entregas reais como freelancer. O objetivo era construir uma vitrine que comunicasse maturidade técnica, consistência visual e capacidade de execução, criando uma navegação fluida e envolvente do início ao fim.
O desafio
O maior desafio foi equilibrar personalidade visual com clareza e performance, sem depender de frameworks. Era necessário manter ritmo, legibilidade e responsividade em todas as seções, além de sustentar uma experiência dinâmica com animações e interações sem comprometer leveza, organização de código e consistência estética.
A estratégia
Estruturar o portfólio como uma narrativa de navegação, onde cada seção reforça uma etapa da minha identidade profissional. A alternância de cores e a hierarquia de conteúdo foram planejadas para criar ritmo visual e conduzir o usuário de forma natural, mantendo previsibilidade na leitura e atenção nos pontos mais importantes.
O que foi implementado
Front-end desenvolvido do zero:
- HTML, CSS e JavaScript puro: estrutura completa sem frameworks para manter controle total de performance, responsividade e personalização visual.
- Padronização visual: definição consistente de tipografia, tamanhos, espaçamentos e contraste para manter legibilidade e unidade.
- Navegação com ritmo: alternância de cores entre seções para criar uma experiência mais envolvente durante a rolagem.
Interações e experiência dinâmica:
- Carregamentos e comportamentos dinâmicos: implementação de fluxos que tornam a experiência mais responsiva e viva.
- Animações e microinterações: efeitos visuais planejados para reforçar modernidade sem comprometer a performance.
- Modais e botões de ação: abertura de modais, interações com CTAs e comportamentos responsivos integrados ao layout.
Suporte de IA e estrutura complementar:
- Codex da OpenAI: uso do agente para gerar a base do back-end a partir de prompts técnicos elaborados com precisão.
- Integração front-end e lógica: implementação das conexões necessárias para garantir funcionamento integrado e consistente das funcionalidades.
Resultado
O resultado é um portfólio que funciona como vitrine e como produto, comunicando identidade, consistência e execução técnica. Ele representa o que sou capaz de construir hoje e também a forma como evoluo continuamente, com um projeto vivo, em constante refinamento, acompanhando minha trajetória profissional e minha busca por inovação.
