valentinawerle · miniscandal · Oct 26, 2024 · Oct 27, 2024 · Oct 27, 2024 · Oct 27, 2024
diff --git a/Desarrollo web/WebPersonal/doc/documentation.txt b/Desarrollo web/WebPersonal/doc/documentation.txt
@@ -0,0 +1,72 @@
+⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝
+
+¡Hola ValenWerle!
+
+Espero que no te incomode que haya realizado algunas modificaciones en el proyecto.
+Mi objetivo es que esta guía te sirva para tu propio trabajo.
+
+He redactado esta documentación para explicarte de manera clara los motivos detrás
+de los cambios, para que puedas decidir si deseas implementarlos o no.
+Siéntete libre de considerar o pasar por alto estas modificaciones según
+tu criterio; mi intención es simplemente contribuir a tu proyecto.
+
+Todavía hay varios aspectos que se pueden mejorar, y seguiré trabajando en ello.
+
+Quiero aclarar que he colaborado en tu repositorio únicamente para aprender y crecer
+como desarrollador, sin esperar nada a cambio.
+
+Espero que mi colaboración te resulte útil.
+
+⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝
+
+
+Documentación de Cambios Realizados
+
+
+
+Mejora de la Presentación
+
+⚝ Favicon agregado: Se añadió un icono distintivo para mejorar la presentación del sitio web.
+⚝ Reemplazo de '<button>' por '<a>': Se mejoró la usabilidad y la estructura semántica utilizando un enlace de descarga.
+⚝ Edición de iconos de Stack: Se optimizó la presentación visual de los iconos.
+⚝ Implementación de efecto typewriting en JavaScript: Se mejoró el rendimiento y la funcionalidad del efecto.
+⚝ Refactorización de código CSS: Mejora el diseño responsivo.
+⚝ Efecto en la fotografía: Mejora la presentación (considerar cambiar la foto por una de mayor calidad y profesionalismo).
+⚝ Implementación de variables CSS para padding, gap y border-radius: Mejora la consistencia y el estilo uniforme de la presentación.
+⚝ Implementación de variable para los segundos de la transición: Garantiza una consistencia de estilo.
+
+
+
+Optimización de la Estructura del Documento
+
+⚝ Reordenación de etiquetas '<meta>', '<link>' y '<script>' en '<head>': Mejoró la legibilidad y garantizó el orden correcto de carga de los archivos.
+⚝ Incorporación de la etiqueta '<main>': Se delimitó el contenido principal del documento, mejorando la estructura semántica.
+⚝ Moví el formulario de contacto dentro del '<footer>': Se mejoró la organización del documento.
+⚝ Eliminación de Scroll Snap Type: Se consideró potencialmente molesto para los usuarios.
+⚝ Cambio de texto en títulos: Corrección de mayúsculas, mejora de la consistencia del formato de texto.
+
+
+
+Mejora de la Carga y Rendimiento
+
+⚝ Uso de 'defer' en el script de partículas: Permitió su importación dentro de '<head>', asegurando que el DOM se cargue primero.
+⚝ Tratamiento de scripts JavaScript como módulos: Facilitó la importación dentro de '<head>' y aseguró la carga previa del DOM.
+⚝ Reestructuración de archivos CSS y JavaScript: Se centralizaron las importaciones en los archivos principales para un mejor control.
+
+
+
+Mejora de la Legibilidad
+
+⚝ Eliminación de 'text-shadow': Aumentó la legibilidad sobre el color de fondo.
+⚝ Reemplazo de '<p>' por '<h2>' para el texto "a software developer...": Se resaltó contenido importante.
+
+
+
+Optimización de Contenido y Recursos
+
+⚝ Encapsulación de imágenes dentro de un '<div>': Permitió un mejor control y estilo de las imágenes.
+⚝ Almacenamiento local de imágenes: Se eliminó la dependencia de un servidor externo.
+⚝ Eliminación de documentación innecesaria: Se consideró redundante, ya que los nombres de archivo y el propio código describen su propósito.
+⚝ Edición de fotografía: Se destacó la actitud y seguridad que se desea reflejar.
+⚝ Descarga de CV en formato PDF: Se agregó funcionalidad para descargar el CV en formato PDF.
+⚝ Compresión de imagenes: Mejora el rendimiento de la página al reducir el tamaño de los archivos.
diff --git a/Desarrollo web/WebPersonal/index.html b/Desarrollo web/WebPersonal/index.html
@@ -1,119 +1,136 @@
 <!DOCTYPE html>
 <html lang="es">
+
 <head>
+    <title>Valentina Werle - Portfolio</title>
+
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Valentina Werle - Portfolio</title>
-    <link href="style.css" 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=Pixelify+Sans:wght@400..700&display=swap" rel="stylesheet">
-    <link rel="icon" href="icono3.png" type = "image/png">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-    <meta name="keywords" content="ingenieria en informatica, programadora">  
+    <meta name="keywords" content="ingenieria en informatica, programadora">
     <meta name="author" content="Valentina Werle">
-
+
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="icon" href="/public/favicon.ico" type="image/x-icon">
+
+    <link rel="stylesheet" href="style.css">
+
+    <script src="./src/functionality/particles/particles.js" defer></script>
+    <script src="./src/functionality/particles/app.js" defer></script>
+    <script src="main.js" type="module"></script>
 </head>
+
 <body>
-    <div class="container">
-        <header class="section">
-
-            <!-- PARTICULAS -->
-            <div id="particles-js"></div>
-                <div class="typewriter">
-                    <h1>Hi! I'm Valentina Werle</h1>
-                  </div>
-                <p>A software developer from Argentina</p>
-                <button id="resume-btn">My Resume</button>
-        </header>
+    <header class="section">
+        <div id="particles-js"></div>
+        <section>
+            <h1>
+                <span id="typewriter-text" class="typewriter-text"></span>
+                <span class="typewriter-cursor">|</span>
+            </h1>
+            <h2>A software developer from Argentina</h2>
+            <a class="hyperlink-button--download" href="./src/assets/documets/my-resume.pdf" download="my-resume.pdf">
+                My Resume
+            </a>
+        </section>
+    </header>
 
-        <section id="about" class="section">
-            <div>
-                <h2>About me</h2>
-            </div>
-            <div class="about-content">
-                <div class="about-text">
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-                        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-                        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                        aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque repellat impedit, odio cupiditate velit hic dolorem voluptatibus doloribus quos, eveniet possimus. Neque, ducimus ipsum? Harum id consectetur similique itaque fuga.
+    <main>
+        <article>
+            <h2>About Me</h2>
+            <div class="main-article__div about__div">
+                <section class="about-text__section">
+                    <p class="paragraph">
+                        I am a engineering student, currently midway through my degree, and a tech content creator about
+                        expanding my skills. I work at a company that specializes in developing solutions for the
+                        carpentry industry. Through Twitch programming streams I aim to inspire others as a technology
+                        communicator, showing my learning process.
                     </p>
-                </div>
-                <div class="about-image">
-                    <img
-                        src="https://media.licdn.com/dms/image/v2/D4D03AQFR6GwhwrIJkQ/profile-displayphoto-shrink_200_200/profile-displayphoto-shrink_200_200/0/1713981415889?e=2147483647&v=beta&t=v4Co6ZnFiHzA3_SMZuwnq2G_8255maUgECpmNuNxvK0"
-                        alt="Valentina Werle"
-                    />
+                </section>
+                <section class="about-image__section">
+                    <div class="image image__img--my-photo">
+                        <img src="./src/assets/images/my-photo-removebg.png" alt="Valentina Werle" />
+                    </div>
                     <div class="social-links">
-                        <a href="https://www.linkedin.com/in/valentinawerle/" class="social-icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg>
+                        <a href="https://www.linkedin.com/in/valentinawerle/">
+                            <div class="icon icon--social-networking">
+                                <img src="./src/assets/icons/social-networking/linkedin.svg" alt="linkedin">
+                            </div>
                         </a>
-                        <a href="https://github.com/valentinawerle" class="social-icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
+                        <a href="https://github.com/valentinawerle">
+                            <div class="icon icon--social-networking">
+                                <img src="./src/assets/icons/social-networking/github.svg" alt="github">
+                            </div>
                         </a>
                     </div>
-                </div>
+                </section>
             </div>
-        </section>
+        </article>
 
-        <section id="stack" class="section">
-            <h2>Stack</h2>
-            <div class="stack-section">
-                <h3>Languages</h3>
-                <div id="languages" class="stack-grid"></div>
+        <article>
+            <h2>My Stack</h2>
+            <div class="main-article__div stack__div">
+                <section>
+                    <h3>Languages</h3>
+                    <div id="languages" class="stack__div--skills"></div>
+                </section>
+                <section>
+                    <h3>Technologies</h3>
+                    <div id="tools" class="stack__div--skills"></div>
+                </section>
             </div>
-            <div class="stack-section">
-                <h3>Other tools and technologies</h3>
-                <div id="tools" class="stack-grid"></div>
-            </div>
-        </section>
 
-        <section id="contact" class="section">
-            <h2>Contact Me</h2>
-            <form id="contactForm">
-                <div class="form-group">
-                    <label for="fullName">Full name</label>
+        </article>
+    </main>
+
+    <footer class="footer">
+        <h2>Contact Me</h2>
+        <section>
+            <form id="contactForm" class="form-contact" autocomplete="off">
+                <div>
+                    <label for="fullName">Full Name</label>
                     <input type="text" id="fullName" name="fullName" required>
                 </div>
-                <div class="form-group">
+                <div>
                     <label for="email">Email</label>
                     <input type="email" id="email" name="email" required>
                 </div>
-                <div class="form-group">
+                <div>
                     <label for="userType">Account Type</label>
                     <select id="userType" name="userType" required>
                         <option value="">Please select an option</option>
                         <option value="Business">Business</option>
                         <option value="Individual">Individual</option>
                         <option value="Other">Other</option>
-                    </select>                    
+                    </select>
                 </div>
-                <div class="form-group">
+                <div>
                     <label for="message">Message</label>
-                <textarea id="message" name="message" rows="4" required maxlength="300"></textarea>
+                    <textarea id="message" name="message" rows="4" required maxlength="300"></textarea>
                 </div>
                 <button type="submit">Send</button>
             </form>
         </section>
-        
-        <footer id="footer">
-            <div class="social-icons">
-                <a href="https://www.twitch.tv/valenwerle" target="_blank" aria-label="Twitch">
+
+        <section>
+            <a href="https://www.twitch.tv/valenwerle" target="_blank" aria-label="Twitch">
+                <div class="icon icon--social-networking">
                     <i class="fab fa-twitch"></i>
-                </a>
-                <a href="https://www.instagram.com/valenwerle/reels/?hl=es" target="_blank" aria-label="Instagram">
+                </div>
+            </a>
+            <a href="https://www.instagram.com/valenwerle/reels/?hl=es" target="_blank" aria-label="Instagram">
+                <div class="icon icon--social-networking">
                     <i class="fab fa-instagram"></i>
-                </a>
-                <a href="https://www.tiktok.com/vapixel_" target="_blank" aria-label="TikTok">
+                </div>
+            </a>
+            <a href="https://www.tiktok.com/vapixel_" target="_blank" aria-label="TikTok">
+                <div class="icon icon--social-networking">
                     <i class="fab fa-tiktok"></i>
-                </a>
-            </div>
-        </footer>
-
-    </div>
-    <script src="main.js"></script>
-    <script src="particles.js"></script>
-    <script src="app.js"></script>
+                </div>
+            </a>
+        </section>
+    </footer>
 </body>
-</html>
+
+</html>