├── CNAME ├── .vscode └── settings.json ├── GS.jpeg ├── js.png ├── ai-900.png ├── az-900.png ├── dp-900.png ├── pic2.jpg ├── picture1.jpg ├── Gaurav MLSS.png ├── dev-in-dec.png ├── netflix-clone.png ├── scoot-project.png ├── Microsoft SC-900.png ├── github-workshop.png ├── mycaptain-python.png ├── amazon-prime-clone.png ├── github-user-search.png ├── Country API project.png ├── Gaurav Sarage Resume.pdf ├── payment-gateway-integration.png ├── README.md ├── 404-error.js ├── events-section.html ├── 404.html ├── main.js ├── swiper-bundle.min.css ├── style.css └── index.html /CNAME: -------------------------------------------------------------------------------- 1 | gauravsarage.club 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /GS.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/GS.jpeg -------------------------------------------------------------------------------- /js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/js.png -------------------------------------------------------------------------------- /ai-900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/ai-900.png -------------------------------------------------------------------------------- /az-900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/az-900.png -------------------------------------------------------------------------------- /dp-900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/dp-900.png -------------------------------------------------------------------------------- /pic2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/pic2.jpg -------------------------------------------------------------------------------- /picture1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/picture1.jpg -------------------------------------------------------------------------------- /Gaurav MLSS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/Gaurav MLSS.png -------------------------------------------------------------------------------- /dev-in-dec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/dev-in-dec.png -------------------------------------------------------------------------------- /netflix-clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/netflix-clone.png -------------------------------------------------------------------------------- /scoot-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/scoot-project.png -------------------------------------------------------------------------------- /Microsoft SC-900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/Microsoft SC-900.png -------------------------------------------------------------------------------- /github-workshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/github-workshop.png -------------------------------------------------------------------------------- /mycaptain-python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/mycaptain-python.png -------------------------------------------------------------------------------- /amazon-prime-clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/amazon-prime-clone.png -------------------------------------------------------------------------------- /github-user-search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/github-user-search.png -------------------------------------------------------------------------------- /Country API project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/Country API project.png -------------------------------------------------------------------------------- /Gaurav Sarage Resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/Gaurav Sarage Resume.pdf -------------------------------------------------------------------------------- /payment-gateway-integration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaurav-sarage/personal-portfolio/HEAD/payment-gateway-integration.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Personal Portfolio 2 | My first developer portfolio 3 | 4 | Tech stack used: 5 | 6 | => HTML 7 | 8 | => CSS 9 | 10 | => JavaScript 11 | -------------------------------------------------------------------------------- /404-error.js: -------------------------------------------------------------------------------- 1 | // NAVIGATION PANEL 2 | let 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 | // REMOVE MENU MOBILE 21 | const navLink = document.querySelectorAll(".nav_link"); 22 | 23 | function linkAction() { 24 | navMenu = document.getElementById("nav-menu"); 25 | navMenu.classList.remove("show-menu"); 26 | } 27 | navLink.forEach((n) => n.addEventListener("click", linkAction)); 28 | 29 | // HEADER SHADOW 30 | function scrollHeader() { 31 | const nav = document.getElementById("header"); 32 | if (this.scrollY >= 80) nav.classList.add("scroll-header"); 33 | else nav.classList.remove("scroll-header"); 34 | } 35 | window.addEventListener("scroll", scrollHeader); 36 | 37 | // DARK/LIGHT THEME 38 | const themeButton = document.getElementById("theme-button"); 39 | const darkTheme = "dark-theme"; 40 | const iconTheme = "uil-sun"; 41 | 42 | // Previously selected topic (if user selected) 43 | const selectedTheme = localStorage.getItem("selected-theme"); 44 | const selectedIcon = localStorage.getItem("selected-icon"); 45 | 46 | // obtain the current theme 47 | const getCurrentTheme = () => 48 | document.body.classList.contains(darkTheme) ? "dark" : "light"; 49 | const getCurrentIcon = () => 50 | themeButton.classList.contains(iconTheme) ? "uil-moon" : "uil-sun"; 51 | 52 | if (selectedTheme) { 53 | document.body.classList[selectedTheme === "dark" ? "add" : "remove"]( 54 | darkTheme 55 | ); 56 | themeButton.classList[selectedIcon === "uil-moon" ? "add" : "remove"]( 57 | iconTheme 58 | ); 59 | } 60 | 61 | // Activate/Deactivate the theme manually with the button 62 | themeButton.addEventListener("click", () => { 63 | // Add or remove the dark icon/theme 64 | document.body.classList.toggle(darkTheme); 65 | themeButton.classList.toggle(iconTheme); 66 | // We save the theme and the current icon that the user chose 67 | localStorage.setItem("selected-theme", getCurrentTheme()); 68 | localStorage.setItem("selected-icon", getCurrentIcon()); 69 | }); -------------------------------------------------------------------------------- /events-section.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

Events and Competitions

4 | Organised Events and Competitions 5 | 6 |
7 |
8 | 9 | 10 |
11 | 12 | 13 |
14 |

15 | Begin with C 2021 16 |

17 |

18 | Sept 25th - Sept 29th 2021
An online C Programming workshop was organised to provide hands-on Experience to newbies in conventional coding

19 |
20 |
21 | 22 |
23 | 24 | 25 |
26 |

27 | PyChamp 2021 28 |

29 |

30 | June 15th - June 19th 2021
Online Python programming workshop was organised to enable students to code with python and kickstart their ideas.

31 | 32 | Check out the glimpse 33 | 34 | 35 |
36 |
37 | 38 |
39 | 40 | 41 |
42 |

43 | Hands on PCB 44 |

45 |

46 | May 28th 2021
Workshop on circuit designing using Autodesk Eagle. Students were exposed to PCB Production and the entire process of fabrication, and also developed their own arduino clone

47 | 48 | Check out the glimpse 49 | 50 | 51 |
52 |
53 |
54 | 55 | 56 |
57 |

58 | CodeQuiz 2021 59 |

60 |

61 | May 15th 2021
An Online Coding Quiz was conducted on 15th May at the state level. Students from different parts of the state took part in this event and put their coding skills to test

62 | 63 | Check out the glimpse 64 | 65 | 66 |
67 |
68 | 69 |
70 | 71 | 72 |
73 |

74 | Learn C++ Workshop 75 |

76 |

77 | May 2nd - May 7th 2021
5 Day Online on coding with c++. A beginners course on C++ was presented to the students along with certification 78 |

79 |
80 |
81 |
82 | 83 | 84 |
85 | 86 |
87 |
88 | 89 |
90 | 91 |
92 |
93 |
-------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 404 - Gaurav Sarage 11 | 12 | 13 | 14 | 15 | 16 | 66 | 67 | 68 |
69 |
70 |
71 |

:(

72 |
73 |

74 | A 404 error occured! Page not found, check the URL and try again. 75 |

76 |

77 |

78 | Return to home
Go Back 79 |

80 |
81 |
82 |
83 | 84 | 85 | 119 | 120 | 121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | // Formspree code 2 | const form = document.getElementById("contact-form"); 3 | 4 | async function handleSubmit(event) { 5 | event.preventDefault(); 6 | var status = document.getElementById("alert"); 7 | var data = new FormData(event.target); 8 | fetch(event.target.action, { 9 | method: form.method, 10 | body: data, 11 | headers: { 12 | Accept: "application/json", 13 | }, 14 | }) 15 | .then((response) => { 16 | status.innerHTML = "Your message has been sent."; 17 | document.querySelector(".alert_style").style.display = "block"; 18 | 19 | // hide alert after 3 seconds 20 | setTimeout(function() { 21 | document.querySelector(".alert_style").style.display = "none"; 22 | }, 4000); 23 | form.reset(); 24 | }) 25 | .catch((error) => { 26 | status.innerHTML = "Oops! There was a problem delivering your message, please contact via other means."; 27 | document.querySelector(".alert_style").style.display = "block"; 28 | 29 | // hide alert after 3 seconds 30 | setTimeout(function() { 31 | document.querySelector(".alert_style").style.display = "none"; 32 | }, 4000); 33 | }); 34 | } 35 | form.addEventListener("submit", handleSubmit); 36 | 37 | // NAVIGATION PANEL 38 | let navMenu = document.getElementById("nav-menu"), 39 | navToggle = document.getElementById("nav-toggle"), 40 | navClose = document.getElementById("nav-close"); 41 | 42 | // MENU SHOW 43 | if (navToggle) { 44 | navToggle.addEventListener("click", () => { 45 | navMenu.classList.add("show-menu"); 46 | }); 47 | } 48 | 49 | // MENU HIDDEN 50 | if (navClose) { 51 | navClose.addEventListener("click", () => { 52 | navMenu.classList.remove("show-menu"); 53 | }); 54 | } 55 | 56 | // REMOVE MENU MOBILE 57 | const navLink = document.querySelectorAll(".nav_link"); 58 | 59 | function linkAction() { 60 | navMenu = document.getElementById("nav-menu"); 61 | navMenu.classList.remove("show-menu"); 62 | } 63 | navLink.forEach((n) => n.addEventListener("click", linkAction)); 64 | 65 | // SKILLS 66 | const skillContent = document.querySelectorAll(".skill"); 67 | const skillHeader = document.querySelectorAll(".skills_header"); 68 | const skillContentArr = Array.from(skillContent); 69 | const skillHeaderArr = Array.from(skillHeader); 70 | 71 | skillHeaderArr.forEach((element, idx) => { 72 | element.addEventListener("click", function() { 73 | skillContentArr[idx].classList.toggle("skills_open"); 74 | }); 75 | }); 76 | 77 | // QUALIFICATION TABS 78 | let education = document.getElementById("education"); 79 | let work = document.getElementById("work"); 80 | let educationheader = document.getElementById("educationheader"); 81 | let workheader = document.getElementById("workheader"); 82 | workheader.style.color = "var(--first-colour)"; 83 | 84 | educationheader.addEventListener("click", () => { 85 | let condition1 = work.classList.contains("qualification-inactive"); 86 | if (!condition1) { 87 | education.classList.remove("qualification-inactive"); 88 | work.classList.add("qualification-inactive"); 89 | workheader.style.color = "var(--text-colour)"; 90 | educationheader.style.color = "var(--first-colour)"; 91 | } 92 | }); 93 | workheader.addEventListener("click", () => { 94 | let condition2 = education.classList.contains("qualification-inactive"); 95 | if (!condition2) { 96 | work.classList.remove("qualification-inactive"); 97 | education.classList.add("qualification-inactive"); 98 | educationheader.style.color = "var(--text-colour)"; 99 | workheader.style.color = "var(--first-colour)"; 100 | } 101 | }); 102 | 103 | // PORTFOLIO SWIPER 104 | let swiper = new Swiper(".mySwiper", { 105 | cssMode: true, 106 | loop: true, 107 | 108 | navigation: { 109 | nextEl: ".swiper-button-next", 110 | prevEl: ".swiper-button-prev", 111 | }, 112 | pagination: { 113 | el: ".swiper-pagination", 114 | clickable: true, 115 | }, 116 | mousewheel: true, 117 | keyboard: true, 118 | }); 119 | 120 | // SCROLL SECTIONS ACTIVE LINK 121 | const sections = document.querySelectorAll("section[id]"); 122 | 123 | function scrollActive() { 124 | const scrollY = window.pageYOffset; 125 | 126 | sections.forEach((current) => { 127 | const sectionHeight = current.offsetHeight; 128 | const sectionTop = current.offsetTop - 50; 129 | let sectionId = current.getAttribute("id"); 130 | 131 | if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { 132 | document 133 | .querySelector(".nav_menu a[href*=" + sectionId + "]") 134 | .classList.add("active-link"); 135 | } else { 136 | document 137 | .querySelector(".nav_menu a[href*=" + sectionId + "]") 138 | .classList.remove("active-link"); 139 | } 140 | }); 141 | } 142 | window.addEventListener("scroll", scrollActive); 143 | 144 | // HEADER SHADOW 145 | function scrollHeader() { 146 | const nav = document.getElementById("header"); 147 | if (this.scrollY >= 80) nav.classList.add("scroll-header"); 148 | else nav.classList.remove("scroll-header"); 149 | } 150 | window.addEventListener("scroll", scrollHeader); 151 | 152 | // SHOW SCROLL UP BUTTON 153 | function scrollUpfunc() { 154 | const scrollUp = document.getElementById("scroll-up"); 155 | if (this.scrollY >= 560) scrollUp.classList.add("show-scroll"); 156 | else scrollUp.classList.remove("show-scroll"); 157 | } 158 | window.addEventListener("scroll", scrollUpfunc); 159 | 160 | // DARK/LIGHT THEME 161 | const themeButton = document.getElementById("theme-button"); 162 | const darkTheme = "dark-theme"; 163 | const iconTheme = "uil-sun"; 164 | 165 | // Previously selected topic (if user selected) 166 | const selectedTheme = localStorage.getItem("selected-theme"); 167 | const selectedIcon = localStorage.getItem("selected-icon"); 168 | 169 | // obtain the current theme 170 | const getCurrentTheme = () => 171 | document.body.classList.contains(darkTheme) ? "dark" : "light"; 172 | const getCurrentIcon = () => 173 | themeButton.classList.contains(iconTheme) ? "uil-moon" : "uil-sun"; 174 | 175 | if (selectedTheme) { 176 | document.body.classList[selectedTheme === "dark" ? "add" : "remove"]( 177 | darkTheme 178 | ); 179 | themeButton.classList[selectedIcon === "uil-moon" ? "add" : "remove"]( 180 | iconTheme 181 | ); 182 | } 183 | 184 | // Activate/Deactivate the theme manually with the button 185 | themeButton.addEventListener("click", () => { 186 | // Add or remove the dark icon/theme 187 | document.body.classList.toggle(darkTheme); 188 | themeButton.classList.toggle(iconTheme); 189 | // We save the theme and the current icon that the user chose 190 | localStorage.setItem("selected-theme", getCurrentTheme()); 191 | localStorage.setItem("selected-icon", getCurrentIcon()); 192 | }); -------------------------------------------------------------------------------- /swiper-bundle.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Swiper 7.4.1 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: December 24, 2021 11 | */ 12 | 13 | @font-face { 14 | font-family: swiper-icons; 15 | 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'); 16 | font-weight: 400; 17 | font-style: normal 18 | } 19 | 20 | :root { 21 | --swiper-theme-color: #007aff 22 | } 23 | 24 | .swiper { 25 | margin-left: auto; 26 | margin-right: auto; 27 | position: relative; 28 | overflow: hidden; 29 | list-style: none; 30 | padding: 0; 31 | z-index: 1 32 | } 33 | 34 | .swiper-vertical>.swiper-wrapper { 35 | flex-direction: column 36 | } 37 | 38 | .swiper-wrapper { 39 | position: relative; 40 | width: 100%; 41 | height: 100%; 42 | z-index: 1; 43 | display: flex; 44 | transition-property: transform; 45 | box-sizing: content-box 46 | } 47 | 48 | .swiper-android .swiper-slide, 49 | .swiper-wrapper { 50 | transform: translate3d(0px, 0, 0) 51 | } 52 | 53 | .swiper-pointer-events { 54 | touch-action: pan-y 55 | } 56 | 57 | .swiper-pointer-events.swiper-vertical { 58 | touch-action: pan-x 59 | } 60 | 61 | .swiper-slide { 62 | flex-shrink: 0; 63 | width: 100%; 64 | height: 100%; 65 | position: relative; 66 | transition-property: transform 67 | } 68 | 69 | .swiper-slide-invisible-blank { 70 | visibility: hidden 71 | } 72 | 73 | .swiper-autoheight, 74 | .swiper-autoheight .swiper-slide { 75 | height: auto 76 | } 77 | 78 | .swiper-autoheight .swiper-wrapper { 79 | align-items: flex-start; 80 | transition-property: transform, height 81 | } 82 | 83 | .swiper-3d, 84 | .swiper-3d.swiper-css-mode .swiper-wrapper { 85 | perspective: 1200px 86 | } 87 | 88 | .swiper-3d .swiper-cube-shadow, 89 | .swiper-3d .swiper-slide, 90 | .swiper-3d .swiper-slide-shadow, 91 | .swiper-3d .swiper-slide-shadow-bottom, 92 | .swiper-3d .swiper-slide-shadow-left, 93 | .swiper-3d .swiper-slide-shadow-right, 94 | .swiper-3d .swiper-slide-shadow-top, 95 | .swiper-3d .swiper-wrapper { 96 | transform-style: preserve-3d 97 | } 98 | 99 | .swiper-3d .swiper-slide-shadow, 100 | .swiper-3d .swiper-slide-shadow-bottom, 101 | .swiper-3d .swiper-slide-shadow-left, 102 | .swiper-3d .swiper-slide-shadow-right, 103 | .swiper-3d .swiper-slide-shadow-top { 104 | position: absolute; 105 | left: 0; 106 | top: 0; 107 | width: 100%; 108 | height: 100%; 109 | pointer-events: none; 110 | z-index: 10 111 | } 112 | 113 | .swiper-3d .swiper-slide-shadow { 114 | background: rgba(0, 0, 0, .15) 115 | } 116 | 117 | .swiper-3d .swiper-slide-shadow-left { 118 | background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) 119 | } 120 | 121 | .swiper-3d .swiper-slide-shadow-right { 122 | background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) 123 | } 124 | 125 | .swiper-3d .swiper-slide-shadow-top { 126 | background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) 127 | } 128 | 129 | .swiper-3d .swiper-slide-shadow-bottom { 130 | background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) 131 | } 132 | 133 | .swiper-css-mode>.swiper-wrapper { 134 | overflow: auto; 135 | scrollbar-width: none; 136 | -ms-overflow-style: none 137 | } 138 | 139 | .swiper-css-mode>.swiper-wrapper::-webkit-scrollbar { 140 | display: none 141 | } 142 | 143 | .swiper-css-mode>.swiper-wrapper>.swiper-slide { 144 | scroll-snap-align: start start 145 | } 146 | 147 | .swiper-horizontal.swiper-css-mode>.swiper-wrapper { 148 | scroll-snap-type: x mandatory 149 | } 150 | 151 | .swiper-vertical.swiper-css-mode>.swiper-wrapper { 152 | scroll-snap-type: y mandatory 153 | } 154 | 155 | .swiper-centered>.swiper-wrapper::before { 156 | content: ''; 157 | flex-shrink: 0; 158 | order: 9999 159 | } 160 | 161 | .swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child { 162 | margin-inline-start: var(--swiper-centered-offset-before) 163 | } 164 | 165 | .swiper-centered.swiper-horizontal>.swiper-wrapper::before { 166 | height: 100%; 167 | min-height: 1px; 168 | width: var(--swiper-centered-offset-after) 169 | } 170 | 171 | .swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child { 172 | margin-block-start: var(--swiper-centered-offset-before) 173 | } 174 | 175 | .swiper-centered.swiper-vertical>.swiper-wrapper::before { 176 | width: 100%; 177 | min-width: 1px; 178 | height: var(--swiper-centered-offset-after) 179 | } 180 | 181 | .swiper-centered>.swiper-wrapper>.swiper-slide { 182 | scroll-snap-align: center center 183 | } 184 | 185 | .swiper-virtual.swiper-css-mode .swiper-wrapper::after { 186 | content: ''; 187 | position: absolute; 188 | left: 0; 189 | top: 0; 190 | pointer-events: none 191 | } 192 | 193 | .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { 194 | height: 1px; 195 | width: var(--swiper-virtual-size) 196 | } 197 | 198 | .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { 199 | width: 1px; 200 | height: var(--swiper-virtual-size) 201 | } 202 | 203 | :root { 204 | --swiper-navigation-size: 44px 205 | } 206 | 207 | .swiper-button-next, 208 | .swiper-button-prev { 209 | position: absolute; 210 | top: 50%; 211 | width: calc(var(--swiper-navigation-size)/ 44 * 27); 212 | height: var(--swiper-navigation-size); 213 | margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)); 214 | z-index: 10; 215 | cursor: pointer; 216 | display: flex; 217 | align-items: center; 218 | justify-content: center; 219 | color: var(--swiper-navigation-color, var(--swiper-theme-color)) 220 | } 221 | 222 | .swiper-button-next.swiper-button-disabled, 223 | .swiper-button-prev.swiper-button-disabled { 224 | opacity: .35; 225 | cursor: auto; 226 | pointer-events: none 227 | } 228 | 229 | .swiper-button-next:after, 230 | .swiper-button-prev:after { 231 | font-family: swiper-icons; 232 | font-size: var(--swiper-navigation-size); 233 | text-transform: none!important; 234 | letter-spacing: 0; 235 | text-transform: none; 236 | font-variant: initial; 237 | line-height: 1 238 | } 239 | 240 | .swiper-button-prev, 241 | .swiper-rtl .swiper-button-next { 242 | left: 10px; 243 | right: auto 244 | } 245 | 246 | .swiper-button-prev:after, 247 | .swiper-rtl .swiper-button-next:after { 248 | content: 'prev' 249 | } 250 | 251 | .swiper-button-next, 252 | .swiper-rtl .swiper-button-prev { 253 | right: 10px; 254 | left: auto 255 | } 256 | 257 | .swiper-button-next:after, 258 | .swiper-rtl .swiper-button-prev:after { 259 | content: 'next' 260 | } 261 | 262 | .swiper-button-lock { 263 | display: none 264 | } 265 | 266 | .swiper-pagination { 267 | position: absolute; 268 | text-align: center; 269 | transition: .3s opacity; 270 | transform: translate3d(0, 0, 0); 271 | z-index: 10 272 | } 273 | 274 | .swiper-pagination.swiper-pagination-hidden { 275 | opacity: 0 276 | } 277 | 278 | .swiper-horizontal>.swiper-pagination-bullets, 279 | .swiper-pagination-bullets.swiper-pagination-horizontal, 280 | .swiper-pagination-custom, 281 | .swiper-pagination-fraction { 282 | bottom: 10px; 283 | left: 0; 284 | width: 100% 285 | } 286 | 287 | .swiper-pagination-bullets-dynamic { 288 | overflow: hidden; 289 | font-size: 0 290 | } 291 | 292 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { 293 | transform: scale(.33); 294 | position: relative 295 | } 296 | 297 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { 298 | transform: scale(1) 299 | } 300 | 301 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { 302 | transform: scale(1) 303 | } 304 | 305 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { 306 | transform: scale(.66) 307 | } 308 | 309 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { 310 | transform: scale(.33) 311 | } 312 | 313 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { 314 | transform: scale(.66) 315 | } 316 | 317 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { 318 | transform: scale(.33) 319 | } 320 | 321 | .swiper-pagination-bullet { 322 | width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); 323 | height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); 324 | display: inline-block; 325 | border-radius: 50%; 326 | background: var(--swiper-pagination-bullet-inactive-color, rgb(104, 104, 104)); 327 | opacity: var(--swiper-pagination-bullet-inactive-opacity, .2) 328 | } 329 | 330 | button.swiper-pagination-bullet { 331 | border: none; 332 | margin: 0; 333 | padding: 0; 334 | box-shadow: none; 335 | -webkit-appearance: none; 336 | appearance: none 337 | } 338 | 339 | .swiper-pagination-clickable .swiper-pagination-bullet { 340 | cursor: pointer 341 | } 342 | 343 | .swiper-pagination-bullet:only-child { 344 | display: none!important 345 | } 346 | 347 | .swiper-pagination-bullet-active { 348 | opacity: var(--swiper-pagination-bullet-opacity, 1); 349 | background: var(--swiper-pagination-color, var(--swiper-theme-color)) 350 | } 351 | 352 | .swiper-pagination-vertical.swiper-pagination-bullets, 353 | .swiper-vertical>.swiper-pagination-bullets { 354 | right: 10px; 355 | top: 50%; 356 | transform: translate3d(0px, -50%, 0) 357 | } 358 | 359 | .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, 360 | .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { 361 | margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; 362 | display: block 363 | } 364 | 365 | .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, 366 | .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { 367 | top: 50%; 368 | transform: translateY(-50%); 369 | width: 8px 370 | } 371 | 372 | .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, 373 | .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { 374 | display: inline-block; 375 | transition: .2s transform, .2s top 376 | } 377 | 378 | .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 379 | .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { 380 | margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px) 381 | } 382 | 383 | .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, 384 | .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { 385 | left: 50%; 386 | transform: translateX(-50%); 387 | white-space: nowrap 388 | } 389 | 390 | .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, 391 | .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { 392 | transition: .2s transform, .2s left 393 | } 394 | 395 | .swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { 396 | transition: .2s transform, .2s right 397 | } 398 | 399 | .swiper-pagination-progressbar { 400 | background: rgba(0, 0, 0, .25); 401 | position: absolute 402 | } 403 | 404 | .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { 405 | background: var(--swiper-pagination-color, var(--swiper-theme-color)); 406 | position: absolute; 407 | left: 0; 408 | top: 0; 409 | width: 100%; 410 | height: 100%; 411 | transform: scale(0); 412 | transform-origin: left top 413 | } 414 | 415 | .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { 416 | transform-origin: right top 417 | } 418 | 419 | .swiper-horizontal>.swiper-pagination-progressbar, 420 | .swiper-pagination-progressbar.swiper-pagination-horizontal, 421 | .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, 422 | .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { 423 | width: 100%; 424 | height: 4px; 425 | left: 0; 426 | top: 0 427 | } 428 | 429 | .swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, 430 | .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, 431 | .swiper-pagination-progressbar.swiper-pagination-vertical, 432 | .swiper-vertical>.swiper-pagination-progressbar { 433 | width: 4px; 434 | height: 100%; 435 | left: 0; 436 | top: 0 437 | } 438 | 439 | .swiper-pagination-lock { 440 | display: none 441 | } 442 | 443 | .swiper-scrollbar { 444 | border-radius: 10px; 445 | position: relative; 446 | -ms-touch-action: none; 447 | background: rgba(0, 0, 0, .1) 448 | } 449 | 450 | .swiper-horizontal>.swiper-scrollbar { 451 | position: absolute; 452 | left: 1%; 453 | bottom: 3px; 454 | z-index: 50; 455 | height: 5px; 456 | width: 98% 457 | } 458 | 459 | .swiper-vertical>.swiper-scrollbar { 460 | position: absolute; 461 | right: 3px; 462 | top: 1%; 463 | z-index: 50; 464 | width: 5px; 465 | height: 98% 466 | } 467 | 468 | .swiper-scrollbar-drag { 469 | height: 100%; 470 | width: 100%; 471 | position: relative; 472 | background: rgba(0, 0, 0, .5); 473 | border-radius: 10px; 474 | left: 0; 475 | top: 0 476 | } 477 | 478 | .swiper-scrollbar-cursor-drag { 479 | cursor: move 480 | } 481 | 482 | .swiper-scrollbar-lock { 483 | display: none 484 | } 485 | 486 | .swiper-zoom-container { 487 | width: 100%; 488 | height: 100%; 489 | display: flex; 490 | justify-content: center; 491 | align-items: center; 492 | text-align: center 493 | } 494 | 495 | .swiper-zoom-container>canvas, 496 | .swiper-zoom-container>img, 497 | .swiper-zoom-container>svg { 498 | max-width: 100%; 499 | max-height: 100%; 500 | object-fit: contain 501 | } 502 | 503 | .swiper-slide-zoomed { 504 | cursor: move 505 | } 506 | 507 | .swiper-lazy-preloader { 508 | width: 42px; 509 | height: 42px; 510 | position: absolute; 511 | left: 50%; 512 | top: 50%; 513 | margin-left: -21px; 514 | margin-top: -21px; 515 | z-index: 10; 516 | transform-origin: 50%; 517 | animation: swiper-preloader-spin 1s infinite linear; 518 | box-sizing: border-box; 519 | border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); 520 | border-radius: 50%; 521 | border-top-color: transparent 522 | } 523 | 524 | .swiper-lazy-preloader-white { 525 | --swiper-preloader-color: #fff 526 | } 527 | 528 | .swiper-lazy-preloader-black { 529 | --swiper-preloader-color: #000 530 | } 531 | 532 | @keyframes swiper-preloader-spin { 533 | 100% { 534 | transform: rotate(360deg) 535 | } 536 | } 537 | 538 | .swiper .swiper-notification { 539 | position: absolute; 540 | left: 0; 541 | top: 0; 542 | pointer-events: none; 543 | opacity: 0; 544 | z-index: -1000 545 | } 546 | 547 | .swiper-free-mode>.swiper-wrapper { 548 | transition-timing-function: ease-out; 549 | margin: 0 auto 550 | } 551 | 552 | .swiper-grid>.swiper-wrapper { 553 | flex-wrap: wrap 554 | } 555 | 556 | .swiper-grid-column>.swiper-wrapper { 557 | flex-wrap: wrap; 558 | flex-direction: column 559 | } 560 | 561 | .swiper-fade.swiper-free-mode .swiper-slide { 562 | transition-timing-function: ease-out 563 | } 564 | 565 | .swiper-fade .swiper-slide { 566 | pointer-events: none; 567 | transition-property: opacity 568 | } 569 | 570 | .swiper-fade .swiper-slide .swiper-slide { 571 | pointer-events: none 572 | } 573 | 574 | .swiper-fade .swiper-slide-active, 575 | .swiper-fade .swiper-slide-active .swiper-slide-active { 576 | pointer-events: auto 577 | } 578 | 579 | .swiper-cube { 580 | overflow: visible 581 | } 582 | 583 | .swiper-cube .swiper-slide { 584 | pointer-events: none; 585 | -webkit-backface-visibility: hidden; 586 | backface-visibility: hidden; 587 | z-index: 1; 588 | visibility: hidden; 589 | transform-origin: 0 0; 590 | width: 100%; 591 | height: 100% 592 | } 593 | 594 | .swiper-cube .swiper-slide .swiper-slide { 595 | pointer-events: none 596 | } 597 | 598 | .swiper-cube.swiper-rtl .swiper-slide { 599 | transform-origin: 100% 0 600 | } 601 | 602 | .swiper-cube .swiper-slide-active, 603 | .swiper-cube .swiper-slide-active .swiper-slide-active { 604 | pointer-events: auto 605 | } 606 | 607 | .swiper-cube .swiper-slide-active, 608 | .swiper-cube .swiper-slide-next, 609 | .swiper-cube .swiper-slide-next+.swiper-slide, 610 | .swiper-cube .swiper-slide-prev { 611 | pointer-events: auto; 612 | visibility: visible 613 | } 614 | 615 | .swiper-cube .swiper-slide-shadow-bottom, 616 | .swiper-cube .swiper-slide-shadow-left, 617 | .swiper-cube .swiper-slide-shadow-right, 618 | .swiper-cube .swiper-slide-shadow-top { 619 | z-index: 0; 620 | -webkit-backface-visibility: hidden; 621 | backface-visibility: hidden 622 | } 623 | 624 | .swiper-cube .swiper-cube-shadow { 625 | position: absolute; 626 | left: 0; 627 | bottom: 0px; 628 | width: 100%; 629 | height: 100%; 630 | opacity: .6; 631 | z-index: 0 632 | } 633 | 634 | .swiper-cube .swiper-cube-shadow:before { 635 | content: ''; 636 | background: #000; 637 | position: absolute; 638 | left: 0; 639 | top: 0; 640 | bottom: 0; 641 | right: 0; 642 | filter: blur(50px) 643 | } 644 | 645 | .swiper-flip { 646 | overflow: visible 647 | } 648 | 649 | .swiper-flip .swiper-slide { 650 | pointer-events: none; 651 | -webkit-backface-visibility: hidden; 652 | backface-visibility: hidden; 653 | z-index: 1 654 | } 655 | 656 | .swiper-flip .swiper-slide .swiper-slide { 657 | pointer-events: none 658 | } 659 | 660 | .swiper-flip .swiper-slide-active, 661 | .swiper-flip .swiper-slide-active .swiper-slide-active { 662 | pointer-events: auto 663 | } 664 | 665 | .swiper-flip .swiper-slide-shadow-bottom, 666 | .swiper-flip .swiper-slide-shadow-left, 667 | .swiper-flip .swiper-slide-shadow-right, 668 | .swiper-flip .swiper-slide-shadow-top { 669 | z-index: 0; 670 | -webkit-backface-visibility: hidden; 671 | backface-visibility: hidden 672 | } 673 | 674 | .swiper-creative .swiper-slide { 675 | -webkit-backface-visibility: hidden; 676 | backface-visibility: hidden; 677 | overflow: hidden; 678 | transition-property: transform, opacity, height 679 | } 680 | 681 | .swiper-cards { 682 | overflow: visible 683 | } 684 | 685 | .swiper-cards .swiper-slide { 686 | transform-origin: center bottom; 687 | -webkit-backface-visibility: hidden; 688 | backface-visibility: hidden; 689 | overflow: hidden 690 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); 2 | :root { 3 | --header-height: 3rem; 4 | --hue-color: 250; 5 | --first-color: hsl(var(--hue-color), 69%, 61%); 6 | /* #6e57e0 */ 7 | --first-color-second: hsl(var(--hue-color), 69%, 61%); 8 | --first-color-alt: hsl(var(--hue-color), 57%, 53%); 9 | /* #7d6bd6 */ 10 | --first-color-lighter: hsl(var(--hue-color), 92%, 85%); 11 | /* #c2b6fc */ 12 | --title-color: hsl(var(--hue-color), 8%, 15%); 13 | --text-color: hsl(var(--hue-color), 8%, 45%); 14 | --text-color-light: hsl(var(--hue-color), 8%, 65%); 15 | --input-color: hsl(var(--hue-color), 70%, 96%); 16 | --body-color: hsl(var(--hue-color), 60%, 99%); 17 | --container-color: #fff; 18 | --scroll-bar-color: hsl(var(--hue-color), 12%, 90%); 19 | --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%); 20 | --body-font: "Poppins", sans-serif; 21 | /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px */ 22 | --big-font-size: 2rem; 23 | --h1-font-size: 1.5rem; 24 | --h2-font-size: 1.25rem; 25 | --h3-font-size: 1.125rem; 26 | --normal-font-size: 0.938rem; 27 | --small-font-size: 0.813rem; 28 | --smaller-font-size: 0.75rem; 29 | --font-medium: 500; 30 | --font-semi-bold: 600; 31 | --mb-0-25: 0.25rem; 32 | --mb-0-5: 0.5rem; 33 | --mb-0-75: 0.75rem; 34 | --mb-1: 1rem; 35 | --mb-1-5: 1.5rem; 36 | --mb-2: 2rem; 37 | --mb-2-5: 2.5rem; 38 | --mb-3: 3rem; 39 | --z-tooltip: 10; 40 | --z-fixed: 100; 41 | --z-modal: 1000; 42 | } 43 | 44 | 45 | /* Font size for large devices */ 46 | 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 | 59 | 60 | /* Variables Dark Theme */ 61 | 62 | body.dark-theme { 63 | --first-color-second: hsl(var(--hue-color), 30%, 8%); 64 | --title-color: hsl(var(--hue-color), 8%, 95%); 65 | --text-color: hsl(var(--hue-color), 8%, 75%); 66 | --input-color: hsl(var(--hue-color), 29%, 16%); 67 | --body-color: hsl(var(--hue-color), 28%, 12%); 68 | --container-color: hsl(var(--hue-color), 29%, 16%); 69 | --scroll-bar-color: hsl(var(--hue-color), 12%, 48%); 70 | --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%); 71 | } 72 | 73 | 74 | /* Button Dark/Light */ 75 | 76 | .nav_btns { 77 | display: flex; 78 | align-items: center; 79 | } 80 | 81 | .change-theme { 82 | font-size: 1.25rem; 83 | color: var(--title-color); 84 | margin-right: var(--mb-1); 85 | cursor: pointer; 86 | } 87 | 88 | .change-theme:hover { 89 | color: var(--first-color); 90 | } 91 | 92 | 93 | /* BASE */ 94 | 95 | * { 96 | box-sizing: border-box; 97 | padding: 0; 98 | margin: 0; 99 | } 100 | 101 | html { 102 | scroll-behavior: smooth; 103 | } 104 | 105 | body { 106 | margin: 0 0 var(--header-height); 107 | font-family: var(--body-font); 108 | font-size: var(--normal-font-size); 109 | background-color: var(--body-color); 110 | color: var(--text-color); 111 | } 112 | 113 | h1, 114 | h2, 115 | h3, 116 | h4 { 117 | color: var(--title-color); 118 | font-weight: var(--font-semi-bold); 119 | } 120 | 121 | ul { 122 | list-style: none; 123 | } 124 | 125 | a { 126 | text-decoration: none; 127 | } 128 | 129 | img { 130 | max-width: 100%; 131 | height: auto; 132 | } 133 | 134 | button { 135 | border-style: none; 136 | cursor: pointer; 137 | } 138 | 139 | 140 | /* REUSABLE CSS CLASSES */ 141 | 142 | .section { 143 | padding: 2rem 0 4rem; 144 | } 145 | 146 | .section_title { 147 | font-size: var(--h1-font-size); 148 | } 149 | 150 | .section_subtitle { 151 | display: block; 152 | font-size: var(--small-font-size); 153 | margin-bottom: var(--mb-3); 154 | } 155 | 156 | .section_title, 157 | .section_subtitle { 158 | text-align: center; 159 | } 160 | 161 | 162 | /* LAYOUT */ 163 | 164 | .container { 165 | max-width: 768px; 166 | margin-left: var(--mb-1-5); 167 | margin-right: var(--mb-1-5); 168 | } 169 | 170 | .grid { 171 | display: grid; 172 | gap: 1.5rem; 173 | } 174 | 175 | .header { 176 | width: 100%; 177 | position: fixed; 178 | bottom: 0; 179 | left: 0; 180 | z-index: var(--z-fixed); 181 | background-color: var(--body-color); 182 | } 183 | 184 | 185 | /* NAVBAR */ 186 | 187 | .nav { 188 | max-width: 968px; 189 | height: var(--header-height); 190 | display: flex; 191 | justify-content: space-between; 192 | align-items: center; 193 | } 194 | 195 | .nav_logo, 196 | .nav_toggle { 197 | color: var(--title-color); 198 | font-weight: var(--font-medium); 199 | } 200 | 201 | .nav_logo:hover { 202 | color: var(--first-color); 203 | } 204 | 205 | .nav_toggle { 206 | font-size: 1.1rem; 207 | cursor: pointer; 208 | } 209 | 210 | .nav_toggle:hover { 211 | color: var(--first-color); 212 | } 213 | 214 | @media screen and (max-width: 767px) { 215 | .nav_menu { 216 | position: fixed; 217 | bottom: -100%; 218 | left: 0; 219 | width: 100%; 220 | background-color: var(--body-color); 221 | padding: 2rem 1.5rem 4rem; 222 | box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15); 223 | border-radius: 1.5rem 1.5rem 0 0; 224 | transition: 0.3s; 225 | } 226 | } 227 | 228 | .nav_list { 229 | grid-template-columns: repeat(3, 1fr); 230 | gap: 2rem; 231 | } 232 | 233 | .nav_link { 234 | display: flex; 235 | flex-direction: column; 236 | align-items: center; 237 | font-size: var(--small-font-size); 238 | color: var(--title-color); 239 | font-weight: var(--font-medium); 240 | } 241 | 242 | .nav_link:hover { 243 | color: var(--first-color); 244 | } 245 | 246 | .nav_icon { 247 | font-size: 1.2rem; 248 | } 249 | 250 | .nav_close { 251 | position: absolute; 252 | right: 1.3rem; 253 | bottom: 0.5rem; 254 | font-size: 1.5rem; 255 | cursor: pointer; 256 | color: var(--first-color); 257 | } 258 | 259 | .nav_close:hover { 260 | color: var(--first-color-alt); 261 | } 262 | 263 | 264 | /* Show Menu */ 265 | 266 | .show-menu { 267 | bottom: 0; 268 | } 269 | 270 | 271 | /* Active link */ 272 | 273 | .active-link { 274 | color: var(--first-color); 275 | } 276 | 277 | 278 | /* Header Shadow */ 279 | 280 | .scroll-header { 281 | box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.15); 282 | } 283 | 284 | 285 | /* HOME */ 286 | 287 | .home_container { 288 | gap: 1rem; 289 | } 290 | 291 | .home_content { 292 | grid-template-columns: 0.5fr 3fr; 293 | padding-top: 3.5rem; 294 | align-items: center; 295 | } 296 | 297 | .home_social { 298 | display: grid; 299 | grid-template-columns: max-content; 300 | row-gap: 1rem; 301 | } 302 | 303 | .home_social-icon { 304 | font-size: 1.25rem; 305 | color: var(--first-color); 306 | } 307 | 308 | .home_social-icon:hover { 309 | color: var(--first-color-alt); 310 | } 311 | 312 | .home_blob { 313 | width: 200px; 314 | fill: var(--first-color); 315 | } 316 | 317 | .home_blob-img { 318 | width: 170px; 319 | } 320 | 321 | .home_data { 322 | grid-column: 1/3; 323 | } 324 | 325 | .home_title { 326 | font-size: var(--big-font-size); 327 | } 328 | 329 | .home_subtitle { 330 | font-size: var(--h3-font-size); 331 | color: var(--text-color); 332 | font-weight: var(--font-medium); 333 | margin-bottom: var(--mb-0-75); 334 | } 335 | 336 | .home_description { 337 | margin-bottom: var(--mb-2); 338 | } 339 | 340 | .home_scroll { 341 | display: none; 342 | } 343 | 344 | .home_scroll-button { 345 | color: var(--first-color); 346 | transition: 0.3s; 347 | } 348 | 349 | .home_scroll-button:hover { 350 | transform: translateY(0.25rem); 351 | } 352 | 353 | .home_scroll-mouse { 354 | font-size: 2rem; 355 | } 356 | 357 | .home_scroll-name { 358 | font-size: var(--small-font-size); 359 | color: var(--title-color); 360 | font-weight: var(--font-medium); 361 | margin-right: var(--mb-0-25); 362 | } 363 | 364 | .home_scroll-arrow { 365 | font-size: 1.25rem; 366 | } 367 | 368 | 369 | /* BUTTONS */ 370 | 371 | .button { 372 | display: inline-block; 373 | background-color: var(--first-color); 374 | color: #fff; 375 | padding: 1rem; 376 | border-radius: 0.5rem; 377 | font-weight: var(--font-medium); 378 | } 379 | 380 | .button:hover { 381 | background-color: var(--first-color-alt); 382 | } 383 | 384 | .button_icon { 385 | font-size: 1.25rem; 386 | margin-left: var(--mb-0-5); 387 | transition: 0.3s; 388 | } 389 | 390 | .button--flex { 391 | display: inline-flex; 392 | align-items: center; 393 | gap: 0.3rem; 394 | } 395 | 396 | 397 | /* ABOUT */ 398 | 399 | .about_img { 400 | width: 200px; 401 | border-radius: 0.5rem; 402 | justify-self: center; 403 | align-self: center; 404 | } 405 | 406 | .about_description { 407 | text-align: center; 408 | margin-bottom: var(--mb-1-5); 409 | } 410 | 411 | .about_info-title { 412 | font-size: var(--h2-font-size); 413 | font-weight: var(--font-semi-bold); 414 | color: var(--first-color); 415 | } 416 | 417 | .about_button { 418 | display: flex; 419 | justify-content: center; 420 | } 421 | 422 | 423 | /* SKILLS */ 424 | 425 | .skills_container { 426 | row-gap: 0; 427 | } 428 | 429 | .skills_header { 430 | display: flex; 431 | align-items: center; 432 | margin-bottom: var(--mb-2-5); 433 | cursor: pointer; 434 | } 435 | 436 | .skills_icon, 437 | .skills_arrow { 438 | font-size: 2rem; 439 | font-weight: bolder; 440 | color: var(--first-color); 441 | } 442 | 443 | .skills_icon { 444 | margin-right: var(--mb-0-75); 445 | } 446 | 447 | .skills_title { 448 | font-size: var(--h3-font-size); 449 | } 450 | 451 | .skills_subtitle { 452 | font-size: var(--small-font-size); 453 | color: var(--text-color-light); 454 | } 455 | 456 | .skills_arrow { 457 | margin-left: auto; 458 | transition: 0.4s; 459 | } 460 | 461 | .skills_list { 462 | row-gap: 1.5rem; 463 | padding-left: 2.7rem; 464 | } 465 | 466 | .skills_titles { 467 | display: flex; 468 | justify-content: space-between; 469 | /* margin-bottom: var(--mb-0-5); */ 470 | } 471 | 472 | .skills_name { 473 | font-size: var(--normal-font-size); 474 | font-weight: var(--font-medium); 475 | } 476 | 477 | .single_skill_icon { 478 | color: var(--first-color); 479 | font-size: var(--h1-font-size); 480 | } 481 | 482 | .external-logo { 483 | width: var(--h1-font-size); 484 | } 485 | 486 | .skills_bar { 487 | height: 5px; 488 | border-radius: 0.25rem; 489 | background-color: var(--first-color); 490 | } 491 | 492 | .skills_list { 493 | height: 0; 494 | overflow: hidden; 495 | } 496 | 497 | .skills_open .skills_list { 498 | height: max-content; 499 | margin-bottom: var(--mb-2-5); 500 | transition: 0.3s; 501 | } 502 | 503 | .skills_open .skills_arrow { 504 | transform: rotate(-180deg); 505 | } 506 | 507 | 508 | /* QUALIFICATION */ 509 | 510 | .qualification_tabs { 511 | display: flex; 512 | justify-content: space-evenly; 513 | margin-bottom: var(--mb-2); 514 | } 515 | 516 | .qualification_button { 517 | font-size: var(--h3-font-size); 518 | font-weight: var(--font-medium); 519 | color: var(--first-color); 520 | cursor: pointer; 521 | } 522 | 523 | .qualification_button:hover { 524 | color: var(--first-color); 525 | } 526 | 527 | .qualification_icon { 528 | font-size: 1.8rem; 529 | margin-right: var(--mb-0-25); 530 | } 531 | 532 | .qualification_data { 533 | display: grid; 534 | grid-template-columns: 1fr max-content 1fr; 535 | column-gap: 1.5rem; 536 | } 537 | 538 | .qualification_title { 539 | font-size: var(--normal-font-size); 540 | font-weight: var(--font-medium); 541 | } 542 | 543 | .qualification_subtitle { 544 | display: inline-block; 545 | font-size: var(--small-font-size); 546 | margin-bottom: var(--mb-1); 547 | } 548 | 549 | .qualification_calendar { 550 | font-size: var(--smaller-font-size); 551 | color: var(--text-color-light); 552 | } 553 | 554 | .qualification_circle { 555 | display: inline-block; 556 | width: 13px; 557 | height: 13px; 558 | background-color: var(--first-color); 559 | border-radius: 50%; 560 | } 561 | 562 | .qualification_line { 563 | display: block; 564 | width: 1px; 565 | height: 100%; 566 | background-color: var(--first-color); 567 | transform: translate(6px, -7px); 568 | } 569 | 570 | .qualification-content { 571 | display: block; 572 | } 573 | 574 | .qualification-inactive { 575 | display: none; 576 | } 577 | 578 | 579 | /* PORTFOLIO */ 580 | 581 | .portfolio_container { 582 | overflow: initial; 583 | } 584 | 585 | .portfolio_content { 586 | padding: 0 2.5rem; 587 | } 588 | 589 | .portfolio_img { 590 | width: 256px; 591 | border-radius: 0.5rem; 592 | justify-self: center; 593 | } 594 | 595 | .portfolio_title { 596 | font-size: var(--h3-font-size); 597 | margin-bottom: var(--mb-0-5); 598 | } 599 | 600 | .portfolio_description { 601 | margin-bottom: var(--mb-0-75); 602 | } 603 | 604 | .portfolio_button:hover .button_icon { 605 | transform: translateX(0.25rem); 606 | } 607 | 608 | .swiper-button-prev::after, 609 | .swiper-button-next::after { 610 | content: ""; 611 | } 612 | 613 | .swiper-portfolio-icon { 614 | font-size: 2rem; 615 | color: var(--first-color); 616 | } 617 | 618 | .swiper-button-prev { 619 | left: -0.5rem; 620 | } 621 | 622 | .swiper-button-next { 623 | right: -0.5rem; 624 | } 625 | 626 | .swiper-horizontal>.swiper-pagination-bullets { 627 | bottom: -2.5rem; 628 | } 629 | 630 | .swiper-pagination-bullet-active { 631 | background-color: var(--first-color); 632 | } 633 | 634 | .swiper-button-prev, 635 | .swiper-button-next, 636 | .swiper-pagination-bullet { 637 | outline: none; 638 | } 639 | 640 | 641 | /* CONTACT ME */ 642 | 643 | .contact_container { 644 | row-gap: 3rem; 645 | } 646 | 647 | .contact_info { 648 | display: flex; 649 | margin-bottom: var(--mb-2); 650 | align-items: flex-start; 651 | } 652 | 653 | .contact_icon { 654 | font-size: 2rem; 655 | color: var(--first-color); 656 | margin-right: var(--mb-0-75); 657 | } 658 | 659 | .contact_title { 660 | font-size: var(--h3-font-size); 661 | font-weight: var(--font-medium); 662 | } 663 | 664 | .contact_subtitle { 665 | font-size: var(--small-font-size); 666 | color: var(--text-color-light); 667 | } 668 | 669 | .contact_content { 670 | background-color: var(--input-color); 671 | border-radius: 0.5rem; 672 | padding: 0.75rem 1rem 0.25rem; 673 | } 674 | 675 | .contact_input { 676 | width: 100%; 677 | background-color: var(--input-color); 678 | color: var(--text-color); 679 | font-family: var(--body-font); 680 | font-size: var(--normal-font-size); 681 | border: none; 682 | outline: none; 683 | padding: 0.25rem 0.5rem 0.5rem 0; 684 | } 685 | 686 | .contact_label { 687 | font-size: var(--smaller-font-size); 688 | color: var(--title-color); 689 | } 690 | 691 | .alert_style { 692 | text-align: center; 693 | padding: 10px; 694 | font-size: var(--small-font-size); 695 | background-color: var(--first-color); 696 | color: #fff; 697 | border-radius: 0.5rem; 698 | display: none; 699 | } 700 | 701 | 702 | /* FOOTER */ 703 | 704 | .footer { 705 | padding-top: 2rem; 706 | } 707 | 708 | .footer_container { 709 | row-gap: 3.5rem; 710 | } 711 | 712 | .footer_bg { 713 | background-color: var(--first-color-second); 714 | padding: 2rem 0 3rem; 715 | } 716 | 717 | .footer_title { 718 | font-size: var(--h1-font-size); 719 | margin-bottom: var(--mb-0-25); 720 | } 721 | 722 | .footer_subtitle { 723 | font-size: var(--small-font-size); 724 | } 725 | 726 | .footer_links { 727 | display: flex; 728 | flex-direction: column; 729 | row-gap: 1.5rem; 730 | } 731 | 732 | .footer_title, 733 | .footer_subtitle, 734 | .footer_link, 735 | .footer_social { 736 | color: #fff; 737 | } 738 | 739 | .footer_link:hover { 740 | color: var(--first-color-lighter); 741 | } 742 | 743 | .footer_social { 744 | font-size: 1.25rem; 745 | margin-right: var(--mb-1-5); 746 | } 747 | 748 | .footer_social:hover { 749 | color: var(--first-color-lighter); 750 | } 751 | 752 | .footer_copy { 753 | font-size: var(--smaller-font-size); 754 | text-align: center; 755 | color: var(--text-color-light); 756 | margin-top: var(--mb-3); 757 | } 758 | 759 | 760 | /* SCROLL UP */ 761 | 762 | .scrollup { 763 | position: fixed; 764 | right: 1rem; 765 | bottom: -20%; 766 | background-color: var(--first-color); 767 | opacity: 0.8; 768 | padding: 0 0.3rem; 769 | border-radius: 0.4rem; 770 | z-index: var(--z-tooltip); 771 | transition: 0.4s; 772 | } 773 | 774 | .scrollup:hover { 775 | background-color: var(--first-color-alt); 776 | } 777 | 778 | .scrollup_icon { 779 | font-size: 1.5rem; 780 | color: #fff; 781 | } 782 | 783 | 784 | /* SHOW SCROLL BUTTON */ 785 | 786 | .show-scroll { 787 | bottom: 5rem; 788 | } 789 | 790 | 791 | /* SCROLL BAR */ 792 | 793 | ::-webkit-scrollbar { 794 | width: 0.6rem; 795 | background-color: var(--scroll-bar-color); 796 | border-radius: 0.5rem; 797 | } 798 | 799 | ::-webkit-scrollbar-thumb { 800 | background-color: var(--scroll-thumb-color); 801 | border-radius: 0.5rem; 802 | } 803 | 804 | ::-webkit-scrollbar-thumb:hover { 805 | background-color: var(--text-color-light); 806 | } 807 | 808 | 809 | /* MEDIA QUERIES */ 810 | 811 | 812 | /* For small devices */ 813 | 814 | @media screen and (max-width: 350px) { 815 | .container { 816 | margin-left: var(--mb-1); 817 | margin-right: var(--mb-1); 818 | } 819 | .nav_menu { 820 | padding: 2rem 0.25rem 4rem; 821 | } 822 | .nav_list { 823 | column-gap: 0; 824 | } 825 | .home_content { 826 | grid-template-columns: 0.25fr 3fr; 827 | } 828 | .home_blob { 829 | width: 180px; 830 | } 831 | .skills_title { 832 | font-size: var(--normal-font-size); 833 | } 834 | .qualification_data { 835 | gap: 0.5rem; 836 | } 837 | .portfolio-img { 838 | width: 200px; 839 | } 840 | } 841 | 842 | 843 | /* For medium devices */ 844 | 845 | @media screen and (min-width: 568px) { 846 | .home_content { 847 | grid-template-columns: max-content 1fr 1fr; 848 | } 849 | .home_data { 850 | grid-column: initial; 851 | } 852 | .home_img { 853 | order: 1; 854 | justify-self: center; 855 | } 856 | .about_container, 857 | .contact_container, 858 | .footer_container, 859 | .portfolio_content { 860 | grid-template-columns: repeat(2, 1fr); 861 | } 862 | .qualification_sections { 863 | display: grid; 864 | grid-template-columns: 0.6fr; 865 | justify-content: center; 866 | } 867 | } 868 | 869 | @media screen and (min-width: 768px) { 870 | .container { 871 | margin-left: auto; 872 | margin-right: auto; 873 | } 874 | body { 875 | margin: 0; 876 | } 877 | .section { 878 | padding: 6rem 0 2rem; 879 | } 880 | .section_subtitle { 881 | margin-bottom: 4rem; 882 | } 883 | .header { 884 | top: 0; 885 | bottom: initial; 886 | } 887 | .header, 888 | .main, 889 | .footer_container { 890 | padding: 0 1rem; 891 | } 892 | .nav { 893 | height: calc(var(--header-height) + 1.5rem); 894 | column-gap: 1rem; 895 | } 896 | .nav_icon, 897 | .nav_close, 898 | .nav_toggle { 899 | display: none; 900 | } 901 | .nav_list { 902 | display: flex; 903 | column-gap: 2rem; 904 | } 905 | .nav_menu { 906 | margin-left: auto; 907 | } 908 | .change-theme { 909 | margin: 0; 910 | } 911 | .home_container { 912 | row-gap: 5rem; 913 | } 914 | .home_content { 915 | padding-top: 5.5rem; 916 | column-gap: 2rem; 917 | } 918 | .home_blob { 919 | width: 270px; 920 | } 921 | .home_scroll { 922 | display: block; 923 | } 924 | .home_scroll-button { 925 | margin-left: 3rem; 926 | } 927 | .about_container { 928 | column-gap: 5rem; 929 | } 930 | .about_img { 931 | width: 350px; 932 | } 933 | .about_description { 934 | text-align: initial; 935 | } 936 | .about_button { 937 | justify-content: initial; 938 | } 939 | .skills_container, 940 | .about_container { 941 | grid-template-columns: repeat(2, 1fr); 942 | } 943 | .qualification_tabs { 944 | justify-content: center; 945 | } 946 | .qualification_button { 947 | margin: 0 var(--mb-1); 948 | } 949 | .qualification_sections { 950 | grid-template-columns: 0.5fr; 951 | } 952 | .portfolio_img { 953 | width: 320px; 954 | } 955 | .portfolio_content { 956 | align-items: center; 957 | } 958 | .footer_container { 959 | grid-template-columns: repeat(3, 1fr); 960 | } 961 | .footer_bg { 962 | padding: 3rem 0 3.5rem; 963 | } 964 | .footer_links { 965 | flex-direction: row; 966 | column-gap: 1rem; 967 | } 968 | .footer_socials { 969 | justify-self: flex-end; 970 | } 971 | .footer_copy { 972 | margin-top: 4.5rem; 973 | } 974 | } 975 | 976 | 977 | /* For large devices */ 978 | 979 | @media screen and (min-width: 1024px) { 980 | .header, 981 | .main, 982 | .footer_container { 983 | padding: 0; 984 | } 985 | .home_blob { 986 | width: 320px; 987 | } 988 | .home_social { 989 | transform: translateX(-6rem); 990 | } 991 | .portfolio_content { 992 | column-gap: 5rem; 993 | } 994 | .swiper-portfolio-icon { 995 | font-size: 3.5rem; 996 | } 997 | .swiper-button-prev { 998 | left: -3.5rem; 999 | } 1000 | .swiper-button-next { 1001 | right: -3.5rem; 1002 | } 1003 | .swiper-container-horizontal>.swiper-pagination-bullets { 1004 | bottom: -4.5rem; 1005 | } 1006 | .contact_form { 1007 | width: 460px; 1008 | } 1009 | .contact_inputs { 1010 | grid-template-columns: repeat(2, 1fr); 1011 | } 1012 | } 1013 | 1014 | 1015 | /* Typewriter Effect*/ 1016 | 1017 | @keyframes typing { 1018 | 0.0000%, 1019 | 27.3488% { 1020 | content: ""; 1021 | } 1022 | 1.1395%, 1023 | 26.2093% { 1024 | content: "Mo"; 1025 | } 1026 | 2.2791%, 1027 | 25.0698% { 1028 | content: "Movi"; 1029 | } 1030 | 3.4186%, 1031 | 23.9302% { 1032 | content: "Movies"; 1033 | } 1034 | 30.7674%, 1035 | 51.2791% { 1036 | content: ""; 1037 | } 1038 | 31.9070%, 1039 | 50.1395% { 1040 | content: "Fi"; 1041 | } 1042 | 33.0465%, 1043 | 49.0000% { 1044 | content: "Fig"; 1045 | } 1046 | 34.1860%, 1047 | 47.8605% { 1048 | content: "Figh"; 1049 | } 1050 | 35.3256%, 1051 | 46.7209% { 1052 | content: "Fighte"; 1053 | } 1054 | 36.4651%, 1055 | 45.5814% { 1056 | content: "Fighter"; 1057 | } 1058 | 37.6047%, 1059 | 44.4419% { 1060 | content: "Fighter-je"; 1061 | } 1062 | 38.7443%, 1063 | 43.3023% { 1064 | content: "Fighter-jets"; 1065 | } 1066 | 54.6977%, 1067 | 85.2093% { 1068 | content: ""; 1069 | } 1070 | 55.8372%, 1071 | 84.0698% { 1072 | content: "E"; 1073 | } 1074 | 56.9767%, 1075 | 82.9302% { 1076 | content: "En"; 1077 | } 1078 | 58.1163%, 1079 | 81.7907% { 1080 | content: "Eng"; 1081 | } 1082 | 59.2558%, 1083 | 80.6512% { 1084 | content: "Engi"; 1085 | } 1086 | 60.3953%, 1087 | 79.5116% { 1088 | content: "Engin"; 1089 | } 1090 | 61.5349%, 1091 | 78.3721% { 1092 | content: "Engine"; 1093 | } 1094 | 62.6745%, 1095 | 77.2325% { 1096 | content: "Enginee"; 1097 | } 1098 | 63.8141%, 1099 | 76.0929% { 1100 | content: "Engineer"; 1101 | } 1102 | 64.9537%, 1103 | 74.9533% { 1104 | content: "Engineeri"; 1105 | } 1106 | 66.0933%, 1107 | 73.8137% { 1108 | content: "Engineering"; 1109 | } 1110 | } 1111 | 1112 | @keyframes blink { 1113 | 0%, 1114 | 100% { 1115 | opacity: 1; 1116 | } 1117 | 50% { 1118 | opacity: 0; 1119 | } 1120 | } 1121 | 1122 | .typewriter { 1123 | --caret: currentcolor; 1124 | } 1125 | 1126 | .typewriter::before { 1127 | content: ""; 1128 | animation: typing 13.5s infinite; 1129 | } 1130 | 1131 | .typewriter::after { 1132 | content: ""; 1133 | border-right: 2px solid var(--caret); 1134 | animation: blink 0.5s linear infinite; 1135 | } 1136 | 1137 | .typewriter.thick::after { 1138 | border-right: 1ch solid var(--caret); 1139 | } 1140 | 1141 | .typewriter.nocaret::after { 1142 | border-right: 0; 1143 | } 1144 | 1145 | @media (prefers-reduced-motion) { 1146 | .typewriter::after { 1147 | animation: none; 1148 | } 1149 | @keyframes sequencePopup { 1150 | 0%, 1151 | 100% { 1152 | content: "Web"; 1153 | } 1154 | 25% { 1155 | content: "Android"; 1156 | } 1157 | 50% { 1158 | content: "Blockchain"; 1159 | } 1160 | } 1161 | .typewriter::before { 1162 | content: "Web"; 1163 | animation: sequencePopup 12s linear infinite; 1164 | } 1165 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | Gaurav Sarage 26 | 27 | 28 | 29 | 30 | 40 | 41 | 42 | 43 | 44 | 99 | 100 | 101 |
102 | 103 |
104 |
105 |
106 |
107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 |
123 | 124 |
125 | 126 | 127 | 131 | 132 | 133 | 137 | 138 | 139 | 140 |
141 | 142 |
143 |

Hello, I'm Gaurav

144 |

145 | interests me 146 |

147 | 148 |

149 | A tech enthusiast and self learner, who believes in the power of community. 150 |

151 | 152 | Explore   153 | 154 | 155 |
156 |
157 | 158 |
159 | 160 | 161 | Scroll Down 162 | 163 | 164 |
165 |
166 |
167 | 168 | 169 |
170 |

About Me

171 | My introduction 172 |
173 | 174 |
175 |

176 | Hello. I'm Gaurav, a 20-year-old CS undergrad pursuing B.E in Computer Science. I'm an aspiring Full-stack developer, an open-source enthusiast & I love exploring and building projects 👨‍💻 using various technologies. I write content based on tech and motivate students through my posts. 177 |

178 |
179 | 180 | Resume 181 | 182 |
183 |
184 |
185 |
186 | 187 | 188 |
189 |

Skills

190 | My Technical Skills 191 |
192 | 193 |
194 |
195 | 196 | 197 |
198 |

Languages

199 | Skills I have picked up over the years 200 |
201 | 202 | 203 |
204 | 205 |
206 |
207 |
208 | 209 |
210 |
211 | 212 | 213 | 214 |

C++

215 |
216 |
217 |
218 | 219 |
220 |
221 | 222 | 223 | 224 |

Python

225 |
226 |
227 |
228 | 229 |
230 |
231 | 232 | 233 | 234 |

JavaScript

235 |
236 |
237 |
238 | 239 | 240 |
241 |
242 | 243 | 244 | 245 |
246 |
247 | 248 | 249 |
250 |

Tools

251 | Tools I know and use on a daily basis 252 |
253 | 254 | 255 |
256 | 257 |
258 |
259 |
260 | 261 | 262 | 263 |

Git

264 |
265 |
266 |
267 | 268 |
269 |
270 | 271 | 272 | 273 |

GitHub

274 |
275 |
276 |
277 | 278 |
279 |
280 | 283 |

Android Studio

284 |
285 |
286 |
287 | 288 |
289 |
290 | 291 | 292 | 293 |

VS Code

294 |
295 |
296 |
297 | 298 | 299 | 300 |
301 |
302 | 303 |
304 |
305 | 306 | 307 | 308 | 309 |
310 |

Qualifications

311 | My Educational Qualification & Work Experience 312 | 313 |
314 |
315 |
316 | Education 317 |
318 | 319 |
320 | Work 321 |
322 |
323 | 324 |
325 | 326 |
327 | 328 |
329 |
330 |

B.E, Computer Science

331 | PES Modern College of Engineering, Pune 332 |
333 | 2020 - 2024 334 |
335 |
336 |
337 | 338 | 339 |
340 |
341 | 342 |
343 |
344 |
345 | 346 | 347 |
348 |
349 |

Junior College

350 | Rao Junior College of Science, Pune (PCM) 351 |
352 | 2018 - 2020 353 |
354 |
355 |
356 | 357 |
358 |
359 |

10th Grade

360 | Army Public School Khadakwasla, NDA 361 |
362 | 2007 - 2018 363 |
364 |
365 |
366 | 367 | 368 |
369 |
370 |
371 | 372 | 373 |
374 | 375 | 376 | 377 | 378 |
379 |
380 |

Technical Operations Intern

381 | Internship
AirMenus, Pune(Remote) 382 |
383 | Dec 2021 - Present 384 |
385 |
386 | 387 |
388 | 389 | 390 |
391 |
392 | 393 | 394 | 395 | 396 |
397 |
398 | 399 |
400 | 401 | 402 | 403 |
404 | 405 |
406 |

Frontend Developer Intern

407 | Internship
Yellow Fryum, NY USA(Remote) 408 |
409 | March 2022 - June 2022 410 |
411 |
412 |
413 | 414 | 415 | 416 | 417 |
418 |
419 |

Amazon MLSS Mentee

420 | Apprenticeship
Amazon, India(Remote) 421 |
422 | Jun 2022 - Jul 2022 423 |
424 |
425 | 426 |
427 | 428 | 429 |
430 |
431 | 432 | 433 | 434 | 435 |
436 |
437 | 438 |
439 | 440 | 441 | 442 |
443 | 444 |
445 |

Web Development & Designing Intern

446 | Internship
The Sparks Foundation, India(Remote) 447 |
448 | Aug 2021 - Sep 2022 449 |
450 |
451 |
452 | 453 |
454 |
455 |
456 | 457 | 458 | 459 | 460 |
461 |

Projects

462 | Here are some of my projects on Web-Development! 463 | 464 |
465 |
466 | 467 | 468 |
469 | 470 | 471 |
472 |

473 | Netflix Clone 474 |

475 |

476 | A landing page of the leading OTT platform Netflix made using HTML, CSS & Javascript. Has been divided into sections as per the official Netflix website. The clone will soon be converted to Fullstack Netflix clone. 477 |

478 | 479 | Check out 480 | 481 | 482 |
483 |
484 | 485 |
486 | 487 | 488 |
489 |

490 | Scoot - Bikes on rent 491 |

492 |

493 | A multi-page website built using HTML, CSS & Javascript. (Made in a hackathon) The project uses a plugin which allows the user to quickly navigate through links on the website. 494 | 495 |

496 | 497 | Check out 498 | 499 | 500 |
501 |
502 | 503 |
504 | 505 | 506 |
507 |

508 | Country API project 509 |

510 |

511 | A single page website built using React framework and country API to fetch the data. A list of countries have been displayed with various other features website. 512 |

513 | 514 | Check out 515 | 516 | 517 |
518 |
519 | 520 |
521 | 522 | 523 |
524 |

525 | GitHub User Search Website 526 |

527 |

528 | A single page website built using HTML, CSS & Javascript. Makes use of Octocat API to fetch the user's details and verifies whether the particular account exists or not. Dark/Light mode have been added as an additional feature to the website. 529 |

530 | 531 | Check out 532 | 533 | 534 |
535 |
536 | 537 |
538 | 539 | 540 |
541 |

542 | TSF - Payment Gateway Integration 543 |

544 |

545 | Website desgined for my period at The Sparks Foundation as a Web Development & Desigining Intern. Made using HTML & CSS and makes use of Razorpay Payment Gateway Integration to make dummy payments to the NGO. 546 |

547 | 548 | Check out 549 | 550 | 551 |
552 |
553 | 554 |
555 | 556 | 557 |
558 | 559 |
560 |
561 | 562 |
563 | 564 |
565 |
566 |
567 | 568 | 569 | 570 | 571 |
572 |

Certifications

573 | Here are my certifications so far! 574 | 575 |
576 |
577 | 578 |
579 | 580 | 581 |
582 |

583 | Microsoft AZ-900: Azure Fundamentals 584 |

585 |

586 | Possesses strong knowledge of the following:
1. Understand cloud concepts.
2. Learn about core Azure services.
3. Master security, 587 | privacy, compliance, and trust.
4. Understand Azure pricing and support 588 |

589 |
590 |
591 | 592 |
593 | 594 | 595 |
596 |

597 | Microsoft AI-900: AI Fundamentals 598 |

599 |

600 | Possesses strong knowledge of the following:
1.Describe AI workloads and considerations.
2.Describe fundamental principles of machine 601 | learning & features of computer vision workloads on Azure. 602 |
3. Describe features of Natural Language Processing (NLP) workloads on Azure. 603 |

604 | 605 |
606 |
607 | 608 |
609 | 610 | 611 |
612 |

613 | Microsoft DP-900: Azure Data Fundamentals 614 |

615 |

616 | Possesses strong knowledge of the following:
1. Describe core data concepts.
2. Describe how to work with relational data on Azure. 617 |
3. Describe how to work with non-relational data on Azure.
4. Describe an analytics workload on Azure. 618 |

619 | 620 |
621 |
622 | 623 |
624 | 625 | 626 |
627 |

628 | Microsoft Security, Compliance & Identity Fundamentals 629 |

630 |

631 | Possesses strong knowledge of the following: 632 |
1. Describe the concepts of security, compliance & identity.
633 | 2. Describe the capabilities of Microsoft Security solutions.
634 | 3. Describe the capabilities of Microsoft Azure Active Directory. 635 |

636 | 637 |
638 |
639 | 640 |
641 | 642 | 643 |
644 |

645 | Amazon Machine Learning Summer School'2022 646 |

647 |

648 | Underwent training on the following topics:
649 | 1. Supervised Learning.
650 | 2. Deep Neural Networks.
651 | 3. Unsupervised Learning.
652 | 4. Sequential Learning.
653 | 5. Casual Inference.
654 | 6. Reinforcement Learning
from Amazon India after having cleared stage 1 of selection round.

655 | 656 |
657 |
658 | 659 |
660 | 661 | 662 |
663 |

664 | Certificate of Appreciation from Newton School 665 |

666 |

667 | Received the Certifcate of Appreciation from Newton School for conducting a session in collaboration with Newton School x PES-MCoE on Git & GitHub and also showing how to deploy a website template on Gatsby The session 668 | was well appreciated by the students and gave constructive feedback about the session.

669 | 670 |
671 |
672 | 673 |
674 | 675 | 676 | 677 | 678 | 679 | 680 |
681 | 682 |
683 |
684 | 685 |
686 | 687 |
688 |
689 |
690 | 691 |
692 |

Contact Me

693 | 694 | Wish to connect? My inbox is always open! 695 | 696 | 697 |
698 |
699 | 700 |
701 | 702 |
703 |

Email

704 | gauravsarage.1902@gmail.com 705 |
706 |
707 | 708 | 709 | 710 |
711 | 712 |
713 |

Twitter

714 | @0xgauravv 715 |
716 |
717 | 718 |
719 | 720 |
721 |
722 |
723 |
724 | 725 | 726 |
727 |
728 | 729 | 730 |
731 |
732 |
733 | 734 | 735 |
736 |
737 | 738 | 739 |
740 | 741 |
742 | 746 |
747 |
748 | 749 |
750 |
751 | 752 |
753 | 754 | 755 | 756 | 757 | 758 | 759 | 760 |
761 |
762 | 763 | 764 | 765 | 766 | 767 | 810 | 811 | 812 | 815 | 816 | 817 | 818 | 819 | 820 | 821 | 822 | 823 | --------------------------------------------------------------------------------