/* ———- Escopo: só estiliza dentro de .leo-site ———- */ .leo-site{ –bg:#0b0f14; –card:#111827; –text:#e5e7eb; –muted:#9ca3af; –accent:#60a5fa; –shadow:0 10px 30px rgba(0,0,0,.35); font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,”Helvetica Neue”,Arial; color:var(–text); background:radial-gradient(1200px 600px at 10% 0%, #0ea5e9 0%, transparent 35%), radial-gradient(800px 500px at 100% 10%, #8b5cf6 0%, transparent 40%), var(–bg); border-radius:16px; overflow:hidden } .leo-site[data-theme=”light”]{ –bg:#f7fafc; –card:#ffffff; –text:#0b0f14; –muted:#475569; –accent:#2563eb; –shadow:0 8px 24px rgba(2,6,23,.12); background:var(–bg) } .leo-wrap{max-width:1100px;margin:0 auto;padding:24px} .leo-header{position:sticky;top:0;background:linear-gradient(to bottom, rgba(0,0,0,.35), transparent);backdrop-filter:saturate(140%) blur(8px);padding:12px 16px;display:flex;align-items:center;justify-content:space-between} .leo-brand{display:flex;gap:10px;align-items:center} .leo-dot{width:10px;height:10px;border-radius:50%;background:conic-gradient(#60a5fa,#a78bfa,#60a5fa)} .leo-title{font-weight:800;letter-spacing:.2px;background:linear-gradient(90deg,#93c5fd,#c4b5fd,#fbcfe8);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap} .leo-actions{display:flex;gap:10px} .leo-btn{border:0;border-radius:999px;padding:9px 12px;cursor:pointer;background:var(–accent);color:#fff;font-weight:600;box-shadow:var(–shadow)} .leo-btn.ghost{background:transparent;color:var(–text);border:1px solid rgba(255,255,255,.25)} .leo-btn.ghost:hover{border-color:var(–accent);color:var(–accent)} .leo-hero{display:grid;place-items:center;text-align:center;padding:50px 16px 20px} .leo-hero h1{font-size:clamp(28px,6vw,56px);margin:0 0 6px} .leo-hero p{margin:0;color:var(–muted)} .leo-badge{display:inline-grid;grid-auto-flow:column;gap:8px;align-items:center;padding:6px 12px;margin-top:14px;border:1px dashed rgba(255,255,255,.25);border-radius:999px;font-size:14px} .leo-grid{–cols:3;display:grid;gap:16px;padding:16px;grid-template-columns:repeat(var(–cols),minmax(0,1fr))} @media (max-width:900px){.leo-grid{–cols:2}} @media (max-width:640px){.leo-grid{–cols:1}} .leo-card{position:relative;background:var(–card);border:1px solid rgba(255,255,255,.08);padding:20px;border-radius:18px;box-shadow:var(–shadow);transition:transform .15s ease,border-color .2s ease,box-shadow .2s ease;overflow:hidden} .leo-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.35);border-color:rgba(96,165,250,.35)} .leo-card h3{margin:6px 0 8px;font-size:20px} .leo-card p{margin:0;color:var(–muted)} .leo-tag{font-size:12px;padding:4px 8px;border-radius:999px;background:rgba(96,165,250,.15);color:#93c5fd;display:inline-block} .leo-parallax{min-height:220px;display:grid;place-items:center;text-align:center;background-image:linear-gradient(to bottom, rgba(2,6,23,.6), rgba(2,6,23,.6)),url(‘https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1600&auto=format&fit=crop’);background-size:cover;background-position:center;background-attachment:fixed;border-block:1px solid rgba(255,255,255,.08)} .leo-footer{padding:18px;text-align:center;color:var(–muted)} .leo-copy{cursor:pointer;border-bottom:1px dotted currentColor} .leo-tilt{transform-style:preserve-3d} /* chuva de emojis */ .leo-rain{position:absolute;inset:0;pointer-events:none;overflow:hidden} .leo-rain span{position:absolute;top:-10%;left:var(–x);font-size:22px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));animation:leo-fall 5.5s linear infinite;animation-delay:var(–d)} @keyframes leo-fall{to{transform:translateY(120vh) rotate(360deg)}} details{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);padding:14px 16px;border-radius:14px} details summary{cursor:pointer;user-select:none;font-weight:700} details[open]{border-color:rgba(96,165,250,.5)}
Leonardo — Dev .NET
Alternar tema Sobre

Oi, eu sou o Leonardo 👋

Dev .NET que curte protótipos rápidos, DX feliz e microinterações.

⚡ Dica: clique em “Alternar tema”
truque

Chuva de emojis (CSS)

Passe o mouse e veja cair (sem JS pra animar 😉)

skills

Stack

.NET / C# / ASP.NET Core / SQL / Azure

contato

Fale comigo

E-mail: leonardo.p.garcia@outlook.com

Seção Parallax

Um respiro visual simples (CSS-only).

spoiler

<details> com easter-egg

Clique para revelar

Sou fã de microinterações acessíveis

atalho

Tema com persistência

O botão de tema grava sua preferência no localStorage.

demo

Cards com tilt

Inclinam levemente conforme o mouse (JS mínimo).

© Leonardo — mini site em um único bloco HTML
Sobre mim
Dev .NET focado em UX simples, performance e boas práticas.
Fechar
(function(){ const root = document.currentScript.closest(‘.leo-site’); const storeKey = ‘leo-theme’; // Restaura tema const saved = localStorage.getItem(storeKey); if(saved) root.setAttribute(‘data-theme’, saved); // Toggle tema root.querySelector(‘[data-leo-theme]’).addEventListener(‘click’, ()=>{ const cur = root.getAttribute(‘data-theme’) === ‘light’ ? ‘dark’ : ‘light’; root.setAttribute(‘data-theme’, cur); localStorage.setItem(storeKey, cur); }); // Tilt leve root.querySelectorAll(‘.leo-tilt’).forEach(card=>{ card.addEventListener(‘mousemove’, e=>{ const r = card.getBoundingClientRect(); const x = (e.clientX – r.left)/r.width – .5; const y = (e.clientY – r.top)/r.height – .5; card.style.transform = `rotateX(${(-y*6).toFixed(2)}deg) rotateY(${(x*8).toFixed(2)}deg) translateZ(0)`; }); card.addEventListener(‘mouseleave’, ()=> card.style.transform = ‘translateZ(0)’); }); // Copiar e-mail const copyEl = root.querySelector(‘[data-leo-copy]’); copyEl.addEventListener(‘click’, async ()=>{ try{ await navigator.clipboard.writeText(copyEl.textContent.trim()); const txt = copyEl.textContent; copyEl.textContent = ‘Copiado! ‘; setTimeout(()=> copyEl.textContent = txt, 1200); }catch{} }); // Ano root.querySelector(‘[data-leo-year]’).textContent = new Date().getFullYear(); // Dialog const dlg = root.querySelector(‘[data-leo-dialog]’); root.querySelector(‘[data-leo-about]’).addEventListener(‘click’, ()=> dlg.showModal()); })();