Contacte-me
Estudos de caso Projeto real, online

Este site, uma demonstração em produção

Um site pessoal construído como um produto: retrato em partículas, demos funcionais, páginas por perfil, publicado online.

Para
Fundadores e startups, PME e operações, Equipas de negócio, Agências e consultoras
Oferta
Build + AI
Passe o cursor ou toque num bloco para ver o seu papel no sistema.

01Problema

Um Product Engineer que se apresenta com um CV online não prova nada.

Era preciso um site que demonstrasse a capacidade de conceber, construir e entregar, e que falasse a cada decisor do seu próprio problema.

02Contexto

Utilizadores
Fundadores, responsáveis de operações, equipas de produto e técnicas, agências.
Processo atual
Um posicionamento e um público-alvo definidos em dois documentos estratégicos.
Restrições
Rápido no telemóvel, acessível pelo teclado, respeito pela opção «reduzir animações», nenhuma dependência de servidor.
Ferramentas em uso
  • Vite
  • Three.js
  • GSAP
  • Lenis

03Solução

Um site estático de várias páginas construído com Vite. Na página inicial, a fotografia real desfaz-se em partículas WebGL com o scroll e transforma-se depois em fluxo de produção, campo de estrelas e planeta.

As demos funcionam de verdade no navegador, e a comunicação está organizada por perfil de decisor.

Porquê esta abordagem. Provar em vez de afirmar: cada promessa do site é demonstrada pelo próprio site.

04Arquitetura

Infraestrutura

  • Vite Build multipágina, inclusões HTML partilhadas, divisão do código por página.

Interface

  • HTML estático Páginas geradas antecipadamente: rápidas, indexáveis, sem servidor.

IA

  • Three.js Retrato reconstruído em dezenas de milhares de partículas, com shaders GLSL escritos para a ocasião.

Automação

  • GSAP + Lenis Scroll fluido, secções fixadas, revelações ao ritmo da leitura.

Dados

  • Demos Agente, workflow, portal e dashboard que funcionam com dados de exemplo.

Saída

  • Alojamento Ficheiros estáticos que podem ser publicados na Vercel, Hostinger, OVH ou num VPS.

05Funcionalidades

  • Fotografia que se dissolve em partículasO mesmo ruído controla a fotografia e as partículas: soltam-se exatamente onde a fotografia desaparece.
  • Recorte localA fotografia foi recortada na própria máquina com o framework Vision, sem serviço online.
  • Quatro demos funcionaisNão são capturas de ecrã: são componentes reais, manipuláveis.
  • Páginas por perfilFundadores, PME, equipas de negócio, agências: um discurso por problema.
  • Menu rápido pelo teclado⌘K ou Ctrl K para ir a qualquer lado.
  • AcessibilidadeNavegação por teclado, contrastes verificados, animações reduzidas a pedido.
  • Identidade gerada por scriptLogótipo vetorizado, favicons e imagem de partilha produzidos pelo código.

06Resultado

  • Ser compreendido em menos de dez segundos por um decisor.
  • Demonstrar em vez de descrever.

Como se mede

  • Pedidos de contacto qualificados
  • Páginas consultadas por perfil
  • Tempo passado nos estudos de caso

07O que fiz

  1. Posicionamento e mensagem
  2. Direção artística
  3. Desenvolvimento
  4. 3D e shaders
  5. Motion design
  6. Publicação online
Estudo seguinte WBF Wine Business Fashion, um site de prestígio em sete línguas

Um sistema como este, para a sua atividade?

Contacte-me Todos os estudos de caso