Merge pull request #387 from ivanpugliese1/main

HTML semántico y estilos a la hoja de vida.
undefined-academy · Mar 16, 2024 · e6734cb · e6734cb
2 parents df65c1e + a862553
commit e6734cb
Show file tree

Hide file tree

Showing 3 changed files with 262 additions and 0 deletions.
diff --git a/student-cvs/ivanpugliese-8873/index.html b/student-cvs/ivanpugliese-8873/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Porfolio de Ivan Pugliese</title>
+  <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=Onest:wght@100..900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+  <div class="page">
+    <header class="header">
+      <nav class="nav">
+          <ul class="nav-ul">
+              <li><a href="#home">Inicio</a></li>
+              <li><a href="#about">Sobre mi</a></li>
+              <li><a href="#projects">Proyectos</a></li>
+              <li><a href="#contact">Contacto</a></li>
+          </ul>
+      </nav>
+    </header>
+
+    <main>
+      <section  class="home" id="home">
+        <div class="presentation-text">
+            <span>Hola!👋 mi nombre es</span>
+            <h1>Ivan Pugliese 👨🏻‍💻</h1>
+            <h2>Estudiante Fullstack JavaScript</h2>
+            <p>Apasionado por la programación y el diseño, siempre en constante aprendizaje.</p>
+        </div>
+        <div class="presentation-links">
+          <a href="https://github.com/ivanpugliese1" target="_blank"><svg viewBox="0 0 256 250" width="256" height="250" fill="currentColor" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z" fill="#545454"/></svg>Github</a>
+          <a href="https://www.linkedin.com/in/ivan-pugliese-developer/" target="_blank"><svg width="256" height="256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256"><path d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453" fill="#0A66C2"/></svg>
+            Linkedin</a>
+          <a href="mailto:ivanpugliese.f@gmail.com" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 19h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v5.5" /><path d="M19 22v-6" /><path d="M22 19l-3 -3l-3 3" /><path d="M3 7l9 6l9 -6" /></svg>Correo Electrónico</a>
+        </div>
+      </section>
+
+      <section id="about" class="about">
+        <h2>Sobre mi 🙋‍♂️</h2>
+        <p>Nací el 6 de Febrero de 1999 en Argentina. Apasionado por la tecnología desde muy joven y de la programación desde que me adentre en el mundo de forma autodidacta. Considero que la mejor herramienta es el conocimiento de uno mismo, mi mayor motivación es seguir aprendiendo, fortaleciendo mi desarrollo personal y profesional.</p>
+      </section>
+
+      <section id="contact" class="contact">
+        <h2>Contactame! 📩</h2>
+        <form action="" id="form" class="form">
+          <fieldset>
+            <legend>Información personal</legend>
+            <label>
+              Nombre: 
+              <input type="text" name="nombre" placeholder="Ingrese su nombre">
+            </label>
+            <label>
+              Email: 
+              <input type="email" name="email" placeholder="Ingrese su correo">
+            </label>
+          </fieldset>
+          <fieldset>
+            <legend>Dejeme su mensaje!</legend>
+            <textarea name="" id="" cols="30" rows="10"></textarea>
+          </fieldset>
+
+          <button>Enviar</button>
+        </form>
+      </section>
+    </main>
+
+    <footer class="footer">
+      <small>{Desarrollado por <strong>Ivan Pugliese</strong>}</small>
+    </footer>
+  </div>
+
+  <script src="./main.js"></script>
+</body>
+</html>
diff --git a/student-cvs/ivanpugliese-8873/main.js b/student-cvs/ivanpugliese-8873/main.js
@@ -0,0 +1,5 @@
+const FORM = document.querySelector("#form");
+
+FORM.addEventListener("submit", (event) => {
+  event.preventDefault();
+})
diff --git a/student-cvs/ivanpugliese-8873/styles.css b/student-cvs/ivanpugliese-8873/styles.css
@@ -0,0 +1,180 @@
+/* ---- Reset ----*/
+
+html {
+  box-sizing: border-box;
+  font-family: "Onest", sans-serif;
+  background: radial-gradient(circle, rgba(2,0,31,1) 27%, rgba(0,0,0,0.9668242296918768) 92%);
+  scroll-behavior: smooth;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  color: #f1f1f1;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+a {
+  text-decoration: none;
+  color: #f1f1f1;
+}
+
+h1,h2,h3,p {
+  margin: 0;
+}
+
+[id] {
+  scroll-margin-top: 9ex;
+}
+
+
+/* ---- Styles ----*/
+
+.page {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+main {
+  max-width: 800px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+  padding: 1rem;
+}
+
+.header {
+  margin: 2rem 0;
+}
+
+.nav-ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  list-style-type: none;
+}
+
+.home {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.presentation-text {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.presentation-text span, h2 {
+  font-weight: bold;
+  color: #38BDF8;
+}
+
+.presentation-text h1 {
+  font-size: 2rem;
+}
+
+.presentation-links {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 10px;
+}
+
+.presentation-links a {
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  border: 1px solid gray;
+  border-radius: 0.5rem;
+  gap: 5px;
+}
+
+.presentation-links a > svg {
+  width: 30px;
+  height: 30px;
+}
+
+.about {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.contact {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+}
+
+fieldset {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 0.5rem;
+  gap: 5px;
+}
+
+input {
+  padding: 3px 8px;
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+input:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid #0370a1;
+  border: 1px solid #0370a1;
+}
+
+textarea {
+  font-family: "Onest";
+  padding: 12px;
+  resize: none;
+  border-radius: 0.5rem;
+}
+
+button {
+  cursor: pointer;
+  padding: 5px;
+  margin: 0 auto;
+  width: 40%;
+  font-family: "Onest";
+  color: #f1f1f1;
+  background-color: #0370a1;
+  border: none;
+  border-radius: 0.5rem;
+  transition: all 0.2s;
+}
+
+button:hover {
+  transform: scale(1.1);
+}