Gerador de Currículos:
Descrição: Este Gerador de Currículos é uma aplicação web que permite aos usuários criar currículos personalizados, inserindo informações pessoais e profissionais, e gerar um PDF estilizado com essas informações. A aplicação inclui funcionalidades interativas, como pré-visualização de foto de perfil e validação de campos obrigatórios.
Funcionalidades principais:
1 - Formulário Interativo:
O usuário pode preencher diversas seções do currículo:
Informações Pessoais (campos obrigatórios): Nome, Profissão, Email, Telefone, CEP, Endereço, Cidade, Estado, Nacionalidade, Idade, Gênero, Relacionamento.
Experiência Profissional (opcional): Permite descrever a experiência de trabalho anterior.
Formação Acadêmica (opcional): Informações sobre a educação do usuário.
Idiomas (opcional): Idiomas que o usuário fala.
Cursos (opcional): Cursos ou formações adicionais.
Habilidades (opcional): Competências técnicas ou pessoais.
Projetos (opcional): Projetos que o usuário tenha realizado.
2 - Upload de Foto de Perfil:
O usuário pode fazer upload de uma foto de perfil, que é pré-visualizada em tempo real. A imagem é processada e convertida para um formato base64, garantindo a sua incorporação no currículo gerado e no PDF.
3 - Geração de Currículo:
Após preencher o formulário, o currículo é gerado dentro da página, permitindo ao usuário visualizar todas as informações inseridas com um layout bonito e organizado. O currículo exibe a foto de perfil do utilizador, seguida pelas Informações Pessoais e demais seções opcionais como Experiência Profissional, Formação Acadêmica, etc.
4 - Download em PDF:
Após gerar o currículo, o usuário pode clicar no botão "Baixar Currículo em PDF". O PDF gerado mantém o layout e os estilos do currículo visualizado na página, incluindo a foto de perfil e todas as informações inseridas. O botão de download está estilizado com uma cor vermelha elegante.
5 - Validação de Campos:
Apenas os campos das "Informações Pessoais" são obrigatórios, garantindo que o currículo contenha as informações essenciais. Seções adicionais, como experiência profissional e habilidades, são opcionais, dando flexibilidade ao usuário.
6 - Busca Automática de Endereço pelo CEP:
O campo CEP (código postal) permite que o usuário insira o seu CEP, e a aplicação faz uma busca automática do endereço, preenchendo automaticamente os campos de "Endereço", "Cidade" e "Estado", utilizando a API do ViaCEP.
Principais Benefícios:
1 - Interface Simples e Responsiva:
A aplicação é fácil de usar, adaptando-se bem tanto em dispositivos móveis quanto em desktops.
2 - Personalização Completa:
O usuário pode ajustar as informações do currículo conforme suas necessidades e exportá-lo em PDF com um layout elegante.
3 - Foto de Perfil:
A inclusão de uma foto de perfil personaliza ainda mais o currículo.
4 - Automatização:
O preenchimento automático do endereço através do CEP simplifica o processo de criação.
Este Gerador de Currículos combina facilidade de uso, flexibilidade e funcionalidades avançadas, permitindo ao utilizador criar e exportar um currículo profissional em poucos minutos.
Veja o Gerador de Currículos em funcionamento neste link. Gerador de Currículos.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerador de Currículos</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>Gerador de Currículos</h1>
<form id="resumeForm">
<h2>Foto de Perfil</h2>
<div class="profile-picture-container">
<div class="profile-picture" id="profilePicture"></div>
<label for="uploadPicture" class="upload-label">
<i class="fas fa-upload"></i> Upload Foto
</label>
<input type="file" id="uploadPicture" accept="image/*">
</div>
<h2>Informações Pessoais</h2>
<label for="name">Nome:</label>
<input type="text" id="name" placeholder="Ex: João da Silva" required>
<label for="profession">Profissão:</label>
<input type="text" id="profession" placeholder="Ex: Desenvolvedor Web" required>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Ex: joao@email.com" required>
<label for="phone">Telefone:</label>
<input type="tel" id="phone" placeholder="Ex: (11) 91234-5678" required>
<label for="cep">CEP:</label>
<input type="text" id="cep" placeholder="Ex: 12345-678" required>
<label for="address">Endereço:</label>
<input type="text" id="address" placeholder="Ex: Rua das Flores, 123" required>
<label for="city">Cidade:</label>
<input type="text" id="city" placeholder="Ex: São Paulo" required>
<label for="state">Estado:</label>
<input type="text" id="state" placeholder="Ex: SP" required>
<label for="nationality">Nacionalidade:</label>
<input type="text" id="nationality" placeholder="Ex: Brasileiro" required>
<label for="age">Idade:</label>
<input type="number" id="age" placeholder="Ex: 30" required>
<label for="gender">Gênero:</label>
<input type="text" id="gender" placeholder="Ex: Masculino" required>
<label for="relationship">Relacionamento:</label>
<input type="text" id="relationship" placeholder="Ex: Solteiro" required>
<h2>Experiência Profissional</h2>
<textarea id="experience" placeholder="Ex: Empresa XYZ - Desenvolvedor (2020 - Presente)"></textarea>
<h2>Formação Acadêmica</h2>
<textarea id="education" placeholder="Ex: Universidade ABC - Bacharel em Ciência da Computação (2015 - 2019)"></textarea>
<h2>Idiomas</h2>
<textarea id="languages" placeholder="Ex: Português, Inglês"></textarea>
<h2>Cursos</h2>
<textarea id="courses" placeholder="Ex: Curso de JavaScript - Plataforma XYZ"></textarea>
<h2>Habilidades</h2>
<textarea id="skills" placeholder="Ex: HTML, CSS, JavaScript"></textarea>
<h2>Projetos</h2>
<textarea id="projects" placeholder="Ex: Projeto de Portfólio - www.meuportfolio.com"></textarea>
<div class="button-container">
<button type="submit">Gerar Currículo</button>
<button id="downloadBtn" style="display: none;" type="button">Baixar Currículo em PDF</button>
</div>
</form>
<div id="resume" class="resume">
<h2>Currículo</h2>
<div id="resumeContent"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background-color: #f4f4f9;
color: #333;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #2a9d8f;
}
h2 {
color: #264653;
margin-bottom: 10px;
font-size: 24px;
font-weight: bold;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 5px;
font-weight: bold;
color: #264653;
}
input, textarea {
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
font-size: 16px;
}
textarea {
resize: vertical;
min-height: 100px;
}
.button-container {
display: flex;
justify-content: space-between;
}
button {
padding: 12px;
background-color: #2a9d8f;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
width: 48%;
}
button:hover {
background-color: #21867a;
}
#downloadBtn {
background-color: #e63946;
}
#downloadBtn:hover {
background-color: #d62839;
}
.profile-picture-container {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.profile-picture {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ccc;
background-size: cover;
background-position: center;
border: 2px solid #264653;
}
input[type="file"] {
display: none;
}
.upload-label {
display: inline-block;
padding: 10px 20px;
background-color: #2a9d8f;
color: white;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
text-align: center;
}
.upload-label i {
margin-right: 10px;
}
.upload-label:hover {
background-color: #21867a;
}
#resume {
margin-top: 40px;
padding: 20px;
background-color: #f1faee;
border: 1px solid #ccc;
border-radius: 5px;
}
#resume h2 {
color: #e76f51;
margin-bottom: 15px;
}
#resume p {
margin: 5px 0;
}
@media (max-width: 768px) {
.container {
padding: 15px;
}
input, textarea {
font-size: 14px;
}
button {
padding: 10px;
}
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
// Inicialmente esconde a div do currículo e o botão de download
document.getElementById('resume').style.display = 'none';
document.getElementById('downloadBtn').style.display = 'none';
let profilePictureBase64 = ""; // Variável para armazenar a imagem em base64
// Função para ajustar a orientação da imagem usando um canvas
function fixImageOrientation(file, callback) {
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Define o tamanho do canvas
canvas.width = img.width;
canvas.height = img.height;
// Desenha a imagem no canvas (remove metadados EXIF)
ctx.drawImage(img, 0, 0);
// Converte a imagem para base64
const base64Image = canvas.toDataURL('image/jpeg');
callback(base64Image); // Chama o callback com a imagem processada
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
// Pré-visualizar a foto de perfil em tempo real
document.getElementById('uploadPicture').addEventListener('change', function(event) {
const file = event.target.files[0]; // Obtém o ficheiro selecionado
if (file) {
fixImageOrientation(file, function(fixedBase64Image) {
// Mostra a imagem corrigida no preview e armazena o base64
document.getElementById('profilePicture').style.backgroundImage = `url(${fixedBase64Image})`;
profilePictureBase64 = fixedBase64Image; // Armazena a imagem corrigida
});
}
});
document.getElementById('resumeForm').addEventListener('submit', function(event) {
event.preventDefault();
// Coleta dos dados do formulário
const name = document.getElementById('name').value;
const profession = document.getElementById('profession').value;
const email = document.getElementById('email').value;
const phone = document.getElementById('phone').value;
const cep = document.getElementById('cep').value;
const address = document.getElementById('address').value;
const city = document.getElementById('city').value;
const state = document.getElementById('state').value;
const nationality = document.getElementById('nationality').value;
const age = document.getElementById('age').value;
const gender = document.getElementById('gender').value;
const relationship = document.getElementById('relationship').value;
const experience = document.getElementById('experience').value;
const education = document.getElementById('education').value;
const languages = document.getElementById('languages').value;
const courses = document.getElementById('courses').value;
const skills = document.getElementById('skills').value;
const projects = document.getElementById('projects').value;
// Gera o conteúdo do currículo
const resumeContent = `
Informações Pessoais
Nome: ${name}
Profissão: ${profession}
Email: ${email}
Telefone: ${phone}
CEP: ${cep}
Endereço: ${address}
Cidade: ${city}
Estado: ${state}
Nacionalidade: ${nationality}
Idade: ${age}
Gênero: ${gender}
Relacionamento: ${relationship}
Experiência Profissional
${experience}
Formação Acadêmica
${education}
Idiomas
${languages}
Cursos
${courses}
Habilidades
${skills}
Projetos
${projects}
`;
document.getElementById('resumeContent').innerHTML = resumeContent;
document.getElementById('resume').style.display = 'block'; // Mostra a div do currículo
document.getElementById('downloadBtn').style.display = 'block'; // Mostra o botão de download
});
// Função para buscar endereço pelo CEP
document.getElementById('cep').addEventListener('blur', function() {
const cep = this.value.replace(/\D/g, ''); // Remove caracteres não numéricos
if (cep.length === 8) {
fetch(`https://viacep.com.br/ws/${cep}/json/`)
.then(response => response.json())
.then(data => {
if (!data.erro) {
document.getElementById('address').value = data.logradouro;
document.getElementById('city').value = data.localidade;
document.getElementById('state').value = data.uf;
} else {
alert('CEP não encontrado.');
}
})
.catch(error => {
console.error('Erro ao buscar o CEP:', error);
alert('Erro ao buscar o CEP. Tente novamente.');
});
} else {
alert('CEP inválido. Deve conter 8 dígitos.');
}
});
// Função para baixar o currículo estilizado em PDF
document.getElementById('downloadBtn').addEventListener('click', function() {
const element = document.getElementById('resume'); // Pega o conteúdo da div "resume"
// Opções básicas para o PDF
const options = {
margin: 0.3,
filename: 'curriculo.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 1 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Converte o HTML estilizado em PDF
html2pdf().from(element).set(options).save();
});
4° Passo: Testar o Projeto!
Agora, com os três arquivos (index.html, style.css, e script.js) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!
Se preferir os códigos estão no meu Repositório no GitHub.
Comentários
Postar um comentário
Obrigado pelo seu feedback!