Projeto em Destaque

Sistema de Calculadoras Financeiras

Plataforma Educacional Interativa

Uma aplicação web completa para simulações financeiras, desenvolvida com foco em experiência do usuário, performance e acessibilidade.

Homepage do projeto - Tema Claro
Homepage do projeto - Tema Escuro

Visão Geral do Projeto

Uma plataforma completa para educação financeira

Objetivo

Criar uma plataforma educacional para simulações financeiras, permitindo que usuários testem diferentes cenários de investimento de forma intuitiva e visual.

Público-Alvo

Pessoas interessadas em educação financeira, planejamento de investimentos e comparação de produtos financeiros.

Desafio

Transformar cálculos financeiros complexos em uma interface simples e interativa, com visualizações claras e resultados compreensíveis.

Solução

Desenvolvimento de uma aplicação web responsiva com sistema de temas dinâmico, gráficos interativos e interface intuitiva.

Recursos Principais

Funcionalidades que fazem a diferença

Sistema de Temas Dinâmico

Alternância instantânea entre tema claro e escuro, com detecção automática da preferência do sistema e eliminação completa de "flash" na primeira carga.

  • Zero flash na mudança de tema
  • Detecção de preferência do sistema
  • Persistência de escolha do usuário
  • Transições suaves

Gráficos Interativos

Visualizações dinâmicas que se adaptam aos dados inseridos pelo usuário, utilizando Chart.js para criar experiências visuais envolventes.

  • Gráficos de linha para evolução temporal
  • Gráficos de barras para comparações
  • Adaptação automática ao tema ativo
  • Tooltips informativos

Calculadoras Especializadas

Três calculadoras diferentes para atender diversas necessidades de planejamento financeiro e educação sobre investimentos.

  • Simulador Educacional
  • Comparação PGBL vs CDB
  • Simulador de Investimentos
  • Cálculos precisos em tempo real

Design Responsivo

Interface totalmente adaptável que funciona perfeitamente em dispositivos móveis, tablets e desktops.

  • Layout adaptável para todos os tamanhos de tela
  • Navegação otimizada para mobile
  • Performance consistente
  • Testes em múltiplos dispositivos

Performance Otimizada

Carregamento rápido e experiência fluida através de otimizações de código e uso eficiente de recursos.

  • CSS e JavaScript otimizados
  • Uso eficiente de CDNs
  • Imagens otimizadas
  • Código limpo e organizdo

Acessibilidade

Desenvolvido seguindo as melhores práticas de acessibilidade para garantir que todos possam usar a plataforma.

  • Navegação por teclado
  • Contrast adequado em ambos os temas
  • Estrutura semântica HTML5
  • Labels descritivos

Tecnologias Utilizadas

Stack moderno e confiável

HTML5

Estrutura semântica e acessível

CSS3

Estilos modernos e responsivos

JavaScript ES6+

Funcionalidades interativas

Bootstrap 5

Framework CSS responsivo

Chart.js

Biblioteca para gráficos

Font Awesome

Ícones vetoriais

Google Fonts

Tipografia moderna

Hostinger

Hospedagem confiável

Processo de Desenvolvimento

Como o projeto foi criado

1
Planejamento

Análise de requisitos, definição de escopo e criação da arquitetura do projeto.

2
Design

Criação do sistema de design, wireframes e prototipação da interface.

3
Desenvolvimento

Implementação das funcionalidades, sistema de temas e integração com gráficos.

4
Otimização

Testes, correções, otimização de performance e deploy final.

Resultados Alcançados

Métricas e conquistas do projeto

100%
Responsivo

Funciona perfeitamente em todos os dispositivos

0ms
Flash de Tema

Eliminação completa do flash na mudança de tema

3
Calculadoras

Diferentes ferramentas para educação financeira

2
Temas

Sistema dinâmico com modo claro e escuro

Interessado em Trabalhar Comigo?

Este projeto demonstra minha capacidade de criar soluções web completas, desde o planejamento até a implementação final.