Merge branch 'develop'

DanielaS-Tochi · Oct 26, 2024 · d1e88a4 · d1e88a4
2 parents c8921d5 + 333b151
commit d1e88a4
Show file tree

Hide file tree

Showing 6 changed files with 284 additions and 46 deletions.
diff --git a/DanielaSilvanaTochiCV.pdf → assets/DanielaSilvanaTochiCV.pdf b/DanielaSilvanaTochiCV.pdf → assets/DanielaSilvanaTochiCV.pdf
diff --git a/assets/images/logo-ahf.png b/assets/images/logo-ahf.png
diff --git a/assets/images/logo-alura.png b/assets/images/logo-alura.png
diff --git a/index.html b/index.html
@@ -1,12 +1,17 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="es">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Daniela | Web Developer</title>
     <link rel="stylesheet" href="./styles/style.css">
     <link rel="icon" href="./assets/images/favicon-16x16.png" type="image/x-icon">
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
+        rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 
 
@@ -16,35 +21,75 @@
     <header>
         <nav class="navbar">
             <div class="navbar-left">
-                <img src="./assets/images/daniela-silvana-tochi.jpg" alt="mi avatar" class="avatar">
+                <img src="./assets/images/daniela-silvana-tochi.jpg" alt="mi avatar" class="avatar"
+                    title="Avatar de Daniela">
             </div>
+            <!-- Menú de navegación principal -->
             <ul class="navbar-right">
-                <li> <a href="#home">Home</a></li>
-                <li> <a href="#sobre-mi">Sobre mí</a></li>
-                <li> <a href="#habilidades">Habilidades</a></li>
-                <li> <a href="#proyectos">Proyectos</a></li>
-                <li> <a href="#formacion">Formación</a></li>
-                <li> <a href="#CV">Mi CV</a></li>
-                <li> <a href="#contacto">Contacto</a></li>
+                <li><a href="#sobre-mi">Sobre mí</a></li>
+                <li><a href="#habilidades">Habilidades</a></li>
+                <li><a href="#proyectos">Proyectos</a></li>
+                <li><a href="#formacion">Formación</a></li>
+                <li><a href="#CV">Mi CV</a></li>
+                <li><a href="#contacto">Contacto</a></li>
             </ul>
+            <!-- Ícono del menú burger -->
+            <div class="burger-icon" onclick="toggleMenu()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
         </nav>
     </header>
 
-    <a href="./DanielaSilvanaTochiCV.pdf" download>Descargar mi CV</a>
+    </div>
+    </nav>
+
+    <a class="cv" href="./assets/DanielaSilvanaTochiCV.pdf" download>Descargar mi CV</a>
     </section>
+    <h2 class="heading">Formación académica</h2>
+    <div class="container-formacion" id="formacion">
+
+        <div class="box-container">
+            <div class="box">
+                <img src="./assets/images/logo-alura.png" alt="Logo de Alura-Latam">
+                <h3>FrontEnd - Programa ONE Alura-Latam Oracle</h3>
+                <p>2024-UFPR</p>
+            </div>
+            <div class="box">
+                <img src="./assets/images/logo-ahf.png" alt="Logo de Agencia de Habilidades para el Futuro">
+                <h3>Fullstack JavaScript con NodeJS | 2022-2023</h3>
+            </div>
+            <h3>Programación Inicial | 2021</h3>
+        </div>
+    </div>
+    </div>
+    <form action="https://formspree.io/f/xnnqnepn" method="POST">
+        <h1>---Contáctame---</h1>
+        <label for="name">Nombre</label>
+        <input type="text" id="name" name="name" required>
+
+        <label for="email">Correo Electrónico</label>
+        <input type="email" id="email" name="email" required>
 
+        <label for="message">Mensaje</label>
+        <textarea id="message" name="message" required></textarea>
 
+        <button type="submit">Enviar</button>
+    </form>
+    <a class="cv" href="./assets/DanielaSilvanaTochiCV.pdf" download>Descargar mi CV</a>
+    </section>
 
     <footer>
         <p>&copy; 2024 | Mi portafolio | Todos los derechos reservados.</p>
-        <p>Contacto: <a href="mailto:[email protected]">[email protected]</a></p>
+        <p>Contacto: <a href="mailto:[email protected]" title="Enviar mail">[email protected]</a></p>
         <a href="https://linkedin.com/in/daniela-silvana-tochi" target="_blank" rel="noopener" title="LinkedIn">
             <i class="fab fa-linkedin"></i>
             <span class="sr-only">LinkedIn</span></a>
         <a href="https://github.com/DanielaS-Tochi" target="_blank" rel="noopener" title="GitHub">
             <i class="fab fa-github"></i>
         </a>
-        <a href="https://twitter.com/DaniTochiCode" target="_blank" rel="noopener" title="Twitter">
+        <a href="https://twitter.com/DaniTochiCode" target="_blank" rel="noopener" title="Twitter / X">
             <i class="fab fa-twitter"></i>
         </a>
         <!--Por el momento no utilizaré Términos de uso y Política de privacidad-->
@@ -53,26 +98,6 @@
     </footer>
     <script src="./scripts/app.js"></script>
 
-    <div class="container-formacion" id="Formación">
-        <h2 class="heading">Formación académica</h2>
-        <div class="box-container">
-            <div class="box">
-                <img src="" alt="Logo de Alura-Latam">
-                <h3>Programa ONE Alura-Latam Oracle</h3>
-                <p>2024-UFPR</p>
-            </div>
-            <div class="box">
-                <img src="" alt="Logo de Agencia de Habilidades para el Futuro">
-                <h3>Fullstack JavaScript con NodeJS</h3>
-                <p>2022-2023</p>
-            </div>
-            <div class="box">
-                <img src="" alt="Logo de Agencia de Habilidades para el Futuro">
-                <h3>Programación Inicial</h3>
-                <p>2021</p>
-            </div>
-        </div>
-    </div>
 
 </body>
 

diff --git a/scripts/app.js b/scripts/app.js
@@ -0,0 +1,27 @@
+document.getElementById("contact-form").addEventListener("submit", function (event) {
+    let name = document.getElementById("name").value;
+    let email = document.getElementById("email").value;
+    let subject = document.getElementById("subject").value;
+    let message = document.getElementById("message").value;
+
+    // Expresión regular para validar el correo electrónico
+    const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
+
+    if (!name || !email || !subject || !message) {
+        alert("Todos los campos son obligatorios.");
+        event.preventDefault(); // Evita el envío si hay campos vacíos
+    } else if (!email.match(emailPattern)) {
+        alert("Por favor, introduce un correo electrónico válido.");
+        event.preventDefault(); // Evita el envío si el correo no es válido
+    } else {
+        // Formspree manejará el envío si la validación es exitosa
+        alert("Formulario enviado con éxito.");
+    }
+});
+
+function toggleMenu() {
+    const navbar = document.querySelector(".navbar");
+    const menuLinks = document.querySelector(".menu-links");
+    navbar.classList.toggle("open");
+    menuLinks.classList.toggle("open");
+}