Skip to content

README.md

Latest commit

 

History

History
121 lines (86 loc) · 3.84 KB

README.md

File metadata and controls

121 lines (86 loc) · 3.84 KB
Raw

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.

Next.js React TypeScript Tailwind CSS pnpm

✨ Preview

☀️ Tema claro 🌙 Tema escuro
Tela inicial — claro Tela inicial — 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

Feito com Next.js · Matheus Louzada — Brasil