apenasdaniel --:-- · ...
apenas daniel clica na foto pra tirar a máscara. se tiver coragem.

eu escrevo o css que faz o seu site parecer caro.

sou dev front-end: html, css, javascript e react. pego uma ideia e transformo em interface que funciona, carrega rápido e se mexe do jeito certo. e sou dono da AETHER e da Aether Gaming.

não sou designer. eu faço o design funcionar, o que é diferente e dá bem mais trabalho.

// arrasta pela barra ou puxa pra baixo. ele aguenta.
o-que-eu-faço

front-end. do layout ao deploy.

meu trabalho é a parte que você vê e clica: estrutura, estilo, animação e o código que liga tudo isso aos dados.

o que importa se no fim nada vale a pena? o seu site, pelo menos, vai valer.

daniel.css
/* sim, eu sei que essas propriedades não existem */
.daniel {
  role: front-end;
  stack: html, css, js, react;
  owner-of: aether, aether-gaming;
  designer: none; /* eu codo, não desenho */
  sleep: 0 !important;
  mask: ghostface;
}

.tela {
  filter: motion-blur(var(--seu-mouse)); /* mexe rápido */
}
html · css · javascript

interfaces que funcionam

transformo layout em código limpo e responsivo, que fica certo no computador, no tablet e no celular da sua tia.

pixel por pixel. sim, eu vejo quando tá 1px torto.

css · animação · motion

movimento com motivo

transições, efeitos e animações que guiam o olho em vez de atrapalhar, sem pesar o carregamento.

mexe o mouse rápido pela página. viu o borrão? isso.

react · apis · automação

front que conversa

ligo a interface a dados, apis, banco e automações, pra que o botão faça mais do que ficar bonito.

o botão faz alguma coisa. revolucionário.

skills

ficha do personagem.

o que eu sei fazer, num formato que qualquer gamer entende.

o quão belo precisa ser um pesadelo para deixar de ser um? pergunta pro css que eu herdei de outro dev.

daniel como ghostface, segurando duas garrafas de jack daniel’s
daniel // ghostfaceitem equipado: uísque
classe
dev front-end
guildas
aether + aether gaming
nível
subindo
alinhamento
caótico produtivo

inventário

htmlcssjavascriptreactresponsivoanimação csssupabaseapis & webhooksiauísque

fraquezas

  • beber água (o fígado acha que é armadilha)
  • reunião que podia ser um áudio
  • "faz igual ao site da apple"
habilidade passiva
mobile first nato sempre ativa

todo projeto já nasce responsivo, rápido e acessível. funciona no celular, no tablet e no monitor ultrawide, sem você pedir e sem custo extra.

efeito colateral: bebe jack daniel's por lealdade ao nome. o fígado, que nunca foi consultado, entrou com um processo.

habilidade ativaimplementação + implantação [ clique pra usar ][ clique pra fechar ]

você não sabe a diferença, né? relaxa, deixa eu te explicar rapidinho.

implementaçãovocê já tem um sistema e ele precisa fazer algo novo. eu entro no código que outra pessoa escreveu, entendo o caos e coloco a funcionalidade sem derrubar o resto.

sim, até naquele código sem nenhum comentário.

implantaçãonão existe nada ainda. eu construo do zero e coloco no ar, com domínio, servidor e seu time usando de verdade.

não é um zip no seu e-mail. é o sistema funcionando.

cooldowndepende do escopo. custo de mana: café.

atributos

nem tenta clicar nas barras.

html & css10/10
e sem chorar.
javascript & react8/10
responsivo (mobile first)9/10
animação & motion9/10
arrasta o mouse rápido por cima dos títulos.
automação & integrações8/10
design gráfico3/10
o 3 é pena do avaliador. o avaliador sou eu.
horas de sono2/10
bug conhecido. sem previsão de correção.
intervalo comercialum recado do meu patrocinador: eu mesmo.aethersingle.online
[ a empresa ]

a aether é minha.

a aether é o meu lado empresarial: projeto digital do tipo que eu gostaria de contratar, sob medida, bem acabado e com prazo que alguém leva a sério.

pergunta pro seu site atual se ele foi feito assim.

AETHER

criamos o digital que fica.

sites, páginas de venda, sistemas de gestão, automações e integrações. tudo desenhado em volta do seu negócio, nada tirado de modelo pronto.

  • escopo, prazo e valor fechados antes de começar
  • resposta em até 1 dia útil
  • atendimento remoto pro brasil inteiro

organograma oficial

fundador
daniel
time de front-end
daniel
suporte 24h
daniel (com sono)
departamento jurídico
daniel, lendo o contrato
cafezinho
adivinha

a vantagem: você fala direto com quem faz. ninguém passa recado errado, porque não tem pra quem passar.

[ outra empresa minha · modo gamer ]

a aether gaming também é minha.

a aether que você acabou de ver é a empresarial: site, sistema, cliente de camisa social e reunião que podia ser um e-mail. a aether gaming é outro projeto, focado em soluções gamers, feito pra quem joga, transmite e cuida de comunidade. mesmo cuidado, zero gravata.

uma paga os boletos. a outra explica por que eu durmo às 4h.

[ produtos ]

o que a aether vende.

oito jeitos de resolver o seu problema digital. o prazo já vem na etiqueta, sem precisar pedir.

o preço não vem. eu sei. calma, ele vem fechado na proposta.

1 a 2 semanas

páginas de venda

uma página, uma oferta e um caminho claro até o contato. feita pra transformar visita em cliente.

feita pra vender. revolucionário, eu sei.

3 a 5 semanas

sites

quem você é, o que faz e como falar com você. rápido no celular e pronto pro google.

aquele que o seu sobrinho prometeu e nunca entregou.

sob medida

portfólio autoral

feito em volta do seu trabalho, não de um modelo, pra mostrar seus projetos do jeito que eles merecem.

tipo este aqui. sim, isso foi propaganda.

1 a 3 semanas

automações

cadastro, aviso, cobrança e relatório rodando sozinhos, ligados às ferramentas que você já usa.

pra você parar de copiar e colar planilha como se fosse 2009.

6 a 12 semanas

sistemas de gestão

seu processo dentro de um sistema: clientes, estoque, pedidos, financeiro, relatórios e acesso por usuário.

porque controle_final_v7_AGORAVAI.xlsx não é um sistema.

1 a 3 semanas

integrações

faço as ferramentas que você já usa conversarem entre si, sem ninguém no meio redigitando dado.

mais comunicação do que muito relacionamento por aí.

mensal

manutenção e evolução

ajustes, melhorias e coisas novas depois que tudo já está no ar.

eu não sumo depois da entrega. diferente de certas pessoas.

definido no escopo

sob medida

a ideia não cabe em nenhuma caixinha? senta que a gente desenha junto.

se der pra fazer, eu faço. se não der, eu aviso antes de cobrar.

[ processo ]

como um projeto anda.

da primeira conversa até os acessos na sua mão. cada etapa tem prazo e você sabe o que sai dela.

spoiler: não tem a etapa "sumir por três meses".

  1. conversa1 a 2 dias

    entender o negócio, o que precisa acontecer e o que já foi tentado antes.

    você conta o problema. eu finjo que não vi o seu site atual.

  2. escopo2 dias

    o que entra, o que não entra, quanto custa e quando fica pronto. por escrito, antes de começar.

    surpresa só em aniversário.

  3. layout1 a 2 semanas

    as telas são apresentadas antes de virar código, enquanto mudar ainda é barato.

    "mais moderno" não é feedback. mas eu traduzo.

  4. desenvolvimento2 a 6 semanas

    o projeto é construído e você acompanha por um link de teste, sem esperar até o fim pra ver.

    nada de "tá quase" por três meses.

  5. revisão3 a 5 dias

    ajustes, teste no celular e no computador, velocidade e correção do que aparecer.

    manda tudo que incomodar de uma vez. de uma vez. por favor.

  6. entrega1 a 2 dias

    no ar, domínio configurado, acessos entregues e um vídeo mostrando como mexer no que é seu.

    o projeto é seu. a senha também.

quer um desses? a aether faz.

pedir orçamento ↗

fim do intervalo comercial. voltamos com a programação normal.

perguntas-que-eu-ouço

respostas sinceras.

você é designer?

não. sou dev front-end. o design eu respeito, entendo e transformo em código que funciona. desenhar do zero é outra profissão.

quanto custa?

depende. eu sei, odeio essa resposta também. por isso o valor vem fechado na proposta, antes de qualquer linha de código.

dá pra fazer em dois dias?

dá pra fazer ruim em dois dias. bom leva o prazo que tá na etiqueta lá do intervalo comercial.

você usa template?

não. cada projeto é escrito do zero. nenhum template foi ferido na criação deste site.

responde rápido?

em até 1 dia útil. às vezes de madrugada, o que diz mais sobre mim do que sobre a empresa.

depoimentos

em breve. meus clientes tão ocupados demais vendendo pra escrever.

contato

bora tirar a máscara do seu projeto?

me chama pra conversar sobre front-end, ou pede orçamento direto na aether. respondo em até 1 dia útil.

e sem áudio de 4 minutos, prometo.

arvore-de-skills

tudo que eu sei. 25 skills.

a versão irônica tá no card. a séria aparece quando você clica.

front-end 6

HTML & CSSSei centralizar a div. Sim, de primeira. Não, não vou contar quantos anos levou.

o que éHTML é a estrutura da página (títulos, textos, botões, formulários) e CSS é tudo que define como ela aparece: cores, tamanhos, posição e animação.

na práticaMonto layouts com flexbox e grid que se ajustam do celular ao monitor ultrawide, com HTML semântico pra leitor de tela e Google entenderem a página. Este portfólio é HTML e CSS escritos à mão.

JavaScript (ES6+)Converso com a linguagem que decidiu que NaN é do tipo número. Nós nos entendemos.

o que éA linguagem que roda no navegador e dá comportamento à página: responde a clique, busca dados, muda o conteúdo sem recarregar.

na práticaUso pra interação, animação e integração: buscar dados de API com fetch, validar formulário, controlar estado da tela. Todas as animações deste site são JavaScript puro, sem biblioteca.

TypeScriptPorque descobri que o JavaScript me deixava errar em paz, e eu não merecia essa paz.

o que éJavaScript com tipos: o editor avisa antes de rodar quando um dado não tem o formato esperado.

na práticaEm projetos maiores, descrevo o formato dos dados (um pedido, um usuário, uma resposta de API) e o editor aponta o erro na hora, em vez do bug aparecer pro cliente.

ReactComponentizo tudo. Inclusive coisas que não precisavam ser componentizadas.

o que éBiblioteca pra montar interfaces em pedaços reutilizáveis (componentes) que se atualizam sozinhos quando os dados mudam.

na práticaSeparo a tela em componentes como cabeçalho, card e formulário, cada um com seu estado, e reaproveito em várias páginas sem copiar código.

Next.jsAprendendo em público, construindo coisas reais. O deploy funciona, que é o que importa no fim.

o que éFramework em cima do React que cuida de rotas, renderização no servidor e otimização, deixando o site rápido e bem indexado no Google.

na práticaUso com TypeScript e Tailwind: cada página vira um arquivo, as imagens são otimizadas sozinhas e o deploy sai direto na Vercel.

Tailwind CSSMinhas classes têm mais caracteres que meus commits. Estou em paz com isso.

o que éUm jeito de escrever CSS com classes prontas direto no HTML, como "flex", "p-4" e "text-lg", em vez de arquivos de estilo separados.

na práticaAcelera o layout e mantém espaçamento e cores consistentes em todas as telas, porque todo mundo usa a mesma escala de valores.

motion 3

GSAP & Framer MotionPasso três horas ajustando um easing que o usuário vai ver por 0,4 segundo. Ele merece.

o que éBibliotecas de animação: GSAP pra animações de linha do tempo e ligadas à rolagem, Framer Motion pra animar componentes React.

na práticaFaço elementos entrarem conforme a rolagem, transições entre estados e microinterações, sempre respeitando quem desativa animação no sistema.

Three.jsColoco partículas em lugares que não pediram partículas. Ficou bom, admita.

o que éBiblioteca de 3D no navegador, usando a placa de vídeo pra desenhar cenas, objetos e partículas em tempo real.

na práticaUso pra fundos e cenas 3D interativas que reagem ao mouse e à rolagem, cuidando do desempenho pra não travar o celular.

Canvas & SVG animadoDesenho com código porque mover o mouse é menos confiável que um for.

o que éCanvas é uma área onde o código desenha pixel a pixel; SVG é desenho vetorial que fica nítido em qualquer tamanho.

na práticaA neve, os cards líquidos e os botões que se deformam deste site são canvas, desenhados a cada quadro. Ícones e logos animados ficam em SVG.

linguagens 2

PythonUso para resolver em 20 linhas o que eu ia fazer manualmente em 4 horas. E depois gasto 5 horas escrevendo as 20 linhas.

o que éLinguagem de uso geral, simples de ler, muito usada em automação, scripts e tratamento de dados.

na práticaEscrevo scripts pra automatizar tarefas repetitivas: ler e organizar arquivos, tratar planilhas e processar dados que levariam horas na mão.

JavaAprendi a programar escrevendo o nome da classe três vezes antes de qualquer coisa acontecer. Construiu caráter.

o que éLinguagem orientada a objetos, tipada e muito usada em sistemas corporativos e no back-end.

na práticaFoi a base de lógica e orientação a objetos: classes, herança e organização de código, que levo pra qualquer outra linguagem.

dados & back-end 3

Supabase & PostgreSQLModelo tabela, escrevo query e caço a linha fantasma que insiste em existir. Sempre tem uma.

o que éPostgreSQL é um banco de dados relacional; Supabase entrega ele pronto com login, API, armazenamento de arquivos e tempo real.

na práticaModelo as tabelas, escrevo as migrações e as regras de acesso (cada usuário só vê o que é dele) e uso o tempo real pra atualizar a tela sozinha, como no meu sistema de RPG.

SQLJá vi um SELECT * em produção. Foi educativo.

o que éA linguagem pra consultar e alterar dados em bancos relacionais.

na práticaEscrevo consultas, junções entre tabelas, funções e relatórios direto no banco, pedindo só as colunas que a tela precisa.

APIs RESTConsumo API alheia e trato os erros que a documentação jurou que não existiam.

o que éO jeito padrão de sistemas conversarem pela internet: um pede dados por um endereço e o outro responde, geralmente em JSON.

na práticaConecto o site a serviços externos e ao banco, tratando erro, demora e resposta incompleta pra tela nunca quebrar na cara do usuário.

automação 2

Webhooks & Bots de DiscordAutomatizo avisos para não ter que lembrar de avisar. Preguiça produtiva é uma metodologia.

o que éWebhook é um aviso automático que um sistema manda pra outro quando algo acontece; bot de Discord é um programa que age dentro do servidor.

na práticaLigo sistemas a automações (um cadastro novo dispara um fluxo, um aviso cai no canal certo) e faço bots que respondem comandos e organizam comunidades.

GitHub ActionsDeixo o robô trabalhar enquanto durmo. Ele é mais pontual que eu.

o que éAutomação do próprio GitHub: tarefas que rodam sozinhas quando o código muda.

na práticaConfiguro fluxos que publicam o site automaticamente a cada atualização, sem eu precisar subir nada na mão.

infra & deploy 3

Git & GitHubMeus commits contam uma história. Nem sempre uma história boa, mas uma história.

o que éGit guarda o histórico de cada mudança no código; GitHub hospeda esse histórico online e organiza o trabalho em equipe.

na práticaTrabalho em branches, abro pull requests e consigo voltar qualquer mudança. Nenhum código meu existe só no meu computador.

DNS & DomíniosApontei o domínio e esperei a propagação como quem espera notícia de parente distante.

o que éDNS é a lista que traduz um endereço como aethersingle.online pro servidor onde o site está de verdade.

na práticaConfiguro domínio, subdomínios e certificado. daniel. e gg.aethersingle.online são subdomínios que eu apontei.

DebuggingMeu talento real: descobrir que o bug era uma vírgula. Depois de quatro horas.

o que éAchar por que algo não funciona e corrigir sem quebrar o resto.

na práticaReproduzo o erro, isolo a causa com as ferramentas do navegador e logs, corrijo e confiro se nada mais foi afetado.

design & negócio 6

Design SystemsCrio componentes reutilizáveis para parar de reescrever o mesmo botão. Reescrevi o botão mais 12 vezes antes de perceber isso.

o que éUm conjunto de regras e componentes (cores, tipografia, botões, espaçamentos) que mantém todas as telas de um produto coerentes.

na práticaDefino variáveis de cor e espaçamento e componentes base no código, pra telas novas já nascerem no padrão.

UI/UX & Identidade VisualPenso no clique antes de pensar na cor. O usuário agradece sem saber.

o que éUI é a aparência da interface; UX é a experiência de usar: se a pessoa entende, encontra e consegue fazer o que veio fazer.

na práticaOrganizo a hierarquia da página, os estados de botão, carregamento e erro, e aplico a identidade da marca de forma consistente na interface.

TipografiaSei a diferença entre as fontes. Vou te contar sobre ela sem você pedir.

o que éA escolha e o uso das fontes: tamanho, peso, espaçamento e combinação.

na práticaEscolho pares de fontes, monto escala de tamanhos e carrego as fontes do jeito certo pra página não piscar nem pesar.

Propostas & ContratosEscrevo contrato que o cliente entende. Revolucionário, pelo visto.

o que éOs documentos que fecham um projeto: o que será entregue, prazo, valor e condições.

na práticaNa Aether, escopo, prazo e valor são fechados por escrito antes de começar, em linguagem que o cliente entende.

Prospecção & Gestão de AnúnciosEncontro quem precisa de site e transformo a conversa em projeto.

o que éBuscar clientes de forma ativa e gerenciar anúncios pagos pra atrair os certos.

na práticaIdentifico negócios que precisam de presença digital, faço o primeiro contato e acompanho anúncios pra saber o que traz cliente de verdade.

Prompt EngineeringUso IA como ferramenta, não como funcionário. Quem diz que a IA programa por ele tá alucinando junto com ela.

o que éEscrever instruções claras pra ferramentas de IA, com contexto, formato e limites, pra resposta sair útil.

na práticaUso IA como ferramenta de trabalho: rascunho, revisão e automação de tarefas, sempre revisando o que ela entrega.