├── .gitignore ├── assets ├── img │ ├── blog │ │ ├── macbook.jpeg │ │ └── metrics.jpeg │ ├── general │ │ ├── profil.png │ │ ├── favicon.png │ │ ├── website.png │ │ ├── illustration.png │ │ └── blob.svg │ ├── certifications │ │ ├── ibm.png │ │ ├── coursera.png │ │ ├── freeCodeCamp.png │ │ ├── cognitiveClass.png │ │ └── deeplearningai.png │ └── projects │ │ ├── project-1.png │ │ ├── project-2.png │ │ ├── project-3.png │ │ ├── project-4.png │ │ ├── project-5.png │ │ └── project-6.png ├── js │ ├── main.js │ └── scrollreveal.min.js └── css │ ├── swiper-bundle.min.css │ └── styles.css ├── LICENSE ├── README.md └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store -------------------------------------------------------------------------------- /assets/img/blog/macbook.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/blog/macbook.jpeg -------------------------------------------------------------------------------- /assets/img/blog/metrics.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/blog/metrics.jpeg -------------------------------------------------------------------------------- /assets/img/general/profil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/general/profil.png -------------------------------------------------------------------------------- /assets/img/general/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/general/favicon.png -------------------------------------------------------------------------------- /assets/img/general/website.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/general/website.png -------------------------------------------------------------------------------- /assets/img/certifications/ibm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/certifications/ibm.png -------------------------------------------------------------------------------- /assets/img/projects/project-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/projects/project-1.png -------------------------------------------------------------------------------- /assets/img/projects/project-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/projects/project-2.png -------------------------------------------------------------------------------- /assets/img/projects/project-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/projects/project-3.png -------------------------------------------------------------------------------- /assets/img/projects/project-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/projects/project-4.png -------------------------------------------------------------------------------- /assets/img/projects/project-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/projects/project-5.png -------------------------------------------------------------------------------- /assets/img/projects/project-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/projects/project-6.png -------------------------------------------------------------------------------- /assets/img/general/illustration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/general/illustration.png -------------------------------------------------------------------------------- /assets/img/certifications/coursera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/certifications/coursera.png -------------------------------------------------------------------------------- /assets/img/certifications/freeCodeCamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/certifications/freeCodeCamp.png -------------------------------------------------------------------------------- /assets/img/certifications/cognitiveClass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/certifications/cognitiveClass.png -------------------------------------------------------------------------------- /assets/img/certifications/deeplearningai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassine-rd/portfolio-website/HEAD/assets/img/certifications/deeplearningai.png -------------------------------------------------------------------------------- /assets/img/general/blob.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Yassine RODANI 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 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do 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 THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Personal portfolio website](https://yassine-rodani.info) 2 | 3 | ## ✨ Abstract 4 | 5 | When it comes to proving yourself professionally, documentation that provides proof of your accomplishments or samples of your work is crucial. Portfolios are a great way to demonstrate the competencies you would list on a resume or talk about in an interview — they allow you to ***show*** and not just ***tell***. 6 | 7 | ![Website image](/assets/img/general/website.png) 8 | 9 | ## 🎯 Project Aim 10 | 11 | This project involves building a responsive personal portfolio website that effectively highlights my diverse projects, extensive experience, and valuable skill set. 12 | 13 | ## 💻 Technologies 14 | 15 | ![HTML](https://img.shields.io/badge/HTML-%2312100E.svg?style=for-the-badge&logo=html5&logoColor=orange) 16 | ![CSS](https://img.shields.io/badge/CSS-%2312100E.svg?style=for-the-badge&logo=css3&logoColor=blue) 17 | ![Javascript](https://img.shields.io/badge/Javascript-%2312100E.svg?style=for-the-badge&logo=javascript&logoColor=yellow) 18 | ![SwiperJS](https://img.shields.io/badge/Swiper.JS-%2312100E.svg?style=for-the-badge&logo=Swiper&logoColor=9cf) 19 | ![ScrollRevealJS](https://img.shields.io/badge/ScrollReveal.JS-%2312100E.svg?style=for-the-badge&logo=ScrollReveal&logoColor=pink) 20 | ![TypedJS](https://img.shields.io/badge/Typed.JS-%2312100E.svg?style=for-the-badge&logo=Telegraph) 21 | 22 | ## 💡 Deployment 23 | 24 | You can access the website [here](https://yassine-website.netlify.app/). 25 | 26 | ## 💬 Contact 27 | 28 | For more information, please contact 29 | -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*==================== SHOWING & HIDING MENU ====================*/ 2 | const navMenu = document.getElementById("nav-menu"), 3 | navToggle = document.getElementById("nav-toggle"), 4 | navClose = document.getElementById("nav-close"); 5 | 6 | /*===== SHOW MENU =====*/ 7 | /* Checking if constant exists */ 8 | if (navToggle) { 9 | navToggle.addEventListener("click", () => { 10 | navMenu.classList.add("show-menu"); 11 | }); 12 | } 13 | 14 | /*===== HIDE MENU =====*/ 15 | /* Checking if constant exists */ 16 | if (navClose) { 17 | navClose.addEventListener("click", () => { 18 | navMenu.classList.remove("show-menu"); 19 | }); 20 | } 21 | 22 | /*==================== REMOVING MOBILE MENU ====================*/ 23 | const navLink = document.querySelectorAll(".nav__link"); 24 | 25 | function linkAction() { 26 | const navMenu = document.getElementById("nav-menu"); 27 | // When we click on each nav__link, we remove the show-menu class 28 | navMenu.classList.remove("show-menu"); 29 | } 30 | navLink.forEach((n) => n.addEventListener("click", linkAction)); 31 | 32 | /*==================== SHOWING SKILLS ====================*/ 33 | const skillsContent = document.getElementsByClassName("skills__content"), 34 | skillsHeader = document.querySelectorAll(".skills__header"); 35 | 36 | function toggleSkills() { 37 | let itemClass = this.parentNode.className; 38 | 39 | for (i = 0; i < skillsContent.length; i++) { 40 | skillsContent[i].className = "skills__content skills__close"; 41 | } 42 | if (itemClass === "skills__content skills__close") { 43 | this.parentNode.className = "skills__content skills__open"; 44 | } 45 | } 46 | 47 | skillsHeader.forEach((el) => { 48 | el.addEventListener("click", toggleSkills); 49 | }); 50 | 51 | /*==================== QUALIFICATION TABS ====================*/ 52 | const tabs = document.querySelectorAll('[data-target]'), 53 | tabContents = document.querySelectorAll('[data-content]'); 54 | 55 | tabs.forEach(tab =>{ 56 | tab.addEventListener('click', () =>{ 57 | const target = document.querySelector(tab.dataset.target); 58 | 59 | tabContents.forEach(tabContent =>{ 60 | tabContent.classList.remove('qualification__active'); 61 | }) 62 | target.classList.add('qualification__active') 63 | 64 | tabs.forEach(tab => { 65 | tab.classList.remove('qualification__active') 66 | }) 67 | tab.classList.add('qualification__active') 68 | }) 69 | }) 70 | 71 | /*==================== PROJECTS SWIPER ====================*/ 72 | let projects_swiper = new Swiper('.projects__container', { 73 | cssMode: true, 74 | loop:true, 75 | 76 | navigation: { 77 | nextEl: '.swiper-button-next', 78 | prevEl: '.swiper-button-prev', 79 | }, 80 | pagination: { 81 | el: '.swiper-pagination', 82 | clickable: true, 83 | }, 84 | }); 85 | 86 | /*==================== BLOG SWIPER ====================*/ 87 | let blog_swiper = new Swiper('.blog__container', { 88 | cssMode: true, 89 | loop:true, 90 | 91 | navigation: { 92 | nextEl: '.swiper-button-next', 93 | prevEl: '.swiper-button-prev', 94 | }, 95 | pagination: { 96 | el: '.swiper-pagination', 97 | clickable: true, 98 | }, 99 | }); 100 | 101 | /*==================== SCROLLING THROUGH SECTIONS & ACTIVE LINK ====================*/ 102 | const sections = document.querySelectorAll('section[id]') 103 | 104 | function scrollActive(){ 105 | const scrollY = window.pageYOffset 106 | 107 | sections.forEach(current =>{ 108 | const sectionHeight = current.offsetHeight 109 | const sectionTop = current.offsetTop - 50; 110 | sectionId = current.getAttribute('id') 111 | 112 | if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){ 113 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link') 114 | }else{ 115 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link') 116 | } 117 | }) 118 | } 119 | window.addEventListener('scroll', scrollActive) 120 | 121 | /*==================== CHANGING HEADER BACKGROUND ====================*/ 122 | function scrollHeader(){ 123 | const nav = document.getElementById('header') 124 | // When the scroll is greater than 80 viewport height, add the scroll-header class to the header tag 125 | if(this.scrollY >= 80) nav.classList.add('scroll-header'); else nav.classList.remove('scroll-header') 126 | } 127 | window.addEventListener('scroll', scrollHeader) 128 | 129 | /*==================== SHOWING SCROLL UP BUTTON ====================*/ 130 | function scrollUp(){ 131 | const scrollUp = document.getElementById('scroll-up'); 132 | // When the scroll is higher than 560 viewport height, add the show-scroll class to the a tag with the scroll-top class 133 | if(this.scrollY >= 560) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll') 134 | } 135 | window.addEventListener('scroll', scrollUp) 136 | 137 | /*==================== DARK/LIGHT THEME ====================*/ 138 | const themeButton = document.getElementById('theme-button') 139 | const darkTheme = 'dark-theme' 140 | const iconTheme = 'uil-sun' 141 | 142 | // Previously selected theme 143 | const selectedTheme = localStorage.getItem('selected-theme') 144 | const selectedIcon = localStorage.getItem('selected-icon') 145 | 146 | // We obtain the current theme that the interface has by validating the dark-theme class 147 | const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light' 148 | const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'uil-moon' : 'uil-sun' 149 | 150 | // We validate if the user previously chose a theme 151 | if (selectedTheme) { 152 | document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme) 153 | themeButton.classList[selectedIcon === 'uil-moon' ? 'add' : 'remove'](iconTheme) 154 | } 155 | 156 | // Activate / deactivate the theme manually with the button 157 | themeButton.addEventListener('click', () => { 158 | // Add or remove the dark / icon theme 159 | document.body.classList.toggle(darkTheme) 160 | themeButton.classList.toggle(iconTheme) 161 | // We save the theme and the current icon that the user has chosen 162 | localStorage.setItem('selected-theme', getCurrentTheme()) 163 | localStorage.setItem('selected-icon', getCurrentIcon()) 164 | }) 165 | 166 | /*==================== MAIL SENDING ====================*/ 167 | 168 | var form = document.getElementById("my-form"); 169 | 170 | async function handleSubmit(event) { 171 | event.preventDefault(); 172 | var status = document.getElementById("contact__status"); 173 | var data = new FormData(event.target); 174 | fetch(event.target.action, { 175 | method: form.method, 176 | body: data, 177 | headers: { 178 | 'Accept': 'application/json' 179 | } 180 | }).then(response => { 181 | if (response.ok) { 182 | status.classList.add('success'); 183 | status.innerHTML = "Thanks for your submission !"; 184 | form.reset() 185 | } else { 186 | response.json().then(data => { 187 | if (Object.hasOwn(data, 'errors')) { 188 | status.classList.add('error'); 189 | status.innerHTML = data["errors"].map(error => error["message"]).join(", ") 190 | } else { 191 | status.classList.add('error'); 192 | status.innerHTML = "Oops! Something went wrong" 193 | } 194 | }) 195 | } 196 | }).catch(error => { 197 | status.innerHTML = "Oops! There was a problem submitting your form" 198 | }); 199 | } 200 | form.addEventListener("submit", handleSubmit) 201 | 202 | /*==================== SCROLL REVEAL ANIMATION ====================*/ 203 | const sr_right = ScrollReveal({ 204 | origin: 'right', 205 | distance: '50px', 206 | duration: 2500, 207 | }) 208 | 209 | sr_right.reveal('.home__img', {distance: '120px'}) 210 | sr_right.reveal('.home__data') 211 | 212 | const sr_left = ScrollReveal({ 213 | origin: 'left', 214 | distance: '50px', 215 | duration: 2500, 216 | }) 217 | 218 | sr_left.reveal('.home__social') 219 | 220 | const sr_bottom = ScrollReveal({ 221 | origin: 'bottom', 222 | distance: '50px', 223 | duration: 2500, 224 | }) 225 | 226 | sr_bottom.reveal('.home__scroll') 227 | 228 | ScrollReveal().reveal('.section__title', {duration: 2000, delay: 300}) 229 | ScrollReveal().reveal('.section__subtitle', {duration: 2500, delay: 400}) 230 | ScrollReveal().reveal('.about__container', {duration: 2000, delay: 400}) 231 | ScrollReveal().reveal('.skills__container', {duration: 2000, delay: 50}) 232 | ScrollReveal().reveal('.qualification__container', {duration: 2000, delay: 50}) 233 | ScrollReveal().reveal('.certification__container', {duration: 2000, delay: 50}) 234 | ScrollReveal().reveal('.projects__container', {duration: 2000, delay: 50}) 235 | ScrollReveal().reveal('.blog__container', {duration: 2000, delay: 50}) 236 | ScrollReveal().reveal('.contact__container', {duration: 2000, delay: 50}) 237 | 238 | /*==================== TYPED JS ====================*/ 239 | const typed_home = new Typed('#multiple-text', { 240 | strings: ['Software Engineer', 'AI Developer', 'Deep Learning Enthusiast'], 241 | typeSpeed: 100, 242 | backSpeed: 30, 243 | backDelay: 1000, 244 | loop: true, 245 | }); 246 | 247 | const typed_footer = new Typed('#multiple-text-footer', { 248 | strings: ['Software Engineer', 'AI Developer', 'Deep Learning Enthusiast'], 249 | typeSpeed: 100, 250 | backSpeed: 30, 251 | backDelay: 1000, 252 | loop: true, 253 | }); -------------------------------------------------------------------------------- /assets/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} -------------------------------------------------------------------------------- /assets/js/scrollreveal.min.js: -------------------------------------------------------------------------------- 1 | /*! @license ScrollReveal v4.0.9 2 | 3 | Copyright 2021 Fisssion LLC. 4 | 5 | Licensed under the GNU General Public License 3.0 for 6 | compatible open source projects and non-commercial use. 7 | 8 | For commercial sites, themes, projects, and applications, 9 | keep your source code private/proprietary by purchasing 10 | a commercial license from https://scrollrevealjs.org/ 11 | */ 12 | var ScrollReveal=function(){"use strict";var r={delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!1,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:function(){},afterReveal:function(){},beforeReset:function(){},beforeReveal:function(){}};var n={success:function(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",function(){document.body.style.height="100%"})},failure:function(){return document.documentElement.classList.remove("sr"),{clean:function(){},destroy:function(){},reveal:function(){},sync:function(){},get noop(){return!0}}}};function o(e){return"object"==typeof window.Node?e instanceof window.Node:null!==e&&"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName}function u(e,t){if(void 0===t&&(t=document),e instanceof Array)return e.filter(o);if(o(e))return[e];if(n=e,i=Object.prototype.toString.call(n),"object"==typeof window.NodeList?n instanceof window.NodeList:null!==n&&"object"==typeof n&&"number"==typeof n.length&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(i)&&(0===n.length||o(n[0])))return Array.prototype.slice.call(e);var n,i;if("string"==typeof e)try{var r=t.querySelectorAll(e);return Array.prototype.slice.call(r)}catch(e){return[]}return[]}function s(e){return null!==e&&e instanceof Object&&(e.constructor===Object||"[object Object]"===Object.prototype.toString.call(e))}function f(n,i){if(s(n))return Object.keys(n).forEach(function(e){return i(n[e],e,n)});if(n instanceof Array)return n.forEach(function(e,t){return i(e,t,n)});throw new TypeError("Expected either an array or object literal.")}function h(e){for(var t=[],n=arguments.length-1;0=[].concat(r.body).shift())return j.call(this,n,i,-1,t),c.call(this,e,{reveal:!0,pristine:t});if(!n.blocked.foot&&i===[].concat(o.foot).shift()&&i<=[].concat(r.body).pop())return j.call(this,n,i,1,t),c.call(this,e,{reveal:!0,pristine:t})}}function E(e){var t=Math.abs(e);if(isNaN(t))throw new RangeError("Invalid sequence interval.");this.id=b(),this.interval=Math.max(t,16),this.members=[],this.models={},this.blocked={head:!1,foot:!1}}function d(e,i,r){var o=this;this.head=[],this.body=[],this.foot=[],f(e.members,function(e,t){var n=r.elements[e];n&&n[i]&&o.body.push(t)}),this.body.length&&f(e.members,function(e,t){var n=r.elements[e];n&&!n[i]&&(t.swiper-pagination-bullets { 884 | bottom: -2.5rem; 885 | } 886 | 887 | .swiper-pagination-bullet { 888 | background-color: var(--first-color); 889 | } 890 | 891 | 892 | .swiper-button-prev, 893 | .swiper-button-next, 894 | .swiper-pagination-bullet { 895 | outline: none; 896 | } 897 | 898 | /*==================== BLOG ====================*/ 899 | .blog__container{ 900 | overflow: initial; 901 | } 902 | 903 | .blog__content{ 904 | padding: 0 1.5rem; 905 | } 906 | 907 | .blog__img{ 908 | width: 400px; 909 | border-radius: .5rem; 910 | justify-self: center; 911 | } 912 | 913 | .blog__title{ 914 | font-size: var(--h3-font-size); 915 | margin-bottom: var(--mb-0-5); 916 | } 917 | 918 | .blog__description{ 919 | margin-bottom: var(--mb-0-75); 920 | } 921 | 922 | .blog__button:hover .button__icon { 923 | transform: translateX(.25rem); 924 | } 925 | 926 | /*==================== CONTACT ME ====================*/ 927 | .contact__container { 928 | row-gap: 3rem; 929 | } 930 | 931 | .contact__information { 932 | display: flex; 933 | margin-bottom: var(--mb-2); 934 | } 935 | 936 | .contact__icon { 937 | font-size: 2rem; 938 | color: var(--first-color); 939 | margin-right: var(--mb-0-75); 940 | } 941 | 942 | .contact__title { 943 | font-size: var(--h3-font-size); 944 | font-weight: var(--font-medium); 945 | } 946 | 947 | .contact__subtitle { 948 | font-size: var(--small-font-size); 949 | color: var(--text-color-light); 950 | } 951 | 952 | .contact__content { 953 | background-color: var(--input-color); 954 | border-radius: .5rem; 955 | padding: .75rem 1rem .25rem; 956 | } 957 | 958 | .contact__label { 959 | font-size: var(--smaller-font-size); 960 | color: var(--title-color); 961 | } 962 | 963 | .contact__input { 964 | width: 100%; 965 | background-color: var(--input-color); 966 | color: var(--text-color); 967 | font-family: var(--body-font); 968 | font-size: var(--normal-font-size); 969 | border: none; 970 | outline: none; 971 | padding: .25rem .5rem .5rem 0; 972 | } 973 | 974 | .contact__submit { 975 | display: flex; 976 | gap: 2rem; 977 | align-items: center; 978 | } 979 | 980 | #contact__button { 981 | display: block; 982 | border: none; 983 | outline: none; 984 | font-size: var(--font-medium); 985 | font-family: var(--body-font); 986 | cursor: pointer; 987 | } 988 | 989 | #contact__status { 990 | color: #FFF; 991 | padding: .6rem; 992 | border-radius: 5px; 993 | font-size: var(--smaller-font-size); 994 | } 995 | 996 | #contact__status.success { 997 | background-color: rgb(79, 162, 116); 998 | animation: status 4s ease forwards; 999 | } 1000 | 1001 | #contact__status.error { 1002 | background-color: rgb(201, 88, 88); 1003 | animation: status 4s ease forwards; 1004 | } 1005 | 1006 | @keyframes status { 1007 | 0% { 1008 | opacity: 1; 1009 | pointer-events: all; 1010 | } 1011 | 1012 | 90% { 1013 | opacity: 1; 1014 | pointer-events: all; 1015 | } 1016 | 1017 | 100% { 1018 | opacity: 0; 1019 | pointer-events: none; 1020 | } 1021 | } 1022 | 1023 | /*==================== FOOTER ====================*/ 1024 | .footer { 1025 | padding-top: 2rem; 1026 | } 1027 | 1028 | .footer__container { 1029 | row-gap: 3.5rem; 1030 | } 1031 | 1032 | .footer__bg { 1033 | background-color: var(--first-color-second); 1034 | padding: 2rem 0 3rem; 1035 | } 1036 | 1037 | .footer__title { 1038 | font-size: var(--h1-font-size); 1039 | margin-bottom: var(--mb-0-25); 1040 | } 1041 | 1042 | .footer__subtitle { 1043 | font-size: var(--small-font-size); 1044 | } 1045 | 1046 | .footer__links { 1047 | display: flex; 1048 | flex-direction: column; 1049 | row-gap: 1.5rem; 1050 | } 1051 | 1052 | .footer__link:hover { 1053 | color: var(--first-color-lighter); 1054 | } 1055 | 1056 | .footer__social { 1057 | font-size: 1.25rem; 1058 | margin-right: var(--mb-1-5); 1059 | } 1060 | 1061 | .footer__social:hover { 1062 | color: var(--first-color-lighter); 1063 | } 1064 | 1065 | .footer__copy { 1066 | font-size: var(--smaller-font-size); 1067 | text-align: center; 1068 | color: dimgray; 1069 | margin-top: var(--mb-3); 1070 | } 1071 | 1072 | .footer__title, 1073 | .footer__subtitle, 1074 | .footer__link, 1075 | .footer__social { 1076 | color: #FFF; 1077 | } 1078 | 1079 | /*========== SCROLL UP ==========*/ 1080 | .scrollup { 1081 | position: fixed; 1082 | right: 1rem; 1083 | bottom: -20%; 1084 | background-color: var(--first-color); 1085 | opacity: .8; 1086 | border-radius: .4rem; 1087 | padding: 0 .3rem; 1088 | transition: .4s; 1089 | z-index: var(--z-tooltip); 1090 | } 1091 | 1092 | .scrollup:hover { 1093 | background-color: var(--first-color-alt); 1094 | } 1095 | 1096 | .scrollup__icon { 1097 | font-size: 1.5rem; 1098 | color: #FFF; 1099 | } 1100 | 1101 | /* Show scroll */ 1102 | 1103 | .show-scroll { 1104 | bottom: 5rem; 1105 | } 1106 | 1107 | 1108 | /*========== SCROLL BAR ==========*/ 1109 | ::-webkit-scrollbar { 1110 | width: .60rem; 1111 | background-color: var(--scroll-bar-color); 1112 | border-radius: .5rem; 1113 | } 1114 | 1115 | ::-webkit-scrollbar-thumb { 1116 | background-color: var(--scroll-thumb-color); 1117 | border-radius: .5rem; 1118 | } 1119 | 1120 | ::-webkit-scrollbar-thumb:hover { 1121 | background-color: var(--text-color-light); 1122 | } 1123 | 1124 | 1125 | /*==================== MEDIA QUERIES ====================*/ 1126 | /* For small devices */ 1127 | @media screen and (max-width: 350px) { 1128 | .container { 1129 | margin-left: var(--mb-1); 1130 | margin-right: var(--mb-1); 1131 | } 1132 | 1133 | .nav__menu { 1134 | padding: 2rem .25rem 4rem; 1135 | } 1136 | 1137 | .nav__list { 1138 | column-gap: 0; 1139 | } 1140 | 1141 | .home__content { 1142 | grid-template-columns: .25fr 3fr; 1143 | } 1144 | 1145 | .home__blob { 1146 | width: 190px; 1147 | } 1148 | 1149 | .about__img { 1150 | width: 200px; 1151 | } 1152 | 1153 | .skills__title { 1154 | font-size: var(--normal-font-size); 1155 | } 1156 | 1157 | .qualification__data { 1158 | gap: .5rem; 1159 | } 1160 | 1161 | .certification__container{ 1162 | grid-template-columns: repeat(1,1fr); 1163 | justify-content: center; 1164 | } 1165 | 1166 | .contact__submit { 1167 | display: grid; 1168 | row-gap: 1.5rem; 1169 | } 1170 | } 1171 | 1172 | /* For medium devices */ 1173 | @media screen and (min-width: 568px) { 1174 | .home__content { 1175 | grid-template-columns: max-content 1fr 1fr; 1176 | } 1177 | 1178 | .home__data { 1179 | grid-column: initial; 1180 | } 1181 | 1182 | .home__img { 1183 | order: 1; 1184 | justify-self: center; 1185 | } 1186 | 1187 | .about__img { 1188 | width: 300px; 1189 | } 1190 | 1191 | .about__container, 1192 | .skills__container, 1193 | .projects__content, 1194 | .blog__content, 1195 | .contact__container, 1196 | .footer__container { 1197 | grid-template-columns: repeat(2, 1fr); 1198 | } 1199 | 1200 | .qualification__sections { 1201 | display: grid; 1202 | grid-template-columns: .6fr; 1203 | justify-content: center; 1204 | } 1205 | 1206 | .certification__container{ 1207 | grid-template-columns: repeat(2, 1fr); 1208 | justify-content: center; 1209 | } 1210 | } 1211 | 1212 | @media screen and (min-width: 768px) { 1213 | .container { 1214 | margin-left: auto; 1215 | margin-right: auto; 1216 | } 1217 | 1218 | body { 1219 | margin: 0; 1220 | } 1221 | 1222 | .section { 1223 | padding: 6rem 0 2rem; 1224 | } 1225 | 1226 | .section__subtitle { 1227 | margin-bottom: 4rem; 1228 | } 1229 | 1230 | .header { 1231 | top: 0; 1232 | bottom: initial; 1233 | } 1234 | 1235 | .header, 1236 | .main, 1237 | .footer__container { 1238 | padding: 0 1rem; 1239 | } 1240 | 1241 | .nav { 1242 | height: calc(var(--header-height) + 1.5rem); 1243 | column-gap: 1rem; 1244 | } 1245 | 1246 | .nav__icon, 1247 | .nav__close, 1248 | .nav__toggle { 1249 | display: none; 1250 | } 1251 | 1252 | .nav__list { 1253 | display: flex; 1254 | column-gap: 2rem; 1255 | } 1256 | 1257 | .change-theme { 1258 | margin: 0; 1259 | } 1260 | 1261 | .home__container { 1262 | row-gap: 5rem; 1263 | } 1264 | 1265 | .home__content { 1266 | padding-top: 5.5rem; 1267 | column-gap: 3rem; 1268 | } 1269 | 1270 | .home__blob { 1271 | width: 250px; 1272 | } 1273 | 1274 | .home__scroll { 1275 | display: block; 1276 | } 1277 | 1278 | .home__scroll-button { 1279 | margin-left: 3rem; 1280 | } 1281 | 1282 | .about__container { 1283 | column-gap: 4rem; 1284 | } 1285 | 1286 | .about__img { 1287 | width: 350px; 1288 | } 1289 | 1290 | .about__description { 1291 | text-align: initial; 1292 | } 1293 | 1294 | .about__info { 1295 | justify-content: space-between; 1296 | } 1297 | 1298 | .about__buttons { 1299 | justify-content: initial; 1300 | } 1301 | 1302 | .qualification__tabs { 1303 | justify-content: center; 1304 | } 1305 | 1306 | .qualification__button { 1307 | margin: 0 var(--mb-1); 1308 | } 1309 | 1310 | .qualification__sections { 1311 | grid-template-columns: .5fr; 1312 | } 1313 | 1314 | .projects__img { 1315 | width: 320px; 1316 | } 1317 | 1318 | .projects__content { 1319 | align-items: center; 1320 | } 1321 | 1322 | .blog__content{ 1323 | align-items: center; 1324 | } 1325 | 1326 | .footer__container { 1327 | grid-template-columns: repeat(3, 1fr); 1328 | } 1329 | 1330 | .footer__bg { 1331 | padding: 3rem 0 3.5rem; 1332 | } 1333 | 1334 | .footer__links { 1335 | flex-direction: row; 1336 | column-gap: 1rem; 1337 | } 1338 | 1339 | .footer__socials { 1340 | justify-self:flex-end; 1341 | } 1342 | 1343 | .footer__social { 1344 | margin: 1.5rem; 1345 | } 1346 | 1347 | .footer__copy { 1348 | margin-top: 4.5rem; 1349 | } 1350 | } 1351 | 1352 | /* For large devices */ 1353 | @media screen and (min-width: 1024px) { 1354 | 1355 | .header, 1356 | .main, 1357 | .footer__container { 1358 | padding: 0; 1359 | } 1360 | 1361 | .home__blob { 1362 | width: 320px; 1363 | } 1364 | 1365 | .home__social { 1366 | transform: translateX(-6rem); 1367 | } 1368 | 1369 | .about__img { 1370 | width: 350px; 1371 | } 1372 | 1373 | .about__container { 1374 | column-gap: 8rem; 1375 | } 1376 | 1377 | .projects__content { 1378 | column-gap: 5rem; 1379 | } 1380 | 1381 | .blog__content{ 1382 | column-gap: 5rem; 1383 | } 1384 | 1385 | .swiper-projects-icon { 1386 | font-size: 3rem; 1387 | } 1388 | 1389 | .swiper-button-next { 1390 | right: -3.5rem; 1391 | } 1392 | 1393 | .swiper-button-prev { 1394 | left: -3.5rem; 1395 | } 1396 | 1397 | .swiper-container-horizontal>.swiper-pagination-bullets { 1398 | bottom: -4.5rem; 1399 | } 1400 | 1401 | .contact__form { 1402 | width: 460px; 1403 | } 1404 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 13 | 14 | 15 | Yassine Rodani - Software Engineer 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 35 | 36 | 37 | 38 | 39 | 99 | 100 | 101 |
102 | 103 |
104 |
105 |
106 | 123 | 124 |
125 | 127 | 128 | 132 | 133 | 134 | 139 | 140 | 141 | 142 |
143 | 144 |
145 |

146 | hi, Yassine here. 147 |

148 |

149 | 150 |

151 |

152 | I build ML systems sometimes. 153 |

154 | 155 | Say hi 156 | 157 |
158 |
159 | 160 |
161 | 162 | 163 | Scroll down 164 | 165 | 166 |
167 |
168 |
169 | 170 | 171 |
172 |

About me

173 | Quick introduction 174 | 175 |
176 | About section background image 177 | 178 |
179 |

180 | Passionate about digital transformation, 181 | I bring both technical and business expertise. 182 |

Throughout my previous roles, 183 | I have worked on topics such as software development, 184 | large language models, explainable AI, machine vision, and serial communication. 185 |

186 |
187 |
188 | 2+ 189 | Year
experience 190 |
191 |
192 | 6 193 | Data Projects
Completed 194 |
195 |
196 | 2 197 | Articles
Written 198 |
199 |
200 | 201 |
202 | 203 | 204 | My resume 205 | 206 | 209 |
210 |
211 |
212 |
213 | 214 | 215 |
216 |

Skills

217 | My technical level 218 | 219 |
220 |
221 | 222 |
223 |
224 | 225 |
226 |

Development

227 | All about the core.. 228 |
229 | 230 |
231 | 232 |
233 |
234 |
235 |

C#

236 | 90% 237 |
238 |
239 | 240 |
241 |
242 | 243 |
244 |
245 |

C++

246 | 70% 247 |
248 |
249 | 250 |
251 |
252 | 253 |
254 |
255 |

Python

256 | 80% 257 |
258 |
259 | 260 |
261 |
262 | 263 |
264 |
265 |

Javascript

266 | 60% 267 |
268 |
269 | 270 |
271 |
272 | 273 |
274 |
275 |

R

276 | 50% 277 |
278 |
279 | 280 |
281 |
282 | 283 |
284 |
285 |

SQL

286 | 80% 287 |
288 |
289 | 290 |
291 |
292 |
293 |
294 | 295 |
296 |
297 | 298 | 299 |
300 |

Frameworks

301 | Everyone needs support 302 |
303 | 304 | 305 |
306 | 307 |
308 |
309 |
310 |

NumPy

311 | 85% 312 |
313 |
314 | 315 |
316 |
317 | 318 |
319 |
320 |

pandas

321 | 80% 322 |
323 |
324 | 325 |
326 |
327 | 328 |
329 |
330 |

matplotlib

331 | 70% 332 |
333 |
334 | 335 |
336 |
337 | 338 |
339 |
340 |

scikit-learn

341 | 70% 342 |
343 |
344 | 345 |
346 |
347 | 348 |
349 |
350 |

seaborn

351 | 60% 352 |
353 |
354 | 355 |
356 |
357 | 358 |
359 |
360 |

OpenCV

361 | 70% 362 |
363 |
364 | 365 |
366 |
367 | 368 |
369 |
370 |

Flask

371 | 70% 372 |
373 |
374 | 375 |
376 |
377 | 378 |
379 |
380 |

Streamlit

381 | 60% 382 |
383 |
384 | 385 |
386 |
387 | 388 |
389 |
390 |

TensorFlow

391 | 85% 392 |
393 |
394 | 395 |
396 |
397 | 398 |
399 |
400 |

PyTorch

401 | 80% 402 |
403 |
404 | 405 |
406 |
407 | 408 |
409 |
410 |

NLTK

411 | 80% 412 |
413 |
414 | 415 |
416 |
417 | 418 |
419 |
420 |

Trax

421 | 40% 422 |
423 |
424 | 425 |
426 |
427 |
428 |
429 |
430 |
431 | 432 |
433 |
434 | 435 | 436 |
437 |

Machine Learning

438 | Theory, theory! 439 |
440 | 441 | 442 |
443 | 444 |
445 |
446 |
447 |

Linear and Logistic Regression

448 | 85% 449 |
450 |
451 | 452 |
453 |
454 | 455 | 456 |
457 |
458 |

Decision Trees

459 | 70% 460 |
461 |
462 | 463 |
464 |
465 |
466 |
467 |

Exploratory Data Analysis

468 | 80% 469 |
470 |
471 | 472 |
473 |
474 | 475 |
476 |
477 |

Time Series

478 | 70% 479 |
480 |
481 | 482 |
483 |
484 | 485 |
486 |
487 |

Convolutional Neural Networks

488 | 90% 489 |
490 |
491 | 492 |
493 |
494 | 495 |
496 |
497 |

Natural Language Processing

498 | 90% 499 |
500 |
501 | 502 |
503 |
504 | 505 |
506 |
507 |

Ensemble Models

508 | 60% 509 |
510 |
511 | 512 |
513 |
514 | 515 |
516 |
517 |

Recommender Systems

518 | 60% 519 |
520 |
521 | 522 |
523 |
524 | 525 |
526 |
527 |

Multi-modal Learning

528 | 70% 529 |
530 |
531 | 532 |
533 |
534 | 535 | 536 |
537 |
538 | 539 |
540 |
541 | 542 | 543 |
544 |

Cloud and Engineering

545 | Fly Fast & High! 546 |
547 | 548 | 549 |
550 | 551 |
552 |
553 |
554 |

AWS Sagemaker

555 | 65% 556 |
557 |
558 | 559 |
560 |
561 | 562 |
563 |
564 |

Docker

565 | 70% 566 |
567 |
568 | 569 |
570 |
571 |
572 |
573 | 574 |
575 |
576 | 577 | 578 |
579 |

Databases and Viz

580 | Storing data and making it pretty 581 |
582 | 583 | 584 |
585 | 586 |
587 |
588 |
589 |

MySQL

590 | 80% 591 |
592 |
593 | 594 |
595 |
596 | 597 |
598 |
599 |

MongoDB

600 | 70% 601 |
602 |
603 | 604 |
605 |
606 | 607 |
608 |
609 |

Tableau

610 | 60% 611 |
612 |
613 | 614 |
615 |
616 | 617 |
618 |
619 |

PowerBI

620 | 75% 621 |
622 |
623 | 624 |
625 |
626 |
627 |
628 | 629 |
630 |
631 |
632 | 633 | 634 |
635 |

Qualification

636 | My personal journey 637 | 638 |
639 |
640 |
641 | 642 | Education 643 |
644 | 645 |
646 | 647 | Work 648 |
649 |
650 | 651 |
652 | 653 |
654 | 655 |
656 | 657 |
658 |

659 | High School 660 |

661 | Morocco - LTMY High School 662 |
663 | 664 | 2015 - 2018 665 |
666 |
667 | 668 |
669 | 670 |
671 |
672 |
673 | 674 | 675 |
676 |
677 | 678 |
679 | 680 |
681 |
682 | 683 |
684 |

685 | Preparatory Program for Higher Education Institutions 686 |

687 | Morocco - CPGE 688 |
689 | 690 | 2018 - 2020 691 |
692 |
693 |
694 | 695 | 696 |
697 | 698 |
699 |

700 | 701 | Engineer's degree in Computer Science 702 | 703 |

704 | France - ENSISA, University of Haute-Alsace 705 |
706 | 707 | 2020 - 2023 708 |
709 |
710 | 711 |
712 | 713 |
714 |
715 |
716 | 717 | 718 |
719 |
720 | 721 |
722 | 723 | 724 |
725 | 726 |
727 |

728 | 729 | Machine Learning Specialization 730 | 731 |

732 | France - ENSISA, University of Haute-Alsace 733 |
734 | 735 | 2021 - 2023 736 |
737 |
738 |
739 | 740 | 741 |
742 | 743 |
744 | 745 | 746 |
747 | 748 |
749 |

750 | Software Developer Intern 751 |

752 | Morocco - Fujikura Automotive 753 |
754 | 755 | 07/2021 - 08/2021 756 |
757 |
758 | 759 |
760 | 761 |
762 |
763 | 764 |
765 | 766 | 767 | 768 |
769 |
770 | 771 |
772 | 773 |
774 |
775 | 776 |
777 |

778 | Computer Vision Intern 779 |

780 | France - Maison Haegel 781 |
782 | 783 | 09/2022 - 02/2023 784 |
785 |
786 | 787 |
788 | 789 | 790 | 791 |
792 |
793 |

794 | AI Engineer Intern 795 |

796 | France - Groupe SII 797 |
798 | 799 | 02/2023 - 08/2023 800 |
801 |
802 | 803 |
804 | 805 |
806 |
807 |
808 | 809 | 810 | 811 |
812 |
813 | 814 |
815 | 816 |
817 | 818 |
819 |

820 | Software Engineer - R&D 821 |

822 | France - Dreampath Diagnostic 823 |
824 | 825 | 10/2023 - present 826 |
827 |
828 |
829 |
830 |
831 |
832 |
833 | 834 | 835 |
836 |

Certifications

837 | Extra courses I have undertaken 838 | 839 |
840 | 841 | 842 |
843 |
844 | 845 |

Responsive Web Design

846 |

Expiry Date: Does not expire

847 |
848 | 849 | 851 | View Certificate 852 | 853 | 854 |
855 | 856 | 857 |
858 |
859 | 860 |

Python 101 for Data Science

861 |

Expiry Date: Does not expire

862 |
863 | 864 | 867 | View Certificate 868 | 869 | 870 |
871 | 872 | 873 |
874 |
875 | 876 |

IBM Data Science Professional Certificate

877 |

Expiry Date: Does not expire

878 |
879 | 880 | 882 | View Certificate 883 | 884 | 885 |
886 | 887 | 888 |
889 |
890 | 891 |

Natural Language Processing Specialization

892 |

Expiry Date: Does not expire

893 |
894 | 895 | 897 | View Certificate 898 | 899 | 900 |
901 |
902 |
903 | 904 | 905 |
906 |

Projects

907 | Most recent work 908 | 909 |
910 |
911 | 912 |
913 | PaperWhiz project's image 915 | 916 |
917 |

PaperWhiz

918 |

919 | The project involves developing a conversational recommendation system for machine learning papers. 920 | The system is designed to recommend germane 921 | papers tailored to a user's specific interests. 922 |

923 | 925 | GitHub repository 926 | 927 | 928 | 930 | Report 931 | 932 | 933 |
934 |
935 | 936 |
937 | Movie sentiment analysis project's image 939 | 940 |
941 |

Movie Sentiment Analysis

942 |

943 | The project involved creating a movie sentiment analysis system based on user reviews, 944 | utilizing the Multinomial Naive Bayes algorithm, achieving 86.3% precision on the IMDb dataset, 945 | and deploying the NLP model through a Streamlit-powered web application, containerized with Docker. 946 |

947 | 949 | GitHub repository 950 | 951 | 952 | 954 | Report 955 | 956 | 957 |
958 |
959 | 960 |
961 | Fish Detector project's image 963 | 964 |
965 |

Fish Detector

966 |

967 | The project focused on fine-tuning a YOLOv4 pre-trained model with Darknet framework 968 | to count and track two distinct fish species, achieving a 93% Mean Average Precision, 969 | while developing TensorFlow-based algorithms for model implementation. 970 |

971 | 973 | GitHub repository 974 | 975 | 976 |
977 |
978 | 979 |
980 | Portfolio Website project's image 982 | 983 |
984 |

Portfolio Website

985 |

986 | Built a responsive personal portfolio website adaptable 987 | to all devices, with ui components and animated interactions to 988 | showcase my projects, experience and skills. 989 |

990 | 992 | GitHub repository 993 | 994 | 995 |
996 |
997 | 998 |
999 | Bird Classifier project's image 1001 | 1002 |
1003 |

Bird Classifier

1004 |

1005 | The project involved fine-tuning a VGG16 pre-trained model for bird classification, 1006 | achieving 92% precision on the BIRDS 525 dataset, and developing a user-friendly 1007 | web application for deployment. 1008 |

1009 | 1011 | GitHub repository 1012 | 1013 | 1014 |
1015 |
1016 | 1017 |
1018 | Classroom Manager project's image 1020 | 1021 |
1022 |

Classroom Manager

1023 |

1024 | Developed a simple web application that help manage students in a class using Spring 1025 | Boot. The frontend is built using Angular. 1026 |

1027 | 1029 | GitHub repository 1030 | 1031 | 1032 |
1033 |
1034 |
1035 | 1036 |
1037 | 1038 |
1039 |
1040 | 1041 |
1042 | 1043 | 1044 |
1045 |
1046 | 1047 |
1048 | 1049 | 1050 |
1051 |

Blog

1052 | My technical articles 1053 | 1054 |
1055 |
1056 | 1057 |
1058 | Customizing macOS terminal 1059 | 1060 |
1061 |

Beyond accuracy: Exploring different metrics for measuring Machine Learning model’s performance

1062 |

A comprehensive walkthrough to evaluating Machine Learning model’s performance

1063 | 1064 | 1066 | Read it 1067 | 1068 | 1069 |
1070 |
1071 | 1072 |
1073 | Customizing macOS terminal 1074 | 1075 |
1076 |

How to make your boring macOS terminal look so much better

1077 |

A 5 minutes guide to customizing your macOS terminal to 1078 | increase productivity and improve the interface

1079 | 1080 | 1082 | Read it 1083 | 1084 | 1085 |
1086 |
1087 |
1088 | 1089 |
1090 | 1091 |
1092 |
1093 | 1094 |
1095 | 1096 | 1097 |
1098 | 1099 |
1100 |
1101 | 1102 | 1103 |
1104 |

Contact me

1105 | Get in touch 1106 | 1107 |
1108 |
1109 |
1110 | 1111 |
1112 |

E-mail

1113 | yassine.rodani@gmail.com 1114 |
1115 |
1116 |
1117 | 1118 |
1119 |

Location

1120 | Strasbourg - France 1121 |
1122 |
1123 |
1124 | 1125 |
1126 |
1127 |
1128 | 1129 | 1130 |
1131 |
1132 | 1133 | 1134 |
1135 |
1136 | 1137 | 1139 |
1140 |
1141 |
1142 | 1144 |
1145 |
1146 |
1147 |
1148 |
1149 |
1150 |
1151 |
1152 | 1153 | 1154 | 1201 | 1202 | 1203 | 1206 | 1207 | 1208 | 1209 | 1210 | 1211 | 1212 | 1213 | 1214 | 1215 | 1216 | 1217 | --------------------------------------------------------------------------------