Meu portfólio pessoal e blog técnico — construído com Next.js 16, React 19, TailwindCSS 4 e DaisyUI 5.
isaacmuniz.pro →
Este é o código-fonte do meu site pessoal — um projeto feito com muito carinho, dedicação e perfeccionismo.
O site reúne portfólio e blog técnico em uma experiência visual refinada, com temas autorais criados via DaisyUI (light e dark), animações construídas com Motion, SEO de ponta a ponta (metadata por página, Open Graph dinâmico, JSON-LD Schema.org, sitemap automático), fontes carregadas localmente para máxima performance e Lighthouse scores acima de 90. Cada detalhe — da tipografia às micro-interações, do carrossel da homepage ao formulário de contato — foi pensado para criar uma ótima experiência de uso.
- Sistema completo com três categorias (autorais, colaborações e outros).
- Cada projeto tem página própria gerada estaticamente, com descrição, galeria de imagens/vídeos e a stack técnica usada no projeto, com ícone de cada tecnologia.
- Os cards têm um efeito de hover compartilhado — ao passar o mouse em um card, os demais se atenuam, direcionando o foco do visitante e criando uma interação divertida.
- Cada tecnologia é registrada em um mapa centralizado (
data/techStack.ts) que associa umTechIDtipado a um nome e ícone vianext/image. - Para adicionar um novo item basta uma entrada — ela se propaga automaticamente por todo o site.
- A homepage exibe um carrossel animado com os projetos mais relevantes.
- Avança automaticamente, com barra de progresso visual, pausa ao hover e navegação manual por setas e indicadores.
- Posts em
.mdlocais processados comgray-mattereremark. - Syntax highlighting com
PrismLightcom registro seletivo de linguagens para manter o bundle enxuto. - Suporte a rascunhos via flag
isDraft.
- Formulário funcional com Server Action do Next.js, integrado ao Resend.
- Aceita nome, e-mail, mensagem, WhatsApp (com máscara brasileira) e empresa.
- O e-mail gerado inclui botão "Responder no WhatsApp" com mensagem pré-preenchida, para que eu possa facilmente responder a mensagem do cliente direto no WhatsApp dele.
- Dois temas feitos do zero — "levitation" (light) e "nightflight" (dark) — com paleta customizada.
- O tema persiste no
localStoragee respeitaprefers-color-scheme.
- O favicon alterna automaticamente entre as versões light e dark conforme o tema ativo.
- A troca acontece sem flash via script inline no
<head>, executado antes da primeira renderização.
- Animações com
motion/react: entradas ao scroll, transições de página, efeito de texto scramble no header e micro-interações em botões e cards. - Elementos above-the-fold usam apenas transforms (sem
opacity: 0) para não interferir na detecção de LCP.
- Metadata por página com título, description e keywords.
- Twitter Cards e canonical URLs em todas as páginas.
- JSON-LD Schema.org injetado por página:
Person+WebSitena home,Articlenos posts do blog eCreativeWorknos projetos. - O
robots.txtbloqueia crawlers de IA (GPTBot, CCBot, Bytespider, etc.) enquanto permite Google e Bing.
- OG images geradas automaticamente para todas as páginas do site via
ImageResponse. - Cada página — home, projetos e artigos do blog — tem sua própria OG image com layout, tipografia e conteúdo únicos.
- As imagens incluem fontes customizadas, logo SVG e chips de tecnologia nos projetos.
- Sitemap XML gerado automaticamente a partir das páginas estáticas, projetos e posts do blog.
- Nenhuma manutenção manual necessária — novo conteúdo é indexado automaticamente.
- Header sticky com glassmorphism e auto-hide — esconde ao scrollar para baixo, reaparece ao scrollar para cima.
- Diferencia scroll do usuário de scrolls programáticos para evitar comportamento errático durante transições no conteúdo do site.
- Em mobile, drawer fullscreen via Headless UI.
| Camada | Tecnologias |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI | React 19, TailwindCSS 4, DaisyUI 5 |
| Linguagem | TypeScript 5 |
| Runtime | Bun |
| Animações | Motion (Framer Motion) |
| Blog | Markdown local, gray-matter, remark, remark-gfm, PrismLight |
| Resend | |
| Ícones | Phosphor Icons |
| Componentes | Headless UI, Radix UI (tooltips) |
| Utilitários | clsx, tailwind-merge, tailwind-variants |
- Bun (v1.0+)
- Node.js 18+ (compatibilidade)
# Clone o repositório
git clone https://github.com/codigoisaac/isaacmuniz.pro.git
cd isaacmuniz.pro
# Instale as dependências
bun install
# Configure as variáveis de ambiente
cp .env.example .env.local
# Preencha RESEND_API_KEY no .env.local
# Inicie o servidor de desenvolvimento
bun devO servidor iniciará em http://localhost:3000.
bun dev # Dev server com --smol (menor uso de memória)
bun run build # Build de produção
bun start # Serve o build de produção
bun lint # ESLintSobre o
--smol: o flag--smolinstrui o garbage collector do Bun a rodar com mais frequência, reduzindo significativamente o consumo de RAM em troca de um custo marginal de performance. Ideal para máquinas com memória limitada — em benchmarks, pode reduzir o uso de ~343 MB para ~54 MB.
Fontes carregadas localmente via next/font/local — nenhuma requisição para Google Fonts ou CDNs. Isso garante carregamento instantâneo, elimina layout shift (FOUT/FOIT) e melhora o LCP.
Distribuído sob CC BY-NC-ND 4.0. Sinta-se à vontade para explorar o código, se inspirar e aprender.
Feito com ☕ e código por Isaac Muniz