diff --git a/assets/css/styles.css b/assets/css/styles.css index 8a6bf02e9..3a55026cb 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -70,10 +70,34 @@ } /*========== Variables Dark theme ==========*/ - +body.dark-theme { + /* HSL color mode */ + --first-color-second: hsl(var(--hue-color), 30%, 8%); + --title-color: hsl(var(--hue-color), 8%, 95%); + --text-color: hsl(var(--hue-color), 8%, 75%); + --input-color: hsl(var(--hue-color), 29%, 16%); + --body-color: hsl(var(--hue-color), 28%, 12%); + --container-color: hsl(var(--hue-color), 29%, 16%); + --scroll-bar-color: hsl(var(--hue-color), 12%, 48%); + --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%); +} /*========== Button Dark/Light ==========*/ +.nav__btns { + display: flex; + align-items: center; +} +.change-theme { + font-size: 1.25rem; + color: var(--title-color); + margin-right: var(--mb-1); + cursor: pointer; +} + +.change-theme:hover { + color: var(--first-color); +} /*==================== BASE ====================*/ * { @@ -155,67 +179,1160 @@ img { } /*==================== NAV ====================*/ +.nav { + max-width: 968px; + height: var(--header-height); + display: flex; + justify-content: space-between; + align-items: center; +} +.nav__logo, +.nav__toggle { + color: var(--title-color); + font-weight: var(--font-medium); +} -/* show menu */ +.nav__logo:hover { + color: var(--first-color); +} +.nav__toggle { + font-size: 1.1rem; + cursor: pointer; +} -/* Active link */ +.nav__toggle:hover { + color: var(--first-color); +} +@media screen and (max-width: 767px) { + .nav__menu { + position: fixed; + bottom: -100%; + left: 0; + width: 100%; + background-color: var(--body-color); + padding: 2rem 1.5rem 4rem; + box-shadow: 0 -1px 4px rgba(0,0,0,.15); + border-radius: 1.5rem 1.5rem 0 0; + transition: .3s; + } +} -/* Change background header */ +.nav__list { + grid-template-columns: repeat(3, 1fr); + gap: 2rem; +} +.nav__link { + display: flex; + flex-direction: column; + align-items: center; + font-size: var(--small-font-size); + color: var(--title-color); + font-weight: var(--font-medium); +} + +.nav__link:hover { + color: var(--first-color); +} + +.nav__icon { + font-size: 1.2rem; +} + +.nav__close { + position: absolute; + right: 1.3rem; + bottom: .5rem; + font-size: 1.5rem; + cursor: pointer; + color: var(--first-color); +} + +.nav__close:hover { + color: var(--first-color-alt); +} + +/* show menu */ +.show-menu { + bottom: 0; +} + +/* Active link */ +.active-link { + color: var(--first-color); +} + +/* Change background header */ +.scroll-header { + box-shadow: 0 -1px 4px rgba(0,0,0,.15); +} /*==================== HOME ====================*/ +.home__container { + gap: 1rem; +} +.home__content { + grid-template-columns: .5fr 3fr; + padding-top: 3.5rem; + align-items: center; +} + +.home__social { + display: grid; + grid-template-columns: max-content; + row-gap: 1rem; +} + +.home__social-icon { + font-size: 1.25rem; + color: var(--first-color); +} + +.home__social-icon:hover { + color: var(--first-color-alt); +} + +.home__blob { + width: 200px; + fill: var(--first-color); +} + +.home__blob-img { + width: 170px; +} + +.home__data { + grid-column: 1/3; +} + +.home__title { + font-size: var(--big-font-size); +} + +.home__subtitle { + font-size: var(--h3-font-size); + color: var(--text-color); + font-weight: var(--font-medium); + margin-bottom: var(--mb-0-75); +} + +.home__description { + margin-bottom: var(--mb-2); +} + +.home__scroll { + display: none; +} + +.home__scroll-button { + color: var(--first-color); + transition: .3s; +} + +.home__scroll-button:hover { + transform: translateY(0.25rem); +} + +.home__scroll-mouse { + font-size: 2rem; +} + +.home__scroll-name { + font-size: var(--small-font-size); + color: var(--title-color); + font-weight: var(--font-medium); + margin-right: var(--mb-0-25); +} + +.home__scroll-arrow { + font-size: 1.25rem; +} /*==================== BUTTONS ====================*/ +.button { + display: inline-block; + background-color: var(--first-color); + color: #FFF; + padding: 1rem; + border-radius: .5rem; + font-weight: var(--font-medium); +} + +.button:hover { + background-color: var(--first-color-alt); +} + +.button__icon { + font-size: 1.25rem; + margin-left: var(--mb-0-5); + transition: .3s; +} + +.button--flex { + display: inline-flex; + align-items: center; +} + +.button--small { + padding: .75rem 1rem; +} + +.button--link { + padding: 0; + background-color: transparent; + color: var(--first-color); +} +.button--link:hover { + background-color: transparent; + color: var(--first-color-alt); +} /*==================== ABOUT ====================*/ +.about__img { + width: 200px; + border-radius: .5rem; + justify-self: center; + align-self: center; +} + +.about__description { + text-align: center; + margin-bottom: var(--mb-2-5); +} + +.about__info { + display: flex; + justify-content: space-evenly; + margin-bottom: var(--mb-2-5); +} + +.about__info-title { + font-size: var(--h2-font-size); + font-weight: var(--font-semi-bold); + color: var(--title-color); +} +.about__info-name { + font-size: var(--smaller-font-size); +} + +.about__info-title, +.about__info-name { + display: block; + text-align: center; +} + +.about__buttons { + display: flex; + justify-content: center; +} /*==================== SKILLS ====================*/ +.skills__container { + row-gap: 0; +} +.skills__header { + display: flex; + align-items: center; + margin-bottom: var(--mb-2-5); + cursor: pointer; +} + +.skills__icon, +.skills__arrow { + font-size: 2rem; + color: var(--first-color); +} + +.skills__icon { + margin-right: var(--mb-0-75); +} + +.skills__title { + font-size: var(--h3-font-size); +} + +.skills__subtitle { + font-size: var(--small-font-size); + color: var(--text-color-light); +} + +.skills__arrow { + margin-left: auto; + transition: .4s; +} + +.skills__list { + row-gap: 1.5rem; + padding-left: 2.7rem; +} + +.skills__titles { + display: flex; + justify-content: space-between; + margin-bottom: var(--mb-0-5); +} + +.skills__name { + font-size: var(--normal-font-size); + font-weight: var(--font-medium); +} + +.skills__bar, +.skills__percentage { + height: 5px; + border-radius: .25rem; +} + +.skills__bar { + background-color: var(--first-color-lighter); +} + +.skills__percentage { + display: block; + background-color: var(--first-color); +} + +.skills__html { + width: 90%; +} + +.skills__css { + width: 80%; +} + +.skills__js { + width: 60%; +} + +.skills__react { + width: 85%; +} + +.skills__php { + width: 80%; +} + +.skills__node { + width: 70%; +} + +.skills__firebase { + width: 90%; +} + +.skills__python { + width: 55%; +} + +.skills__figma { + width: 90%; +} + +.skills__sketch { + width: 85%; +} + +.skills__photoshop { + width: 85%; +} + +.skills__close .skills__list { + height: 0; + overflow: hidden; +} + +.skills__open .skills__list { + height: max-content; + margin-bottom: var(--mb-2-5); +} + +.skills__open .skills__arrow { + transform: rotate(-180deg); +} /*==================== QUALIFICATION ====================*/ +.qualification__tabs { + display: flex; + justify-content: space-evenly; + margin-bottom: var(--mb-2); +} + +.qualification__button { + font-size: var(--h3-font-size); + font-weight: var(--font-medium); + cursor: pointer; +} + +.qualification__button:hover { + color: var(--first-color); +} + +.qualification__icon { + font-size: 1.8rem; + margin-right: var(--mb-0-25); +} + +.qualification__data { + display: grid; + grid-template-columns: 1fr max-content 1fr; + column-gap: 1.5rem; +} +.qualification__title { + font-size: var(--normal-font-size); + font-weight: var(--font-medium); +} + +.qualification__subtitle { + display: inline-block; + font-size: var(--small-font-size); + margin-bottom: var(--mb-1); +} + +.qualification__calendar { + font-size: var(--smaller-font-size); + color: var(--text-color-light); +} + +.qualification__rounder { + display: inline-block; + width: 13px; + height: 13px; + background-color: var(--first-color); + border-radius: 50%; +} + +.qualification__line { + display: block; + width: 1px; + height: 100%; + background-color: var(--first-color); + transform: translate(6px, -7px); +} + +.qualification [data-content] { + display: none; +} + +.qualification__active[data-content] { + display: block; +} + +.qualification__button.qualification__active { + color: var(--first-color); +} /*==================== SERVICES ====================*/ +.services__container { + gap: 1.5rem; + grid-template-columns: repeat(2, 1fr); +} +.services__content { + position: relative; + background-color: var(--container-color); + padding: 3.5rem .5rem 1.25rem 1.5rem; + border-radius: .25rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, .15); + transition: .3s; +} -/* Active Modal */ +.services__content:hover { + box-shadow: 0 4px 8px rgba(0, 0, 0, .15); +} + +.services__icon { + display: block; + font-size: 1.5rem; + color: var(--first-color); + margin-bottom: var(--mb-1); +} +.services__title { + font-size: var(--h3-font-size); + margin-bottom: var(--mb-1); + font-weight: var(--font-medium); +} + +.services__button { + cursor: pointer; + font-size: var(--small-font-size); +} + +.services__button:hover .button__icon { + transform: translateX(.25rem); +} + +.services__modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, .5); + display: flex; + align-items: center; + justify-content: center; + padding: 0 1rem; + z-index: var(--z-modal); + opacity: 0; + visibility: hidden; + transition: .3s; +} + +.services__modal-content { + position: relative; + background-color: var(--container-color); + padding: 1.5rem; + border-radius: .5rem; +} + +.services__modal-services { + row-gap: 1rem; +} + +.services__modal-service { + display: flex; +} + +.services__modal-title { + font-size: var(--h3-font-size); + font-weight: var(--font-medium); + margin-bottom: var(--mb-1-5); +} + +.services__modal-close { + position: absolute; + top: 1rem; + right: 1rem; + font-size: 1.5rem; + color: var(--first-color); + cursor: pointer; +} + +.services__modal-icon { + color: var(--first-color); + margin-right: var(--mb-0-25); +} + +/* Active Modal */ +.active-modal { + opacity: 1; + visibility: visible; +} /*==================== PORTFOLIO ====================*/ +.portfolio__container { + overflow: initial; +} + +.portfolio__content { + padding: 0 1.5rem; +} + +.portfolio__img { + width: 265px; + border-radius: .5rem; + justify-self: center; +} + +.portfolio__title { + font-size: var(--h3-font-size); + margin-bottom: var(--mb-0-5); +} + +.portfolio__description { + margin-bottom: var(--mb-0-75); +} + +.portfolio__button:hover .button__icon { + transform: translateX(.25rem); +} +.swiper-button-prev::after, +.swiper-button-next::after { + content: ''; +} + +.swiper-portfolio-icon { + font-size: 2rem; + color: var(--first-color); +} + +.swiper-button-prev { + left: -.5rem; +} + +.swiper-button-next { + right: -.5rem; +} + +.swiper-container-horizontal > .swiper-pagination-bullets { + bottom: -2.5rem; +} + +.swiper-pagination-bullet-active { + background-color: var(--first-color); +} + +.swiper-button-prev, +.swiper-button-next, +.swiper-pagination-bullet { + outline: none; +} /*==================== PROJECT IN MIND ====================*/ +.project { + text-align: center; +} + +.project__bg { + background-color: var(--first-color-second); + padding-top: 3rem; +} + +.project__title { + font-size: var(--h2-font-size); + margin-bottom: var(--mb-0-75); +} + +.project__description { + margin-bottom: var(--mb-1-5); +} +.project__title, +.project__description { + color: #FFF; +} + +.project__img { + width: 232px; + justify-self: center; +} + +.button--white { + background-color: #FFF; + color: var(--first-color); +} + +.button--white:hover { + background-color: #FFF; +} + +.project__icon { + font-size: 1.2rem; + margin-left: var(--mb-0-5); +} /*==================== TESTIMONIAL ====================*/ +.testimonial__data, +.testimonial__header { + display: flex; +} + +.testimonial__data { + justify-content: space-between; + margin-bottom: var(--mb-1); +} + +.testimonial__img { + width: 60px; + height: 60px; + border-radius: 50%; + margin-right: var(--mb-0-75); +} +.testimonial__name { + font-size: var(--h3-font-size); + font-weight: var(--font-medium); +} + +.testimonial__client { + font-size: var(--small-font-size); + color: var(--text-color-light); +} + +.testimonial__description { + margin-bottom: var(--mb-2-5); +} + +.testimonial__icon-star { + color: var(--first-color); +} + +.swiper-container .swiper-pagination-testimonial { + bottom: 0; +} /*==================== CONTACT ME ====================*/ +.contact__container { + row-gap: 3rem; +} +.contact__information { + display: flex; + margin-bottom: var(--mb-2); +} + +.contact__icon { + font-size: 2rem; + color: var(--first-color); + margin-right: var(--mb-0-75); +} + +.contact__title { + font-size: var(--h3-font-size); + font-weight: var(--font-medium); +} + +.contact__subtitle { + font-size: var(--small-font-size); + color: var(--text-color-light); +} + +.contact__content { + background-color: var(--input-color); + border-radius: .5rem; + padding: .75rem 1rem .25rem; +} + +.contact__label { + font-size: var(--smaller-font-size); + color: var(--title-color); +} + +.contact__input { + width: 100%; + background-color: var(--input-color); + color: var(--text-color); + font-family: var(--body-font); + font-size: var(--normal-font-size); + border: none; + outline: none; + padding: .25rem .5rem .5rem 0; +} /*==================== FOOTER ====================*/ +.footer { + padding-top: 2rem; +} + +.footer__container { + row-gap: 3.5rem; +} + +.footer__bg { + background-color: var(--first-color-second); + padding: 2rem 0 3rem; +} + +.footer__title { + font-size: var(--h1-font-size); + margin-bottom: var(--mb-0-25); +} + +.footer__subtitle { + font-size: var(--small-font-size); +} + +.footer__links { + display: flex; + flex-direction: column; + row-gap: 1.5rem; +} + +.footer__link:hover { + color: var(--first-color-lighter); +} + +.footer__social { + font-size: 1.25rem; + margin-right: var(--mb-1-5); +} + +.footer__social:hover { + color: var(--first-color-lighter); +} + +.footer__copy { + font-size: var(--smaller-font-size); + text-align: center; + color: var(--text-color-light); + margin-top: var(--mb-3); +} +.footer__title, +.footer__subtitle, +.footer__link, +.footer__social { + color: #FFF; +} /*========== SCROLL UP ==========*/ +.scrollup { + position: fixed; + right: 1rem; + bottom: -20%; + background-color: var(--first-color); + opacity: .8; + padding: 0 .3rem; + border-radius: .4rem; + z-index: var(--z-tooltip); + transition: .4s; +} +.scrollup:hover { + background-color: var(--first-color-alt); +} -/* Show scroll */ +.scrollup__icon { + font-size: 1.5rem; + color: #FFF; +} +/* Show scroll */ +.show-scroll { + bottom: 5rem; +} /*========== SCROLL BAR ==========*/ +::-webkit-scrollbar { + width: .60rem; + background-color: var(--scroll-bar-color); + border-radius: .5rem; +} +::-webkit-scrollbar-thumb { + background-color: var(--scroll-thumb-color); + border-radius: .5rem; +} + +::-webkit-scrollbar-thumb:hover { + background-color: var(--text-color-light); +} /*==================== MEDIA QUERIES ====================*/ /* For small devices */ - +@media screen and (max-width: 350px) { + .container { + margin-left: var(--mb-1); + margin-right: var(--mb-1); + } + + .nav__menu { + padding: 2rem .25rem 4rem; + } + + .nav__list { + column-gap: 0; + } + + .home__content { + grid-template-columns: .25fr 3fr; + } + + .home__blob { + width: 180px; + } + + .skills__title { + font-size: var(--normal-font-size); + } + + .qualification__data { + gap: .5rem; + } + + .services__container { + grid-template-columns: max-content; + justify-content: center; + } + + .services__content { + padding-right: 3.5rem; + } + + .services__modal { + padding: 0 .5rem; + } + + .project__img { + width: 200px; + } + + .testimonial__data, + .testimonial__header { + flex-direction: column; + align-items: center; + } + + .testimonial__img { + margin-right: 0; + margin-bottom: var(--mb-0-25); + } + + .testimonial__data, + .testimonial__description { + text-align: center; + } +} /* For medium devices */ +@media screen and (min-width: 568px) { + .home__content { + grid-template-columns: max-content 1fr 1fr; + } + + .home__data { + grid-column: initial; + } + + .home__img { + order: 1; + justify-self: center; + } + + .about__container, + .skills__container, + .portfolio__content, + .project__container, + .contact__container, + .footer__container { + grid-template-columns: repeat(2, 1fr); + } + + .qualification__sections { + display: grid; + grid-template-columns: .6fr; + justify-content: center; + } +} +@media screen and (min-width: 768px) { + .container { + margin-left: auto; + margin-right: auto; + } + + body { + margin: 0; + } + + .section { + padding: 6rem 0 2rem; + } + + .section__subtitle { + margin-bottom: 4rem; + } + + .header { + top: 0; + bottom: initial; + } + + .header, + .main, + .footer__container { + padding: 0 1rem; + } + + .nav { + height: calc(var(--header-height) + 1.5rem); + column-gap: 1rem; + } + + .nav__icon, + .nav__close, + .nav__toggle { + display: none; + } + + .nav__list { + display: flex; + column-gap: 2rem; + } + + .nav__menu { + margin-left: auto; + } + + .change-theme { + margin: 0; + } + + .home__container { + row-gap: 5rem; + } + + .home__content { + padding-top: 5.5rem; + column-gap: 2rem; + } + + .home__blob { + width: 270px; + } + + .home__scroll { + display: block; + } + + .home__scroll-button { + margin-left: 3rem; + } + + .about__container { + column-gap: 5rem; + } + + .about__img { + width: 350px; + } + + .about__description { + text-align: initial; + } + + .about__info { + justify-content: space-between; + } + + .about__buttons { + justify-content: initial; + } + + .qualification__tabs { + justify-content: center; + } + + .qualification__button { + margin: 0 var(--mb-1); + } + + .qualification__sections { + grid-template-columns: .5fr; + } + + .services__container { + grid-template-columns: repeat(3, 218px); + justify-content: center; + } + + .services__icon { + font-size: 2rem; + } + + .services__content { + padding: 6rem 0 2rem 2.5rem; + } + + .services__modal-content { + width: 450px; + } + + .portfolio__img { + width: 320px; + } + + .portfolio__content { + align-items: center; + } + + .project { + text-align: initial; + } + + .project__bg { + background: none; + } + + .project__container { + background-color: var(--first-color-second); + border-radius: 1rem; + padding: 3rem 2.5rem 0; + grid-template-columns: 1fr max-content; + column-gap: 3rem; + } + + .project__data { + padding-top: .8rem; + } + + .footer__container { + grid-template-columns: repeat(3, 1fr); + } + + .footer__bg { + padding: 3rem 0 3.5rem; + } + + .footer__links { + flex-direction: row; + column-gap: 2rem; + } + + .footer__socials { + justify-self: flex-end; + } + + .footer__copy { + margin-top: 4.5rem; + } +} /* For large devices */ +@media screen and (min-width: 1024px) { + .header, + .main, + .footer__container { + padding: 0; + } + + .home__blob { + width: 320px; + } + + .home__social { + transform: translateX(-6rem); + } + + .services__container { + grid-template-columns: repeat(3, 238px); + } + + .portfolio__content { + column-gap: 5rem; + } + + .swiper-portfolio-icon { + font-size: 3.5rem; + } + + .swiper-button-prev { + left: -3.5rem; + } + + .swiper-button-next { + right: -3.5rem; + } + + .swiper-container-horizontal > .swiper-pagination-bullets { + bottom: -4.5rem; + } + + .contact__form { + width: 460px; + } + + .contact__inputs { + grid-template-columns: repeat(2, 1fr); + } +} diff --git a/assets/js/main.js b/assets/js/main.js index 303db3cc5..edac58f1a 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,39 +1,191 @@ /*==================== MENU SHOW Y HIDDEN ====================*/ - +const navMenu = document.getElementById('nav-menu'), + navToggle = document.getElementById('nav-toggle'), + navClose = document.getElementById('nav-close') /*===== MENU SHOW =====*/ /* Validate if constant exists */ - +if(navToggle){ + navToggle.addEventListener('click', () =>{ + navMenu.classList.add('show-menu') + }) +} /*===== MENU HIDDEN =====*/ /* Validate if constant exists */ - +if(navClose){ + navClose.addEventListener('click', () =>{ + navMenu.classList.remove('show-menu') + }) +} /*==================== REMOVE MENU MOBILE ====================*/ +const navLink = document.querySelectorAll('.nav__link') +function linkAction(){ + const navMenu = document.getElementById('nav-menu') + // When we click on each nav__link, we remove the show-menu class + navMenu.classList.remove('show-menu') +} +navLink.forEach(n => n.addEventListener('click', linkAction)) /*==================== ACCORDION SKILLS ====================*/ +const skillsContent = document.getElementsByClassName('skills__content'), + skillsHeader = document.querySelectorAll('.skills__header') + +function toggleSkills(){ + let itemClass = this.parentNode.className + for(i = 0; i < skillsContent.length; i++){ + skillsContent[i].className = 'skills__content skills__close' + } + if(itemClass === 'skills__content skills__close'){ + this.parentNode.className = 'skills__content skills__open' + } +} + +skillsHeader.forEach((el) =>{ + el.addEventListener('click', toggleSkills) +}) /*==================== QUALIFICATION TABS ====================*/ +const tabs = document.querySelectorAll('[data-target]'), + tabContents = document.querySelectorAll('[data-content]') +tabs.forEach(tab =>{ + tab.addEventListener('click', () =>{ + const target = document.querySelector(tab.dataset.target) -/*==================== SERVICES MODAL ====================*/ + tabContents.forEach(tabContent =>{ + tabContent.classList.remove('qualification__active') + }) + target.classList.add('qualification__active') + tabs.forEach(tab =>{ + tab.classList.remove('qualification__active') + }) + tab.classList.add('qualification__active') + }) +}) -/*==================== PORTFOLIO SWIPER ====================*/ +/*==================== SERVICES MODAL ====================*/ +const modalViews = document.querySelectorAll('.services__modal'), + modalBtns = document.querySelectorAll('.services__button'), + modalCloses = document.querySelectorAll('.services__modal-close') + +let modal = function(modalClick){ + modalViews[modalClick].classList.add('active-modal') +} + +modalBtns.forEach((modalBtn, i) => { + modalBtn.addEventListener('click', () =>{ + modal(i) + }) +}) + +modalCloses.forEach((modalClose) => { + modalClose.addEventListener('click', () =>{ + modalViews.forEach((modalView) =>{ + modalView.classList.remove('active-modal') + }) + }) +}) +/*==================== PORTFOLIO SWIPER ====================*/ +let swiperPortfolio = new Swiper('.portfolio__container', { + cssMode: true, + loop: true, + + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + pagination: { + el: '.swiper-pagination', + clickable: true, + }, +}); /*==================== TESTIMONIAL ====================*/ - +let swiperTestimonial = new Swiper('.testimonial__container', { + loop: true, + grabCursor: true, + spaceBetween: 48, + + pagination: { + el: '.swiper-pagination', + clickable: true, + dynamicBullets: true, + }, + breakpoints:{ + 568:{ + slidesPerView: 2, + } + } +}); /*==================== SCROLL SECTIONS ACTIVE LINK ====================*/ +const sections = document.querySelectorAll('section[id]') +function scrollActive(){ + const scrollY = window.pageYOffset -/*==================== CHANGE BACKGROUND HEADER ====================*/ + sections.forEach(current =>{ + const sectionHeight = current.offsetHeight + const sectionTop = current.offsetTop - 50; + sectionId = current.getAttribute('id') + if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){ + document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link') + }else{ + document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link') + } + }) +} +window.addEventListener('scroll', scrollActive) -/*==================== SHOW SCROLL UP ====================*/ - +/*==================== CHANGE BACKGROUND HEADER ====================*/ +function scrollHeader(){ + const nav = document.getElementById('header') + // When the scroll is greater than 200 viewport height, add the scroll-header class to the header tag + if(this.scrollY >= 80) nav.classList.add('scroll-header'); else nav.classList.remove('scroll-header') +} +window.addEventListener('scroll', scrollHeader) -/*==================== DARK LIGHT THEME ====================*/ \ No newline at end of file +/*==================== SHOW SCROLL UP ====================*/ +function scrollUp(){ + const scrollUp = document.getElementById('scroll-up'); + // When the scroll is higher than 560 viewport height, add the show-scroll class to the a tag with the scroll-up class + if(this.scrollY >= 560) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll') +} +window.addEventListener('scroll', scrollUp) + +/*==================== DARK LIGHT THEME ====================*/ +const themeButton = document.getElementById('theme-button') +const darkTheme = 'dark-theme' +const iconTheme = 'uil-sun' + +// Previously selected topic (if user selected) +const selectedTheme = localStorage.getItem('selected-theme') +const selectedIcon = localStorage.getItem('selected-icon') + +// We obtain the current theme that the interface has by validating the dark-theme class +const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light' +const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'uil-moon' : 'uil-sun' + +// We validate if the user previously chose a topic +if (selectedTheme) { + // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark + document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme) + themeButton.classList[selectedIcon === 'uil-moon' ? 'add' : 'remove'](iconTheme) +} + +// Activate / deactivate the theme manually with the button +themeButton.addEventListener('click', () => { + // Add or remove the dark / icon theme + document.body.classList.toggle(darkTheme) + themeButton.classList.toggle(iconTheme) + // We save the theme and the current icon that the user chose + localStorage.setItem('selected-theme', getCurrentTheme()) + localStorage.setItem('selected-icon', getCurrentIcon()) +}) \ No newline at end of file diff --git a/index.html b/index.html index 2c2e862eb..ab10f24df 100644 --- a/index.html +++ b/index.html @@ -1,86 +1,885 @@ - - -
- - - - - - - - - - - - -High level experience in web design and development knowledge, producing quality work.
+ + Contact Me + +
+
+ Web developer, with extensive knowledge and years of experience, working in web technologies and Ui / Ux design, delivering quality work.
+ +Contact me now and get a 30% discount on your new project.
+ + Contact Me + + +
+