Service email conect. Animation added

layouts/partials/contact.html

@@ -1,11 +1,11 @@
 <div class="contact-container" id="contacto"> 
-  <div class="container">
+  <div class="container animation-scroll">
     <h3 class="title-section">Contacto</h3>
     <div class="row">
       <div class="column-left">
       </div>
       <div class="column-right">
-        <form action="" class="formulario" id="contactForm" method="POST" target="_blank">
+        <form id="contactForm">
           <div class="row-form">
             <label for="nombre">Nombre y Apellido</label>
             <input type="text" id="nombre" name="nombre" required>
@@ -22,7 +22,7 @@
           </div>
           <div class="row-form">
             <label for="mensaje">Mensaje</label>
-            <textarea name="mensaje" id="" cols="30" rows="10" required></textarea>
+            <textarea name="mensaje" id="mensaje" cols="30" rows="10" required></textarea>
             <p class="formulario__input-error none">Requerido</p>
           </div>
           <input class="button__form" type="submit" value="Enviar">

layouts/partials/header.html

@@ -1,5 +1,5 @@
 <header class="header-top">
-  <div class="container__header">
+  <div class="container__header animation-scroll">
     <img src="img/Logo-2.svg" alt="Logo" width="260" height="145">
     <h1 class="no-margins">{{ with .Site.Params.header.title }}{{ . | markdownify }}{{ end }}</h1>
     <h2 class="no-margins">{{ with .Site.Params.header.subtitle }}{{ . | markdownify }}{{ end }}</h2>

layouts/partials/intro.html

@@ -1,5 +1,5 @@
 <div class="container">
   <div class="intro-container">
-    <span>{{ with .Site.Params.intro.text }}{{ . | markdownify }}{{ end }}</span>
+    <span class="animation-scroll">{{ with .Site.Params.intro.text }}{{ . | markdownify }}{{ end }}</span>
   </div>
 </div>

layouts/partials/script.html

@@ -1 +1,4 @@
+<!-- Email -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
+<script type="text/javascript">emailjs.init('KjgzLqUvLg29kOMXi')</script>
 <script src="js/main.js"></script>

layouts/partials/services.html

@@ -4,7 +4,7 @@
     <span>{{ .Site.Params.services.titleService }}</span>
     <div class="container-services__items">
       {{ range $item := .Site.Params.services.item_service_1 }}
-        <div class="service-item">
+        <div class="service-item animation-scroll">
           <div class="icon-item-container">
             <i class="{{$item.icon }}"></i>
           </div>
@@ -22,7 +22,7 @@
     <span>{{ .Site.Params.services.titleService2 }}</span>
     <div class="container-services__items">
       {{ range $item := .Site.Params.services.item_service_2 }}
-        <div class="service-item">
+        <div class="service-item animation-scroll">
           <div class="icon-item-container">
             <i class="{{$item.icon }}"></i>
           </div>

layouts/partials/usTeam.html

@@ -2,7 +2,7 @@
   <div class="container">
     <h3 class="title-section ligth-bg-text">Nosotros</h3>
     <div class="container__item-usTeam">
-      <div class="team-item-container">
+      <div class="team-item-container animation-scroll">
         <figure>
           <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 22 24"><path fill="currentColor" d="M14.041 16.683a14.884 14.884 0 0 1-.035-.72c2.549-.261 4.338-.872 4.338-1.585c-.007 0-.006-.03-.006-.041C16.432 12.619 19.99.417 13.367.663a3.344 3.344 0 0 0-2.196-.664h.008C2.208.677 6.175 12.202 4.13 14.377h-.004c.008.698 1.736 1.298 4.211 1.566c-.007.17-.022.381-.054.734C7.256 19.447.321 18.671.001 24h22.294c-.319-5.33-7.225-4.554-8.253-7.317z"/></svg>
         </figure>
@@ -10,12 +10,17 @@
           <h4 class="no-margins">Paula Pereyra</h4>
           <h6 class="no-margins">Desarrolladora Web</h6>
           <div class="container-links">
-            <i class="fa-brands fa-linkedin"></i>
-            <i class="fa-brands fa-github"></i>
+            <a class="social" href="https://www.linkedin.com/in/paula-pereyra-b1031622a/" target="_blank">
+              <i class="fa-brands fa-linkedin">
+              </i>
+            </a>
+            <a class="social" href="https://github.com/PereyraPaula" target="_blank">
+              <i class="fa-brands fa-github"></i>
+            </a>
           </div>
         </div>
       </div>
-      <div class="team-item-container">
+      <div class="team-item-container animation-scroll">
         <figure>
           <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 22 24"><path fill="currentColor" d="M14.145 16.629a23.876 23.876 0 0 1-.052-2.525l-.001.037a4.847 4.847 0 0 0 1.333-2.868l.002-.021c.339-.028.874-.358 1.03-1.666a1.217 1.217 0 0 0-.455-1.218l-.003-.002c.552-1.66 1.698-6.796-2.121-7.326C13.485.35 12.479 0 11.171 0c-5.233.096-5.864 3.951-4.72 8.366a1.222 1.222 0 0 0-.455 1.229l-.001-.008c.16 1.306.691 1.638 1.03 1.666a4.858 4.858 0 0 0 1.374 2.888a24.648 24.648 0 0 1-.058 2.569l.005-.081C7.308 19.413.32 18.631 0 24h22.458c-.322-5.369-7.278-4.587-8.314-7.371z"/></svg>
         </figure>
@@ -23,7 +28,7 @@
           <h4 class="no-margins">Roberto Pereyra</h4>
           <h6 class="no-margins">Administrador de servidores <br>Unix - Linux</h6>
           <div class="container-links">
-            <i class="fa-solid fa-envelope"></i>
+            <a href="#contacto" class="social"><i class="fa-solid fa-envelope"></i></a>
           </div>
         </div>
       </div>

static/css/main.css

@@ -33,6 +33,17 @@ body {
   display: none;
 }
 
+.animation-scroll {
+  view-timeline-name: --animated;
+  view-timeline-axis: block;
+
+  animation-timeline: --animated;
+  animation-name: show;
+
+  animation-range: entry 25% cover 50%;
+  animation-fill-mode: both;
+}
+
 .container {
   /* Extra Large: xl */ 
   max-width: 1200px;
@@ -289,7 +300,7 @@ body {
 }
 
 .intro-container > span {
-  font-size: clamp(16px, 1.1vw, 20px);
+  font-size: clamp(16px, 1.1vw, 17px);
 }
 
 /* Services Section */
@@ -444,7 +455,12 @@ body {
   margin: 1rem 0;
 }
 
-.team-item-container > .container__text > .container-links > i {
+a.social {
+  text-decoration: none;
+  color: inherit
+}
+
+.team-item-container > .container__text > .container-links > a.social > i {
   margin-right: 0.5rem;
   font-size: 1.3rem;
   background-color: #329998;
@@ -474,7 +490,7 @@ body {
 /* Contact */
 
 .contact-container {
-  padding: 4rem;
+  padding: 6rem 4rem;
   background: #329998;
   min-height: 800px;
   max-height: 1000px;
@@ -539,6 +555,16 @@ input[type="submit"]:disabled {
   outline-color: currentcolor;
 }
 
+@media screen and (max-width: 768px) {
+  .contact-container > .container > .row {
+    grid-template-columns: 1fr;
+  }
+
+  .contact-container {
+    padding: 4rem 1rem
+  }
+}
+
 /* Footer */
 
 footer {
@@ -554,16 +580,16 @@ footer {
   padding: 0;
 }
 
-.nav-links > li {
+.nav-footer > .nav-links > li {
   text-transform: uppercase;
   margin: 0 1rem 1rem 0;
 }
 
-.nav-links > li:last-child {
+.nav-footer > .nav-links > li:last-child {
   margin: 0;
 }
 
-.nav-links > li > a {
+.nav-footer > .nav-links > li > a {
   color: inherit;
   font-weight: bold;
   text-decoration: none;
@@ -598,3 +624,15 @@ footer {
   50% { transform: translateY(0px) rotate(0deg); }
   100% { transform: translateY(0px) rotate(90deg); }
 }
+
+@keyframes show {
+	from {
+		opacity: 0;
+		scale: 25%;
+	}
+	
+	to {
+		opacity: 1;
+		scale: 100%;
+	}
+}

static/js/main.js

@@ -1,9 +1,5 @@
+// CONFIGURATION NAVBAR
 const header = document.querySelector(".main-header");
-const expresiones = {
-  nombre: /^.{4,30}$/,
-  email: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/
-}
-
 window.addEventListener("scroll", () => {
   const scrollPos = window.scrollY;
   if (scrollPos > 10) {
@@ -13,12 +9,18 @@ window.addEventListener("scroll", () => {
   }
 })
 
+// CONFIGURATION FORM
+
 const form = document.getElementById("contactForm");
 const fields = {
   nombre: false,
   email: false,
   mensaje: false
 }
+const expresiones = {
+  nombre: /^.{4,30}$/,
+  email: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/
+}
 const loader = document.querySelector(".contact-form-loader");
 const inputs = document.querySelectorAll("input:not([type='submit']), textarea");
 const inputSubmit = document.querySelector("input[type='submit']")
@@ -62,20 +64,21 @@ inputs.forEach((input) => {
 
 form.addEventListener('submit', (e) => {
   e.preventDefault();
-
-  const data = {};
   if (fields.nombre && fields.email && fields.mensaje) {
     inputSubmit.disabled = true;
     inputSubmit.value = "Enviando...";
-    for (const input of inputs) {
-      if (input.value.length === 0 || input.value === 0) {
-        data[input.name] = null  
-      } else {
-        data[input.name] = input.value;
-      }
-    }
 
-    console.log('Data', data);
-    // form.reset();
-  } 
+    const serviceID = 'default_service';
+    const templateID = 'template_ab3seev';
+
+    emailjs.sendForm(serviceID, templateID, document.getElementById("contactForm"))
+      .then(() => {
+        inputSubmit.value = 'Enviar';
+        document.querySelector(".contact-form-response").classList.remove('none');
+        form.reset();
+      }, (err) => {
+        inputSubmit.value = 'Enviar';
+        // console.log(JSON.stringify(err));
+      });
+  }
 });