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

static/assets/main/1_0/assets/WinBox/winbox.bundle.js

@@ -0,0 +1,26 @@
+/**
+ * WinBox.js v0.2.0 (Bundle)
+ * Copyright 2021 Nextapps GmbH
+ * Author: Thomas Wilkerling
+ * Licence: Apache-2.0
+ * https://github.com/nextapps-de/winbox
+ */
+ (function(){'use strict';var e,h=document.createElement("style");h.innerHTML="@keyframes fade-in{0%{opacity:0}to{opacity:.85}}.winbox.modal:after,.winbox.modal:before{content:''}.winbox{position:fixed;left:0;top:0;background:#0050ff;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);transition:width .3s,height .3s,transform .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);will-change:transform,width,height;contain:layout size;text-align:left;touch-action:none}.wb-body,.wb-header{position:absolute;left:0}.max,.no-shadow{box-shadow:none}.wb-header{top:0;width:100%;height:35px;color:#fff;overflow:hidden}.wb-body{right:0;top:35px;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:contents;background:#fff;margin-top:0!important;contain:strict}.wb-title{font-family:Arial,sans-serif;font-size:14px;padding-left:10px;cursor:move;height:35px;line-height:35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-n,.wb-s{height:10px;position:absolute;left:0}.wb-n{top:-5px;right:0;cursor:n-resize}.wb-e{position:absolute;top:0;right:-5px;bottom:0;width:10px;cursor:w-resize}.wb-s,.wb-se,.wb-sw{bottom:-5px}.wb-s{right:0;cursor:n-resize}.wb-w{position:absolute;top:0;left:-5px;bottom:0;width:10px;cursor:w-resize}.wb-ne,.wb-nw,.wb-sw{width:15px;height:15px;position:absolute}.wb-nw{top:-5px;left:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize}.wb-ne{top:-5px;right:-5px}.wb-sw{left:-5px}.wb-se{position:absolute;right:-5px;width:15px;height:15px;cursor:nw-resize}.wb-icon{float:right;height:35px;max-width:100%;text-align:center}.wb-icon *{display:inline-block;width:30px;height:100%;background-position:center;background-repeat:no-repeat;cursor:pointer;max-width:100%}.no-close .wb-close,.no-full .wb-full,.no-header .wb-header,.no-max .wb-max,.no-min .wb-min,.no-resize .wb-body~div,.winbox.min .wb-body>*,.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.winbox.max .wb-title,.winbox.min .wb-title{cursor:default}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center bottom 11px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.max .wb-body~div,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title,body.wb-drag iframe{pointer-events:none}.max .wb-body{margin:0!important}.winbox iframe{position:absolute;width:100%;height:100%;border:0}.no-animation,body.wb-drag .winbox{transition:none}.winbox.modal:before{position:absolute;top:0;left:0;right:0;bottom:0;background:inherit;border-radius:inherit}.winbox.modal:after{position:absolute;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:#0d1117;animation:fade-in .2s ease-out forwards;z-index:-1}.no-header .wb-body{top:0}.no-move:not(.min) .wb-title{pointer-events:none}";
+ var k=document.getElementsByTagName("head")[0];k.firstChild?k.insertBefore(h,k.firstChild):k.appendChild(h);var l=document.createElement("div");l.innerHTML="<div class=wb-header><div class=wb-icon><span class=wb-min></span><span class=wb-max></span><span class=wb-full></span><span class=wb-close></span></div><div class=wb-title> </div></div><div class=wb-body></div><div class=wb-n></div><div class=wb-s></div><div class=wb-w></div><div class=wb-e></div><div class=wb-nw></div><div class=wb-ne></div><div class=wb-se></div><div class=wb-sw></div>";function m(a,b,c,g){a.addEventListener(b,c,g||!1===g?g:!0)}function p(a){a.stopPropagation();a.cancelable&&a.preventDefault()}function t(a,b,c){c=""+c;a["_s_"+b]!==c&&(a.style.setProperty(b,c),a["_s_"+b]=c)};var w=[],x,B=0,C=0,D,E,H,I,N,P,Q;
+ function S(a,b){if(!(this instanceof S))return new S(a);D||T();this.g=l.cloneNode(!0);this.body=this.g.getElementsByClassName("wb-body")[0];var c,g;if(a){if(b){var f=a;a=b}if("string"===typeof a)f=a;else{if(g=a.modal)var u=c="center";var y=a.id;var J=a.root;f=f||a.title;var F=a.mount;var d=a.html;var z=a.url;var n=a.width;var q=a.height;var v=a.minwidth;var A=a.minheight;u=a.x||u;c=a.y||c;var K=a.max;var r=a.top;var G=a.left;var L=a.bottom;var M=a.right;D=a.index||D;var Z=a.onclose;var aa=a.onfocus;
+ var ba=a.onblur;var ca=a.onmove;var da=a.onresize;b=a.background;var R=a.border;var O=a["class"];var ea=a.splitscreen;b&&this.setBackground(b);R&&t(this.body,"margin",R+(isNaN(R)?"":"px"))}}this.setTitle(f||"");a=P;f=Q;r=r?U(r,f):0;L=L?U(L,f):0;G=G?U(G,a):0;M=M?U(M,a):0;a-=G+M;f-=r+L;n=n?U(n,a):a/2|0;q=q?U(q,f):f/2|0;v=v?U(v,a):0;A=A?U(A,f):0;u=u?U(u,a,n):G;c=c?U(c,f,q):r;D=D||10;this.g.id=this.id=y||"winbox-"+ ++B;this.g.className="winbox"+(O?" "+("string"===typeof O?O:O.join(" ")):"")+(g?" modal":
+ "");this.x=u;this.y=c;this.width=n;this.height=q;this.u=v;this.s=A;this.top=r;this.right=M;this.bottom=L;this.left=G;this.max=this.min=!1;this.j=Z;this.l=aa;this.i=ba;this.o=ca;this.m=da;this.v=ea;K?this.maximize():this.move().resize();this.focus();F?this.mount(F):d?this.body.innerHTML=d:z&&this.setUrl(z);fa(this);(J||x).appendChild(this.g)}S["new"]=function(a){return new S(a)};
+ function U(a,b,c){"string"===typeof a&&("center"===a?a=(b-c)/2|0:"right"===a||"bottom"===a?a=b-c:(c=parseFloat(a),a="%"===(""+c!==a&&a.substring((""+c).length))?b/100*c|0:c));return a}
+ function T(){x=document.body;x[I="requestFullscreen"]||x[I="msRequestFullscreen"]||x[I="webkitRequestFullscreen"]||x[I="mozRequestFullscreen"]||(I="");N=I&&I.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");m(window,"resize",function(){P=x.clientWidth;Q=x.clientHeight;V()});P=x.clientWidth;Q=x.clientHeight}
+ function fa(a){W(a,"title");W(a,"n");W(a,"s");W(a,"w");W(a,"e");W(a,"nw");W(a,"ne");W(a,"se");W(a,"sw");m(a.g.getElementsByClassName("wb-min")[0],"click",function(b){p(b);a.minimize()});m(a.g.getElementsByClassName("wb-max")[0],"click",function(b){p(b);a.focus().maximize()});I?m(a.g.getElementsByClassName("wb-full")[0],"click",function(b){p(b);a.focus().fullscreen()}):a.addClass("no-full");m(a.g.getElementsByClassName("wb-close")[0],"click",function(b){p(b);a.close()||(a=null)});m(a.g,"click",function(){a.focus()},
+ !1)}function X(a){w.splice(w.indexOf(a),1);V();a.removeClass("min");a.min=!1;a.g.title=""}function V(){for(var a=w.length,b=0,c,g;b<a;b++)c=w[b],g=Math.min((P-2*c.left)/a,250),c.resize(g+1|0,35,!0).move(c.left+b*g|0,Q-c.bottom-35,!0)}
+ function W(a,b){function c(d){p(d);if(a.min)a.minimize();else{if("title"===b){var z=Date.now(),n=z-C;C=z;if(250>n){a.maximize();return}}a.max||(x.classList.add("wb-drag"),(y=d.touches)&&(y=y[0])?(d=y,m(window,"touchmove",g),m(window,"touchend",f)):(m(window,"mousemove",g),m(window,"mouseup",f)),J=d.pageX,F=d.pageY,a.focus())}}function g(d){p(d);y&&(d=d.touches[0]);var z=d.pageX;d=d.pageY;var n=z-J,q=d-F,v;if("title"===b){a.x+=n;a.y+=q;var A=v=1}else{if("e"===b||"se"===b||"ne"===b){a.width+=n;var K=
+ 1}else if("w"===b||"sw"===b||"nw"===b)a.x+=n,a.width-=n,A=K=1;if("s"===b||"se"===b||"sw"===b){a.height+=q;var r=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=q,a.height-=q,v=r=1}if(K||r)K&&(a.width=Math.max(Math.min(a.width,P-a.x-a.right),150)),r&&(a.height=Math.max(Math.min(a.height,Q-a.y-a.bottom),35)),a.resize();if(A||v)A&&(a.x=Math.max(Math.min(a.x,P-a.width-a.right),a.left)),v&&(a.y=Math.max(Math.min(a.y,Q-a.height-a.bottom),a.top)),a.move();J=z;F=d}function f(d){p(d);x.classList.remove("wb-drag");
+ y?(window.removeEventListener("touchmove",g,!0),window.removeEventListener("touchend",f,!0)):(window.removeEventListener("mousemove",g,!0),window.removeEventListener("mouseup",f,!0))}var u=a.g.getElementsByClassName("wb-"+b)[0],y,J,F;m(u,"mousedown",c);m(u,"touchstart",c,{passive:!1})}e=S.prototype;e.mount=function(a){this.unmount();a.h||(a.h=a.parentNode);this.body.textContent="";this.body.appendChild(a);return this};
+ e.unmount=function(a){var b=this.body.firstChild;if(b){var c=a||b.h;c&&c.appendChild(b);b.h=a}return this};e.setTitle=function(a){a=this.title=a;this.g.getElementsByClassName("wb-title")[0].firstChild.nodeValue=a;return this};e.setBackground=function(a){t(this.g,"background",a);return this};e.setUrl=function(a){this.body.innerHTML='<iframe src="'+a+'"></iframe>';return this};
+ e.focus=function(){H!==this&&(t(this.g,"z-index",D++),this.addClass("focus"),H&&(H.removeClass("focus"),H.i&&H.i()),H=this,this.l&&this.l());return this};e.hide=function(){return this.addClass("hide")};e.show=function(){return this.removeClass("hide")};e.minimize=function(a){E&&Y();!a&&this.min?(X(this),this.resize().move().focus()):!1===a||this.min||(w.push(this),V(),this.g.title=this.title,this.addClass("min"),this.min=!0);this.max&&(this.removeClass("max"),this.max=!1);return this};
+ e.maximize=function(a){if("undefined"===typeof a||a!==this.max)this.min&&X(this),(this.max=!this.max)?this.addClass("max").resize(P-this.left-this.right,Q-this.top-this.bottom,!0).move(this.left,this.top,!0):this.resize().move().removeClass("max");return this};e.fullscreen=function(a){if("undefined"===typeof a||a!==E)this.min&&(this.resize().move(),X(this)),E&&Y()||(this.body[I](),E=!0);return this};
+ function Y(){E=!1;if(document.fullscreen||document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)return document[N](),!0}e.close=function(a){if(this.j&&this.j(a))return!0;this.min&&X(this);this.unmount();this.g.parentNode.removeChild(this.g);H===this&&(H=null)};
+ e.move=function(a,b,c){a||0===a?c||(this.x=a?a=U(a,P-this.left-this.right,this.width):0,this.y=b?b=U(b,Q-this.top-this.bottom,this.height):0):(a=this.x,b=this.y,this.v&&(0===a?this.resize(P/2,Q):a===P-this.width&&this.resize(P/2,Q)));t(this.g,"transform","translate("+a+"px,"+b+"px)");this.o&&this.o(a,b);return this};
+ e.resize=function(a,b,c){a||0===a?c||(this.width=a?a=U(a,P-this.left-this.right):0,this.height=b?b=U(b,Q-this.top-this.bottom):0):(a=this.width,b=this.height);a=Math.max(a,this.u);b=Math.max(b,this.s);t(this.g,"width",a+"px");t(this.g,"height",b+"px");this.m&&this.m(a,b);return this};e.addClass=function(a){this.g.classList.add(a);return this};e.removeClass=function(a){this.g.classList.remove(a);return this};window.WinBox=S;}).call(this);
+ 

static/assets/main/1_0/css/intro.css

@@ -0,0 +1,82 @@
+
+:root{
+    --fw-reg: 400;
+    --fw-bold: 700;
+    --clr-accent: #0dcaf0;
+    
+    --fs-h1: 3rem;
+    --fs-h3: 1.25rem;
+    --bs: 0.25em 0.25em 0.75em rgba(0,0,0,.25),
+          0.125em 0.125em 0.25em rgba(0,0,0,.15);
+}
+
+@media (min-width: 768px) {
+    :root {
+        --fs-h1: 4.5rem;
+    }
+}
+
+section.intro{
+    padding: 5em 2em;
+    position: relative;
+}
+
+img.intro__img{
+    display: block;
+    max-width: 100%;
+    box-shadow: var(--bs);
+}
+
+h1.section__title{
+    line-height: 1;
+    margin: 0;
+    font-size: var(--fs-h1);
+    margin-bottom: .25em;
+    font-weight: var(--fw-reg);
+}
+
+.section__title strong {
+    font-weight: var(--fw-bold);
+    display: block;
+}
+
+.section__subtitle {
+    margin: 0;
+    font-size: var(--fs-h3);
+    background: var(--clr-accent);
+    padding: .25em 1em;
+    font-family: var(--ff-secondary);
+    margin-bottom: 1em;
+    display: inline-block;
+    color: black;
+}
+
+@media (min-width: 576px) {
+    section.intro {
+        display: grid;
+        width: min-content;
+        margin: 0 auto;
+        grid-column-gap: 1em;
+        grid-template-areas: 
+            "img title"
+            "img subtitle";
+        grid-template-columns: min-content max-content;
+    }
+    
+    img.intro__img {
+        grid-area: img;
+        min-width: 250px;
+        position: relative;
+        z-index: 2;
+    }    
+    
+    .section__subtitle {
+        align-self: start;
+        grid-column: -1 / 1;
+        grid-row: 2;
+        text-align: right;
+        position: relative;
+        left: -1.5em;
+        width: calc(100% + 1.5em);
+    }
+}

static/assets/main/1_0/css/styles.css

@@ -0,0 +1,57 @@
+:root{
+    --clr-backgraund: rgb(100, 100, 100);
+    --clr-txt: rgb(255, 255, 255);
+    --clr-cyan:#0dcaf0;
+}
+
+body{
+    background-color: var(--clr-backgraund);
+    color: var(--clr-txt);
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    font-size: 100%;
+}
+
+.wb-body{
+    background: var(--clr-backgraund);
+}
+
+.hidden{
+    display: none;
+}
+/*-------------------------------------------------------------*/
+h2{
+    text-align: center;
+}
+
+a{
+    text-decoration: none;
+    color: var(--clr-txt);
+}
+
+a:hover{
+    color: var(--clr-cyan);
+    cursor: pointer;
+}
+
+table{
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+}
+
+div.margin-top{
+    margin-top: 2em;
+}
+
+.wb-icon * {
+    opacity: 0.65;
+    filter: invert(1);
+}
+
+.wb-title {
+    color: black;
+}
+
+.btn{
+    margin: 2px;
+}

static/assets/main/1_0/js/main.js

@@ -0,0 +1,93 @@
+const workExperiance = document.getElementById("work-experiance");
+const workExperianceContent = document.getElementById("work-experience-content");
+
+const education = document.getElementById("education");
+const educationContent = document.getElementById("education-content");
+
+const documents = document.getElementById("documents");
+const documentsContent = document.getElementById("documents-content");
+
+const divContent = document.getElementById("content");
+
+const widthCheck = 576;
+
+education.addEventListener('click', () => {
+  if(window.innerWidth > widthCheck){
+    const educationBox = new WinBox({
+      title: 'Education',
+      x: "center",
+      y: "center",
+      width: "70%",
+      height: "70%",
+      mount: educationContent,
+      onfocus: function () {
+        this.setBackground('#0dcaf0')
+      },
+      onblur: function () {
+        this.setBackground('#777')
+      },
+    })
+  }else{
+    divContent.innerHTML = "";
+    divContent.appendChild(educationContent);
+  }
+})
+
+workExperiance.addEventListener('click', () => {
+  if(window.innerWidth > widthCheck){
+    const workExperoanceBox = new WinBox({
+      title: 'Work Experiance',
+      x: "center",
+      y: "center",
+      width: "70%",
+      height: "70%",
+      mount: workExperianceContent,
+      onfocus: function () {
+        this.setBackground('#0dcaf0')
+      },
+      onblur: function () {
+        this.setBackground('#777')
+      },
+    })
+  }else{
+    divContent.innerHTML = "";
+    divContent.appendChild(workExperianceContent);
+  }
+})
+
+documents.addEventListener('click', () => {
+  if(window.innerWidth > widthCheck){
+    const DocumentsBox = new WinBox({
+      title: 'Documents',
+      x: "center",
+      y: "center",
+      width: "70%",
+      height: "70%",
+      mount: documentsContent,
+      onfocus: function () {
+        this.setBackground('#0dcaf0')
+      },
+      onblur: function () {
+        this.setBackground('#777')
+      },
+    })
+  }else{
+    divContent.innerHTML = "";
+    divContent.appendChild(documentsContent);
+  }
+})
+
+const divWidth = document.getElementById("width");
+const buttons = document.getElementById("buttons");
+
+let haha = function(){
+  /*divWidth.innerText = window.innerWidth;*/
+  if(window.innerWidth < widthCheck){
+    buttons.classList.add("row");
+  }else{
+    buttons.classList.remove("row");
+  }
+}
+
+haha();
+setInterval(haha,250);

static/assets/main/2_0/js/script.js

@@ -0,0 +1,39 @@
+'use strict';
+
+
+
+// element toggle function
+const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }
+
+
+
+// sidebar variables
+const sidebar = document.querySelector("[data-sidebar]");
+const sidebarBtn = document.querySelector("[data-sidebar-btn]");
+
+// sidebar toggle functionality for mobile
+sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); });
+
+
+
+// page navigation variables
+const navigationLinks = document.querySelectorAll("[data-nav-link]");
+const pages = document.querySelectorAll("[data-page]");
+
+// add event to all nav link
+for (let i = 0; i < navigationLinks.length; i++) {
+  navigationLinks[i].addEventListener("click", function () {
+
+    for (let i = 0; i < navigationLinks.length; i++) {
+      if (this.innerHTML.toLowerCase() === pages[i].dataset.page) {
+        pages[i].classList.add("active");
+        navigationLinks[i].classList.add("active");
+        window.scrollTo(0, 0);
+      } else {
+        pages[i].classList.remove("active");
+        navigationLinks[i].classList.remove("active");
+      }
+    }
+
+  });
+}