Arquitetura e organização
O site segue arquitetura limpa e modular: 19 arquivos CSS divididos por função (cards, botões, layout, menu),
JavaScript organizado em includes.js (injeção de Header/Footer) e script.js (UI e interações),
e partials como componentes reutilizáveis. Essa divisão nasceu intuitivamente da necessidade de organizar melhor
o projeto — mais tarde percebi que estava aplicando princípios de CSS modular e Design System.
CSS modular e design tokens
O CSS é dividido por função, não por página, criando componentes reutilizáveis, fácil manutenção e padronização
com design tokens (--cor-primaria, --cor-texto, --radius-3, --space-4,
--shadow-card). Essa abordagem mostra que meu aprendizado já caminha em direção a práticas de engenharia de
interfaces, não apenas estética.
Responsividade e semântica
A responsividade utiliza CSS Grid, Flexbox e media queries em 1024px e 768px com abordagem desktop-first.
A semântica HTML5 foi revisada com tags corretas (header, main, section, footer), textos alternativos, hierarquia
de títulos, contraste otimizado e navegação intuitiva.
IA no fluxo de desenvolvimento
A IA foi usada como extensão da capacidade, auxiliando em revisão de semântica, padrões modernos de layout,
validação de modularização, copywriting, planejamento de backlog, detecção de inconsistências CSS, melhoria de
acessibilidade e estruturação de i18n para versões futuras.
Roadmap de evolução
Implementar i18n completo, microinterações e animações suaves, reestruturação para Vite ou Astro, mais
componentes reutilizáveis, otimizações de performance e seção de portfólio expandida com filtros por tipo de
projeto.