add /cv
This commit is contained in:
nikola
parent
c88b27e5d5
commit
08d19d81fe
6
public/assets/cv/javascripts/html2pdf.v0.9.3.bundle.min.js
vendored
Normal file
6
public/assets/cv/javascripts/html2pdf.v0.9.3.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
169
public/assets/cv/javascripts/main.js
Normal file
169
public/assets/cv/javascripts/main.js
Normal file
@ -0,0 +1,169 @@
|
||||
/* Set picture in url base 64 */
|
||||
|
||||
const img = document.getElementById('home-img');
|
||||
|
||||
/*fetch('assets/pictures/profile.txt', {
|
||||
mode: 'no-cors',
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin':'*'
|
||||
}
|
||||
})
|
||||
.then((response) => response.text())
|
||||
.then((result) => {
|
||||
console.log('Success:', result);
|
||||
//img.src = result;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});*/
|
||||
|
||||
/* Show Menu */
|
||||
|
||||
const showMenu = (toggleId, navId) => {
|
||||
const toggle = document.getElementById(toggleId);
|
||||
nav = document.getElementById(navId);
|
||||
|
||||
// Validate that variables exist
|
||||
if (toggle && nav) {
|
||||
toggle.addEventListener('click', () => {
|
||||
// We add the show-menu class to the div tag with the nav__menu class
|
||||
nav.classList.toggle('show-menu');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
showMenu('nav-toggle', 'nav-menu');
|
||||
|
||||
/* Remove menu mobile */
|
||||
|
||||
const navLink = document.querySelectorAll('.nav_link');
|
||||
|
||||
function linkAction() {
|
||||
const navMenu = document.getElementById('nav-menu');
|
||||
// When we click on each nav__link, we remove the show-menu class
|
||||
navMenu.classList.remove('show-menu');
|
||||
}
|
||||
|
||||
navLink.forEach(n => n.addEventListener('click', linkAction));
|
||||
|
||||
/* Scroll sections active link */
|
||||
|
||||
const sections = document.querySelectorAll('section[id]');
|
||||
|
||||
function scrollActive() {
|
||||
const scrollY = window.pageYOffset;
|
||||
|
||||
sections.forEach(current => {
|
||||
const sectionHeight = current.offsetHeight;
|
||||
const sectionTop = current.offsetTop - 50;
|
||||
sectionId = current.getAttribute('id');
|
||||
|
||||
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
|
||||
document.querySelector('.nav_menu a[href*=' + sectionId + ']').classList.add('active-link');
|
||||
} else {
|
||||
document.querySelector('.nav_menu a[href*=' + sectionId + ']').classList.remove('active-link');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', scrollActive);
|
||||
|
||||
/* Show scroll top */
|
||||
|
||||
function scrollTop() {
|
||||
const scrollTop = document.getElementById('scroll-top');
|
||||
if (this.scrollY >= 200) {
|
||||
scrollTop.classList.add('show-scroll');
|
||||
} else {
|
||||
scrollTop.classList.remove('show-scroll');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', scrollTop);
|
||||
|
||||
/* Light/Dark mode */
|
||||
|
||||
const themeButton = document.getElementById('theme-button');
|
||||
let darkTheme = 'dark-theme';
|
||||
let darkMode = localStorage.getItem("dark-mode");
|
||||
|
||||
function enableDarkMode() {
|
||||
document.body.classList.add(darkTheme);
|
||||
themeButton.classList.add('fa-sun');
|
||||
themeButton.classList.remove('fa-moon');
|
||||
localStorage.setItem("dark-mode", "enabled");
|
||||
};
|
||||
|
||||
function disableDarkMode() {
|
||||
document.body.classList.remove(darkTheme);
|
||||
themeButton.classList.add('fa-moon');
|
||||
themeButton.classList.remove('fa-sun');
|
||||
localStorage.setItem("dark-mode", "disabled");
|
||||
};
|
||||
|
||||
if (darkMode === "enabled") {
|
||||
enableDarkMode();
|
||||
}
|
||||
|
||||
themeButton.addEventListener("click", () => {
|
||||
darkMode = localStorage.getItem("dark-mode");
|
||||
if (darkMode === "disabled") {
|
||||
enableDarkMode();
|
||||
} else {
|
||||
disableDarkMode();
|
||||
}
|
||||
});
|
||||
|
||||
/* Reduce the size and print on an A4 sheet */
|
||||
|
||||
function addScaleCV() {
|
||||
document.body.classList.add("scale-cv");
|
||||
}
|
||||
|
||||
/* Remote the size when the CV is downloaded */
|
||||
|
||||
function removeScaleCV() {
|
||||
document.body.classList.remove("scale-cv");
|
||||
}
|
||||
|
||||
// PDF generated area
|
||||
let areaCV = document.getElementById('area-cv');
|
||||
|
||||
// Button
|
||||
let resumeButton = document.getElementById("resume-button");
|
||||
|
||||
// Generate PDF with html2pdf.js
|
||||
function generateResume() {
|
||||
// PDF filename change depending of the light/dark mode
|
||||
if (document.body.classList.contains(darkTheme)) {
|
||||
// html2pdf.js options
|
||||
let opt = {
|
||||
margin: 0,
|
||||
filename: 'myResumeCV-dark.pdf',
|
||||
image: { type: 'jpeg', quality: 0.98 },
|
||||
html2canvas: { scale: 4, useCORS: true },
|
||||
jsPDF: { format: 'a4', orientation: 'portrait' }
|
||||
};
|
||||
html2pdf(areaCV, opt);
|
||||
} else {
|
||||
// html2pdf.js options
|
||||
let opt = {
|
||||
margin: 0,
|
||||
filename: 'myResumeCV-light.pdf',
|
||||
image: { type: 'jpeg', quality: 0.98 },
|
||||
html2canvas: { scale: 4, useCORS: true },
|
||||
jsPDF: { format: 'a4', orientation: 'portrait' }
|
||||
};
|
||||
html2pdf(areaCV, opt);
|
||||
}
|
||||
}
|
||||
|
||||
// Action executed by clicking on the button => generation of the final PDF CV CV
|
||||
resumeButton.addEventListener("click", () => {
|
||||
// Adapt the area of the PDF
|
||||
addScaleCV();
|
||||
// Generate the PDF
|
||||
generateResume();
|
||||
// Remove adaptation after 1 second (you can choose to set more than 1 second if your PDF download time is long)
|
||||
setTimeout(removeScaleCV, 1000);
|
||||
});
|
||||
39
public/assets/cv/stylesheets/layout.css
Normal file
39
public/assets/cv/stylesheets/layout.css
Normal file
@ -0,0 +1,39 @@
|
||||
/* Google Font Poppins */
|
||||
@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap');
|
||||
|
||||
/* Variables */
|
||||
:root {
|
||||
--header-height: 3rem;
|
||||
|
||||
/* Colors */
|
||||
--title-color: #0B0A0A;
|
||||
--text-color: #403A3A;
|
||||
--text-color-light: #707070;
|
||||
--container-color: #FAFAFA;
|
||||
--container-color-alt: #F0EFEF;
|
||||
--body-color: #FCFCFC;
|
||||
|
||||
/* Typography */
|
||||
--body-font: 'Poppins', sans-serif;
|
||||
|
||||
/* Fonts size */
|
||||
--h1-font-size: 1.5rem;
|
||||
--h2-font-size: 1.25rem;
|
||||
--h3-font-size: 1rem;
|
||||
--normal-font-size: .938rem;
|
||||
--small-font-size: .875rem;
|
||||
--smaller-font-size: .813rem;
|
||||
|
||||
/* Fonts weight */
|
||||
--font-medium: 500;
|
||||
--font-semi-bold: 600;
|
||||
|
||||
/* Margins */
|
||||
--margin-1: .5rem;
|
||||
--margin-2: 1rem;
|
||||
--margin-3: 1.5rem;
|
||||
|
||||
/* Z Index */
|
||||
--z-tooltip: 10;
|
||||
--z-fixed: 100;
|
||||
}
|
||||
746
public/assets/cv/stylesheets/style.css
Normal file
746
public/assets/cv/stylesheets/style.css
Normal file
@ -0,0 +1,746 @@
|
||||
/* Google Font Poppins */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
|
||||
|
||||
/* Variables */
|
||||
:root {
|
||||
--header-height: 3rem;
|
||||
|
||||
/* Colors */
|
||||
--title-color: #0B0A0A;
|
||||
--text-color: #403A3A;
|
||||
--text-color-light: #707070;
|
||||
--container-color: #FAFAFA;
|
||||
--container-color-alt: #F0EFEF;
|
||||
--body-color: #FCFCFC;
|
||||
|
||||
/* Typography */
|
||||
--body-font: 'Poppins', sans-serif;
|
||||
|
||||
/* Fonts size */
|
||||
--h1-font-size: 1.5rem;
|
||||
--h2-font-size: 1.25rem;
|
||||
--h3-font-size: 1rem;
|
||||
--normal-font-size: .938rem;
|
||||
--small-font-size: .875rem;
|
||||
--smaller-font-size: .813rem;
|
||||
|
||||
/* Fonts weight */
|
||||
--font-medium: 500;
|
||||
--font-semi-bold: 600;
|
||||
|
||||
/* Margins */
|
||||
--margin-1: .5rem;
|
||||
--margin-2: 1rem;
|
||||
--margin-3: 1.5rem;
|
||||
|
||||
/* Z Index */
|
||||
--z-tooltip: 10;
|
||||
--z-fixed: 100;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Button Light/Dark */
|
||||
|
||||
.change-theme {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2.2rem;
|
||||
display: flex;
|
||||
color: var(--text-color);
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.change-theme:hover {
|
||||
color: var(--title-color);
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
|
||||
body.dark-theme {
|
||||
--title-color: #F2F2F2;
|
||||
--text-color: #BFBFBF;
|
||||
--container-color: #212121;
|
||||
--container-color-alt: #181616;
|
||||
--body-color: #2B2B2B;
|
||||
}
|
||||
|
||||
/* Generate PDF Button */
|
||||
|
||||
.generate-pdf {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 2.2rem;
|
||||
color: var(--text-color);
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.generate-pdf:hover {
|
||||
color: var(--title-color);
|
||||
}
|
||||
|
||||
/* Scale CV */
|
||||
|
||||
body.scale-cv {
|
||||
--h1-font-size: 0.938rem;
|
||||
--h2-font-size: 0.938rem;
|
||||
--h3-font-size: 0.875rem;
|
||||
--normal-font-size: 0.813rem;
|
||||
--small-font-size: 0.75rem;
|
||||
--smaller-font-size: 0.688rem;
|
||||
}
|
||||
|
||||
/* PDF A4 */
|
||||
|
||||
.scale-cv .change-theme,
|
||||
.scale-cv .generate-pdf {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scale-cv .bd-container {
|
||||
max-width: 695px;
|
||||
}
|
||||
|
||||
.scale-cv .section {
|
||||
padding: 1.5rem 0 0.80rem;
|
||||
}
|
||||
|
||||
.scale-cv .section-title {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.scale-cv .resume {
|
||||
height: 1122px;
|
||||
}
|
||||
|
||||
.scale-cv .resume_left {
|
||||
width: 250px;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
.scale-cv .resume_right {
|
||||
padding: 0 1rem 0 1.25rem;
|
||||
}
|
||||
|
||||
.scale-cv .home_img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.scale-cv .home_container {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.scale-cv .home_data {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.scale-cv .home_address,
|
||||
.scale-cv .social_container {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.scale-cv .home_icon,
|
||||
.scale-cv .social_icon,
|
||||
.scale-cv .interests_icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.scale-cv .education_container,
|
||||
.scale-cv .experience_container,
|
||||
.scale-cv .certificate_container {
|
||||
width: 500px;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.scale-cv .education_time,
|
||||
.scale-cv .experience_time,
|
||||
.scale-cv .certificate_item {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.scale-cv .education_rounder,
|
||||
.scale-cv .experience_rounder {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin-top: 0.22rem;
|
||||
}
|
||||
|
||||
.scale-cv .education_line,
|
||||
.scale-cv .experience_line {
|
||||
width: 2px;
|
||||
transform: translate(4.4px, -2px);
|
||||
}
|
||||
|
||||
.scale-cv .education_data,
|
||||
.scale-cv .experience_data,
|
||||
.scale-cv .certificate_data {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.scale-cv .certificate_rounder {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.scale-cv .skills_content {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.scale-cv .skills_box {
|
||||
width: 100px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.scale-cv .skills_progress {
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
transform: translate(0.01px, 0);
|
||||
}
|
||||
|
||||
.scale-cv .languages_content {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.scale-cv .languages_text {
|
||||
width: 115px;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
|
||||
body {
|
||||
margin: 0 0 var(--header-height) 0;
|
||||
padding: 0;
|
||||
font-family: var(--body-font);
|
||||
font-size: var(--normal-font-size);
|
||||
background-color: var(--body-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
ul,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: var(--title-color);
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Class CSS */
|
||||
|
||||
.section {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--h2-font-size);
|
||||
color: var(--title-color);
|
||||
font-weight: var(--font-semi-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .35rem;
|
||||
text-align: center;
|
||||
margin-bottom: var(--margin-3);
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
|
||||
.bd-container {
|
||||
max-width: 968px;
|
||||
width: calc(100% - 3rem);
|
||||
margin-left: var(--margin-3);
|
||||
margin-right: var(--margin-3);
|
||||
}
|
||||
|
||||
.bd-grid {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.l-header {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: var(--z-fixed);
|
||||
background-color: var(--body-color);
|
||||
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
|
||||
.nav {
|
||||
height: var(--header-height);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 968px) {
|
||||
.nav_menu {
|
||||
position: fixed;
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 2rem 1.5rem;
|
||||
background-color: var(--body-color);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
z-index: var(--z-fixed);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.nav_logo,
|
||||
.nav_toggle {
|
||||
color: var(--title-color);
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
|
||||
.nav_toggle {
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav_list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav_item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav_link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: var(--smaller-font-size);
|
||||
color: var(--text-color-light);
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
|
||||
.nav_link:hover {
|
||||
color: var(--title-color);
|
||||
}
|
||||
|
||||
.nav_icon {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: var(--margin-1);
|
||||
}
|
||||
|
||||
/* Show menu */
|
||||
|
||||
.show-menu {
|
||||
bottom: var(--header-height);
|
||||
}
|
||||
|
||||
/* Active menu link */
|
||||
|
||||
.active-link {
|
||||
color: var(--title-color);
|
||||
}
|
||||
|
||||
/* Home page */
|
||||
|
||||
.home {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.home_container {
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.home_data {
|
||||
gap: .5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home_img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
justify-self: center;
|
||||
margin-bottom: var(--margin-1);
|
||||
}
|
||||
|
||||
.home_title {
|
||||
font-size: var(--h1-font-size);
|
||||
}
|
||||
|
||||
.home_profession {
|
||||
font-size: var(--normal-font-size);
|
||||
margin-bottom: var(--margin-1);
|
||||
}
|
||||
|
||||
.home_address {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.home_information {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--small-font-size);
|
||||
}
|
||||
|
||||
.home_icon {
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
width: 25px;
|
||||
justify-content: center;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.home_link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: var(--small-font-size);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.home_link:hover {
|
||||
color: var(--title-color);
|
||||
}
|
||||
|
||||
.home_button-movil {
|
||||
display: inline-block;
|
||||
border: 2px solid var(--text-color);
|
||||
color: var(--title-color);
|
||||
padding: 1rem 2rem;
|
||||
border-radius: .25rem;
|
||||
transition: all 0.5s ease;
|
||||
font-weight: var(--font-medium);
|
||||
margin-top: var(--margin-3);
|
||||
}
|
||||
|
||||
.home_button-movil:hover {
|
||||
background-color: var(--text-color);
|
||||
color: var(--container-color);
|
||||
}
|
||||
|
||||
/* Social page */
|
||||
|
||||
.social_container {
|
||||
grid-template-columns: max-content;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.social_link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: var(--small-font-size);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.social_link:hover {
|
||||
color: var(--title-color);
|
||||
}
|
||||
|
||||
.social_icon {
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
width: 25px;
|
||||
justify-content: center;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
/* Profile page */
|
||||
|
||||
.profile_description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Education page */
|
||||
|
||||
.education_content,
|
||||
.experience_content,
|
||||
.certificate_content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.education_time,
|
||||
.experience_time,
|
||||
.certificate_item {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.education_rounder,
|
||||
.experience_rounder {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: var(--text-color-light);
|
||||
border-radius: 50%;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
|
||||
.education_line,
|
||||
.experience_line {
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 115%;
|
||||
background-color: var(--text-color-light);
|
||||
transform: translate(7px, 0);
|
||||
}
|
||||
|
||||
.education_data,
|
||||
.experience_data,
|
||||
.certificate_data {
|
||||
gap: .35rem;
|
||||
}
|
||||
|
||||
.education_title,
|
||||
.experience_title,
|
||||
.certificate_year {
|
||||
font-size: var(--h3-font-size);
|
||||
}
|
||||
|
||||
.education_studies,
|
||||
.experience_company,
|
||||
.certificate_title {
|
||||
font-size: var(--small-font-size);
|
||||
color: var(--title-color);
|
||||
}
|
||||
|
||||
.education_year,
|
||||
.experience_year {
|
||||
font-size: var(--smaller-font-size);
|
||||
}
|
||||
|
||||
.experience_description {
|
||||
color: var(--text-color-light);
|
||||
font-size: var(--smaller-font-size);
|
||||
}
|
||||
|
||||
/* Skills */
|
||||
|
||||
.skills_content {
|
||||
gap: 0.2rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.skills_name {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.skills_text {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.skills_box {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background-color: var(--text-color-light);
|
||||
}
|
||||
|
||||
.skills_progress {
|
||||
background-color: var(--text-color);
|
||||
display: block;
|
||||
height: 10px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Certificates */
|
||||
|
||||
.certificate_container {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.certificate_rounder {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: var(--text-color-light);
|
||||
border-radius: 50%;
|
||||
margin-right: 0.38rem;
|
||||
margin-left: 0.37rem;
|
||||
}
|
||||
|
||||
.certificate_honours {
|
||||
font-size: var(--smaller-font-size);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* Languages */
|
||||
|
||||
.languages_content {
|
||||
gap: 0.2rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.languages_name {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.languages_text {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.languages_stars {
|
||||
position: initial;
|
||||
}
|
||||
|
||||
.languages_stars_checked {
|
||||
color: var(--text-color-light);
|
||||
}
|
||||
|
||||
/* Interests */
|
||||
|
||||
.interests_container {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
margin-top: var(--margin-2);
|
||||
}
|
||||
|
||||
.interests_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.interests_icon {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-color-light);
|
||||
}
|
||||
|
||||
.scrolltop {
|
||||
position: fixed;
|
||||
right: 1.2rem;
|
||||
bottom: -20%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.4rem;
|
||||
background-color: var(--container-color-alt);
|
||||
border-radius: 0.25rem;
|
||||
z-index: var(--z-tooltip);
|
||||
transition: 0.4s;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.scrolltop_icon {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.show-scroll {
|
||||
visibility: visible;
|
||||
bottom: 5rem;
|
||||
}
|
||||
|
||||
/* Screen for small phones */
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
.nav_list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Computer screen -> PDF */
|
||||
|
||||
@media screen and (min-width: 968px) {
|
||||
body {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.bd-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.l-header,
|
||||
.scrolltop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.resume {
|
||||
display: grid;
|
||||
grid-template-columns: .5fr 1fr;
|
||||
background-color: var(--container-color);
|
||||
box-shadow: 0 0 8px rgba(13, 12, 12, .15);
|
||||
}
|
||||
|
||||
.resume_left {
|
||||
background-color: var(--container-color-alt);
|
||||
}
|
||||
|
||||
.resume_left,
|
||||
.resume_right {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.generate-pdf {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section-title,
|
||||
.profile_description {
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
.home_container {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.home_button-movil {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.languages_content {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.languages_text {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.skills_content {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.interests_container {
|
||||
grid-template-columns: repeat(4, max-content);
|
||||
column-gap: 3.5rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
@ -11,6 +11,10 @@ router.get('/', function (req: Request, res: Response) {
|
||||
res.render('main/2_0', { title: 'Nikola Petrov', disableBootStrap: true, project, experience, education });
|
||||
});
|
||||
|
||||
router.get('/cv', function (req: Request, res: Response) {
|
||||
res.render('cv', { title: 'Nikola Petrov', disableBootStrap: true, userData });
|
||||
});
|
||||
|
||||
router.get('/old', function (req: Request, res: Response) {
|
||||
res.render('main/1_0', { title: 'Nikola Petrov' });
|
||||
});
|
||||
|
||||
@ -57,27 +57,32 @@
|
||||
],
|
||||
"experience": [
|
||||
{
|
||||
"title": "RRC d.o.o [ Developer ]",
|
||||
"title": "Developer",
|
||||
"company": "RRC d.o.o",
|
||||
"time": "18/03/2024 - 31/05/2024",
|
||||
"des": "Student practicum. Backend in java with frontend in ext JS and jQuery"
|
||||
},
|
||||
{
|
||||
"title": "LightAct [ Developer/IT ]",
|
||||
"title": "Developer/IT",
|
||||
"company": "LightAct",
|
||||
"time": "01/07/2022 - 01/09/2022",
|
||||
"des": "I helped maintaining data base, worked on the application (integrated a capture card and IP camera), assembled new server rack, installed new UTP/power connectors in the office"
|
||||
},
|
||||
{
|
||||
"title": "Institute 404 [ Mentor ]",
|
||||
"title": "Mentor",
|
||||
"company": "Institute 404",
|
||||
"time": "08/06/2020 - 19/06/2020",
|
||||
"des": "I helped primary school children with their projects with soldering, laser cutting, and building."
|
||||
},
|
||||
{
|
||||
"title": "Hella Saturnos d.o.o. [ Maintenance technician ]",
|
||||
"title": "Maintenance technician",
|
||||
"company": "Hella Saturnos d.o.o.",
|
||||
"time": "04/09/2018 - 18/01/2019",
|
||||
"des": "I maintained and repaired machines from plastic presses to personal stations."
|
||||
},
|
||||
{
|
||||
"title": "Best Western Premier Hotel Slon [ Maintenance technician ]",
|
||||
"title": "Maintenance technician",
|
||||
"company": "Best Western Premier Hotel Slon",
|
||||
"time": "01/03/2018 - 04/05/2018",
|
||||
"des": "I helped with setting up the conference/event rooms. I helped customers and fixed problems like replacing light bulbs, wall sockets, hair-dryers."
|
||||
}
|
||||
|
||||
172
views/cv.hbs
Normal file
172
views/cv.hbs
Normal file
@ -0,0 +1,172 @@
|
||||
<script src="https://kit.fontawesome.com/cb81440751.js" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Import stylesheets in CSS3 -->
|
||||
<link rel="stylesheet" href="/assets/cv/stylesheets/style.css" type="text/css">
|
||||
|
||||
<header class="l-header" id="header">
|
||||
<!-- Nav menu -->
|
||||
<nav class="nav bd-container">
|
||||
<a href="#" class="nav_logo">Léa GALLIER</a>
|
||||
<div class="nav_menu" id="nav-menu">
|
||||
<ul class="nav_list">
|
||||
|
||||
<li class="nav_item">
|
||||
<a href="#home" class="nav_link active-link">
|
||||
<i class="fa-solid fa-house nav_icon"></i>Home
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav_item">
|
||||
<a href="#experience" class="nav_link">
|
||||
<i class="fa-solid fa-briefcase nav_icon"></i>Experiences
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li class="nav_item">
|
||||
<a href="#education" class="nav_link">
|
||||
<i class="fa-solid fa-book-bookmark nav_icon"></i>Education
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav_toggle" id="nav-toggle">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="l-main bd-container">
|
||||
<!-- Resume CV -->
|
||||
<div class="resume" id="area-cv">
|
||||
<div class="resume_left">
|
||||
|
||||
<!-- HOME -->
|
||||
<section class="home" id="home">
|
||||
<div class="home_container section bd-grid">
|
||||
|
||||
<div class="home_data bd-grid">
|
||||
<img src="/images/Jaz.jpg" alt="Icon picture" class="home_img" id="home-img">
|
||||
<!--<img alt="Icon picture" class="home_img" id="home-img">-->
|
||||
<h1 class="home_title">Nikola Petrov</h1>
|
||||
<h3 class="home_profession">Student</h3>
|
||||
</div>
|
||||
|
||||
<div class="home_address bd-grid">
|
||||
<span class="home_information">
|
||||
<i class="fa-solid fa-location-dot home_icon"></i> Ljubljana, Slovenija
|
||||
</span>
|
||||
<span class="home_information">
|
||||
<i class="fa-solid fa-calendar-days home_icon"></i> November, 2000
|
||||
</span>
|
||||
<span class="home_information">
|
||||
<a href="mailto:nikolape7@gmail.com" class="home_link">
|
||||
<i class="fa-solid fa-envelope home_icon"></i> nikolape7@gmail.com
|
||||
</a>
|
||||
</span>
|
||||
<span class="home_information">
|
||||
<a href="tel:+38670749506" class="home_link">
|
||||
<i class="fa-solid fa-phone home_icon"></i> (+386) 070749506
|
||||
</a>
|
||||
</span>
|
||||
<span class="home_information">
|
||||
<a href="https://petrovv.com" class="home_link">
|
||||
<i class="fa-solid fa-globe home_icon"></i> https://petrovv.com
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Theme change button -->
|
||||
<i class="fa-solid fa-moon change-theme" title="Theme" id="theme-button"></i>
|
||||
|
||||
<!-- Button to generate and download the pdf. Available for desktop. -->
|
||||
<i class="fa-solid fa-download generate-pdf" title="Generate PDF" id="resume-button"></i>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- SOCIAL -->
|
||||
<section class="social section">
|
||||
<h2 class="section-title">Social</h2>
|
||||
|
||||
<div class="social_container bd-grid">
|
||||
<a href="https://git.petrovv.com" target="_blank" class="social_link">
|
||||
<i class="fa-brands fa-gitlab social_icon"></i> https://git.petrovv.com
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="resume_right">
|
||||
|
||||
<!-- EXPERIENCE -->
|
||||
<section class="experience section" id="experience">
|
||||
<h2 class="section-title">Experience</h2>
|
||||
|
||||
<div class="experience_container bd-grid">
|
||||
{{#each userData.experience}}
|
||||
<div class="experience_content">
|
||||
<div class="experience_time">
|
||||
<span class="experience_rounder"></span>
|
||||
{{#unless @last}}
|
||||
<span class="experience_line"></span>
|
||||
{{/unless}}
|
||||
</div>
|
||||
<div class="experience_data bd-grid">
|
||||
<h3 class="experience_title">{{title}}</h3>
|
||||
<span class="experience_company">{{company}}</span>
|
||||
<span class="experience_year">{{time}}</span>
|
||||
<p class="experience_description">
|
||||
{{des}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- EDUCATION -->
|
||||
<section class="education section" id="education">
|
||||
<h2 class="section-title">Education</h2>
|
||||
|
||||
<div class="education_container bd-grid">
|
||||
|
||||
{{#each userData.education}}
|
||||
<div class="education_content">
|
||||
<div class="education_time">
|
||||
<span class="education_rounder"></span>
|
||||
{{#unless @last}}
|
||||
<span class="education_line"></span>
|
||||
{{/unless}}
|
||||
</div>
|
||||
<div class="education_data bd-grid">
|
||||
<h3 class="education_title">{{des}}</h3>
|
||||
<span class="education_studies">{{title}}</span>
|
||||
<span class="education_year">{{time}}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<a href="#" class="scrolltop" id="scroll-top">
|
||||
<i class="fa-solid fa-arrow-up scrolltop_icon"></i>
|
||||
</a>
|
||||
|
||||
<!-- HTML2PDF.js -->
|
||||
<!-- Version 0.9.3 -->
|
||||
<script src="/assets/cv/javascripts/html2pdf.v0.9.3.bundle.min.js"></script>
|
||||
|
||||
<!-- Main Javascript file -->
|
||||
<script src="/assets/cv/javascripts/main.js"></script>
|
||||
@ -293,7 +293,7 @@
|
||||
<ol class="timeline-list">
|
||||
{{#each experience}}
|
||||
<li class="timeline-item">
|
||||
<h4 class="h4 timeline-item-title">{{title}}</h4>
|
||||
<h4 class="h4 timeline-item-title">{{title}} [ {{company}} ]</h4>
|
||||
<span>{{time}}</span>
|
||||
<p class="timeline-text">
|
||||
{{des}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user