Site publicado: https://lamarq7eyt.github.io/HackerPage/ (Para mobile, recomendo tela na horizontal)
BreachRoom e um ambiente imersivo sobre a historia dos hackers, criado para transformar casos marcantes de seguranca digital em uma experiencia visual, interativa e educativa. A ideia e colocar o visitante dentro de uma sala investigativa, com atmosfera de laboratorio, terminais, sinais de alerta e camadas narrativas que ajudam a entender incidentes reais de forma mais envolvente.
Este projeto foi feito por Llew, com muito esforco, paciencia e carinho pelo processo. Ele representa o resultado de dois anos de estudo envolvendo 3D, TypeScript, composicao visual, interfaces interativas, narrativa digital, responsividade, estrutura de componentes e experimentacao com tecnologias para web.
O objetivo do site e ensinar historia hacker de um jeito mais memoravel do que uma pagina comum de texto. Cada incidente funciona como uma peca de investigacao: o visitante explora nomes, datas, impactos, metodos e aprendizados ligados a casos que marcaram a seguranca da informacao.
O foco nao e glorificar ataques, mas mostrar contexto historico, consequencias reais e licoes importantes sobre tecnologia, empresas, dados e responsabilidade digital.
A experiencia principal foi montada como uma pagina estatica em breachroom-scene/, usando Three.js para criar a sensacao de profundidade, luz, atmosfera e presenca dentro da cena. O projeto tambem inclui uma base em TypeScript/TSX para componentes de interface e organizacao editorial.
Principais estudos aplicados aqui:
- Three.js para renderizacao 3D na web;
- TypeScript para estruturar componentes, dados e logica com mais seguranca;
- TSX e componentes modulares para organizar a interface;
- HTML e CSS para publicacao estatica, layout e responsividade;
- design de experiencia para transformar conteudo historico em exploracao visual;
- organizacao de assets, overlays e materiais visuais;
- Git e GitHub Pages para versionamento e publicacao.
Originalmente, o BreachRoom era para ter sido construido no Spline. A proposta inicial seguia essa direcao, com uma cena 3D publicada e integrada ao restante da interface. No caminho, surgiram imprevistos, entao a experiencia acabou ganhando outro rumo: a cena foi levada para uma abordagem mais direta na web, com Three.js.
Esse desvio acabou virando parte da identidade do projeto. Em vez de ser apenas uma integracao pronta, o BreachRoom se tornou uma construcao mais autoral, com mais controle sobre a cena, os elementos visuais e a forma como a narrativa aparece para quem acessa.
breachroom-scene/: site imersivo publicado no GitHub Pages;framer/: componentes e dados editoriais em TSX/TypeScript;assets/spline/: overlays, marcas e elementos visuais usados no conceito da cena;spline/: documentos de direcao visual e storyboard da ideia original em Spline.
BreachRoom e um estudo de web imersiva, historia hacker e design narrativo. Mais do que uma landing page, ele funciona como uma pequena exposicao digital sobre seguranca, memoria tecnologica e os rastros deixados por grandes incidentes da internet.
Feito por Llew.