├── img ├── article-1.png ├── article-2.png ├── article-3.png ├── phd-cover.png └── profile.png ├── robots.txt ├── assets ├── favicon │ ├── favicon.ico │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── apple-touch-icon.png │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ └── site.webmanifest ├── MariaBrioPerez-CV.pdf ├── screenshots │ ├── MariaBrioPortfolio-01.png │ ├── MariaBrioPortfolio-02.png │ ├── MariaBrioPortfolio-03.png │ ├── MariaBrioPortfolio-04.png │ └── MariaBrioPortfolio-05.png └── mariabrioperez.vcf ├── .github └── FUNDING.yml ├── sitemap.xml ├── LICENSE.txt ├── scss ├── _variables.scss └── styles.scss ├── js └── main.js ├── css ├── styles.css.map ├── swiper-bundle.min.css └── styles.css ├── README.md └── index.html /img/article-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/img/article-1.png -------------------------------------------------------------------------------- /img/article-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/img/article-2.png -------------------------------------------------------------------------------- /img/article-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/img/article-3.png -------------------------------------------------------------------------------- /img/phd-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/img/phd-cover.png -------------------------------------------------------------------------------- /img/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/img/profile.png -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / 3 | 4 | # Sitemaps 5 | Sitemap: https://mariabrio.vercel.app/sitemap.xml 6 | -------------------------------------------------------------------------------- /assets/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/assets/favicon/favicon.ico -------------------------------------------------------------------------------- /assets/MariaBrioPerez-CV.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/assets/MariaBrioPerez-CV.pdf -------------------------------------------------------------------------------- /assets/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/assets/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /assets/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/assets/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /assets/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/assets/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: JuditKaramazov 4 | custom: https://www.buymeacoffee.com/juditkaramazov -------------------------------------------------------------------------------- /assets/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/assets/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /assets/favicon/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/assets/favicon/android-chrome-512x512.png -------------------------------------------------------------------------------- /assets/screenshots/MariaBrioPortfolio-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/assets/screenshots/MariaBrioPortfolio-01.png -------------------------------------------------------------------------------- /assets/screenshots/MariaBrioPortfolio-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/assets/screenshots/MariaBrioPortfolio-02.png -------------------------------------------------------------------------------- /assets/screenshots/MariaBrioPortfolio-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/assets/screenshots/MariaBrioPortfolio-03.png -------------------------------------------------------------------------------- /assets/screenshots/MariaBrioPortfolio-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/assets/screenshots/MariaBrioPortfolio-04.png -------------------------------------------------------------------------------- /assets/screenshots/MariaBrioPortfolio-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuditKaramazov/MariaBrioPortfolio/HEAD/assets/screenshots/MariaBrioPortfolio-05.png -------------------------------------------------------------------------------- /assets/favicon/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"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"} -------------------------------------------------------------------------------- /assets/mariabrioperez.vcf: -------------------------------------------------------------------------------- 1 | BEGIN:VCARD 2 | VERSION:4.0 3 | FN:Brio Perez, M. 4 | N:Brio Perez;Maria; 5 | TITLE:Chemical Engineer 6 | EMAIL:maria.brioperez@gmail.com 7 | TEL:+31651610284 8 | URL;TYPE=PORTFOLIO:https://mariabrio.vercel.app/ 9 | X-SOCIALPROFILE;TYPE=LINKEDIN:https://www.linkedin.com/in/mariabrioperez/ 10 | END:VCARD -------------------------------------------------------------------------------- /sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | https://mariabrio.vercel.app/ 5 | 2024-06-30T15:06:17+00:00 6 | 1.00 7 | 8 | 9 | https://mariabrio.vercel.app/public/MariaBrioPerez-CV.pdf 10 | 2024-06-30T15:06:17+00:00 11 | 0.80 12 | 13 | 14 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Judit Lázaro 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 9 | of the Software, and to permit persons to whom the Software is furnished to do 10 | so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /scss/_variables.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --header-height: 3rem; 3 | 4 | /* Colors */ 5 | --hue-color: 169; 6 | --first-color: hsl(var(--hue-color), 26%, 75%); 7 | --first-color-second: hsl(166, 30%, 56%); 8 | --first-color-alt: hsl(167, 43%, 64%); 9 | --first-color-lighter: hsl(167, 13%, 43%); 10 | --title-color: hsl(var(--hue-color), 8%, 15%); 11 | --text-color: hsl(var(--hue-color), 8%, 45%); 12 | --text-color-light: hsl(var(--hue-color), 8%, 65%); 13 | --input-color: hsl(var(--hue-color), 70%, 96%); 14 | --body-color: hsl(var(--hue-color), 60%, 99%); 15 | --container-color: #fff; 16 | --scroll-bar-color: hsl(var(--hue-color), 12%, 90%); 17 | --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%); 18 | 19 | /* Font & typography */ 20 | --body-font: "Poppins", sans-serif; 21 | --big-font-size: 2rem; 22 | --h1-font-size: 1.5rem; 23 | --h2-font-size: 1.25rem; 24 | --h3-font-size: 1.125rem; 25 | --normal-font-size: 0.938rem; 26 | --small-font-size: 0.813rem; 27 | --smaller-font-size: 0.75rem; 28 | 29 | /* Font weight */ 30 | --font-lighter: 200; 31 | --font-medium: 500; 32 | --font-semi-bold: 600; 33 | 34 | /* Margins Bottom */ 35 | --mb-0-25: 0.25rem; 36 | --mb-0-5: 0.5rem; 37 | --mb-0-75: 0.75rem; 38 | --mb-1: 1rem; 39 | --mb-1-5: 1.5rem; 40 | --mb-2: 2rem; 41 | --mb-2-5: 2.5rem; 42 | --mb-3: 3rem; 43 | 44 | /* z index */ 45 | --z-tooltip: 99; 46 | --z-fixed: 999; 47 | --z-modal: 9999; 48 | } 49 | 50 | /* Font size (large devices) */ 51 | @media screen and (min-width: 968px) { 52 | :root { 53 | --big-font-size: 3rem; 54 | --h1-font-size: 2.25rem; 55 | --h2-font-size: 1.5rem; 56 | --h3-font-size: 1.25rem; 57 | --normal-font-size: 1rem; 58 | --small-font-size: 0.875rem; 59 | --smaller-font-size: 0.813rem; 60 | } 61 | } 62 | 63 | /* Dark mode */ 64 | body.dark-theme { 65 | --first-color-second: hsl(167, 24%, 42%); 66 | --first-color-lighter: hsl(210, 11%, 25%); 67 | --title-color: hsl(var(--hue-color), 8%, 95%); 68 | --text-color: hsl(var(--hue-color), 8%, 75%); 69 | --input-color: hsl(167, 25%, 39%); 70 | --body-color: hsl(210, 11%, 25%); 71 | --container-color: hsl(var(--hue-color), 29%, 16%); 72 | --scroll-bar-color: hsl(var(--hue-color), 12%, 48%); 73 | --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%); 74 | } 75 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | /* Menu (show/hidden) */ 2 | const navMenu = document.getElementById("nav-menu"), 3 | navToggle = document.getElementById("nav-toggle"), 4 | navClose = document.getElementById("nav-close") 5 | 6 | /* Menu (show) */ 7 | if (navToggle) { 8 | navToggle.addEventListener("click", () => { 9 | navMenu.classList.add("show-menu") 10 | }) 11 | } 12 | 13 | /* Menu (hidden) */ 14 | if (navClose) { 15 | navClose.addEventListener("click", () => { 16 | navMenu.classList.remove("show-menu") 17 | }) 18 | } 19 | 20 | /* Mobile menu */ 21 | const navLink = document.querySelectorAll(".nav-link") 22 | 23 | function linkAction() { 24 | const navMenu = document.getElementById("nav-menu") 25 | navMenu.classList.remove("show-menu") 26 | } 27 | navLink.forEach((n) => n.addEventListener("click", linkAction)) 28 | 29 | /* Skills (accordion) */ 30 | const skillsContent = document.getElementsByClassName("skills-container-content"), 31 | skillsHeader = document.querySelectorAll(".skills-container-header") 32 | 33 | function toggleSkills() { 34 | let itemClass = this.parentNode.className 35 | 36 | for (i = 0; i < skillsContent.length; i++) { 37 | skillsContent[i].className = "skills-container-content skills-close"; 38 | } 39 | if (itemClass === "skills-container-content skills-close") { 40 | this.parentNode.className = "skills-container-content skills-open" 41 | } 42 | } 43 | 44 | skillsHeader.forEach((el) => { 45 | el.addEventListener("click", toggleSkills) 46 | }) 47 | 48 | /* Experience tabs */ 49 | const tabs = document.querySelectorAll("[data-target]"), 50 | tabContents = document.querySelectorAll("[data-content]") 51 | 52 | tabs.forEach((tab) => { 53 | tab.addEventListener("click", () => { 54 | const target = document.querySelector(tab.dataset.target) 55 | 56 | tabContents.forEach((tabContent) => { 57 | tabContent.classList.remove("experience-active") 58 | }) 59 | target.classList.add("experience-active") 60 | 61 | tabs.forEach((tab) => { 62 | tab.classList.remove("experience-active") 63 | }) 64 | tab.classList.add("experience-active") 65 | }) 66 | }) 67 | 68 | /* Articles swiper */ 69 | const swiperArticles = new Swiper(".articles-container", { 70 | cssMode: true, 71 | loop: true, 72 | navigation: { 73 | nextEl: ".swiper-button-next", 74 | prevEl: ".swiper-button-prev", 75 | }, 76 | pagination: { 77 | el: ".swiper-pagination", 78 | clickable: true, 79 | }, 80 | }) 81 | 82 | /* Scroll sections (active link) */ 83 | const sections = document.querySelectorAll("section[id]") 84 | 85 | function scrollActive() { 86 | const scrollY = window.pageYOffset 87 | 88 | sections.forEach((current) => { 89 | const sectionHeight = current.offsetHeight 90 | const sectionTop = current.offsetTop - 50 91 | const sectionId = current.getAttribute("id") 92 | 93 | if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { 94 | document 95 | .querySelector(".nav-menu a[href*=" + sectionId + "]") 96 | .classList.add("active-link") 97 | } else { 98 | document 99 | .querySelector(".nav-menu a[href*=" + sectionId + "]") 100 | .classList.remove("active-link") 101 | } 102 | }) 103 | } 104 | window.addEventListener("scroll", scrollActive) 105 | 106 | /* Background header */ 107 | function scrollHeader() { 108 | const nav = document.getElementById("header") 109 | 110 | if (this.scrollY >= 80) nav.classList.add("scroll-header") 111 | else nav.classList.remove("scroll-header") 112 | } 113 | window.addEventListener("scroll", scrollHeader) 114 | 115 | /* Show scroll to top */ 116 | function scrollUp() { 117 | const scrollUp = document.getElementById("scroll-up") 118 | 119 | if (this.scrollY >= 560) scrollUp.classList.add("show-scroll") 120 | else scrollUp.classList.remove("show-scroll") 121 | } 122 | window.addEventListener("scroll", scrollUp) 123 | 124 | /* Dark/Light mode */ 125 | const themeButton = document.getElementById("theme-button") 126 | const darkTheme = "dark-theme" 127 | const iconTheme = "fa-sun" 128 | 129 | const selectedTheme = localStorage.getItem("selected-theme") 130 | const selectedIcon = localStorage.getItem("selected-icon") 131 | 132 | const getCurrentTheme = () => 133 | document.body.classList.contains(darkTheme) ? "dark" : "light" 134 | const getCurrentIcon = () => 135 | themeButton.classList.contains(iconTheme) ? "fa-moon" : "fa-sun" 136 | 137 | if (selectedTheme) { 138 | document.body.classList[selectedTheme === "dark" ? "add" : "remove"](darkTheme) 139 | themeButton.classList[selectedIcon === "fa-moon" ? "add" : "remove"](iconTheme) 140 | } 141 | 142 | themeButton.addEventListener("click", () => { 143 | document.body.classList.toggle(darkTheme) 144 | themeButton.classList.toggle(iconTheme) 145 | 146 | localStorage.setItem("selected-theme", getCurrentTheme()) 147 | localStorage.setItem("selected-icon", getCurrentIcon()) 148 | }) 149 | 150 | /* Mail integration */ 151 | document.addEventListener("DOMContentLoaded", function() { 152 | emailjs.init("A9PZASRNY-NxAYHQX") 153 | }) 154 | 155 | document.getElementById('contact-form').addEventListener('submit', function(event) { 156 | event.preventDefault() 157 | 158 | emailjs.sendForm('service_btvk1js', 'template_zhvgvnk', this) 159 | .then(function(response) { 160 | console.log('Success!', response.status, response.text) 161 | alert('Email sent successfully!') 162 | document.getElementById('contact-form').reset() 163 | }, function(error) { 164 | console.log('Failed...', error) 165 | alert('Email sending failed.') 166 | }) 167 | }) 168 | -------------------------------------------------------------------------------- /css/styles.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["styles.scss","_variables.scss","styles.css"],"names":[],"mappings":"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","file":"styles.css"} -------------------------------------------------------------------------------- /css/swiper-bundle.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Swiper 6.5.8 3 | * Most modern mobile touch slider and framework with hardware accelerated transitions 4 | * https://swiperjs.com 5 | * 6 | * Copyright 2014-2021 Vladimir Kharlampidi 7 | * 8 | * Released under the MIT License 9 | * 10 | * Released on: April 23, 2021 11 | */ 12 | 13 | @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-container-pointer-events{touch-action:pan-y}.swiper-container-pointer-events.swiper-container-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-container-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Maria Brió Pérez 2 | 3 |

4 | 5 | Portfolio's favicon. 6 | 7 |

8 |

9 | A professional, minimalist portfolio 10 |

11 | 12 | 13 |
14 | HTML5 badge 15 | JavaScript badge 16 | Sass badge 17 |
18 | 19 |

20 | 🐱 /JuditKaramazov 21 |

22 |

23 | 📍 Portfolio 24 |

25 |

26 | ☕ Blog 27 |

28 | 29 | --- 30 | 31 | Table of Contents 32 | ----------------- 33 | 34 | * [🔧 Getting Started](#-getting-started) 35 | * [🚪 Introduction](#-introduction) 36 | * [💾 Content](#-content) 37 | * [🔮 Features](#-features) 38 | * [🌒 Day'n'Nite](#-daynnite) 39 | * [📬 EmailJS](#-emailjs) 40 | * [📜 Single page](#-single-page) 41 | * [🖼️ Swiper](#-swiper) 42 | * [💄 Style](#-style) 43 | * [🥳 Immense thanks to them awesome Sponsors](#-immense-thanks-to-them-awesome-sponsors) 44 | * [🏛 License & Copyright](#-license--copyright) 45 | 46 | --- 47 | 48 | # 🔧 Getting Started 49 | 50 | As surprising as it might sound after such a long time experimenting with different libraries and frameworks, this project is based upon the essential elements giving our work _real_ sense: [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML), [Sass](https://sass-lang.com/) (also known as "CSS with superpowers". Woah!), and minimal usage of [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript). Back to the roots, guys. 51 | 52 | Undoubtedly (and before someone tries to kill me), CSS is among the core languages of the open web and is standardized across Web browsers, as we all know. When it comes to Sass, it's usually described as the most mature, stable, and powerful professional-grade CSS extension language in the world. Actively supported and developed by a consortium of several tech companies and hundreds of developers, there are an endless number of frameworks built with Sass, like [Bootstrap](https://getbootstrap.com/), for instance. Quite an interesting frontend toolkit, in my opinion. 53 | 54 | Independently of that, and just in case you are not familiar with Sass, I would highly recommend giving the [New Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass) a try now that the old one is deprecated. Keep something in mind, though: there is no "best" here. If anything, the "best" option will always be the one that fits _your specific needs_ better, so feel free to give different tools until you find **the** one for your future project! 55 | 56 | --- 57 | 58 | # 🚪 Introduction 59 | 60 | Looking for a job should indeed be considered a job in itself. Regardless of how pessimistic the previous statement might sound, I've never experienced something as depressing, draining, and exhausting as trying to find _something_, whatever it is, wherever it is. 61 | 62 | Some months ago, during quite a casual conversation with a senior programmer who allowed me to express my doubts, insecurities, and fears regarding the sector itself, he highlighted the importance of having not only a well-structured curriculum (or LinkedIn page) but an even better organized, clean, and polished portfolio. "Recruiters do not have the time". "Only keywords matter". "Some positions are not truly open, in the end". Although I always kept this portfolio idea in mind (you can find my own one [here](https://karamazfolio.xyz/), in case you are curious), recruiters' minds and behaviors are still a mystery to me - and I am _not_ the only one feeling lost and vulnerable. 63 | 64 | Certificates. Trainings. Degrees. We have a huge vested interest in them, partly because it's education that's meant to take us into this future that we can't grasp. I am not denying the inherent truth of it, though; a solid education is a pretty easy thing to carry around, yet our approach to education requires a deep reform. Similarly, the lack of educational and professional opportunities should be discussed and addressed, but that's a story for another night. Today, we'll focus on the importance of portfolios, which may significantly define our success while trying to find an opportunity. 65 | 66 | ![Maria's portfolio.](/assets/screenshots/MariaBrioPortfolio-01.png) 67 | 68 | After admiring the above image, I would _definitely_ hire such a professional, for instance - no matter the barriers to job success we all face. 69 | 70 | --- 71 | 72 | # 💾 Content 73 | 74 | Some of you are _naturals_ here; don't dare try to fool me. Now, can you guess what's inside this "metaphorical floppy disk", aka [the beautiful portfolio I made for Maria Brió Pérez](https://mariabrio.vercel.app)? Fear not: we will keep it as simplified and accessible as usual. 75 | 76 | | Section | Description | 77 | |-------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 78 | | **About** | ℹ️ _Who is this person we have in front of us?_ As it's simply essential these days, the first sections translate into a **brief introduction** displaying a profile picture, some crucial information, and different contact and professional platforms: from her [LinkedIn](https://www.linkedin.com/in/mariabrioperez/) to her [Orcid](https://orcid.org/0000-0002-6328-9556) account, a site connecting research and researchers. You can even access her [doctoral thesis](https://research.utwente.nl/en/publications/a-journey-towards-responsive-and-circular-polymer-brushes-design-) or [download her CV](/assets/MariaBrioPerez-CV.pdf) from there! | 79 | | **Skills** | 🛠️ **Technical expertise**, **project management**, **software**, **languages**... you name it! Everything has been organized under the shape of an **accordion** in order to make information as accessible as readable. | 80 | | **Experience** | 💼 Education? Work? Here, you'll find **both options**, with the proper experience displayed as a visual timeline. You have no excuse now, recruiters! | 81 | | **Articles** | 📑 Undoubtedly, articles are an essential part of the doctoral process. Although Maria already _nailed_ her oral defense (_believe me: I watched it, and it was impeccable_), she also published **several research articles**, just like the ones you can find in [Orcid](https://orcid.org/0000-0002-6328-9556). Here, we're only displaying the most recent ones, but it seemed a great idea to integrate them as visually and interactively as possible. | 82 | | **Contact** | ☎️ Phone numbers, email addresses... and a **form**! A contact form that actually **works**! Is this... magic, maybe...? | 83 | 84 | --- 85 | 86 | # 🔮 Features 87 | 88 | Similarly to many other examples that have become extremely popular these days, I decided to organize this portfolio following the structure of a **landing page** - and believe me when I say that back in the day, landing pages triggered some of my worst nightmares as someone just getting started! 89 | 90 | Those, however, were extremely simple yet not functional at all. Beautiful? Yes. A blank page? Yes, again. That's definitely not the case occupying us today, though. 91 | 92 | ## 🌒 Day'n'Nite 93 | 94 | Just as it's mandatory these days, I incorporated a **theme switcher** to enhance the visual appeal for readers and nocturnal creatures of the interwebz, which will hopefully allow users to personalize their viewing experience based on their preferences. 95 | 96 | ![Dark mode.](/assets/screenshots/MariaBrioPortfolio-02.png) 97 | 98 | ## 📬 EmailJS 99 | 100 | What makes [EmailJS](https://www.emailjs.com/) great is the fact that it keeps things simple. This beautiful tool helps to send emails using client-side technologies only. No server is required – just connect EmailJS to one of the supported email services, create an email template, and use one of their SDK libraries to trigger an email. Boom! That's it! 101 | 102 | 103 | ![EmailJS integration.](/assets/screenshots/MariaBrioPortfolio-03.png) 104 | 105 | In case you are curious about the implementation itself, don't hesitate to inspect the [main.js file](/js/main.js): 106 | 107 | ```javascript 108 | /* Mail integration */ 109 | document.addEventListener("DOMContentLoaded", function() { 110 | emailjs.init("YOUR_USER_ID") 111 | }) 112 | 113 | document.getElementById('contact-form').addEventListener('submit', function(event) { 114 | event.preventDefault() 115 | 116 | emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', this) 117 | .then(function(response) { 118 | console.log('Success!', response.status, response.text) 119 | alert('Email sent successfully!') 120 | document.getElementById('contact-form').reset() 121 | }, function(error) { 122 | console.log('Failed...', error) 123 | alert('Email sending failed.') 124 | }) 125 | }) 126 | ``` 127 | 128 | > [!NOTE] 129 | > Needless to say, the [original documentation](https://www.emailjs.com/docs/) is worth your time, guys - but as you can see, integrating EmailJS into your project couldn't be easier! 130 | 131 | ## 📜 Single page 132 | 133 | Truth said, one of the factors allowing me to realize that I'm indeed _evolving into the Lola Flores of the coding sector_ is that now, I can tell when I should (or shouldn't) overcomplicate my life. As programmers, our main goal is solving problems - and not all issues require the same tools, not even intricate ones. 134 | 135 | In this case, the idea I had in mind was simple: a clean, minimalist, compact portfolio allowing users to get a clear insight into who Maria _is_ as a professional. That's why, independently of my toxic relationship with React, NextJS, or Astro, I chose my best warriors: the tools that started it all. My coding roots, so to speak. 136 | 137 | ![Single page portfolio.](/assets/screenshots/MariaBrioPortfolio-04.png) 138 | 139 | ## 🖼️ Swiper 140 | 141 | Swiper is considered one of the most modern free and open-source mobile touch slider with hardware-accelerated transitions - websites, web apps, and mobile native/hybrid apps are no exception! 142 | 143 | In this case, I found it to be an extremely useful tool to display some of Maria's most recent works instead of listing them: 144 | 145 | ![Swiper integration.](/assets/screenshots/MariaBrioPortfolio-05.png) 146 | 147 | > [!NOTE] 148 | > If you don't want to include Swiper files in your project, remember that you may use it from CDN instead. For more information, here's the link to [Swiper's docs](https://swiperjs.com/get-started). 149 | 150 | --- 151 | 152 | # 💄 Style 153 | 154 | As stated in the previous sections, what inspired the creation of this project was, on the one hand, the **importance and weight that these websites gained in recent times**, as no one would dare doubt that a career portfolio can help illustrate our professional accomplishments, talents, abilities, and attitudes to prospective employers. However, that's definitely not the entire story. 155 | 156 | Job searching puts you in a dark place. Day in and day out, you find yourself going through postings and getting asked to do some online assessments, but you rarely get any calls for interviews. We all know the theory: "Take care of your physical, mental, and emotional needs". "Seek support". "Separate your identity from your job status". We all try, yet it feels we are somehow failing at staying focused, as this vicious cycle of constant silence and rejection doesn't truly allow us to see the light at the end of the tunnel. 157 | 158 | Although these thoughts never leave my mind, today I woke up thinking of the **incredibly talented professionals** I have around - and **Maria** was the first example that came to mind. In all honesty, I highly doubt any employer could find someone as devoted, rigorous, attentive, and capable as she is. 159 | 160 | After having my coffee, **I thought of her incredible curriculum**. Many articles and professional successes came to mind, too. For whatever reason, **I imagined a clean, simple, and minimalist platform allowing recruiters to find some useful keywords**, then **jumping into her CV** and finding the woman _I_ see. The professional that _I know_. A simple portfolio built on HTML, Sass, and JavaScript seemed to be the ideal way of expressing not only achievements but also attitudes and intentions. "Green, green... sounds 'sustainable' enough. How about green, then? And her articles... I would love people to _see_ them in the most direct way possible!" Immediately after my coffee, I started working. Why? Oh, my, my... 161 | 162 | This person, who happens to be the main protagonist of today's repository, is an **outstanding professional**, indeed. She's even better as a person, though - and if this little "gift" can bring a smile to her face, I can consider myself more than satisfied. She does not deserve less. If anything, she **deserves to be seen and valued**. 163 | 164 | --- 165 | 166 | # 🥳 Immense thanks to them awesome Sponsors 167 | 168 | Now that I irremediably entered the emotional zone, let's not forget that these words, projects, and general mayhem wouldn't exist without the presence, help, and patience of my amazing Sponsor,`@Entreprises LEMRHALI` - the one who gave me an opportunity when others didn't. Funnily enough, I just mentioned that my dear Doctor Maria deserves to be seen and valued, yet I am not quite good at paying attention to my own words and advice. 169 | 170 | As you surely know by now, that's only part of the process; eventually, we will all start seeing, understanding, and appreciating the real value inside of us - you included. Because you don't deserve less, either. 171 | 172 | For the past, present, and future moments, `thank you`. You are an extremely beautiful human being. 173 | 174 |

175 | Original Lemrhali Entreprises logo. 177 |

178 | 179 | --- 180 | 181 | # 🏛 License & Copyright 182 | 183 | God save our [MIT License](LICENSE.txt) and its infinite benevolence! It burns! That said, and only if you enjoyed the beautiful portfolio you found here, remember that you can make the Dinosaur of the Depths extremely happy if you... 184 |
185 | 186 | --- 187 | 188 |

189 | Original Karama logo asset. 190 |

191 |

192 | Buy Me A Coffee 193 |

194 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); 2 | :root { 3 | --header-height: 3rem; 4 | /* Colors */ 5 | --hue-color: 169; 6 | --first-color: hsl(var(--hue-color), 26%, 75%); 7 | --first-color-second: hsl(166, 30%, 56%); 8 | --first-color-alt: hsl(167, 43%, 64%); 9 | --first-color-lighter: hsl(167, 13%, 43%); 10 | --title-color: hsl(var(--hue-color), 8%, 15%); 11 | --text-color: hsl(var(--hue-color), 8%, 45%); 12 | --text-color-light: hsl(var(--hue-color), 8%, 65%); 13 | --input-color: hsl(var(--hue-color), 70%, 96%); 14 | --body-color: hsl(var(--hue-color), 60%, 99%); 15 | --container-color: #fff; 16 | --scroll-bar-color: hsl(var(--hue-color), 12%, 90%); 17 | --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%); 18 | /* Font & typography */ 19 | --body-font: "Poppins", sans-serif; 20 | --big-font-size: 2rem; 21 | --h1-font-size: 1.5rem; 22 | --h2-font-size: 1.25rem; 23 | --h3-font-size: 1.125rem; 24 | --normal-font-size: 0.938rem; 25 | --small-font-size: 0.813rem; 26 | --smaller-font-size: 0.75rem; 27 | /* Font weight */ 28 | --font-lighter: 200; 29 | --font-medium: 500; 30 | --font-semi-bold: 600; 31 | /* Margins Bottom */ 32 | --mb-0-25: 0.25rem; 33 | --mb-0-5: 0.5rem; 34 | --mb-0-75: 0.75rem; 35 | --mb-1: 1rem; 36 | --mb-1-5: 1.5rem; 37 | --mb-2: 2rem; 38 | --mb-2-5: 2.5rem; 39 | --mb-3: 3rem; 40 | /* z index */ 41 | --z-tooltip: 99; 42 | --z-fixed: 999; 43 | --z-modal: 9999; 44 | } 45 | 46 | /* Font size (large devices) */ 47 | @media screen and (min-width: 968px) { 48 | :root { 49 | --big-font-size: 3rem; 50 | --h1-font-size: 2.25rem; 51 | --h2-font-size: 1.5rem; 52 | --h3-font-size: 1.25rem; 53 | --normal-font-size: 1rem; 54 | --small-font-size: 0.875rem; 55 | --smaller-font-size: 0.813rem; 56 | } 57 | } 58 | /* Dark mode */ 59 | body.dark-theme { 60 | --first-color-second: hsl(167, 24%, 42%); 61 | --first-color-lighter: hsl(210, 11%, 25%); 62 | --title-color: hsl(var(--hue-color), 8%, 95%); 63 | --text-color: hsl(var(--hue-color), 8%, 75%); 64 | --input-color: hsl(167, 25%, 39%); 65 | --body-color: hsl(210, 11%, 25%); 66 | --container-color: hsl(var(--hue-color), 29%, 16%); 67 | --scroll-bar-color: hsl(var(--hue-color), 12%, 48%); 68 | --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%); 69 | } 70 | 71 | /* Base */ 72 | * { 73 | box-sizing: border-box; 74 | margin: 0; 75 | padding: 0; 76 | } 77 | 78 | html { 79 | scroll-behavior: smooth; 80 | } 81 | 82 | body { 83 | margin: 0 0 var(--header-height) 0; 84 | background-color: var(--body-color); 85 | color: var(--text-color); 86 | font-family: var(--body-font); 87 | font-size: var(--normal-font-size); 88 | } 89 | 90 | h1, 91 | h2, 92 | h3, 93 | h4 { 94 | color: var(--title-color); 95 | font-weight: var(--font-semi-bold); 96 | } 97 | 98 | ul { 99 | list-style: none; 100 | } 101 | 102 | a { 103 | text-decoration: none; 104 | } 105 | 106 | img { 107 | max-width: 100%; 108 | height: auto; 109 | } 110 | 111 | /* Dark/Light button */ 112 | .nav-btns { 113 | display: flex; 114 | align-items: center; 115 | } 116 | .nav-btns .change-theme { 117 | margin-right: var(--mb-1); 118 | color: var(--title-color); 119 | font-size: 1.25rem; 120 | cursor: pointer; 121 | } 122 | .nav-btns .change-theme:hover { 123 | color: var(--first-color); 124 | } 125 | 126 | /* Reusable CSS classes */ 127 | .section { 128 | padding: 2rem 0 4rem; 129 | } 130 | .section-title { 131 | font-size: var(--h1-font-size); 132 | } 133 | .section-subtitle { 134 | display: block; 135 | margin-bottom: var(--mb-3); 136 | font-size: var(--small-font-size); 137 | } 138 | .section-title, .section-subtitle { 139 | text-align: center; 140 | } 141 | 142 | /* Layout */ 143 | .container { 144 | max-width: 768px; 145 | margin-left: var(--mb-1-5); 146 | margin-right: var(--mb-1-5); 147 | } 148 | 149 | .grid { 150 | display: grid; 151 | gap: 1.5rem; 152 | } 153 | 154 | /* Header */ 155 | .header { 156 | position: fixed; 157 | width: 100%; 158 | bottom: 0; 159 | left: 0; 160 | background-color: var(--body-color); 161 | z-index: var(--z-fixed); 162 | } 163 | .header.scroll-header { 164 | box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15); 165 | } 166 | .header .nav { 167 | display: flex; 168 | max-width: 968px; 169 | height: var(--header-height); 170 | align-items: center; 171 | justify-content: space-between; 172 | } 173 | .header .nav-menu .active-link { 174 | color: var(--first-color); 175 | } 176 | .header .nav-menu.show-menu { 177 | bottom: 0; 178 | } 179 | .header .nav-logo, .header .nav-toggle { 180 | color: var(--title-color); 181 | font-size: 1.5rem; 182 | font-weight: var(--font-medium); 183 | } 184 | .header .nav-logo:hover, .header .nav-toggle:hover { 185 | color: var(--first-color); 186 | } 187 | .header .nav-toggle { 188 | font-size: 1.2rem; 189 | cursor: pointer; 190 | } 191 | .header .nav-list { 192 | grid-template-columns: repeat(3, 1fr); 193 | gap: 2rem; 194 | } 195 | .header .nav-link { 196 | display: flex; 197 | flex-direction: column; 198 | align-items: center; 199 | color: var(--title-color); 200 | font-size: var(--small-font-size); 201 | font-weight: var(--font-medium); 202 | transition: 0.3s; 203 | } 204 | .header .nav-link-icon { 205 | font-size: 1.2rem; 206 | } 207 | .header .nav-link:hover { 208 | color: var(--first-color); 209 | } 210 | .header .nav-close { 211 | position: absolute; 212 | right: 1.5rem; 213 | bottom: 0.7rem; 214 | color: var(--first-color); 215 | font-size: 1.5rem; 216 | cursor: pointer; 217 | } 218 | .header .nav-close:hover { 219 | color: var(--first-color-alt); 220 | } 221 | 222 | /* Home */ 223 | .home-container { 224 | gap: 1rem; 225 | } 226 | .home-container .home-content { 227 | grid-template-columns: 0.5fr 3fr; 228 | align-items: center; 229 | padding-top: 1.5rem; 230 | } 231 | .home-container .home-content .home-img .home-blob { 232 | width: 200px; 233 | fill: var(--first-color); 234 | } 235 | .home-container .home-content .home-img .home-blob-img { 236 | width: 170px; 237 | } 238 | .home-container .home-content .home-social { 239 | display: grid; 240 | grid-template-columns: max-content; 241 | row-gap: 1rem; 242 | } 243 | .home-container .home-content .home-social-icon { 244 | color: var(--first-color); 245 | font-size: 1.25rem; 246 | } 247 | .home-container .home-content .home-social-icon:hover { 248 | color: var(--first-color-alt); 249 | } 250 | .home-container .home-content .home-data { 251 | grid-column: 1/3; 252 | } 253 | .home-container .home-content .home-data-title { 254 | font-size: var(--big-font-size); 255 | } 256 | .home-container .home-content .home-data-subtitle { 257 | color: var(--text-color); 258 | margin-bottom: var(--mb-0-75); 259 | font-size: var(--h3-font-size); 260 | font-weight: var(--font-medium); 261 | } 262 | .home-container .home-content .home-data-description { 263 | margin-bottom: var(--mb-2); 264 | } 265 | .home-container .home-scroll { 266 | display: none; 267 | } 268 | .home-container .home-scroll-button { 269 | color: var(--first-color); 270 | transition: 0.3s; 271 | } 272 | .home-container .home-scroll-button:hover { 273 | transform: translateY(0.25rem); 274 | } 275 | .home-container .home-scroll-button-name { 276 | color: var(--title-color); 277 | margin-right: var(--mb-0-25); 278 | font-size: var(--small-font-size); 279 | font-weight: var(--font-medium); 280 | } 281 | .home-container .home-scroll-button-arrow { 282 | font-size: 1.25rem; 283 | } 284 | 285 | /* Buttons */ 286 | .button { 287 | display: inline-block; 288 | background-color: var(--first-color); 289 | border-radius: 0.5rem; 290 | border: none; 291 | color: #fff; 292 | font-size: medium; 293 | font-weight: var(--font-medium); 294 | padding: 1rem; 295 | cursor: pointer; 296 | } 297 | .button:hover { 298 | background-color: var(--first-color-alt); 299 | } 300 | .button-icon { 301 | margin-left: var(--mb-0-5); 302 | font-size: 1.25rem; 303 | transition: 0.3s; 304 | } 305 | 306 | .button-flex { 307 | display: inline-flex; 308 | align-items: center; 309 | cursor: pointer; 310 | } 311 | 312 | .button-small { 313 | padding: 0.75rem 1rem; 314 | } 315 | 316 | .button-white { 317 | background-color: #fff; 318 | color: var(--first-color); 319 | } 320 | .button-white:hover { 321 | background-color: #fff; 322 | } 323 | 324 | .button-link { 325 | background-color: transparent; 326 | color: var(--first-color); 327 | padding: 0; 328 | } 329 | .button-link:hover { 330 | background-color: transparent; 331 | color: var(--first-color-alt); 332 | } 333 | 334 | /* About section */ 335 | .about-container-img { 336 | display: flex; 337 | justify-content: center; 338 | } 339 | .about-container-imgAlt { 340 | width: 265px; 341 | border-radius: 0.5rem; 342 | } 343 | .about-container-data-description { 344 | margin-top: var(--mb-2); 345 | margin-bottom: var(--mb-2-5); 346 | text-align: center; 347 | } 348 | .about-container-data-info { 349 | display: flex; 350 | justify-content: space-evenly; 351 | margin-bottom: var(--mb-2-5); 352 | } 353 | .about-container-data-info div { 354 | text-align: center; 355 | } 356 | .about-container-data-info-title { 357 | color: var(--title-color); 358 | font-size: var(--h2-font-size); 359 | font-weight: var(--font-semi-bold); 360 | } 361 | .about-container-data-info-name { 362 | font-size: var(--smaller-font-size); 363 | } 364 | .about-container-data-info-title, .about-container-data-info-name { 365 | display: block; 366 | text-align: center; 367 | } 368 | .about-container .about-buttons { 369 | display: flex; 370 | justify-content: center; 371 | } 372 | .about-container .phd-link { 373 | margin-top: 25px; 374 | } 375 | 376 | /* Skills section */ 377 | .skills-container { 378 | display: grid; 379 | grid-template-columns: 1fr; 380 | gap: 2rem; 381 | } 382 | .skills-container-header { 383 | display: flex; 384 | margin-bottom: var(--mb-2); 385 | align-items: center; 386 | cursor: pointer; 387 | } 388 | .skills-container-header .skills-title { 389 | font-size: var(--h3-font-size); 390 | } 391 | .skills-container-header .skills-subtitle { 392 | color: var(--text-color-light); 393 | font-size: var(--small-font-size); 394 | } 395 | .skills-container-header .skills-icon, 396 | .skills-container-header .skills-arrow { 397 | color: var(--first-color); 398 | font-size: 2rem; 399 | } 400 | .skills-container-header .skills-arrow { 401 | margin-left: auto; 402 | transition: 0.4s; 403 | } 404 | .skills-container-header .skills-icon { 405 | margin-right: var(--mb-0-75); 406 | } 407 | .skills-container .skills-open .skills-list { 408 | height: -moz-max-content; 409 | height: max-content; 410 | margin-bottom: var(--mb-2-5); 411 | } 412 | .skills-container .skills-open .skills-arrow { 413 | transform: rotate(-180deg); 414 | } 415 | .skills-container .skills-close .skills-list { 416 | height: 0; 417 | overflow: hidden; 418 | } 419 | .skills-container .skills-list { 420 | row-gap: 1.5rem; 421 | padding: 0 2rem; 422 | } 423 | .skills-container .skills-titles { 424 | display: flex; 425 | margin-bottom: var(--mb-0-5); 426 | justify-content: space-between; 427 | } 428 | .skills-container .skills-name { 429 | font-size: var(--normal-font-size); 430 | font-weight: var(--font-medium); 431 | } 432 | .skills-container .skills-bar, 433 | .skills-container .skills-percentage { 434 | height: 5px; 435 | border-radius: 0.25rem; 436 | } 437 | .skills-container .skills-bar { 438 | background-color: var(--first-color-lighter); 439 | } 440 | .skills-container .skills-percentage { 441 | display: block; 442 | background-color: var(--first-color); 443 | } 444 | .skills-container .skills-polymer { 445 | width: 100%; 446 | } 447 | .skills-container .skills-experimental { 448 | width: 100%; 449 | } 450 | .skills-container .skills-sustainable { 451 | width: 100%; 452 | } 453 | .skills-container .skills-matlab { 454 | width: 90%; 455 | } 456 | .skills-container .skills-latex { 457 | width: 90%; 458 | } 459 | .skills-container .skills-adobe { 460 | width: 90%; 461 | } 462 | .skills-container .skills-imagej { 463 | width: 90%; 464 | } 465 | .skills-container .skills-office { 466 | width: 100%; 467 | } 468 | .skills-container .skills-coordinating { 469 | width: 100%; 470 | } 471 | .skills-container .skills-lean { 472 | width: 100%; 473 | } 474 | .skills-container .skills-mentoring { 475 | width: 95%; 476 | } 477 | .skills-container .skills-spanish { 478 | width: 100%; 479 | } 480 | .skills-container .skills-catalan { 481 | width: 100%; 482 | } 483 | .skills-container .skills-english { 484 | width: 90%; 485 | } 486 | .skills-container .skills-dutch { 487 | width: 60%; 488 | } 489 | .skills-container .skills-japanese { 490 | width: 40%; 491 | } 492 | 493 | /* Experience section */ 494 | .experience-tabs { 495 | display: flex; 496 | margin-bottom: var(--mb-2); 497 | justify-content: space-evenly; 498 | } 499 | .experience-tabs-button { 500 | font-size: var(--h3-font-size); 501 | font-weight: var(--font-medium); 502 | cursor: pointer; 503 | } 504 | .experience-tabs-button:hover { 505 | color: var(--first-color); 506 | } 507 | .experience-tabs-button .experience-icon { 508 | margin-right: var(--mb-0-25); 509 | font-size: 1.8rem; 510 | } 511 | .experience-tabs-button.experience-active { 512 | color: var(--first-color); 513 | } 514 | 515 | .experience [data-content] { 516 | display: none; 517 | } 518 | 519 | .experience-active[data-content] { 520 | display: block; 521 | } 522 | 523 | .experience-data { 524 | display: grid; 525 | grid-template-columns: 1fr max-content 1fr; 526 | } 527 | .experience-data-alt { 528 | text-align: center; 529 | } 530 | .experience-data .experience-title { 531 | font-size: var(--normal-font-size); 532 | font-weight: var(--font-medium); 533 | } 534 | .experience-data .experience-subtitle { 535 | display: inline-block; 536 | margin-bottom: var(--mb-1); 537 | font-size: var(--small-font-size); 538 | } 539 | .experience-data .experience-calendar { 540 | color: var(--text-color-light); 541 | font-size: var(--smaller-font-size); 542 | } 543 | .experience-data .experience-rounder { 544 | display: inline-block; 545 | width: 13px; 546 | height: 13px; 547 | background-color: var(--first-color); 548 | border-radius: 50%; 549 | } 550 | .experience-data .experience-line { 551 | display: block; 552 | width: 1px; 553 | height: 100%; 554 | background-color: var(--first-color); 555 | transform: translate(6px, -7px); 556 | } 557 | 558 | /* Articles section */ 559 | .articles-container { 560 | overflow: initial; 561 | } 562 | .articles-container .articles-content { 563 | padding: 0 1.5rem; 564 | } 565 | .articles-container .articles-content .articles-img { 566 | width: 265px; 567 | border-radius: 0.5rem; 568 | justify-self: center; 569 | } 570 | .articles-container .articles-content .articles-title { 571 | margin-bottom: var(--mb-0-5); 572 | font-size: var(--h3-font-size); 573 | } 574 | .articles-container .articles-content .articles-description { 575 | margin-bottom: var(--mb-0-75); 576 | } 577 | .articles-container .articles-content .articles-button:hover .button-icon { 578 | transform: translateX(0.45rem); 579 | } 580 | .articles-container .swiper-button-prev::after, 581 | .articles-container .swiper-button-next::after { 582 | content: ""; 583 | } 584 | .articles-container .swiper-articles-icon { 585 | color: var(--first-color); 586 | font-size: 2rem; 587 | } 588 | .articles-container .swiper-button-next { 589 | right: -0.5rem; 590 | } 591 | .articles-container .swiper-button-prev { 592 | left: -0.5rem; 593 | } 594 | 595 | .swiper-container-horizontal > .swiper-pagination-bullets { 596 | bottom: -2.5rem; 597 | } 598 | 599 | .swiper-pagination-bullet-active { 600 | background-color: var(--first-color); 601 | } 602 | 603 | .swiper-button-next, 604 | .swiper-button-prev, 605 | .swiper-pagination-bullet { 606 | outline: none; 607 | } 608 | 609 | /* Contact section */ 610 | .contact-container { 611 | row-gap: 3rem; 612 | } 613 | .contact-container .contact-information { 614 | display: flex; 615 | margin-bottom: var(--mb-2); 616 | justify-content: center; 617 | text-align: center; 618 | } 619 | .contact-container .contact-information .contact-icon { 620 | margin-right: var(--mb-0-75); 621 | color: var(--first-color); 622 | font-size: 2rem; 623 | } 624 | .contact-container .contact-information .contact-title { 625 | font-size: var(--h3-font-size); 626 | font-weight: var(--font-medium); 627 | } 628 | .contact-container .contact-information .contact-subtitle { 629 | color: var(--text-color-light); 630 | font-size: var(--small-font-size); 631 | text-decoration: none; 632 | } 633 | .contact-container .contact-content { 634 | background-color: var(--input-color); 635 | border-radius: 0.5rem; 636 | padding: 0.75rem 1rem 0.25rem; 637 | } 638 | .contact-container .contact-content .contact-label { 639 | color: var(--title-color); 640 | font-size: var(--smaller-font-size); 641 | } 642 | .contact-container .contact-content .contact-input { 643 | width: 100%; 644 | background-color: var(--input-color); 645 | border: none; 646 | color: var(--text-color); 647 | font-family: var(--body-font); 648 | font-size: var(--normal-font-size); 649 | outline: none; 650 | padding: 0.25rem 0.5rem 0.5rem 0; 651 | } 652 | 653 | /* Footer */ 654 | .footer { 655 | padding-top: 2rem; 656 | } 657 | .footer-bg { 658 | background-color: var(--first-color-second); 659 | padding: 2rem 0 3rem; 660 | } 661 | .footer-container { 662 | row-gap: 3.5rem; 663 | } 664 | .footer-container .footer-title { 665 | margin-bottom: var(--mb-0-25); 666 | font-size: var(--h1-font-size); 667 | } 668 | .footer-container .footer-subtitle { 669 | font-size: var(--small-font-size); 670 | } 671 | .footer-container .footer-links { 672 | display: flex; 673 | flex-direction: column; 674 | row-gap: 1.5rem; 675 | } 676 | .footer-container .footer-links .footer-link:hover { 677 | color: var(--first-color-lighter); 678 | } 679 | .footer-container .footer-social { 680 | margin-right: var(--mb-1-5); 681 | font-size: 1.25rem; 682 | } 683 | .footer-container .footer-social:hover { 684 | color: var(--first-color-lighter); 685 | } 686 | .footer .footer-copy { 687 | margin-top: var(--mb-3); 688 | color: #fff; 689 | font-size: var(--smaller-font-size); 690 | text-align: center; 691 | } 692 | .footer .footer-title, 693 | .footer .footer-subtitle, 694 | .footer .footer-link, 695 | .footer .footer-social { 696 | color: #fff; 697 | } 698 | 699 | /* Scroll-up */ 700 | .scrollup { 701 | position: fixed; 702 | right: 2.5rem; 703 | bottom: -20%; 704 | background-color: var(--first-color); 705 | border-radius: 0.4rem; 706 | opacity: 0.8; 707 | padding: 0.3rem 0.5rem; 708 | transition: 0.4s; 709 | z-index: var(--z-tooltip); 710 | } 711 | .scrollup-icon { 712 | color: #fff; 713 | font-size: 1.5rem; 714 | } 715 | .scrollup:hover { 716 | background-color: var(--first-color-alt); 717 | } 718 | 719 | .show-scroll { 720 | bottom: 3.5rem; 721 | right: 2.5rem; 722 | } 723 | 724 | /* Scroll bar */ 725 | ::-webkit-scrollbar { 726 | width: 0.6rem; 727 | background-color: var(--scroll-bar-color); 728 | border-radius: 0.5rem; 729 | } 730 | 731 | ::-webkit-scrollbar-thumb { 732 | background-color: var(--scroll-thumb-color); 733 | border-radius: 0.5rem; 734 | } 735 | ::-webkit-scrollbar-thumb:hover { 736 | background-color: var(--text-color-light); 737 | } 738 | 739 | /* MEDIA QUERIES */ 740 | /* Small devices */ 741 | @media screen and (max-width: 350px) { 742 | .container { 743 | margin-left: var(--mb-1-5); 744 | margin-right: var(--mb-1-5); 745 | } 746 | .container .nav-menu { 747 | padding: 2rem 0.25rem 4rem; 748 | } 749 | .container .nav-list { 750 | -moz-column-gap: 0; 751 | column-gap: 0; 752 | } 753 | .home-content { 754 | grid-template-columns: 0.25fr 3fr; 755 | } 756 | .home-content .home-blob { 757 | width: 180px; 758 | } 759 | .skills-title { 760 | font-size: var(--normal-font-size); 761 | } 762 | .experience-data { 763 | gap: 0.5rem; 764 | } 765 | } 766 | /* Nav-menu (medium devices) */ 767 | @media screen and (max-width: 768px) { 768 | .nav-menu { 769 | position: fixed; 770 | width: 100%; 771 | bottom: -100%; 772 | left: 0; 773 | background-color: var(--body-color); 774 | border-radius: 1.5rem 1.5rem 0 0; 775 | box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15); 776 | padding: 2rem 1.5rem 4rem; 777 | transition: 0.3s; 778 | } 779 | } 780 | /* Medium devices */ 781 | @media screen and (min-width: 568px) { 782 | .home-content { 783 | grid-template-columns: max-content 1fr 1fr !important; 784 | } 785 | .home-content .home-data { 786 | grid-column: initial !important; 787 | margin-top: 25px; 788 | margin-left: 25px; 789 | } 790 | .home-content .home-img { 791 | order: 1; 792 | justify-self: center; 793 | } 794 | .about-container, 795 | .articles-content { 796 | grid-template-columns: repeat(2, 1fr); 797 | } 798 | .about-container-imgAlt, 799 | .articles-content-imgAlt { 800 | width: 225px; 801 | height: 185px; 802 | margin-top: 25px; 803 | align-self: center; 804 | } 805 | .articles-content { 806 | align-items: center; 807 | } 808 | .experience-sections { 809 | display: grid; 810 | grid-template-columns: 0.8fr; 811 | justify-content: center; 812 | } 813 | .contact-items { 814 | display: flex; 815 | justify-content: space-around; 816 | } 817 | .contact-items .contact-information { 818 | align-items: center; 819 | } 820 | .contact-form { 821 | grid-template-columns: 1fr; 822 | } 823 | .contact-form .contact-inputs { 824 | grid-template-columns: 1fr 1fr; 825 | } 826 | .contact-button { 827 | display: flex; 828 | align-items: center; 829 | justify-content: center; 830 | } 831 | .footer-container { 832 | grid-template-columns: repeat(3, 1fr); 833 | } 834 | .footer-container .footer-texts, 835 | .footer-container .footer-links, 836 | .footer-container .footer-socials { 837 | text-align: center; 838 | align-self: center; 839 | } 840 | .footer-container .footer-socials { 841 | display: flex; 842 | flex-direction: column; 843 | row-gap: 1rem; 844 | } 845 | } 846 | @media screen and (min-width: 768px) { 847 | .container { 848 | margin-left: auto; 849 | margin-right: auto; 850 | } 851 | body { 852 | margin: 0; 853 | } 854 | .header { 855 | top: 0; 856 | bottom: initial; 857 | padding: 1rem 2rem !important; 858 | } 859 | .section { 860 | padding: 8rem 0 2rem; 861 | } 862 | .header, 863 | .main, 864 | .footer-container { 865 | padding: 0 1rem; 866 | } 867 | .nav { 868 | -moz-column-gap: 1rem; 869 | column-gap: 1rem; 870 | } 871 | .nav .nav-list { 872 | display: flex; 873 | -moz-column-gap: 2rem; 874 | column-gap: 2rem; 875 | } 876 | .nav .nav-list .nav-link { 877 | font-size: var(--h3-font-size); 878 | font-weight: var(--font-lighter); 879 | } 880 | .nav .nav-link-icon, 881 | .nav .nav-close, 882 | .nav .nav-toggle { 883 | display: none; 884 | } 885 | .nav .change-theme { 886 | margin: 0; 887 | } 888 | .home-container { 889 | row-gap: 5rem; 890 | } 891 | .home-container .home-content { 892 | -moz-column-gap: 2rem; 893 | column-gap: 2rem; 894 | padding-top: 5rem; 895 | } 896 | .home-container .home-content .home-img .home-blob { 897 | width: 270px; 898 | fill: var(--first-color); 899 | } 900 | .home-container .home-content .home-img .home-blob-img { 901 | width: 170px; 902 | } 903 | .about-container { 904 | -moz-column-gap: 5rem; 905 | column-gap: 5rem; 906 | } 907 | .about-container-imgAlt { 908 | width: 350px; 909 | height: 250px; 910 | } 911 | .about-container-data-description { 912 | text-align: initial; 913 | } 914 | .about-container-data-info { 915 | justify-content: space-between; 916 | } 917 | .skills-container { 918 | grid-template-columns: 1fr 1fr; 919 | } 920 | .experience-sections { 921 | grid-template-columns: 0.5fr; 922 | } 923 | .experience-tabs { 924 | justify-content: center; 925 | } 926 | .experience-tabs-button { 927 | margin: 0 var(--mb-1-5); 928 | } 929 | .articles-img { 930 | width: 320px !important; 931 | } 932 | .articles-content { 933 | align-items: center; 934 | } 935 | } 936 | /* Large devices */ 937 | @media screen and (min-width: 1024px) { 938 | .header, 939 | .main, 940 | .footer-container { 941 | padding: 0; 942 | } 943 | .home-img .home-blob { 944 | width: 320px !important; 945 | fill: var(--first-color); 946 | } 947 | .home-img .home-blob-img { 948 | width: 170px; 949 | } 950 | .home-social { 951 | transform: translateX(-5rem); 952 | } 953 | .articles-container { 954 | margin-bottom: 2.5rem; 955 | } 956 | .articles-content { 957 | -moz-column-gap: 5rem; 958 | column-gap: 5rem; 959 | } 960 | .swiper-articles-icon { 961 | font-size: 3rem !important; 962 | } 963 | .swiper-button-prev { 964 | left: -3.5rem !important; 965 | } 966 | .swiper-button-next { 967 | right: -3.5rem !important; 968 | } 969 | .swiper-container-horizontal > .swiper-pagination-bullets { 970 | bottom: -4.5rem; 971 | } 972 | .footer-container { 973 | display: flex; 974 | justify-content: space-between; 975 | } 976 | .footer-container .footer-socials { 977 | display: flex; 978 | flex-direction: row; 979 | -moz-column-gap: 1rem; 980 | column-gap: 1rem; 981 | } 982 | .footer-links { 983 | display: flex; 984 | flex-direction: row !important; 985 | align-items: center; 986 | } 987 | .footer-links .footer-link { 988 | margin-left: var(--mb-1); 989 | } 990 | }/*# sourceMappingURL=styles.css.map */ -------------------------------------------------------------------------------- /scss/styles.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); 2 | @import "variables"; 3 | 4 | /* Base */ 5 | * { 6 | box-sizing: border-box; 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | html { 12 | scroll-behavior: smooth; 13 | } 14 | 15 | body { 16 | margin: 0 0 var(--header-height) 0; 17 | background-color: var(--body-color); 18 | color: var(--text-color); 19 | font-family: var(--body-font); 20 | font-size: var(--normal-font-size); 21 | } 22 | 23 | h1, 24 | h2, 25 | h3, 26 | h4 { 27 | color: var(--title-color); 28 | font-weight: var(--font-semi-bold); 29 | } 30 | 31 | ul { 32 | list-style: none; 33 | } 34 | 35 | a { 36 | text-decoration: none; 37 | } 38 | 39 | img { 40 | max-width: 100%; 41 | height: auto; 42 | } 43 | 44 | /* Dark/Light button */ 45 | .nav-btns { 46 | display: flex; 47 | align-items: center; 48 | 49 | .change-theme { 50 | margin-right: var(--mb-1); 51 | color: var(--title-color); 52 | font-size: 1.25rem; 53 | cursor: pointer; 54 | 55 | &:hover { 56 | color: var(--first-color); 57 | } 58 | } 59 | } 60 | 61 | /* Reusable CSS classes */ 62 | .section { 63 | padding: 2rem 0 4rem; 64 | 65 | &-title { 66 | font-size: var(--h1-font-size); 67 | } 68 | 69 | &-subtitle { 70 | display: block; 71 | margin-bottom: var(--mb-3); 72 | font-size: var(--small-font-size); 73 | } 74 | 75 | &-title, 76 | &-subtitle { 77 | text-align: center; 78 | } 79 | } 80 | 81 | /* Layout */ 82 | .container { 83 | max-width: 768px; 84 | margin-left: var(--mb-1-5); 85 | margin-right: var(--mb-1-5); 86 | 87 | } 88 | 89 | .grid { 90 | display: grid; 91 | gap: 1.5rem; 92 | } 93 | 94 | /* Header */ 95 | .header { 96 | position: fixed; 97 | width: 100%; 98 | bottom: 0; 99 | left: 0; 100 | background-color: var(--body-color); 101 | z-index: var(--z-fixed); 102 | 103 | &.scroll-header { 104 | box-shadow: 0 -1px 4px rgba(0, 0, 0, .15); 105 | } 106 | 107 | .nav { 108 | display: flex; 109 | max-width: 968px; 110 | height: var(--header-height); 111 | align-items: center; 112 | justify-content: space-between; 113 | 114 | &-menu { 115 | 116 | .active-link { 117 | color: var(--first-color); 118 | } 119 | 120 | &.show-menu { 121 | bottom: 0; 122 | } 123 | } 124 | 125 | &-logo, 126 | &-toggle { 127 | color: var(--title-color); 128 | font-size: 1.5rem; 129 | font-weight: var(--font-medium); 130 | 131 | &:hover { 132 | color: var(--first-color); 133 | } 134 | } 135 | 136 | &-toggle { 137 | font-size: 1.2rem; 138 | cursor: pointer; 139 | } 140 | 141 | &-list { 142 | grid-template-columns: repeat(3, 1fr); 143 | gap: 2rem; 144 | } 145 | 146 | &-link { 147 | display: flex; 148 | flex-direction: column; 149 | align-items: center; 150 | color: var(--title-color); 151 | font-size: var(--small-font-size); 152 | font-weight: var(--font-medium); 153 | transition: 0.3s; 154 | 155 | &-icon { 156 | font-size: 1.2rem; 157 | } 158 | 159 | &:hover { 160 | color: var(--first-color); 161 | } 162 | } 163 | 164 | &-close { 165 | position: absolute; 166 | right: 1.5rem; 167 | bottom: .7rem; 168 | color: var(--first-color); 169 | font-size: 1.5rem; 170 | cursor: pointer; 171 | 172 | &:hover { 173 | color: var(--first-color-alt); 174 | } 175 | } 176 | } 177 | } 178 | 179 | /* Home */ 180 | .home-container { 181 | gap: 1rem; 182 | 183 | .home-content { 184 | grid-template-columns: .5fr 3fr; 185 | align-items: center; 186 | padding-top: 1.5rem; 187 | 188 | .home-img { 189 | 190 | .home-blob { 191 | width: 200px; 192 | fill: var(--first-color); 193 | 194 | &-img { 195 | width: 170px; 196 | } 197 | } 198 | 199 | } 200 | 201 | .home-social { 202 | display: grid; 203 | grid-template-columns: max-content; 204 | row-gap: 1rem; 205 | 206 | &-icon { 207 | color: var(--first-color); 208 | font-size: 1.25rem; 209 | 210 | &:hover { 211 | color: var(--first-color-alt); 212 | } 213 | } 214 | } 215 | 216 | .home-data { 217 | grid-column: 1/3; 218 | 219 | &-title { 220 | font-size: var(--big-font-size); 221 | } 222 | 223 | &-subtitle { 224 | color: var(--text-color); 225 | margin-bottom: var(--mb-0-75); 226 | font-size: var(--h3-font-size); 227 | font-weight: var(--font-medium); 228 | } 229 | 230 | &-description { 231 | margin-bottom: var(--mb-2); 232 | } 233 | } 234 | } 235 | 236 | .home-scroll { 237 | display: none; 238 | 239 | &-button { 240 | color: var(--first-color); 241 | transition: 0.3s; 242 | 243 | &:hover { 244 | transform: translateY(.25rem); 245 | } 246 | 247 | &-name { 248 | color: var(--title-color); 249 | margin-right: var(--mb-0-25); 250 | font-size: var(--small-font-size); 251 | font-weight: var(--font-medium); 252 | } 253 | 254 | &-arrow { 255 | font-size: 1.25rem; 256 | } 257 | } 258 | } 259 | } 260 | 261 | /* Buttons */ 262 | .button { 263 | display: inline-block; 264 | background-color: var(--first-color); 265 | border-radius: .5rem; 266 | border: none; 267 | color: #fff; 268 | font-size: medium; 269 | font-weight: var(--font-medium); 270 | padding: 1rem; 271 | cursor: pointer; 272 | 273 | &:hover { 274 | background-color: var(--first-color-alt); 275 | } 276 | 277 | &-icon { 278 | margin-left: var(--mb-0-5); 279 | font-size: 1.25rem; 280 | transition: 0.3s; 281 | } 282 | } 283 | 284 | .button-flex { 285 | display: inline-flex; 286 | align-items: center; 287 | cursor: pointer; 288 | } 289 | 290 | .button-small { 291 | padding: .75rem 1rem; 292 | } 293 | 294 | .button-white { 295 | background-color: #fff; 296 | color: var(--first-color); 297 | 298 | &:hover { 299 | background-color: #fff; 300 | } 301 | } 302 | 303 | .button-link { 304 | background-color: transparent; 305 | color: var(--first-color); 306 | padding: 0; 307 | 308 | &:hover { 309 | background-color: transparent; 310 | color: var(--first-color-alt); 311 | } 312 | } 313 | 314 | /* About section */ 315 | .about-container { 316 | &-img { 317 | display: flex; 318 | justify-content: center; 319 | } 320 | 321 | &-imgAlt { 322 | width: 265px; 323 | border-radius: .5rem; 324 | } 325 | 326 | &-data-description { 327 | margin-top: var(--mb-2); 328 | margin-bottom: var(--mb-2-5); 329 | text-align: center; 330 | } 331 | 332 | &-data-info { 333 | display: flex; 334 | justify-content: space-evenly; 335 | margin-bottom: var(--mb-2-5); 336 | 337 | div { 338 | text-align: center; 339 | } 340 | 341 | &-title { 342 | color: var(--title-color); 343 | font-size: var(--h2-font-size); 344 | font-weight: var(--font-semi-bold); 345 | } 346 | 347 | &-name { 348 | font-size: var(--smaller-font-size); 349 | } 350 | 351 | &-title, 352 | &-name { 353 | display: block; 354 | text-align: center; 355 | } 356 | } 357 | 358 | .about-buttons { 359 | display: flex; 360 | justify-content: center; 361 | } 362 | 363 | .phd-link { 364 | margin-top: 25px; 365 | } 366 | } 367 | 368 | /* Skills section */ 369 | .skills-container { 370 | display: grid; 371 | grid-template-columns: 1fr; 372 | gap: 2rem; 373 | 374 | &-header { 375 | display: flex; 376 | margin-bottom: var(--mb-2); 377 | align-items: center; 378 | cursor: pointer; 379 | 380 | .skills-title { 381 | font-size: var(--h3-font-size); 382 | } 383 | 384 | .skills-subtitle { 385 | color: var(--text-color-light); 386 | font-size: var(--small-font-size); 387 | } 388 | 389 | .skills-icon, 390 | .skills-arrow { 391 | color: var(--first-color); 392 | font-size: 2rem; 393 | } 394 | 395 | .skills-arrow { 396 | margin-left: auto; 397 | transition: 0.4s; 398 | } 399 | 400 | .skills-icon { 401 | margin-right: var(--mb-0-75); 402 | } 403 | } 404 | 405 | .skills-open { 406 | .skills-list { 407 | height: max-content; 408 | margin-bottom: var(--mb-2-5); 409 | } 410 | 411 | .skills-arrow { 412 | transform: rotate(-180deg); 413 | } 414 | } 415 | 416 | .skills-close .skills-list { 417 | height: 0; 418 | overflow: hidden; 419 | } 420 | 421 | .skills-list { 422 | row-gap: 1.5rem; 423 | padding: 0 2rem; 424 | } 425 | 426 | .skills-titles { 427 | display: flex; 428 | margin-bottom: var(--mb-0-5); 429 | justify-content: space-between; 430 | } 431 | 432 | .skills-name { 433 | font-size: var(--normal-font-size); 434 | font-weight: var(--font-medium); 435 | } 436 | 437 | .skills-bar, 438 | .skills-percentage { 439 | height: 5px; 440 | border-radius: .25rem; 441 | } 442 | 443 | .skills-bar { 444 | background-color: var(--first-color-lighter); 445 | } 446 | 447 | .skills-percentage { 448 | display: block; 449 | background-color: var(--first-color); 450 | } 451 | 452 | .skills-polymer { width: 100%; } 453 | .skills-experimental { width: 100%; } 454 | .skills-sustainable { width: 100%; } 455 | .skills-matlab { width: 90%; } 456 | .skills-latex { width: 90%; } 457 | .skills-adobe { width: 90%; } 458 | .skills-imagej { width: 90%; } 459 | .skills-office { width: 100%; } 460 | .skills-coordinating { width: 100%; } 461 | .skills-lean { width: 100%; } 462 | .skills-mentoring { width: 95%; } 463 | .skills-spanish { width: 100%; } 464 | .skills-catalan { width: 100%; } 465 | .skills-english { width: 90%; } 466 | .skills-dutch { width: 60%; } 467 | .skills-japanese { width: 40%; } 468 | } 469 | 470 | /* Experience section */ 471 | .experience-tabs { 472 | display: flex; 473 | margin-bottom: var(--mb-2); 474 | justify-content: space-evenly; 475 | 476 | &-button { 477 | font-size: var(--h3-font-size); 478 | font-weight: var(--font-medium); 479 | cursor: pointer; 480 | 481 | &:hover { 482 | color: var(--first-color); 483 | } 484 | 485 | .experience-icon { 486 | margin-right: var(--mb-0-25); 487 | font-size: 1.8rem; 488 | } 489 | } 490 | 491 | &-button.experience-active { 492 | color: var(--first-color); 493 | } 494 | } 495 | 496 | .experience [data-content] { 497 | display: none; 498 | } 499 | 500 | .experience-active[data-content] { 501 | display: block; 502 | } 503 | 504 | .experience-data { 505 | display: grid; 506 | grid-template-columns: 1fr max-content 1fr; 507 | 508 | &-alt { 509 | text-align: center; 510 | } 511 | 512 | .experience-title { 513 | font-size: var(--normal-font-size); 514 | font-weight: var(--font-medium); 515 | } 516 | 517 | .experience-subtitle { 518 | display: inline-block; 519 | margin-bottom: var(--mb-1); 520 | font-size: var(--small-font-size); 521 | } 522 | 523 | .experience-calendar { 524 | color: var(--text-color-light); 525 | font-size: var(--smaller-font-size); 526 | } 527 | 528 | .experience-rounder { 529 | display: inline-block; 530 | width: 13px; 531 | height: 13px; 532 | background-color: var(--first-color); 533 | border-radius: 50%; 534 | } 535 | 536 | .experience-line { 537 | display: block; 538 | width: 1px; 539 | height: 100%; 540 | background-color: var(--first-color); 541 | transform: translate(6px, -7px); 542 | } 543 | } 544 | 545 | /* Articles section */ 546 | .articles-container { 547 | overflow: initial; 548 | 549 | .articles-content { 550 | padding: 0 1.5rem; 551 | 552 | .articles-img { 553 | width: 265px; 554 | border-radius: .5rem; 555 | justify-self: center; 556 | } 557 | 558 | .articles-title { 559 | margin-bottom: var(--mb-0-5); 560 | font-size: var(--h3-font-size); 561 | } 562 | 563 | .articles-description { 564 | margin-bottom: var(--mb-0-75); 565 | } 566 | 567 | .articles-button:hover .button-icon { 568 | transform: translateX(.45rem); 569 | } 570 | } 571 | 572 | .swiper-button-prev::after, 573 | .swiper-button-next::after { 574 | content: ''; 575 | } 576 | 577 | .swiper-articles-icon { 578 | color: var(--first-color); 579 | font-size: 2rem; 580 | } 581 | 582 | .swiper-button-next { 583 | right: -.5rem; 584 | } 585 | 586 | .swiper-button-prev { 587 | left: -.5rem; 588 | } 589 | } 590 | 591 | .swiper-container-horizontal>.swiper-pagination-bullets { 592 | bottom: -2.5rem; 593 | } 594 | 595 | .swiper-pagination-bullet-active { 596 | background-color: var(--first-color); 597 | } 598 | 599 | .swiper-button-next, 600 | .swiper-button-prev, 601 | .swiper-pagination-bullet { 602 | outline: none; 603 | } 604 | 605 | /* Contact section */ 606 | .contact-container { 607 | row-gap: 3rem; 608 | 609 | .contact-information { 610 | display: flex; 611 | margin-bottom: var(--mb-2); 612 | justify-content: center; 613 | text-align: center; 614 | 615 | .contact-icon { 616 | margin-right: var(--mb-0-75); 617 | color: var(--first-color); 618 | font-size: 2rem; 619 | } 620 | 621 | .contact-title { 622 | font-size: var(--h3-font-size); 623 | font-weight: var(--font-medium); 624 | } 625 | 626 | .contact-subtitle { 627 | color: var(--text-color-light); 628 | font-size: var(--small-font-size); 629 | text-decoration: none; 630 | } 631 | } 632 | 633 | .contact-content { 634 | background-color: var(--input-color); 635 | border-radius: .5rem; 636 | padding: .75rem 1rem .25rem; 637 | 638 | .contact-label { 639 | color: var(--title-color); 640 | font-size: var(--smaller-font-size); 641 | } 642 | 643 | .contact-input { 644 | width: 100%; 645 | background-color: var(--input-color); 646 | border: none; 647 | color: var(--text-color); 648 | font-family: var(--body-font); 649 | font-size: var(--normal-font-size); 650 | outline: none; 651 | padding: .25rem .5rem .5rem 0; 652 | } 653 | } 654 | } 655 | 656 | /* Footer */ 657 | .footer { 658 | padding-top: 2rem; 659 | 660 | &-bg { 661 | background-color: var(--first-color-second); 662 | padding: 2rem 0 3rem; 663 | } 664 | 665 | &-container { 666 | row-gap: 3.5rem; 667 | 668 | .footer-title { 669 | margin-bottom: var(--mb-0-25); 670 | font-size: var(--h1-font-size); 671 | } 672 | 673 | .footer-subtitle { 674 | font-size: var(--small-font-size); 675 | } 676 | 677 | .footer-links { 678 | display: flex; 679 | flex-direction: column; 680 | row-gap: 1.5rem; 681 | 682 | .footer-link:hover { 683 | color: var(--first-color-lighter); 684 | } 685 | } 686 | 687 | .footer-social { 688 | margin-right: var(--mb-1-5); 689 | font-size: 1.25rem; 690 | 691 | &:hover { 692 | color: var(--first-color-lighter); 693 | } 694 | } 695 | } 696 | 697 | .footer-copy { 698 | margin-top: var(--mb-3); 699 | color: #fff; 700 | font-size: var(--smaller-font-size); 701 | text-align: center; 702 | } 703 | 704 | .footer-title, 705 | .footer-subtitle, 706 | .footer-link, 707 | .footer-social { 708 | color: #fff; 709 | } 710 | } 711 | 712 | 713 | /* Scroll-up */ 714 | .scrollup { 715 | position: fixed; 716 | right: 2.5rem; 717 | bottom: -20%; 718 | background-color: var(--first-color); 719 | border-radius: .4rem; 720 | opacity: .8; 721 | padding: .3rem .5rem; 722 | transition: .4s; 723 | z-index: var(--z-tooltip); 724 | 725 | &-icon { 726 | color: #fff; 727 | font-size: 1.5rem; 728 | } 729 | 730 | &:hover { 731 | background-color: var(--first-color-alt); 732 | } 733 | } 734 | 735 | .show-scroll { 736 | bottom: 3.5rem; 737 | right: 2.5rem; 738 | } 739 | 740 | /* Scroll bar */ 741 | ::-webkit-scrollbar { 742 | width: .60rem; 743 | background-color: var(--scroll-bar-color); 744 | border-radius: .5rem; 745 | } 746 | 747 | ::-webkit-scrollbar-thumb { 748 | background-color: var(--scroll-thumb-color); 749 | border-radius: .5rem; 750 | 751 | &:hover { 752 | background-color: var(--text-color-light); 753 | } 754 | } 755 | 756 | /* MEDIA QUERIES */ 757 | /* Small devices */ 758 | @media screen and (max-width: 350px) { 759 | .container { 760 | margin-left: var(--mb-1-5); 761 | margin-right: var(--mb-1-5); 762 | 763 | .nav-menu { 764 | padding: 2rem .25rem 4rem; 765 | } 766 | 767 | .nav-list { 768 | column-gap: 0; 769 | } 770 | } 771 | 772 | .home-content { 773 | grid-template-columns: .25fr 3fr; 774 | 775 | .home-blob { 776 | width: 180px; 777 | } 778 | } 779 | 780 | .skills-title { 781 | font-size: var(--normal-font-size); 782 | } 783 | 784 | .experience-data { 785 | gap: .5rem; 786 | } 787 | } 788 | 789 | /* Nav-menu (medium devices) */ 790 | @media screen and (max-width: 768px) { 791 | .nav-menu { 792 | position: fixed; 793 | width: 100%; 794 | bottom: -100%; 795 | left: 0; 796 | background-color: var(--body-color); 797 | border-radius: 1.5rem 1.5rem 0 0; 798 | box-shadow: 0 -1px 4px rgba(0, 0, 0, .15); 799 | padding: 2rem 1.5rem 4rem; 800 | transition: 0.3s; 801 | } 802 | } 803 | 804 | /* Medium devices */ 805 | @media screen and (min-width: 568px) { 806 | .home-content { 807 | grid-template-columns: max-content 1fr 1fr !important; 808 | 809 | .home-data { 810 | grid-column: initial !important; 811 | margin-top: 25px; 812 | margin-left: 25px; 813 | } 814 | 815 | .home-img { 816 | order: 1; 817 | justify-self: center; 818 | } 819 | } 820 | 821 | .about-container, 822 | .articles-content { 823 | grid-template-columns: repeat(2, 1fr); 824 | 825 | &-imgAlt { 826 | width: 225px; 827 | height: 185px; 828 | margin-top: 25px; 829 | align-self: center; 830 | } 831 | } 832 | 833 | .articles-content { 834 | align-items: center; 835 | } 836 | 837 | .experience-sections { 838 | display: grid; 839 | grid-template-columns: .8fr; 840 | justify-content: center; 841 | } 842 | 843 | .contact-items { 844 | display: flex; 845 | justify-content: space-around; 846 | 847 | .contact-information { 848 | align-items: center; 849 | } 850 | } 851 | 852 | .contact-form { 853 | grid-template-columns: 1fr; 854 | 855 | .contact-inputs { 856 | grid-template-columns: 1fr 1fr; 857 | } 858 | } 859 | 860 | .contact-button { 861 | display: flex; 862 | align-items: center; 863 | justify-content: center; 864 | } 865 | 866 | .footer-container { 867 | grid-template-columns: repeat(3, 1fr); 868 | 869 | .footer-texts, 870 | .footer-links, 871 | .footer-socials { 872 | text-align: center; 873 | align-self: center; 874 | } 875 | 876 | .footer-socials { 877 | display: flex; 878 | flex-direction: column; 879 | row-gap: 1rem; 880 | } 881 | } 882 | } 883 | 884 | @media screen and (min-width: 768px) { 885 | .container { 886 | margin-left: auto; 887 | margin-right: auto; 888 | } 889 | 890 | body { 891 | margin: 0; 892 | } 893 | 894 | .header { 895 | top: 0; 896 | bottom: initial; 897 | padding: 1rem 2rem !important; 898 | } 899 | 900 | .section { 901 | padding: 8rem 0 2rem; 902 | } 903 | 904 | .header, 905 | .main, 906 | .footer-container { 907 | padding: 0 1rem; 908 | } 909 | 910 | .nav { 911 | column-gap: 1rem; 912 | 913 | .nav-list { 914 | display: flex; 915 | column-gap: 2rem; 916 | 917 | .nav-link { 918 | font-size: var(--h3-font-size); 919 | font-weight: var(--font-lighter); 920 | } 921 | } 922 | 923 | .nav-link-icon, 924 | .nav-close, 925 | .nav-toggle { 926 | display: none; 927 | } 928 | 929 | .change-theme { 930 | margin: 0; 931 | } 932 | } 933 | 934 | .home-container { 935 | row-gap: 5rem; 936 | 937 | .home-content { 938 | column-gap: 2rem; 939 | padding-top: 5rem; 940 | 941 | .home-img { 942 | 943 | .home-blob { 944 | width: 270px; 945 | fill: var(--first-color); 946 | 947 | &-img { 948 | width: 170px; 949 | } 950 | } 951 | } 952 | } 953 | } 954 | 955 | .about-container { 956 | column-gap: 5rem; 957 | 958 | &-imgAlt { 959 | width: 350px; 960 | height: 250px; 961 | } 962 | 963 | &-data-description { 964 | text-align: initial; 965 | } 966 | 967 | &-data-info { 968 | justify-content: space-between; 969 | } 970 | } 971 | 972 | .skills-container { 973 | grid-template-columns: 1fr 1fr; 974 | } 975 | 976 | .experience-sections { 977 | grid-template-columns: .5fr; 978 | } 979 | 980 | .experience-tabs { 981 | justify-content: center; 982 | 983 | &-button { 984 | margin: 0 var(--mb-1-5); 985 | } 986 | } 987 | 988 | .articles-img { 989 | width: 320px !important; 990 | } 991 | 992 | .articles-content { 993 | align-items: center; 994 | } 995 | } 996 | 997 | /* Large devices */ 998 | @media screen and (min-width: 1024px) { 999 | .header, 1000 | .main, 1001 | .footer-container { 1002 | padding: 0; 1003 | } 1004 | 1005 | .home-img { 1006 | 1007 | .home-blob { 1008 | width: 320px !important; 1009 | fill: var(--first-color); 1010 | 1011 | &-img { 1012 | width: 170px; 1013 | } 1014 | } 1015 | } 1016 | 1017 | .home-social { 1018 | transform: translateX(-5rem); 1019 | } 1020 | 1021 | .articles-container { 1022 | margin-bottom: 2.5rem; 1023 | } 1024 | 1025 | .articles-content { 1026 | column-gap: 5rem; 1027 | } 1028 | 1029 | .swiper-articles-icon { 1030 | font-size: 3rem !important; 1031 | } 1032 | 1033 | .swiper-button-prev { 1034 | left: -3.5rem !important; 1035 | } 1036 | 1037 | .swiper-button-next { 1038 | right: -3.5rem !important; 1039 | } 1040 | 1041 | .swiper-container-horizontal > .swiper-pagination-bullets { 1042 | bottom: -4.5rem; 1043 | } 1044 | 1045 | .footer-container { 1046 | display: flex; 1047 | justify-content: space-between; 1048 | 1049 | .footer-socials { 1050 | display: flex; 1051 | flex-direction: row; 1052 | column-gap: 1rem; 1053 | } 1054 | } 1055 | 1056 | .footer-links { 1057 | display: flex; 1058 | flex-direction: row !important; 1059 | align-items: center; 1060 | 1061 | .footer-link { 1062 | margin-left: var(--mb-1); 1063 | } 1064 | } 1065 | } 1066 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | Maria Brió Pérez | Portfolio 19 | 20 | 21 | 22 | 23 | 74 | 75 | 76 |
77 | 78 |
79 |
80 |
81 |
82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 |
92 |
93 | 95 | 96 | 100 | 101 | 102 | 106 | 107 | 108 | 109 |
110 |
111 |

Maria Brió Pérez

112 |

Chemical Engineer

113 |

High level experience in polymer chemistry and materials engineering.

114 | 115 | Contact Me 116 | 117 |
118 |
119 |
120 | 121 | Scroll down 122 | 123 | 124 |
125 |
126 |
127 | 128 | 129 |
130 |

About Me

131 | November, 1994 132 | 133 |
134 |
135 | 136 | PhD visual asset (cover). 137 | 138 |
139 | 140 |
141 |

Multidisciplinary Chemical Engineer with expertise in 142 | the development of innovative and sustainable materials, including environmentally responsive 143 | materials and recyclable coatings for industrial and biomedical applications.

144 | 145 |
146 |
147 | 5+ 148 | Years of
experience 149 |
150 |
151 | 9+ 152 | Published
articles 153 |
154 |
155 | 5+ 156 | Spoken
languages 157 |
158 |
159 |
160 | 161 | Download CV 162 | 163 |
164 |
165 |
166 |
167 | 168 | 169 |
170 |

Skills

171 | A brief overview 172 | 173 |
174 | 175 |
176 |
177 | 178 |
179 |

Technical expertise

180 |
181 | 182 |
183 |
184 |
185 |
186 |

Polymer synthesis

187 | 100% 188 |
189 |
190 | 191 |
192 |
193 |
194 |
195 |

Experimental design and characterization

196 | 100% 197 |
198 |
199 | 200 |
201 |
202 |
203 |
204 |

Sustainable materials and biodegradable polymers

205 | 100% 206 |
207 |
208 | 209 |
210 |
211 |
212 |
213 | 214 | 215 |
216 |
217 | 218 |
219 |

Project management

220 |
221 | 222 |
223 |
224 |
225 |
226 |

Coordinating cross-disciplinary projects

227 | 100% 228 |
229 |
230 | 231 |
232 |
233 |
234 |
235 |

Lean management (Green Belt certification)

236 | 100% 237 |
238 |
239 | 240 |
241 |
242 |
243 |
244 |

Mentoring and guiding research projects

245 | 95% 246 |
247 |
248 | 249 |
250 |
251 |
252 |
253 | 254 | 255 |
256 |
257 | 258 |
259 |

Software

260 |
261 | 262 |
263 |
264 |
265 |
266 |

Matlab

267 | 90% 268 |
269 |
270 | 271 |
272 |
273 |
274 |
275 |

LaTeX

276 | 90% 277 |
278 |
279 | 280 |
281 |
282 |
283 |
284 |

Adobe Illustrator

285 | 90% 286 |
287 |
288 | 289 |
290 |
291 |
292 |
293 |

ImageJ

294 | 90% 295 |
296 |
297 | 298 |
299 |
300 |
301 |
302 |

Microsoft Office

303 | 100% 304 |
305 |
306 | 307 |
308 |
309 |
310 |
311 | 312 | 313 |
314 |
315 | 316 |
317 |

Languages

318 |
319 | 320 |
321 |
322 |
323 |
324 |

Spanish

325 | Native 326 |
327 |
328 | 329 |
330 |
331 |
332 |
333 |

Catalan

334 | Native 335 |
336 |
337 | 338 |
339 |
340 |
341 |
342 |

English

343 | C1 proficiency 344 |
345 |
346 | 347 |
348 |
349 |
350 |
351 |

Dutch

352 | A2-B1 (ongoing) 353 |
354 |
355 | 356 |
357 |
358 |
359 |
360 |

Japanese

361 | A2 (N5) 362 |
363 |
364 | 365 |
366 |
367 |
368 |
369 |
370 |
371 | 372 | 373 |
374 |

Experience

375 | Professional journey 376 | 377 |
378 |
379 |
380 | 381 | Education 382 |
383 |
384 | 385 | Work 386 |
387 |
388 |
389 | 390 |
391 |
392 |
393 |

MSc.
Chemical Engineering, Molecular and Materials Engineering

394 | University of Twente 395 |
396 | 397 | 2018 - 2019 398 |
399 |
400 |
401 | 402 | 403 |
404 |
405 | 406 |
407 |
408 |
409 | 410 |
411 |
412 |

BSc.
Chemical Engineering

413 | University of Barcelona 414 |
415 | 416 | 2012 - 2017 417 |
418 |
419 |
420 |
421 | 422 | 423 |
424 |
425 |
426 |

PhD candidate

427 | University of Twente, Enschede 428 |
429 | 430 | 2020 - 2024 431 |
432 |
433 |
434 | 435 | 436 |
437 |
438 | 439 |
440 |
441 |
442 | 443 | 444 |
445 |
446 |

Research Fellowship

447 | Kansai University, Osaka 448 |
449 | 450 | 2023 451 |
452 |
453 |
454 | 455 |
456 |
457 |

Research Trainee

458 | Saxion University, Enschede 459 |
460 | 461 | 2019 462 |
463 |
464 |
465 | 466 | 467 |
468 |
469 | 470 |
471 |
472 |
473 | 474 | 475 |
476 |
477 |

Research Trainee

478 | University of Twente, Enschede 479 |
480 | 481 | 2017 - 2018 482 |
483 |
484 |
485 | 486 |
487 |
488 |

Research Intern

489 | LEITAT, Barcelona 490 |
491 | 492 | 2016 493 |
494 |
495 |
496 | 497 |
498 |
499 |
500 |
501 |
502 |
503 | 504 | 505 |
506 |

Articles

507 | Most recent work 508 | 509 |
510 |
511 | 512 |
513 | Articles 514 |
515 |

Creating Anti‐Biofouling Surfaces by Degradable Main‐chain Polyphosphoester Polymer Brushes

516 |

Advanced Functional Materials | 2024, April

517 | 518 | Read 519 | 520 |
521 |
522 | 523 |
524 | Articles 525 |
526 |

On the Road to Circular Polymer Brushes: Challenges and Prospects

527 |

Langmuir | 2024, April

528 | 529 | Read 530 | 531 |
532 |
533 | 534 |
535 | Articles 536 |
537 |

PNIPAM Brushes in Colloidal Photonic Crystals Enable Ex Situ Ethanol Vapor Sensing

538 |

ACS Applied Polymer Materials | 2024, January

539 | 540 | Read 541 | 542 |
543 |
544 |
545 |
546 | 547 |
548 |
549 | 550 |
551 |
552 |
553 |
554 | 555 | 556 |
557 |

Contact

558 | Let's get in touch 559 | 560 |
561 |
562 |
563 |
564 | 565 |
566 | Amersfoort, the Netherlands 567 |
568 |
569 |
570 |
571 | 572 |
573 | +31 651610284 574 |
575 |
576 |
577 |
578 | 579 |
580 | maria.brioperez@gmail.com 581 |
582 |
583 |
584 | 585 |
586 |
587 |
588 | 589 | 590 |
591 |
592 | 593 | 594 |
595 |
596 |
597 |
598 | 599 | 600 |
601 |
602 | 603 | 604 |
605 |
606 |
607 | 610 |
611 |
612 |
613 |
614 |
615 | 616 | 617 | 651 | 652 | 653 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 | --------------------------------------------------------------------------------