Estúdio de tatuagem Projeto de demonstração
Tinta Crua — estúdio de tatuagem com parede de flash original
Um one-pager editorial e brutal para um estúdio de tatuagem no Porto: papel-osso, preto tinta absoluto e um único vermelho sangue-de-boi, tipografia Archivo 900 em tamanho de cartaz e grão em CSS. A peça central é uma parede de flash filtrável com dez desenhos originais de tatuagem em SVG, cada um com ficha de tamanho, zona e intervalo de preço que alimenta um pedido de orçamento funcional.
feitura.pt/demo/tinta-crua — Ao vivo
Um estúdio de tatuagem com três artistas no Bonfim, Porto quer um site tão intransigente como as suas linhas — mas em que a mãe de qualquer cliente confiasse. Tem de mostrar a parede de flash semanal com desenhos a sério e intervalos de preço honestos, apresentar os três residentes e os seus estilos, pôr a higiene à frente de tudo (agulhas de uso único, autoclave com registo, tintas conformes REACH, estúdio licenciado), receber pedidos de orçamento a partir do telemóvel e explicar bem os cuidados pós-tatuagem. Sem fotos de banco de imagem, sem caveiras só porque sim.
O que está lá dentro
- Papel-osso, preto tinta absoluto e um único vermelho sangue-de-boi — um sistema de design feito só em CSS scoped, com grão em gradientes sobrepostos
- Tipografia editorial brutal: Archivo 900 em tamanho de cartaz, entrelinha apertada, etiquetas mono e coordenadas rodadas na vertical
- Parede de flash com dez desenhos originais de tatuagem em SVG — botânica fine-line, tradicional, geométrico e lettering — desenhados traço a traço
- Filtros por estilo a funcionar, com contagem de desenhos em direto e cartões pregados e inclinados que endireitam ao toque
- Ficha de detalhe do flash com seletores de tamanho e zona do corpo e intervalo de preço em euros por escalão
- «Reservar este flash» leva o desenho, o tamanho e o artista escolhidos diretamente para o pedido de orçamento
- Perfis dos três artistas residentes com marcas SVG distintas que pré-selecionam o artista no formulário
- Secção de higiene e ética: agulhas de uso único, autoclave com registo, tintas REACH, licença, consulta gratuita, política +18
- Acordeão de cuidados, revelações ao scroll e faixa marquee — tudo desativado com elegância em prefers-reduced-motion
- Totalmente bilingue PT/EN com toggle nativo, contraste AA em todos os fundos tintados e alvos de toque de 44 px
Registo de construção
- Direção de arte e tokens — paleta osso/tinta/sangue-de-boi, escala de cartaz em Archivo 900, estudos de grão em CSS, composição do hero e da faixa
- Dia de desenho — dez flashes originais em SVG em quatro estilos, mais as três marcas dos artistas, tudo como ilustração de traço a sério
- Parede de flash — filtros com contagem em direto, cartões pregados e inclinados, ficha de detalhe com seletores de tamanho/zona e preços por escalão em euros
- Pedido de orçamento ligado à ficha do flash, perfis de artistas com pré-seleção, secção de higiene e acordeão de cuidados com copy PT-PT completo
- Passagem do locale EN, revelações ao scroll com alternativas de movimento reduzido, auditoria de contraste e alvos de toque, recomposição para tablet e desktop
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
94
Performance
95
Accessibility
100
Best practices
100
SEO