Skip to content

📂 Estrutura do Projeto

Jump to bottom
Daiane Barbosa edited this page Jan 24, 2026 · 1 revision

📂 Estrutura do Projeto

🗂️ Visão Geral Completa

dev-portfolio/
└── my-portfolio/
    ├── 📁 app/                         # Rotas e layouts (Next.js App Router)
    │   ├── favicon.ico                # Ícone do site
    │   ├── globals.css                # Estilos globais + Tailwind directives
    │   ├── layout.tsx                 # Layout raiz (HTML, body, metadata)
    │   └── page.tsx                   # Página inicial (/)
    │
    ├── 📁 components/                  # Componentes React reutilizáveis
    │   ├── About.tsx                  # Seção "Sobre Mim"
    │   ├── Certificates.tsx           # Seção de certificados
    │   ├── Contact.tsx                # Seção de contato
    │   ├── Footer.tsx                 # Rodapé
    │   ├── Hero.tsx                   # Seção hero (primeira tela)
    │   ├── Navbar.tsx                 # Barra de navegação
    │   └── Projects.tsx               # Seção de projetos (carrossel)
    │
    ├── 📁 data/                        # Dados estruturados (TypeScript)
    │   ├── certificates.ts            # Lista de certificados e formações
    │   └── projects.ts                # Lista de projetos realizados
    │
    ├── 📁 public/                      # Arquivos estáticos servidos diretamente
    │   └── projects/                  # Imagens dos projetos
    │       ├── nexus-dev.jpg
    │       ├── watchtower.jpg
    │       └── ... (outras imagens)
    │
    ├── 📁 node_modules/                # Dependências (não versionar)
    ├── 📁 .next/                       # Build do Next.js (não versionar)
    │
    ├── 📄 .eslintrc.json              # Configuração do ESLint
    ├── 📄 .gitignore                  # Arquivos ignorados pelo Git
    ├── 📄 next-env.d.ts               # Types do Next.js (auto-gerado)
    ├── 📄 next.config.ts              # Configuração do Next.js
    ├── 📄 package.json                # Dependências e scripts
    ├── 📄 package-lock.json           # Lock de versões exatas
    ├── 📄 postcss.config.js           # Configuração do PostCSS
    ├── 📄 README.md                   # Documentação principal
    ├── 📄 tailwind.config.ts          # Configuração do Tailwind CSS
    └── 📄 tsconfig.json               # Configuração do TypeScript

🔍 Detalhamento por Pasta

📁 /app - Rotas e Páginas

Usa o App Router do Next.js 14 (não Pages Router).

layout.tsx - Layout Principal

// Define estrutura HTML base
- <html lang="pt-BR">
- Metadados (title, description)
- Fonte (Inter do Google Fonts)
- Importa globals.css

Responsabilidades:

  • ✅ Estrutura HTML base
  • ✅ SEO (metadata)
  • ✅ Fontes customizadas
  • ✅ Estilos globais

page.tsx - Página Inicial

// Importa e organiza todos os componentes
<Navbar />
<Hero />
<About />
<Projects />
<Certificates />
<Contact />
<Footer />

Responsabilidades:

  • ✅ Composição dos componentes
  • ✅ Ordem das seções
  • ✅ Estrutura geral da página

globals.css - Estilos Globais

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Estilos personalizados */
* { scroll-behavior: smooth; }
body { background-color: #f9fafb; }

📁 /components - Componentes Modulares

Todos os componentes são Client Components ('use client') quando usam:

  • Hooks (useState, useEffect)
  • Eventos (onClick, onChange)
  • Interatividade

Componentes e Responsabilidades

Componente Tipo Responsabilidade
Navbar.tsx Client Menu de navegação fixo com scroll behavior
Hero.tsx Client Apresentação inicial com animações
About.tsx Server Biografia + grid de tecnologias
Projects.tsx Client Carrossel interativo + filtros
Certificates.tsx Client Lista de certificados + filtros
Contact.tsx Server Cards de contato (links estáticos)
Footer.tsx Server Rodapé com informações

📁 /data - Dados Estruturados

Centraliza todos os dados do portfólio em arquivos TypeScript.

projects.ts

export interface Project {
  id: number
  title: string
  description: string
  image: string
  technologies: string[]
  link: string
  github?: string
  category: 'Frontend' | 'Backend' | 'Full Stack' | 'Mobile' | 'DevOps'
  featured: boolean
  status: 'completed' | 'in-progress'
  demoUrl?: string
}

export const projects: Project[] = [/* 10 projetos */]

Vantagens:

  • ✅ Type safety com interfaces
  • ✅ Fácil manutenção
  • ✅ Reutilização
  • ✅ Separação de responsabilidades

certificates.ts

export interface Certificate {
  id: number
  title: string
  institution: string
  date: string
  description: string
  icon: string
  category: 'Formação' | 'Certificação' | 'Curso'
  featured?: boolean
}

export const certificates: Certificate[] = [/* 19 certificados */]

📁 /public - Arquivos Estáticos

Servidos diretamente pelo Next.js sem processamento.

public/
├── projects/              # Imagens dos projetos
│   ├── nexus-dev.jpg     # Screenshot do Nexus Dev
│   ├── watchtower.jpg    # Screenshot Watchtower
│   └── ...               # Outras 8 imagens
│
└── favicon.ico           # (opcional, pode estar em /app)

Como usar:

// No componente
<Image src="/projects/nexus-dev.jpg" alt="..." />

Convenções:

  • ✅ Usar formato WebP ou JPEG otimizado
  • ✅ Tamanho recomendado: 1200x630px
  • ✅ Peso máximo: 200KB por imagem

📄 Arquivos de Configuração

package.json - Dependências e Scripts

{
  "scripts": {
    "dev": "next dev",           // Desenvolvimento
    "build": "next build",       // Build produção
    "start": "next start",       // Servidor produção
    "lint": "next lint"          // Verificar código
  },
  "dependencies": { /* 4 pacotes */ },
  "devDependencies": { /* 9 pacotes */ }
}

tsconfig.json - TypeScript

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]  // Permite import '@/components/...'
    }
  }
}

tailwind.config.ts - Tailwind CSS

{
  content: [/* arquivos a processar */],
  theme: {
    extend: {
      colors: {
        // Cores personalizadas rosa/amarelo
      },
      animation: {
        // Animações customizadas
      }
    }
  }
}

next.config.ts - Next.js

const nextConfig: NextConfig = {
  // Configurações do Next.js
}

.eslintrc.json - ESLint

{
  "extends": "next/core-web-vitals"
}

🔄 Fluxo de Dados

┌─────────────┐
│ data/*.ts   │  Dados estruturados
└──────┬──────┘
       │ import
       ▼
┌─────────────┐
│ components/ │  Componentes React
└──────┬──────┘
       │ import
       ▼
┌─────────────┐
│ app/page.tsx│  Página principal
└─────────────┘

Exemplo concreto:

data/projects.ts → components/Projects.tsx → app/page.tsx → Usuário vê

📐 Convenções de Nomenclatura

Tipo Convenção Exemplo
Componentes React PascalCase Navbar.tsx
Arquivos de dados camelCase projects.ts
Estilos kebab-case globals.css
Variáveis camelCase currentProject
Constantes UPPER_SNAKE MAX_PROJECTS
Interfaces PascalCase Project, Certificate

🚫 Arquivos a NÃO Versionar (.gitignore)

node_modules/       # Dependências (reinstalar com npm install)
.next/              # Build do Next.js (regerado a cada build)
*.log               # Logs
.env.local          # Variáveis de ambiente locais
.DS_Store           # macOS

📊 Tamanhos Aproximados

Item Tamanho
node_modules/ ~500 MB
.next/ (build) ~50 MB
public/ (imagens) ~2-5 MB
Código-fonte ~500 KB

📚 Próximos Passos

Estrutura atualizada em: Janeiro 2026

Clone this wiki locally