Integrate hugo static generator

static/assets/cv/javascripts/main.js

@@ -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: 'CV.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: 'CV.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);
+});

static/assets/cv/stylesheets/layout.css

@@ -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;
+}

static/assets/cv/stylesheets/style.css

@@ -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: 900px;
+    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: 900px) {
+    .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: 900px) {
+    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;
+    }
+}