Add files via upload

assets/js/main.js

@@ -0,0 +1,143 @@
+/*=============== SHOW MENU ===============*/
+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')
+
+const 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))
+
+/*=============== SHADOW HEADER ===============*/
+const shadowHeader = () =>{
+   const header = document.getElementById('header')
+   // When the scroll is greater than 50 viewport height, add the shadow-header class to the header tag
+   this.scrollY >= 50 ? header.classList.add('shadow-header') 
+                      : header.classList.remove('shadow-header')
+}
+window.addEventListener('scroll', shadowHeader)
+
+/*=============== EMAIL JS ===============*/
+const contactForm = document.getElementById('contact-form'),
+      contactMessage = document.getElementById('contact-message')
+
+const sendEmail = (e) =>{
+   e.preventDefault()
+
+   // serviceID - templateID - #form - publicKey
+   emailjs.sendForm('service_tdt21yw','template_g6ihjnz','#contact-form','nCnvrcVpoEyQsbrg5')
+      .then(() =>{
+         // Show sent message
+         contactMessage.textContent = 'Message sent successfully ✅'
+
+         // Remove message after five seconds
+         setTimeout(() =>{
+            contactMessage.textContent = ''
+         }, 5000)
+
+         // Clear input fields
+         contactForm.reset()
+
+      }, () =>{
+         // Show error message
+         contactMessage.textContent = 'Message not sent (service error) ❌'
+      })
+}
+
+contactForm.addEventListener('submit', sendEmail)
+
+/*=============== SHOW SCROLL UP ===============*/ 
+const scrollUp = () =>{
+	const scrollUp = document.getElementById('scroll-up')
+    // When the scroll is higher than 350 viewport height, add the show-scroll class to the a tag with the scrollup class
+	this.scrollY >= 350 ? scrollUp.classList.add('show-scroll')
+						: scrollUp.classList.remove('show-scroll')
+}
+window.addEventListener('scroll', scrollUp)
+
+/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
+const sections = document.querySelectorAll('section[id]')
+
+const scrollActive = () =>{
+  	const scrollDown = window.scrollY
+
+	sections.forEach(current =>{
+		const sectionHeight = current.offsetHeight,
+			  sectionTop = current.offsetTop - 58,
+			  sectionId = current.getAttribute('id'),
+			  sectionsClass = document.querySelector('.nav__menu a[href*=' + sectionId + ']')
+
+		if(scrollDown > sectionTop && scrollDown <= sectionTop + sectionHeight){
+			sectionsClass.classList.add('active-link')
+		}else{
+			sectionsClass.classList.remove('active-link')
+		}                                                    
+	})
+}
+window.addEventListener('scroll', scrollActive)
+
+/*=============== DARK LIGHT THEME ===============*/ 
+const themeButton = document.getElementById('theme-button')
+const darkTheme = 'dark-theme'
+const iconTheme = 'ri-sun-line'
+
+// 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) ? 'ri-moon-line' : 'ri-sun-line'
+
+// 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 === 'ri-moon-line' ? '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())
+})
+
+/*=============== SCROLL REVEAL ANIMATION ===============*/
+const sr = ScrollReveal({
+    origin: 'top',
+    distance: '60px',
+    duration: 2500,
+    delay: 400,
+    // reset: true // Animations repeat
+ })
+
+ sr.reveal(`.home__perfil, .about__image, .contact__mail`, {origin: 'right'})
+ sr.reveal(`.home__name, .home__info, 
+            .about__container .section__title-1, .about__info, 
+            .contact__social, .contact__data`, {origin: 'left'})
+ sr.reveal(`.services__card, .projects__card`, {interval: 100})

assets/scss/base/_base.scss

@@ -0,0 +1,37 @@
+/*=============== BASE ===============*/
+*{
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+html{
+	scroll-behavior: smooth;
+}
+
+body{
+	font-family: var(--body-font);
+	font-size: var(--normal-font-size);
+	background-color: var(--body-color);
+	color: var(--text-color);
+	transition: background-color .4s; /* for dark mode */
+}
+
+h1,h2,h3,h4{
+	color: var(--title-color);
+	font-weight: var(--font-bold);
+}
+
+ul{
+	list-style: none;
+}
+
+a{
+	text-decoration: none;
+}
+
+img{
+	display: block;
+	max-width: 100%;
+	height: auto;
+}

assets/scss/components/_about.scss

@@ -0,0 +1,83 @@
+/*=============== ABOUT ===============*/
+.about{
+   background-color: var(--container-color);
+   transition: background-color .4s; /* for dark mode */
+
+   &__container{
+      row-gap: 0;
+   }
+   &__perfil{
+      position: relative;
+      justify-self: center;
+      margin-block: 2.5rem 4.5rem;
+   }
+   &__image{
+      width: 220px;
+   }
+   &__img{
+      position: relative;
+      border: 4px solid var(--white-color);
+      z-index: 1;
+   }
+   &__shadow,
+   &__line,
+   &__box{
+      position: absolute;
+   }
+   &__shadow{
+      width: 150px;
+      height: 385px;
+      background-color: var(--body-color);
+      top: -2.5rem;
+      right: -3.5rem;
+      border-bottom: 4px solid var(--first-color);
+      transition: background-color .4s; /* for dark mode */
+   }
+   &__perfil .geometric-box{
+      top: 1.5rem;
+      right: -2.8rem;
+   }
+   &__line{
+      filter: invert(1);
+      right: -1.25rem;
+      top: 6rem;
+      width: 50px;
+      transition: filter .4s; /* for dark mode */
+   }
+   &__box{
+      width: 40px;
+      height: 40px;
+      background-color: var(--first-color);
+      right: -.5rem;
+      bottom: 1.5rem;
+   }
+   &__info{
+      padding-left: 1.25rem;
+   }
+   &__description{
+      position: relative;
+      color: var(--title-color);
+      margin-bottom: 1.5rem;
+
+      &::after{
+         content: '';
+         width: 20px;
+         height: 1px;
+         background-color: var(--title-color);
+         position: absolute;
+         left: -1.75rem;
+         top: .5rem;
+      }
+   }
+   &__list{
+      list-style: square;
+      color: var(--title-color);
+      margin-bottom: 3rem;
+   }
+   &__buttons{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      column-gap: 1rem;
+   }
+}