| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Projeto Profissional no Brasil</title> |
|
|
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> |
|
|
| <style> |
| :root{ |
| --primary:#16A34A; |
| --accent:#2563EB; |
| --dark:#0F172A; |
| --light:#F8FAFC; |
| --text-main:#334155; |
| } |
| *{box-sizing:border-box;margin:0;padding:0} |
| body{ |
| background:#111; |
| font-family:'Inter',sans-serif; |
| height:100vh; |
| display:flex; |
| align-items:center; |
| justify-content:center; |
| color:var(--text-main); |
| } |
| .presentation-stage{ |
| width:min(95vw,1280px); |
| aspect-ratio:16/9; |
| background:var(--light); |
| position:relative; |
| border-radius:8px; |
| overflow:hidden; |
| box-shadow:0 0 50px rgba(0,0,0,.7) |
| } |
| .slide{ |
| position:absolute; |
| inset:0; |
| padding:3rem 4rem; |
| opacity:0; |
| transform:translateX(20px); |
| transition:.4s; |
| pointer-events:none; |
| background:#fff; |
| display:flex; |
| flex-direction:column |
| } |
| .slide.active{ |
| opacity:1; |
| transform:translateX(0); |
| pointer-events:all; |
| z-index:10 |
| } |
| .header{ |
| display:flex; |
| justify-content:space-between; |
| align-items:flex-end; |
| border-bottom:2px solid #E2E8F0; |
| padding-bottom:10px; |
| margin-bottom:1.5rem |
| } |
| .header h2{ |
| text-transform:uppercase; |
| font-weight:800; |
| color:var(--dark) |
| } |
| .page-num{ |
| font-family:'JetBrains Mono',monospace; |
| color:var(--primary); |
| font-weight:bold |
| } |
| .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem;height:100%} |
| .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;height:100%} |
| .card{ |
| background:#fff; |
| border:1px solid #E2E8F0; |
| border-radius:8px; |
| padding:1.2rem; |
| box-shadow:0 4px 6px -1px rgba(0,0,0,.1); |
| display:flex; |
| flex-direction:column |
| } |
| .card h3{ |
| color:var(--primary); |
| font-size:1rem; |
| margin-bottom:.8rem; |
| text-transform:uppercase |
| } |
| .card ul{padding-left:1.2rem} |
| .card li{margin-bottom:.5rem;font-size:.95rem;line-height:1.4} |
| .tech-stack{ |
| background:#1E293B; |
| color:#fff; |
| border-radius:8px; |
| padding:1.5rem; |
| display:flex; |
| flex-direction:column; |
| gap:12px; |
| justify-content:center |
| } |
| .layer{ |
| border:1px dashed #475569; |
| padding:10px; |
| border-radius:4px; |
| text-align:center; |
| font-family:'JetBrains Mono',monospace |
| } |
| .cover-container{ |
| height:100%; |
| display:flex; |
| flex-direction:column; |
| justify-content:center; |
| border-left:10px solid var(--primary); |
| padding-left:3rem |
| } |
| .cover-year{ |
| font-family:'JetBrains Mono',monospace; |
| font-size:1.5rem; |
| font-weight:bold; |
| margin-bottom:1rem |
| } |
| .controls{ |
| position:absolute; |
| bottom:20px; |
| right:20px; |
| display:flex; |
| gap:10px; |
| z-index:100 |
| } |
| .btn-nav{ |
| width:40px; |
| height:40px; |
| border-radius:50%; |
| border:none; |
| cursor:pointer; |
| background:var(--dark); |
| color:#fff |
| } |
| .btn-nav:hover{background:var(--primary)} |
| .progress{ |
| position:absolute; |
| bottom:0; |
| left:0; |
| height:4px; |
| background:var(--primary); |
| width:0%; |
| transition:.3s |
| } |
| .small-text{font-size:.85rem;color:#64748B} |
| </style> |
| </head> |
|
|
| <body> |
| <div class="presentation-stage"> |
| <div class="progress"></div> |
|
|
| |
| <div class="slide active"> |
| <div class="cover-container"> |
| <div class="cover-year">2026</div> |
| <h1 style="font-size:3rem;font-weight:900;color:var(--dark);line-height:1.1"> |
| Brasil como Projeto<br> |
| <span style="color:var(--primary)">Acadêmico e Profissional</span> |
| </h1> |
| <p style="font-size:1.4rem;color:#64748B;margin-top:1rem"> |
| Planejamento, Estratégia e Desenvolvimento em Engenharia e Tecnologia |
| </p> |
| </div> |
| </div> |
|
|
| |
| <div class="slide"> |
| <div class="header"> |
| <h2>01 · Visão Geral do Projeto</h2> |
| <span class="page-num">02</span> |
| </div> |
| <div class="grid-2"> |
| <div class="card"> |
| <h3><i class="fa-solid fa-compass"></i> Abordagem Estratégica</h3> |
| <ul> |
| <li>Decisão baseada em objetivos claros.</li> |
| <li>Foco em crescimento acadêmico e profissional.</li> |
| <li>Ausência de improvisação ou idealização.</li> |
| </ul> |
| </div> |
| <div class="card"> |
| <h3><i class="fa-solid fa-flag"></i> O Brasil no Contexto</h3> |
| <ul> |
| <li>Economia emergente relevante.</li> |
| <li>Ecossistema tecnológico em expansão.</li> |
| <li>Oportunidades em engenharia e inovação.</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide"> |
| <div class="header"> |
| <h2>02 · Motivação Principal</h2> |
| <span class="page-num">03</span> |
| </div> |
| <div class="grid-3"> |
| <div class="card"> |
| <h3>Formação</h3> |
| <ul> |
| <li>Engenharia</li> |
| <li>Tecnologia</li> |
| <li>Base técnica sólida</li> |
| </ul> |
| </div> |
| <div class="card"> |
| <h3>Objetivo</h3> |
| <ul> |
| <li>Crescimento profissional real</li> |
| <li>Experiência internacional</li> |
| <li>Valor agregado ao currículo</li> |
| </ul> |
| </div> |
| <div class="card"> |
| <h3>Critério</h3> |
| <ul> |
| <li>Oportunidade bem definida</li> |
| <li>Coerência com carreira</li> |
| <li>Impacto de longo prazo</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide"> |
| <div class="header"> |
| <h2>03 · Requisitos de Viabilidade</h2> |
| <span class="page-num">04</span> |
| </div> |
| <div class="grid-2"> |
| <div class="card"> |
| <h3>Acadêmicos</h3> |
| <ul> |
| <li>Programa estruturado</li> |
| <li>Instituição reconhecida</li> |
| <li>Aplicação prática do conhecimento</li> |
| </ul> |
| </div> |
| <div class="card"> |
| <h3>Profissionais</h3> |
| <ul> |
| <li>Projeto técnico relevante</li> |
| <li>Equipe multidisciplinar</li> |
| <li>Potencial de progressão</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide"> |
| <div class="header"> |
| <h2>04 · Desafios Culturais</h2> |
| <span class="page-num">05</span> |
| </div> |
| <div class="grid-2"> |
| <div class="card"> |
| <h3>Ambiente de Trabalho</h3> |
| <ul> |
| <li>Estilos de liderança distintos</li> |
| <li>Ritmo e dinâmica próprios</li> |
| <li>Processos decisórios diferentes</li> |
| </ul> |
| </div> |
| <div class="card"> |
| <h3>Integração</h3> |
| <ul> |
| <li>Comunicação interpessoal</li> |
| <li>Construção de confiança</li> |
| <li>Adaptação gradual</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide"> |
| <div class="header"> |
| <h2>05 · Desafio Linguístico</h2> |
| <span class="page-num">06</span> |
| </div> |
| <div class="grid-2"> |
| <div class="card"> |
| <h3>Português</h3> |
| <ul> |
| <li>Proximidade com o espanhol</li> |
| <li>Diferenças no uso cotidiano</li> |
| <li>Exigência de precisão técnica</li> |
| </ul> |
| </div> |
| <div class="tech-stack"> |
| <div class="layer"><strong>DIFERENCIAL</strong> Comunicação clara e eficaz</div> |
| <div class="layer"><strong>RESULTADO</strong> Integração acelerada</div> |
| <div class="layer"><strong>VALOR</strong> Destaque em ambientes técnicos</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide"> |
| <div class="header"> |
| <h2>06 · Benefícios Profissionais</h2> |
| <span class="page-num">07</span> |
| </div> |
| <div class="grid-3"> |
| <div class="card"> |
| <h3>Autonomia</h3> |
| <ul> |
| <li>Tomada de decisão</li> |
| <li>Responsabilidade</li> |
| </ul> |
| </div> |
| <div class="card"> |
| <h3>Visão Global</h3> |
| <ul> |
| <li>Contexto intercultural</li> |
| <li>Mercado internacional</li> |
| </ul> |
| </div> |
| <div class="card"> |
| <h3>Adaptabilidade</h3> |
| <ul> |
| <li>Contextos complexos</li> |
| <li>Resolução de problemas</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide"> |
| <div class="header"> |
| <h2>07 · Impacto Pessoal</h2> |
| <span class="page-num">08</span> |
| </div> |
| <div class="grid-2"> |
| <div class="card"> |
| <h3>Desenvolvimento</h3> |
| <ul> |
| <li>Maturidade profissional</li> |
| <li>Independência</li> |
| <li>Flexibilidade cultural</li> |
| </ul> |
| </div> |
| <div class="card"> |
| <h3>Competências</h3> |
| <ul> |
| <li>Comunicação intercultural</li> |
| <li>Gestão da mudança</li> |
| <li>Visão estratégica</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide"> |
| <div class="header"> |
| <h2>08 · Planejamento Racional</h2> |
| <span class="page-num">09</span> |
| </div> |
| <div class="grid-2"> |
| <div class="card"> |
| <h3>Antes da Mudança</h3> |
| <ul> |
| <li>Análise de oportunidades</li> |
| <li>Definição de metas</li> |
| <li>Preparação linguística</li> |
| </ul> |
| </div> |
| <div class="card"> |
| <h3>Durante o Projeto</h3> |
| <ul> |
| <li>Avaliação contínua</li> |
| <li>Networking estratégico</li> |
| <li>Ajustes de trajetória</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide"> |
| <div class="header"> |
| <h2>09 · Conclusão</h2> |
| <span class="page-num">10</span> |
| </div> |
| <div style="display:flex;justify-content:center;align-items:center;height:100%"> |
| <div class="card" style="max-width:800px;text-align:center;border-top:5px solid var(--primary)"> |
| <h3>Brasil como Projeto Possível</h3> |
| <p style="margin-top:1rem;font-size:1.05rem;line-height:1.6"> |
| O Brasil representa uma oportunidade concreta quando alinhado a planejamento, |
| metas profissionais claras e uma estratégia consistente de desenvolvimento em |
| engenharia e tecnologia. |
| </p> |
| <p class="small-text" style="margin-top:1.5rem"> |
| Planejamento · Estratégia · Crescimento Internacional |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="controls"> |
| <button class="btn-nav" onclick="moveSlide(-1)"><i class="fa-solid fa-chevron-left"></i></button> |
| <button class="btn-nav" onclick="moveSlide(1)"><i class="fa-solid fa-chevron-right"></i></button> |
| </div> |
| </div> |
|
|
| <script> |
| let currentSlide=0; |
| const slides=document.querySelectorAll('.slide'); |
| const progressBar=document.querySelector('.progress'); |
| function updateUI(){ |
| slides.forEach((s,i)=>{s.classList.toggle('active',i===currentSlide)}); |
| progressBar.style.width=((currentSlide+1)/slides.length)*100+'%'; |
| } |
| function moveSlide(d){ |
| const n=currentSlide+d; |
| if(n>=0&&n<slides.length){currentSlide=n;updateUI();} |
| } |
| document.addEventListener('keydown',e=>{ |
| if(e.key==='ArrowRight')moveSlide(1); |
| if(e.key==='ArrowLeft')moveSlide(-1); |
| }); |
| updateUI(); |
| </script> |
| </body> |
| </html> |
|
|
