Spaces:

JairoDanielMT
/

Projeto.Profissional.no.Brasil

Running

App Files Files Community

JairoDanielMT commited on Jan 20

Commit

1009cbd

verified ·

1 Parent(s): b33048e

Update index.html

Browse files

Files changed (1) hide show

index.html +439 -18

index.html CHANGED Viewed

@@ -1,19 +1,440 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!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>
+<!-- SLIDE 1 -->
+<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>
+<!-- SLIDE 2 -->
+<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>
+<!-- SLIDE 3 -->
+<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>
+<!-- SLIDE 4 -->
+<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>
+<!-- SLIDE 5 -->
+<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>
+<!-- SLIDE 6 -->
+<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>
+<!-- SLIDE 7 -->
+<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>
+<!-- SLIDE 8 -->
+<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>
+<!-- SLIDE 9 -->
+<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>
+<!-- SLIDE 10 -->
+<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>