init
This commit is contained in:
@@ -0,0 +1,25 @@
|
||||
import express, { type Request, type Response } from "express";
|
||||
|
||||
const hostname = '127.0.0.1';
|
||||
const httpPort = 4080;
|
||||
|
||||
const app = express();
|
||||
|
||||
app.set('views', 'views');
|
||||
app.set('view engine', 'hbs');
|
||||
|
||||
// import morgan from 'morgan'
|
||||
// app.use(morgan('dev'));
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded({ extended: false }));
|
||||
app.use(express.static('public'));
|
||||
|
||||
import userData from './userKnowledge.json';
|
||||
|
||||
app.get('/', function (req: Request, res: Response) {
|
||||
res.render('cv2', { userData });
|
||||
});
|
||||
|
||||
app.listen(httpPort, () => {
|
||||
console.log(`Server running at http://${hostname}:${httpPort}/`);
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,183 @@
|
||||
/* 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();
|
||||
}
|
||||
});
|
||||
|
||||
/* Link PDF Download on Mobile screen depending of the light/dark mode */
|
||||
|
||||
const downloadButton = document.getElementById('download-button');
|
||||
|
||||
downloadButton.addEventListener('click', () => {
|
||||
if (document.body.classList.contains(darkTheme)) {
|
||||
downloadButton.href = "assets/pdf/myResumeCV-dark.pdf";
|
||||
} else {
|
||||
downloadButton.href = "assets/pdf/myResumeCV-light.pdf";
|
||||
}
|
||||
});
|
||||
|
||||
/* 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");
|
||||
}
|
||||
|
||||
/* Generate PDF */
|
||||
|
||||
// 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);
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "",
|
||||
"short_name": "",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#FFFFFF",
|
||||
"background_color": "#FFFFFF",
|
||||
"display": "standalone"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
{
|
||||
"first_name": "Nikola",
|
||||
"last_name": "Petrov",
|
||||
"phone_number": "+38670749506",
|
||||
"occupation": "Student",
|
||||
"birth": "14, November, 2000",
|
||||
"living_location": "Ljubljana, Slovenia",
|
||||
"web_link": "https://petrovv.com",
|
||||
"git_link": "https://git.petrovv.com/explore",
|
||||
"email": "nikola@petrovv.com",
|
||||
"instagram_handle":"@nikolainsta7",
|
||||
"instagram_link":"https://www.instagram.com/nikolainsta7",
|
||||
"about_me": "I am Nikola, currently pursuing my studies at the Faculty of Electrical Engineering and Computer Science (FERI) in Maribor. My academic journey is largely driven by my interest in application and web development. I find the process of creating functional and user-friendly digital solutions both challenging and rewarding. This field allows me to blend creativity with technical skills, which I find particularly engaging.",
|
||||
"experience": [
|
||||
{
|
||||
"title": "HW Developer",
|
||||
"company": "Spica International",
|
||||
"time": "17/03/2025 - 01/08/2025",
|
||||
"des": "Worked on access menegment systems. Programed integrated devices, based on Buildroot using c++ and python web server."
|
||||
},
|
||||
{
|
||||
"title": "Backend/Frontend",
|
||||
"company": "RRC d.o.o",
|
||||
"time": "01/09/2024 - 31/12/2024",
|
||||
"des": "Worked on goverment websites for collage enrolment and student dorm requests."
|
||||
},
|
||||
{
|
||||
"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": "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": "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": "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."
|
||||
}
|
||||
],
|
||||
"education": [
|
||||
{
|
||||
"title": "(FERI) Faculty of Electrical Engineering and Computer Science, University of Maribor",
|
||||
"time": "01/10/2021 - CURRENT",
|
||||
"des": "Graduate engineer of computer science and information technology."
|
||||
},
|
||||
{
|
||||
"title": "(SSTS Siska) Secondary school of technical professions siska",
|
||||
"time": "01/09/2016 - 07/07/2021",
|
||||
"des": "Electrotechnician."
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,228 @@
|
||||
<!--
|
||||
┌──────────────────────────────────────────────────────────────────────┐
|
||||
│ @name CV generator │
|
||||
│ @author Léa Gallier │
|
||||
│ @version 1.0 │
|
||||
│ @created 2022-12-19 │
|
||||
│ @modified 2023-03-17 │
|
||||
│ @description Resume CV with dark/light mode and PDF export │
|
||||
└──────────────────────────────────────────────────────────────────────┘
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Permissions-Policy" content="interest-cohort=()">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>CV</title>
|
||||
<link rel="shortcut icon" href="/assets/pictures/favicon/favicon.ico" type="image/x-icon">
|
||||
|
||||
|
||||
<!-- Import Fontawesome -->
|
||||
<script src="https://kit.fontawesome.com/cb81440751.js" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Import stylesheets in CSS3 -->
|
||||
<link rel="stylesheet" href="assets/stylesheets/style.css" type="text/css">
|
||||
|
||||
<!-- HTML2PDF.js -->
|
||||
<!-- Version 0.8.0 -->
|
||||
<!-- <script src="assets/javascripts/html2pdf.v0.8.0.bundle.min.js"></script> -->
|
||||
<!-- Version 0.9.3 -->
|
||||
<script defer src="assets/javascripts/html2pdf.v0.9.3.bundle.min.js"></script>
|
||||
|
||||
<!-- Main Javascript file -->
|
||||
<script defer src="assets/javascripts/main.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{#with userData}}
|
||||
<header class="l-header" id="header">
|
||||
<!-- Nav menu -->
|
||||
<nav class="nav bd-container">
|
||||
<a href="#" class="nav_logo">{{first_name}} {{last_name}}</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="#profile" class="nav_link">
|
||||
<i class="fa-solid fa-user nav_icon"></i>Profile
|
||||
</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="assets/pictures/profile.png" alt="Icon picture" class="home_img" id="home-img">
|
||||
<!--<img alt="Icon picture" class="home_img" id="home-img">-->
|
||||
<h1 class="home_title">{{first_name}} {{last_name}}</b></h1>
|
||||
<h3 class="home_profession">{{occupation}}</h3>
|
||||
<div>
|
||||
<a download="" id="download-button" class="home_button-movil">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home_address bd-grid">
|
||||
<span class="home_information">
|
||||
<i class="fa-solid fa-location-dot home_icon"></i>{{living_location}}
|
||||
</span>
|
||||
<span class="home_information">
|
||||
<i class="fa-solid fa-calendar-days home_icon"></i>{{birth}}
|
||||
</span>
|
||||
<span class="home_information">
|
||||
<a href="mailto:{{email}}" class="home_link">
|
||||
<i class="fa-solid fa-envelope home_icon"></i>{{email}}
|
||||
</a>
|
||||
</span>
|
||||
<span class="home_information">
|
||||
<a href="tel:{{phone_number}}" class="home_link">
|
||||
<i class="fa-solid fa-phone home_icon"></i>{{phone_number}}
|
||||
</a>
|
||||
</span>
|
||||
<span class="home_information">
|
||||
<a href="{{web_link}}" class="home_link">
|
||||
<i class="fa-solid fa-globe home_icon"></i>{{web_link}}
|
||||
</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="{{git_link}}" target="_blank" class="social_link">
|
||||
<i class="fa-brands fa-git social_icon"></i>{{git_link}}
|
||||
</a>
|
||||
<a href="{{instagram_link}}" target="_blank" class="social_link">
|
||||
<i class="fa-brands fa-instagram social_icon"></i>{{instagram_handle}}
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROFILE -->
|
||||
<section class="profile section" id="profile">
|
||||
<h2 class="section-title">Profile</h2>
|
||||
|
||||
<p class="profile_description">
|
||||
{{about_me}}
|
||||
</p>
|
||||
</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 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 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>
|
||||
|
||||
{{/with}}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user