Portfolio Pessoal
Design e desenvolvimento de um website de portfolio sem frameworks: HTML, CSS e JavaScript puro. Cada detalhe decidido conscientemente, do sistema de cores às animações de entrada, da navegação que se esconde ao scroll às transições entre páginas.
O objetivo era criar um portfolio que refletisse a identidade que queria comunicar: limpo, funcional e com atenção ao detalhe. Cada decisão foi tomada conscientemente, desde a escolha de não usar frameworks até às transições de página e ao sistema de cores em tokens CSS.
Um portfolio que seja ele próprio o melhor argumento.
Um portfolio de designer é simultaneamente produto e argumento. Não chega ter bom conteúdo — a forma como o website está construído já diz muito sobre quem o fez. O desafio foi garantir que cada detalhe técnico e visual comunicasse competência, cuidado e intenção.
Zero frameworks. Controlo total.
O website foi construído em HTML, CSS e JavaScript puro, sem frameworks nem dependências. Todo o código foi gerado pelo Claude (IA); as decisões de design ficaram do lado do processo: a UI, a identidade visual, a estrutura de navegação e as escolhas de UX. A IA funcionou como ferramenta de construção, o design e a direção como trabalho de projeto.
HTML5 Semântico
Estrutura semântica com <nav>, <main>, <section>, <footer>. ARIA labels em todos os elementos interativos. Breadcrumbs em todas as páginas internas.
→ Acessibilidade e SEO sem overhead de framework
CSS Custom Properties
Sistema de tokens com --bg, --bg-2, --text, --text-2, --primary, --accent. Basta mudar os valores dos tokens para alterar a identidade visual sem tocar em regras individuais.
→ Manutenção simples, zero duplicação de regras
JavaScript Puro
IntersectionObserver para scroll reveal, History API para transições de página, localStorage para preferências. Modular, sem dependências externas.
→ Bundle de 0KB: zero bibliotecas carregadas
Hierarquia simples. Cada página com um propósito claro.
A estrutura foi desenhada para minimizar fricção: quem chega ao início percebe o que faço, vai ao portfolio, escolhe um projeto, e depois contacta. O site vai crescer: blog, dicas e tutoriais estão planeados para dar mais contexto e valor além dos projetos.
- portfolio.html
- projects/*/<nome>.html , case studies individuais
- about.html
- contact.html
- privacy.html
- 404.html
- blog.html — em breve
- dicas.html — em breve
- tutoriais.html — em breve
Ícone + logótipo.
O logótipo parte da Plus Jakarta Sans como base, com ajustes próprios — não é a fonte aplicada diretamente. O ícone foi criado de raiz para funcionar em tamanhos pequenos (favicon, app icon) sem perder reconhecimento. Ambos são originais, sem recurso a ícones ou logótipos externos.
Versão clara
Versão escura
Navy + âmbar. Tokens, não valores fixos.
Em vez de escrever #1E3A5F repetido por centenas de linhas de CSS, define-se uma variável --primary uma vez no :root. Qualquer ajuste futuro à cor (uma tonalidade mais clara, uma variante de marca) acontece num único sítio e propaga-se automaticamente a todos os botões, links, fundos e bordas que a usam. É a diferença entre fazer uma alteração em 300 linhas ou numa linha.
Paleta — tokens CSS com contraste vs fundo
#FAF9F7
Fundo base
#F0EFF5
Cards · bordas
#0D0D1C
20:1 vs --bgAAA ✓
#1E3A5F
11:1 vs --bgAAA ✓
#D4861A
2.9:1 vs --bgDecorativo
Pares verificados. Zero compromissos em leitura.
Os textos principais e a cor primária passam AAA. O âmbar é usado exclusivamente em elementos decorativos e nunca em corpo de texto corrido.
Plus Jakarta Sans — uma fonte, cinco pesos.
Uma única família tipográfica em 5 pesos (400 a 800) garante coerência visual em toda a hierarquia sem adicionar latência. A variação de peso substitui a variação de fonte: mais simples, mais consistente.
Título principal 800
Heading secundário 700
Sub-heading 600
Corpo de texto médio 500
Corpo de texto regular 400, legível e confortável para leitura prolongada em case studies e descrições de projeto.
Labels e navegação 700 uppercase
Nav, hero, cards e footer: screenshots do site real.
Cada componente tem uma decisão de UX por trás, não é só estética. Abaixo estão os quatro principais com o respetivo racional.
Navegação
Fixa no topo para que o utilizador nunca perca o contexto de onde está. O nome do site e os links estão sempre acessíveis. Esconde ao fazer scroll para baixo para não ocupar espaço durante a leitura, e volta ao scroll para cima porque é precisamente aí que o utilizador quer navegar.
Hero
O objetivo é responder a três perguntas em menos de 3 segundos: quem sou, o que faço, e se estou disponível. Os círculos orbitais são puramente decorativos, criam profundidade sem distrair. O badge verde de disponibilidade é o primeiro elemento que o olho lê depois do nome, e é a informação mais relevante para quem visita o site em contexto de recrutamento.
Project cards
O gradiente de cor identifica visualmente cada projeto antes de se ler o título — cria uma associação rápida ("o azul é o portfolio, o verde é as plantas"). O número no canto é um detalhe subtil que comunica curadoria e ordem. O overlay em gradiente garante legibilidade do texto sobre qualquer cor de fundo sem recorrer a caixas opacas.
Footer
O footer repete a informação mais importante para quem chegou ao fim da página: quem sou, para onde ir a seguir, e como contactar. O badge de disponibilidade aparece cá também — quem leu a página toda é exatamente o visitante mais qualificado, e esta é a última oportunidade de converter em contacto.
Cinco decisões técnicas ao serviço da experiência.
Cada feature foi implementada em JavaScript puro, sem bibliotecas. Animações respeitam prefers-reduced-motion — quem preferir, não vê nada a mexer.
Nav hide/show no scroll
A navegação desaparece ao fazer scroll para baixo (ganha espaço de leitura) e volta ao fazer scroll para cima. Nunca esconde quando o menu mobile está aberto.
Scroll Reveal
Elementos entram com opacity + translateY ao ficarem visíveis. IntersectionObserver com threshold de 8%; só aciona ao scroll, não no carregamento da página.
Transições de página
Ao clicar num link interno, a página faz fade out em 200ms antes da navegação. A nova página faz fade in ao carregar. Sem percepção de "flash branco".
Filtro de projetos
O portfolio filtra projetos por categoria via data-cat nos cards. O contador de projetos atualiza em tempo real. Estado vazio com mensagem quando não há resultados.
Scroll to top
Botão flutuante que aparece após 300px de scroll, com animação suave. Gerado dinamicamente em JavaScript, sem poluir o HTML de todas as páginas.
Em constante evolução, nunca está "terminado".
Um portfolio é um produto vivo. Não existe versão final — existe a versão atual. À medida que o processo evolui, o site acompanha.
Sistema de design e componentes baseFeito
Paleta, tipografia, tokens CSS, nav, hero, footer e template de case study.
UX features — scroll reveal, transições, nav scrollFeito
Scroll reveal com IntersectionObserver, page fade transitions, nav hide/show, scroll to top, filtro de projetos.
Dark modeFeito
Tema escuro com tokens CSS, toggle persistente via localStorage, respeita preferência do sistema.
Novos case studiesEm curso
Documentação de novos projetos à medida que são desenvolvidos; o portfolio cresce com o trabalho.
Blog: artigos sobre design e processoPlaneado
Espaço para partilhar reflexões, aprendizagens e bastidores dos projetos, com mais contexto além dos case studies.
Dicas e tutoriaisPlaneado
Conteúdo prático sobre CSS, UX e ferramentas de design, voltado para quem está a aprender.
Secção de fotografia e vídeoPlaneado
Galeria de fotografia e showreel de vídeo com lightbox em CSS/JS puro.
Formulário de contacto funcionalPlaneado
Integração com Formspree para envio real de emails sem backend.
Estudo de cor e contraste para acessibilidadeA estudar
Aprofundar WCAG 2.1 e 3.0: como a escolha de cor afeta utilizadores com daltonismo, baixa visão e sensibilidade ao contraste. Aplicar o que for aprendido diretamente ao sistema de cores do site.
Tipografia acessível: legibilidade para todosA estudar
Estudo sobre tamanho, espaçamento entre linhas, comprimento de linha e escolha de fonte para utilizadores com dislexia, baixa visão e dificuldades cognitivas. Fontes como Atkinson Hyperlegible como ponto de partida.
UX inclusivo: design para quem mais precisaA estudar
Investigar padrões de navegação por teclado, screen readers, targets de toque e motion sensitivity. O princípio: se funciona para quem tem mais dificuldades, funciona melhor para toda a gente.
O website que estás a ver, em construção, sempre a evoluir.
Este portfolio é o projeto. Cada melhoria ao site é ela própria um exercício de design e desenvolvimento.