my-portfolio

# Matheus Louzada — Portfólio Portfólio pessoal de um **desenvolvedor fullstack .NET / React**, construído com Next.js 14. Design minimalista com tema claro/escuro, animações suaves e layout totalmente responsivo.     

---

✨ Preview

☀️ Tema claro	🌙 Tema escuro

### Responsivo

---

🚀 Funcionalidades

• 🌗 Tema claro/escuro — alternância com persistência no localStorage e detecção da preferência do sistema, sem flash de tela na carga
• 🎬 Animações de reveal — seções surgem suavemente conforme o scroll (IntersectionObserver), respeitando prefers-reduced-motion
• 📱 Totalmente responsivo — do desktop ao mobile, com menu hambúrguer
• ⚡ Imagens otimizadas — via next/image
• 🔤 Tipografia Geist — carregada localmente com next/font (zero layout shift)
• 🎨 Design tokens em CSS variables — paleta consistente entre os temas

---

🛠️ Stack

Camada	Tecnologia
Framework	Next.js 14 (App Router)
UI	React 18 + TypeScript
Estilo	Tailwind CSS + CSS variables
Fontes	Geist (Sans + Mono)
Gerenciador	pnpm

---

📂 Estrutura

my-portfolio/
├── app/
│   ├── layout.tsx        # Layout raiz + script de tema (anti-flash)
│   ├── page.tsx          # Composição das seções
│   ├── globals.css       # Tokens de tema (claro/escuro) e estilos base
│   └── fonts/            # Geist Sans / Mono (.woff)
├── components/
│   ├── Navbar.tsx        # Navegação + toggle de tema + menu mobile
│   ├── Hero.tsx          # Apresentação
│   ├── About.tsx         # Sobre + skills
│   ├── Projects.tsx      # Projetos em destaque + autorais
│   ├── Contact.tsx       # Chamada de contato
│   ├── Footer.tsx
│   └── Reveal.tsx        # Wrapper de animação no scroll
├── lib/
│   └── useTheme.ts       # Hook de alternância de tema
└── public/imgs/          # Imagens e fotos

---

🧑‍💻 Rodando localmente

Requer Node.js 18+ e pnpm.

# 1. Clone o repositório
git clone https://github.com/mtlouzada/my-portfolio.git
cd my-portfolio

# 2. Instale as dependências
pnpm install

# 3. Inicie o servidor de desenvolvimento
pnpm dev

Abra http://localhost:3000 no navegador.

Outros comandos

pnpm build   # build de produção
pnpm start   # roda o build de produção
pnpm lint    # checagem de lint

---

🌐 Deploy

O deploy recomendado é na Vercel (criadores do Next.js): basta importar o repositório — o framework e o pnpm são detectados automaticamente, e cada push na master publica uma nova versão.

---

📫 Contato

• E-mail: louzoshi.eth@gmail.com
• GitHub: @mtlouzada
• LinkedIn: matheus-louzadaa

_{Feito com Next.js · Matheus Louzada — Brasil}