Imagem
Nome do Projeto
DevWeb
Descrição breve do projeto, ferramentas e contexto de entrega.
JavaScript Figma
Design System · Neo-Brutalismo
Design Kit
Todos os tokens, componentes e padrões visuais construídos para esse portfólio. Sistema desenvolvido do zero — sem frameworks externos. CSS puro com variáveis.
01
Cores
Paleta principal (light mode)
Background
--color-bg · #F2F0EF
Ink
--color-ink · #1B1B1D
Yellow
--color-yellow · #FFC300
Purple
--color-purple · #7C4DFF
Teal
--color-teal · #00BFAE
Pink
--color-pink · #FF2D55
Muted
--color-muted · #6B6B6B
Blue
--color-blue · #1A73E8
Paleta dark mode
BG Dark
--color-bg-dk · #1B1B1D
Ink Dark
--color-ink-dk · #E5D2AF
Yellow Dark
--color-yellow-dk · #7B4600
Teal Dark
--color-teal-dk · #008579
Pink Dark
--color-pink-dk · #E71C42
02
Tipografia
Fontes
Display · Syne
Syne — Bold Display
--font-display Body · Inter
Inter — Texto corrido, descrições, parágrafos e conteúdo geral do portfólio.
--font-body Mono · Space Mono
SPACE MONO — LABELS, TAGS & METADADOS
--font-monoEscala (Syne · fluid)
Aa
Projetos.
Sobre mim.
MobiStudio
Design + Código
Texto de bio e descrições em destaque
Parágrafo padrão, conteúdo corrido do portfólio.
Descrições de cards e legendas de projeto.
TAGS · LABELS · METADADOS
Utilitários de texto
.highlight
Vamos criar algo juntos?
.highlight-yellow
Adobe Certified
03
Sombras & Bordas
--shadow-sm · 3px
Shadow SM
--shadow-md · 5px
Shadow MD
--shadow-lg · 8px
Shadow LG
--shadow-xl · 12px
Shadow XL
--border (2px)
Border padrão
--border-thick (3px)
Border espessa
04
Tags
.tag (default) Adobe Certified ✦
.tag--dark Projeto Autoral
.tag--red Urgente
.tag--green Disponível
.tag--blue Dev Web
.tag--ghost Ghost
.tech-tag
JavaScript Canvas API Figma Netlify Blender
.available-badge
Presencial Híbrido Freelance
.section-label
01 — Destaques
.hero__status-dot Disponível para oportunidades
05
Botões
Nav controls
06
Skill Chips
.skill-chip — com ícone externo 
Figma
JavaScript
Blender
Photoshop
Illustrator
.stack__item — versão dark (fundo escuro)
Figma
After Effects
Proficiente
Blender
07
Cards
.proj-card — card de projeto (grade)
Web
🎨
.value-box
Caixa de valor — usada na seção "Sobre" para destacar competências e diferenciais.
"Profissional excepcional, dedicado e com talento único para resolver problemas."
.edu-card — formação & certificações
🎓 Graduação
Produção Multimídia
Centro Universitário Senac
2022–2025
Habilitação completa em design, código, 3D e audiovisual.
✦ Certificação
Adobe Certified Professional
Adobe
2024
Visual Design using Adobe Photoshop.
Anthropic
.cert-card — Carrossel de certifs
2024
.dev-card — fundo escuro (em desenvolvimento)
⚡
Nome do Projeto
Descrição do que está sendo desenvolvido e qual problema resolve.
Em desenvolvimento
🛠️
Outro Projeto
Contexto e tecnologias envolvidas no desenvolvimento.
Planejado
🚀
Em Produção
Projeto já finalizado e rodando em ambiente de produção.
Lançado
08
Timeline
Jan 2024 – Atual 1 ano e meio
Empresa
Designer Multimídia
Criação de identidade visual do zero ao deploy
Desenvolvimento de ferramenta web proprietária
Produção audiovisual para campanhas sazonais
09
Pull-quote
Profissional excepcional — une criatividade técnica com velocidade de execução. Do briefing ao produto final sem perder qualidade.
11
Filter Bar
12
Padrões de Seção
.page-header — cabeçalho de página interna
Acervo completo
Projetos.
O acervo cobre 4+ anos de trabalho — design, código, 3D e audiovisual.
.stats-strip — strip de estatísticas (Sobre)
Carreira
4+
anos de experiência
Avaliações internas
9,56
/10 média
Projetos
10+
no portfólio
[data-reveal] — animação de entrada (IntersectionObserver)
data-reveal
data-reveal-delay="1"
data-reveal-delay="2"
data-reveal-delay="3"