portfolio

header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:34px;
}
.brand{display:flex;gap:16px;align-items:center}
.logo{
  width:64px;height:64px;border-radius:12px;background:var(--glass);display:grid;place-items:center;
  box-shadow: 0 6px 20px rgba(2,6,23,0.6), inset 0 -6px 16px rgba(255,255,255,0.02);
  font-weight:800;font-size:20px;color:#fff
}
.name{line-height:1}
.name h1{margin:0;font-size:20px}
.name p{margin:0;color:var(--muted);font-size:13px}

nav{display:flex;gap:12px}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:10px 14px;border-radius:10px;color:var(--muted);font-weight:600;cursor:pointer}
.btn:hover{border-color:rgba(255,255,255,0.14);color:#fff}

.hero{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:center;margin-bottom:40px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:var(--radius);padding:24px;box-shadow: 0 8px 30px rgba(2,6,23,0.6);}

.about h2{margin:0 0 8px 0;font-size:22px}
.about p{color:var(--muted);margin:0 0 14px 0}

.skills{display:flex;flex-wrap:wrap;gap:10px}
.pill{background:rgba(255,255,255,0.03);padding:8px 10px;border-radius:999px;font-weight:600;font-size:13px;color:var(--muted)}

.profile-card{padding:20px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.avatar-placeholder{width:120px;height:120px;border-radius:16px;background:linear-gradient(180deg,#0f1725, #0b1220);display:grid;place-items:center;font-size:36px;font-weight:700;color:#fff}
.contact{display:flex;flex-direction:column;gap:8px;width:100%}
.contact a{display:block;text-decoration:none;padding:10px;border-radius:10px;background:rgba(255,255,255,0.02);color:var(--muted);font-weight:600}
.contact a:hover{color:#fff}

/* Projects */
.section-title{display:flex;justify-content:space-between;align-items:center;margin:8px 0 14px 0}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.project{background:var(--card);padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column;gap:12px}
.project .meta{display:flex;gap:10px;align-items:center}
.thumb{width:56px;height:46px;border-radius:8px;background:linear-gradient(90deg,#111827,#0b1220);display:grid;place-items:center;color:var(--muted);font-weight:700}
.project h3{margin:0;font-size:16px}
.project p{margin:0;color:var(--muted);font-size:13px}
.project .actions{margin-top:auto;display:flex;gap:8px}
.link{padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--muted);text-decoration:none;font-weight:700}
.link:hover{color:#fff}

footer{margin-top:36px;text-align:center;color:var(--muted);font-size:13px}

/* Responsive */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  body{padding:18px}
  .projects-grid{grid-template-columns:1fr}
  header{flex-direction:column;align-items:flex-start;gap:12px}
  .brand{width:100%;justify-content:space-between}
}

/* small animations */
.fade-up{opacity:0;transform:translateY(8px);animation:fadeUp .6s ease forwards}
.stagger-1{animation-delay:0.05s}
.stagger-2{animation-delay:0.12s}
.stagger-3{animation-delay:0.18s}
@keyframes fadeUp{to{opacity:1;transform:none}}

<main>
  <section class="hero">
    <div class="card about fade-up stagger-1">
      <h2>Olá, eu sou o André 👋</h2>
      <p>Sou estudante do ensino médio, trabalho na área de logística e estou aprendendo programação — focando em Python e desenvolvimento web. Gosto de construir projetos práticos: jogos simples, sites e automações.</p>

      <div style="margin-top:16px">
        <h4 style="margin:0 0 10px 0">Habilidades</h4>
        <div class="skills">
          <div class="pill">HTML</div>
          <div class="pill">CSS</div>
          <div class="pill">JavaScript</div>
          <div class="pill">Python (básico)</div>
          <div class="pill">Git</div>
        </div>
      </div>
    </div>

    <aside class="card profile-card fade-up stagger-2">
      <div class="avatar-placeholder">AL</div>
      <div style="font-weight:700">André Leal da Silva</div>
      <div style="color:var(--muted);font-size:13px">Diadema, São Paulo • 2º ano EM</div>

      <div class="contact">
        <a href="#contact">Enviar mensagem</a>
        <a href="#projects">Ver projetos</a>
      </div>
    </aside>
  </section>

  <section id="projects" style="margin-top:18px">
    <div class="section-title">
      <h3 style="margin:0">Projetos</h3>
      <div style="color:var(--muted);font-size:13px">Clique em "Abrir" para ver (exemplos)</div>
    </div>

    <div class="projects-grid">
      <article class="project fade-up stagger-1">
        <div class="meta">
          <div class="thumb">PY</div>
          <div>
            <h3>Jogo em Python: Herói vs Monstros</h3>
            <p>Protótipo em Pygame — demo e código no repositório.</p>
          </div>
        </div>
        <div class="actions">
          <a class="link" href="https://example.com/jogo-heroimonstros" target="_blank" rel="noopener">Abrir (demo)</a>
          <a class="link" href="https://github.com/andre-leal/jogo-heroimonstros" target="_blank" rel="noopener">Ver código (GitHub)</a>
        </div>
      </article>

      <article class="project fade-up stagger-2">
        <div class="meta">
          <div class="thumb">WEB</div>
          <div>
            <h3>Site de Eletrônicos (mock)</h3>
            <p>Landing page com catálogo — versão hospedada e repositório disponíveis.</p>
          </div>
        </div>
        <div class="actions">
          <a class="link" href="https://example.com/site-eletronicos" target="_blank" rel="noopener">Abrir (demo)</a>
          <a class="link" href="https://github.com/andre-leal/site-eletronicos" target="_blank" rel="noopener">Ver código (GitHub)</a>
        </div>
      </article>

      <article class="project fade-up stagger-3">
        <div class="meta">
          <div class="thumb">AUT</div>
          <div>
            <h3>Automação Mercado Livre (protótipo)</h3>
            <p>Scripts e planilhas — documentação e repositório com exemplos.</p>
          </div>
        </div>
        <div class="actions">
          <a class="link" href="https://example.com/automacao-mercadolivre" target="_blank" rel="noopener">Abrir (doc)</a>
          <a class="link" href="https://github.com/andre-leal/automacao-ml" target="_blank" rel="noopener">Ver código (GitHub)</a>
        </div>
      </article>

    </div>
  </section>

  <section id="contact" style="margin-top:28px">
    <div class="card fade-up stagger-2">
      <div class="section-title">
        <h3 style="margin:0">Contato</h3>
        <div style="color:var(--muted);font-size:13px">Vamos conversar — disponível para projetos pequenos e freelas.</div>
      </div>

      <form onsubmit="event.preventDefault(); sendMessage();" style="display:flex;flex-direction:column;gap:12px;margin-top:12px">
        <input id="name" placeholder="Seu nome" style="padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff" required>
        <input id="email" placeholder="seu@email.com" style="padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff" required>
        <textarea id="message" placeholder="Mensagem" rows="4" style="padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff" required></textarea>
        <div style="display:flex;gap:10px">
          <button class="btn" type="submit">Enviar</button>
          <button class="btn" type="button" onclick="clearForm()">Limpar</button>
        </div>
        <div id="status" style="color:var(--muted);font-size:13px"></div>
      </form>
    </div>
  </section>

</main>

<footer>
  © <span id="year"></span> André Leal — Portfólio • Feito com HTML, CSS e JavaScript
</footer>