Visualização do Código Fonte

Código Fonte do Currículo

Este bloco contém a estrutura completa em HTML/CSS para consulta e análise.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Currículo | {{NOME_COMPLETO}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
:root {
  --azul-escuro: #0a2540;
  --azul-medio: #1e40af;
  --azul-claro: #e6edff;
  --cinza: #475569;
  --bg: #f8fafc;
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: #111827;
}

.container {
  max-width: 900px;
  margin: 40px auto;
  background: #fff;
  padding: 40px;
}

h1 {
  margin: 0;
  color: var(--azul-escuro);
}

.subtitle {
  color: var(--cinza);
  margin: 6px 0 16px;
}

.contatos {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.contato-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--azul-claro);
  border: 1px solid var(--azul-medio);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--azul-escuro);
  text-decoration: none;
}

section {
  margin-top: 34px;
}

h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--azul-claro);
  color: var(--azul-escuro);
  padding: 8px 12px;
  border-left: 6px solid var(--azul-medio);
  margin-bottom: 18px;
}

.item {
  margin-bottom: 32px;
}

.periodo {
  font-size: 14px;
  color: var(--cinza);
  margin-bottom: 6px;
}

ul {
  margin: 8px 0 10px 18px;
}

.tags span {
  display: inline-block;
  background: #dbeafe;
  color: #1e3a8a;
  padding: 4px 8px;
  margin: 4px 6px 0 0;
  border-radius: 12px;
  font-size: 13px;
}

footer {
  text-align: center;
  font-size: 13px;
  color: var(--cinza);
  margin-bottom: 30px;
}

.print-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--azul-medio);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 18px;
  font-size: 14px;
  cursor: pointer;
}

@media print {
  .print-btn {
    display: none;
  }
}
</style>
</head>

<body>

<button class="print-btn" onclick="window.print()">
  <i class="fa-solid fa-file-pdf"></i> Exportar PDF
</button>

<div class="container">

<h1>{{NOME_COMPLETO}}</h1>
<p class="subtitle">{{HEADLINE_PROFISSIONAL}}</p>

<div class="contatos">
  <a class="contato-btn" href="mailto:{{EMAIL}}">
    <i class="fa-solid fa-envelope"></i> {{EMAIL}}
  </a>
  <a class="contato-btn" href="https://wa.me/{{WHATSAPP_LINK}}" target="_blank">
    <i class="fa-brands fa-whatsapp"></i> {{TELEFONE}}
  </a>
  <a class="contato-btn" href="{{LINKEDIN_URL}}" target="_blank">
    <i class="fa-brands fa-linkedin"></i> {{LINKEDIN_TEXTO}}
  </a>
</div>

<section id="perfil">
<h2><i class="fa-solid fa-user"></i> Perfil Profissional</h2>
<p>
{{PERFIL_PROFISSIONAL}}
</p>
</section>

<section id="experiencia">
<h2><i class="fa-solid fa-briefcase"></i> Experiência Profissional</h2>

<!-- INÍCIO BLOCO EXPERIÊNCIA (REPETÍVEL) -->
<div class="item">
  <h3>{{CARGO}} – {{EMPRESA}}</h3>
  <div class="periodo">{{PERIODO}}</div>
  <ul>
    <li>{{ATIVIDADE_1}}</li>
    <li>{{ATIVIDADE_2}}</li>
    <li>{{ATIVIDADE_3}}</li>
    <li>{{ATIVIDADE_4}}</li>
  </ul>
  <div class="tags">
    <span>{{TAG_1}}</span>
    <span>{{TAG_2}}</span>
    <span>{{TAG_3}}</span>
    <span>{{TAG_4}}</span>
  </div>
</div>
<!-- FIM BLOCO EXPERIÊNCIA -->

</section>

<section id="formacao">
<h2><i class="fa-solid fa-graduation-cap"></i> Formação Acadêmica</h2>
<p>{{FORMACAO}}</p>
</section>

<section id="competencias">
<h2><i class="fa-solid fa-gears"></i> Competências Consolidadas</h2>
<div class="tags">
  <span>{{COMPETENCIA_1}}</span>
  <span>{{COMPETENCIA_2}}</span>
  <span>{{COMPETENCIA_3}}</span>
  <span>{{COMPETENCIA_4}}</span>
  <span>{{COMPETENCIA_5}}</span>
</div>
</section>

</div>

<footer>
Currículo online • Atualizado em {{DATA_ATUALIZACAO}}
</footer>

</body>
</html>