Construa e publique
seu primeiro site

/* ── Variáveis globais ── */
:root {
  --cor-fundo:    #0f172a;
  --cor-painel:   #1e293b;
  --cor-destaque: #38bdf8;
  --cor-texto:    #e2e8f0;
  --cor-muted:    #64748b;
  --raio:         12px;
  --sombra:       0 4px 24px rgba(0,0,0,0.3);
}

/* ── Reset e base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family:       'Segoe UI', system-ui, sans-serif;
  background-color: var(--cor-fundo);
  color:             var(--cor-texto);
  line-height:       1.7;
}

/* ── Header fixo ── */
header {
  position:   sticky;
  top:        0;
  background: var(--cor-painel);
  padding:    16px 40px;
  display:    flex;
  justify-content: space-between;
  align-items: center;
  z-index:    100;
  box-shadow: var(--sombra);
}

/* ── Grid de projetos ── */
.grid-projetos {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:                   20px;
}

/* ── Responsivo ── */
@media (max-width: 640px) {
  header    { padding: 14px 20px; }
  .hero h2 { font-size: 1.8rem; }
  nav       { display: none; }
  nav.aberto{ display: flex; flex-direction: column; }
}

// ── Menu hambúrguer para mobile ──
const btn = document.getElementById('menu-btn');
const nav = document.getElementById('menu');

btn.addEventListener('click', () => {
  nav.classList.toggle('aberto');
  btn.textContent = nav.classList.contains('aberto') ? '✕' : '☰';
});

// ── Animação ao rolar (Intersection Observer) ──
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visivel');
    }
  });
}, { threshold: 0.15 });

document.querySelectorAll('.card').forEach(el => observer.observe(el));

// ── Modo escuro / claro ──
const temaBtn = document.getElementById('tema-btn');
temaBtn.addEventListener('click', () => {
  document.body.classList.toggle('claro');
  temaBtn.textContent = document.body.classList.contains('claro') ? '🌙' : '☀️';
  localStorage.setItem('tema', document.body.classList.contains('claro') ? 'claro' : 'escuro');
});

// ── Validação do formulário de contato ──
const form = document.getElementById('contato-form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const email = form.querySelector('[name="email"]').value;
  if (!email.includes('@')) {
    alert('E-mail inválido!');
    return;
  }
  alert('Mensagem enviada! ✅');
  form.reset();
});

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "liveServer.settings.donotShowInfoMsg": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

# 1. Navegar até onde quer criar o projeto
cd ~/Documentos

# 2. Criar a pasta do projeto
mkdir meu-portfolio

# 3. Entrar na pasta
cd meu-portfolio

# 4. Criar os arquivos de uma vez
touch index.html style.css script.js

# 5. Criar pasta para imagens
mkdir imagens

# 6. Confirmar que tudo foi criado
ls -la

# 7. Abrir no VSCode direto do terminal
code .

# Configurar nome e e-mail (apenas uma vez)
git config --global user.name  "Seu Nome"
git config --global user.email "seuemail@exemplo.com"

# Inicializar repositório Git na pasta
git init

# Ver o status dos arquivos
git status

# Adicionar todos os arquivos ao "stage"
git add .

# Criar o primeiro commit
git commit -m "feat: criar estrutura inicial do portfólio"

# ── Fluxo do dia a dia ──
# (depois de fazer alterações no código)
git add .
git commit -m "feat: adicionar seção de projetos"
git commit -m "fix: corrigir layout mobile"
git commit -m "style: ajustar cores do header"

# Conectar repositório local ao GitHub
git remote add origin https://github.com/SEU-USUARIO/meu-portfolio.git

# Renomear branch para "main" (padrão atual)
git branch -M main

# Enviar código ao GitHub pela primeira vez
git push -u origin main

# Nas próximas vezes, apenas:
git push

# 1. Editar o código no VSCode
# 2. Salvar os arquivos (Ctrl+S)
# 3. No terminal:

git add .
git commit -m "feat: atualizar seção de projetos"
git push

# ✅ Pronto! Em ~2 minutos o site estará atualizado
# Acesse: seu-usuario.github.io/meu-portfolio

-- Tabela de projetos
CREATE TABLE projetos (
  id          INTEGER PRIMARY KEY AUTOINCREMENT,
  titulo      TEXT NOT NULL,
  descricao   TEXT,
  url_demo    TEXT,
  url_github  TEXT,
  tecnologias TEXT,             -- "HTML,CSS,JS"
  destaque    INTEGER DEFAULT 0,  -- 0 ou 1
  criado_em   TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Tabela de mensagens do formulário
CREATE TABLE contatos (
  id        INTEGER PRIMARY KEY AUTOINCREMENT,
  nome      TEXT NOT NULL,
  email     TEXT NOT NULL,
  mensagem  TEXT NOT NULL,
  lido      INTEGER DEFAULT 0,
  criado_em TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Inserir projetos de exemplo
INSERT INTO projetos (titulo, descricao, tecnologias, destaque)
VALUES
  ('Portfólio Pessoal', 'Este mesmo site!',             'HTML,CSS,JS', 1),
  ('App de Tarefas',    'Lista com localStorage',       'HTML,CSS,JS', 1),
  ('Dashboard SQL',     'Painel com Python + SQLite',   'Python,SQL',  0);

-- Consultar projetos em destaque
SELECT titulo, descricao, tecnologias
FROM   projetos
WHERE  destaque = 1
ORDER BY criado_em DESC;