Estúdio digital focado em experiências interativas de alta performance, unindo design brutalista moderno e tecnologia WebGL.
npm installCrie um arquivo .env na raiz do projeto (ele não será enviado ao GitHub). Ele é necessário para a sincronização Git (GitSync) do CMS localmente:
GIT_USER_EMAIL=seu-email@exemplo.com
GIT_USER_NAME="Seu Nome"npm startO site estará disponível em: http://localhost:3000
O site utiliza uma estética inspirada no brutalismo moderno e cyberpunk, com foco em tipografia forte e interatividade crua.
Core Stack:
- Frontend: HTML5, Vanilla CSS, JavaScript (ES6+)
- Gráficos: Three.js para o fundo interativo.
- Efeitos: Bayer Dithering (Ordered Dithering) e Glitch dinâmico.
- Backend: Node.js + Express para o CMS integrado.
Cores:
- Background:
#080808 - Accent (Green):
#27FF2B(Logo e interações especiais) - Dithering:
#a0a0a0(Camada visual de textura)
Implementado com Three.js e Shaders customizados:
- Bayer Dithering: Técnica de dithering ordenado para textura retrô-digital.
- Rastro Generativo: O mouse deixa um caminho de partículas que desvanecem organicamente.
- Impact Ripples: Cliques no fundo geram ondas de choque que alteram a densidade do dithering.
- Transição Fluida: O fundo se funde suavemente com a seção de projetos através de um efeito de bleed e gradientes de máscara.
Efeito de glitch procedimental aplicado ao logotipo e textos de destaque, simulando instabilidade digital.
O projeto possui um CMS (Content Management System) leve e customizado para gerenciar o blog e o portfólio. Recentemente foi transformado em uma ferramenta profissional multiusuário com foco em UX.
URL: http://localhost:3000/admin/login.html
Usuários padrão: admin, brunonepomuceno, juliasakakibara
Senha inicial: admin123
No primeiro login, o sistema exigirá uma troca forçada de senha para maior segurança.
- Armazenamento em Markdown Estático: Posts, projetos e mensagens não são mais salvos em JSONs monolíticos. Agora cada publicação e cada contato recebido é um arquivo
.mdindividual com Frontmatter (gray-matter). - Gestão de Mensagens Centralizada: Aba dedicada no CMS para ler, marcar como lida ou excluir mensagens de contato, substituindo a necessidade de serviços externos (Formspree).
- Compressão Inteligente de Imagens: Sistema integrado que detecta uploads acima de 5MB e realiza compressão automática em 4K (Ref. 4096px) no lado do cliente.
- Otimização GitSync: Sincronização automática com GitHub para persistência de dados no Render, salvando os arquivos Markdown e imagens diretamente no repositório.
O painel de administração foi totalmente refatorado sob os princípios de separação de responsabilidades (SoC):
- Modularização: HTML, CSS e JS agora residem em pastas dedicadas dentro de
/admin/. - Arquitetura Async: Todos os alertas e confirmações são baseados em Promises para um fluxo de dados limpo e sem travamentos de thread.
Importante: Antes de novas implementações, consulte nosso guia em
.test_rules.mdque detalha os procedimentos de análise estática e Testes Estritos.
- Favicon: Gerado via favicon.io.
- Bayer Dithering Concept: Inspirado no tutorial da Codrops (Tympanus).
- Visual Inspiration: Inspirado na estética experimental do estúdio
ejtech.studio.
site/
├── server.js # Servidor Node.js (API & GitSync)
├── data/ # Armazenamento em Markdown (Posts, Projetos e Usuários JSON)
├── uploads/ # Diretório local para uploads temporários de imagens
│ ├── css/ # Estilos desacoplados (admin.css, login.css)
│ ├── js/ # Lógica modular (cms-admin.js, login.js)
│ ├── index.html # Dashboard (Gerenciador)
│ └── login.html # Tela de Acesso e Recuperação
├── css/
│ └── main.css # Design System Global
├── js/
│ ├── hero-background.js # Engine Three.js + Shaders
│ └── main.js # Interações globais
Como este projeto utiliza o plano gratuito do Render, o servidor entra em modo de hibernação após 15 minutos de inatividade. Para garantir que o site carregue instantaneamente para os visitantes, utilizamos um serviço de "ping" externo.
- Crie uma conta gratuita em cron-job.org.
- No Dashboard, clique em CREATE CRONJOB.
- Title:
Magic Oven Render Ping - URL:
https://prj-d5ahb2je5dus73f4cdm0.onrender.com/api/health - Clique na aba ADVANCED no topo da configuração:
- Em Headers, clique em ADD e adicione:
- Key:
User-Agent - Value:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/120.0.0.0 Safari/537.36
- Key:
- Em Timeout (no final da página), aumente para 30 seconds para dar tempo do servidor acordar.
- Em Headers, clique em ADD e adicione:
- Em Common (ou no agendamento principal), configure a execução para A cada 14 minutos.
- Clique em SAVE.
Isso manterá o servidor "acordado" 24/7 sem custos adicionais.
Como o Render apaga arquivos locais no plano grátis, implementamos uma rotina de sincronização automática. Toda vez que você salvar, editar ou deletar um post, projeto ou mensagem no CMS, o servidor fará um git commit com o título da alteração e um git push de volta para o seu repositório.
Para que o servidor consiga enviar e-mails e ter permissão de gravar no seu GitHub em produção, você deve criar as seguintes Environment Variables no painel do Render:
JWT_SECRET: Uma string aleatória para segurança dos tokens.GITHUB_TOKEN: Seu Personal Access Token do GitHub.GITHUB_REPO: O nome do repositório (ex:magicoven-tech/site).
SMTP_HOST:smtp.gmail.comSMTP_PORT:587SMTP_USER: Seu e-mail (ex:magicoven.tech@gmail.com).SMTP_PASS: Sua Senha de App do Google (16 dígitos).
- Acesse o seu Dashboard no Render.
- Clique no seu serviço Web Service (ex:
site). - No menu lateral esquerdo, clique em Environment.
- Clique no botão Add Environment Variable.
- Em Key, digite
GITHUB_TOKENe em Value, cole o seu Personal Access Token (PAT) (Permissão necessária: Contents: Read & Write). - Clique novamente em Add Environment Variable.
- Em Key, digite
GITHUB_REPOe em Value, coloque o caminho do seu repositório no formatousuario/nome-do-repositorio(ex:magicoven-tech/site). - Clique no botão Save Changes.
Nota: Se você estiver rodando localmente (npm run dev), o sistema também tentará fazer o commit/push se você tiver permissão de Git configurada na sua máquina!
Magic Oven - Estúdio Digital Experimental
Feito com magia e código ✨