Homepage de ONG — reconstrução em HTML/CSS, autodidata

Uma reconstrução responsiva de página única da homepage da Agenda Geek, codificada à mão em HTML e CSS a partir do Figma da equipe e publicada no GitHub Pages. Desenvolvida como um projeto autodidata em maio de 2023, quando o design vencedor da competição não tinha como sair do papel — marcando o momento exato em que passei de designer visual a engenheiro de design. As primeiras linhas de código que escrevi na vida.

Estudo autodidata cerca de um ano após o encerramento do hackathon 'Desafio Ajude uma ONG'. Não houve cliente, contrato ou encomenda comercial: a ONG não tinha recursos para contratar desenvolvedores, de modo que a plataforma completa de oito telas nunca foi programada. Decidi aprender front-end sozinho reconstruindo a tela inicial. Enquanto o design visual foi concebido em conjunto com meus colegas de equipe durante o desafio, o código foi escrito inteiramente por mim ao longo de nove commits.

O ponto de virada: Por que aprendi a programar

A frase de abertura do meu posicionamento como engenheiro de design é: 'Passei dois anos desenhando produtos que nunca saíram do papel porque ferramentas no-code e repasses para devs não conseguiam executá-los. Então aprendi a construir.' A Agenda Geek é o recibo carimbado dessa afirmação. Em 2022, nosso projeto conquistou o 1º lugar entre 14 equipes em um desafio nacional para ONGs, com sistema de coleta gamificada de lixo eletrônico, ranking de escolas e um sistema completo de design tokens. Mas, como dezenas de projetos de estudantes e juniores, empacou porque a entidade não tinha como pagar desenvolvedores para programar uma plataforma de oito telas de graça.

Um ano depois, inconformado em ver projetos parados no Figma, abri um editor de código, estudei documentações web e dediquei duas semanas para converter manualmente a tela Home do time em HTML e CSS. Não foi um trabalho encomendado; foi uma travessia deliberada para a engenharia de software.

⏱️2 semanas

de estudo autodidata e build (maio de 2023)

📱5 breakpoints

responsividade cobrindo de 320px a >1700px

📄485 linhas

de HTML escrito à mão do zero

💎100% durável

ativo no GitHub Pages após 3 anos

A anatomia técnica de um primeiro build

O repositório reflete a disciplina crua e autêntica de quem aprendeu os fundamentos da web sem templates prontos ou geradores automatizados:

• Rigor Responsivo — Cinco media queries explícitas (320px, 600px, 768px, 1440px e min-width 1700px), garantindo estabilidade desde telas pequenas de celular até monitores ultra-wide.
• Mecânica de Layout — 77 declarações de flexbox estruturando ritmo vertical, grades de cards e menus, sem recorrer a CSS Grid ou funções clamp().
• Manipulação Nativa do DOM — Um único event listener em JavaScript de 12 linhas que expande cards de artigos e rotaciona o ícone de chevron.
• Experimentação Consciente — Duas semanas após a publicação inicial, um commit isolado introduziu o seletor pseudo-classe :is() — evidência factual de estudo de especificações CSS testado diretamente no código.
• Tratamento de Ativos — 27 ícones e ilustrações exportados manualmente do Figma, preservando a escala tipográfica Inter 300 do design original.

Durabilidade: Resistindo quando domínios de clientes desaparecem

Em portfólios de agência, projetos de clientes frequentemente desaparecem quando contratos expiram, empresas encerram atividades ou hospedagens são canceladas. A Agenda Geek representa o oposto. Publicada diretamente no GitHub Pages sob minha própria conta, ela não possui contas a pagar nem dependências de terceiros. Três anos depois, tanto o deploy no GitHub quanto o mirror próprio servem arquivos com sha256 idêntico, sem qualquer necessidade de manutenção.

O que isto não é

• Não é o produto oficial da ONG. A plataforma da Agenda Geek nunca foi desenvolvida; trata-se de uma reconstrução pessoal de uma única tela.
• Não é um design de minha autoria exclusiva. A tela inicial foi concebida por três integrantes da equipe durante o hackathon. Minha autoria reside na programação.
• Não é trabalho comercial ou remunerado. Foi um exercício de estudo independente realizado um ano após o encerramento da competição.
• Não é engenharia de software avançada. Apresenta marcações típicas de iniciante (links com href='#', excesso de divs) e nenhum framework moderno.
• Não foi construído em 28 meses. Os commits concentram-se em duas semanas em maio de 2023; um commit cosmético em 2025 não constitui desenvolvimento contínuo.
• Não possui métricas de tração ou usuários. Teve zero tráfego — mantido no portfólio exclusivamente como recibo biográfico de origem.

O recibo da origem

Todo engenheiro de design tem um ponto de partida. Apresentar a Agenda Geek ao lado de arquiteturas complexas em Next.js como Celus ou AllPrice não é um pedido de desculpas; é a demonstração de uma trajetória. Comprova que meu instinto de cruzar a fronteira entre design e código não é uma postura comercial recente — nasceu há anos, da necessidade de não deixar um bom design morrer no papel.

Evidência

Publicado no GitHub Pages em maio de 2023 e preservado em dois servidores independentes com conteúdo idêntico (juansilvadesign.github.io/Agenda-Geek-homepage e agendageek.juanpablosilva.com.br). Três anos depois, permanece como o artefato mais durável do portfólio, respondendo HTTP 200 sem depender de contas de clientes. Não teve tráfego nem foi adotado pela ONG — seu valor é o recibo biográfico transparente da transição do design para o código.