Daniel-JFA · Angiea18 · Aug 9, 2024 · Aug 9, 2024 · Aug 9, 2024 · Aug 9, 2024
diff --git a/StudentsMaterial/Angie_Arango/.gitignore b/StudentsMaterial/Angie_Arango/.gitignore
@@ -0,0 +1 @@
+/node_modules
diff --git a/StudentsMaterial/Angie_Arango/Portafolio/imagenes/angularjs.png b/StudentsMaterial/Angie_Arango/Portafolio/imagenes/angularjs.png
diff --git a/StudentsMaterial/Angie_Arango/Portafolio/imagenes/css-3.png b/StudentsMaterial/Angie_Arango/Portafolio/imagenes/css-3.png
diff --git a/StudentsMaterial/Angie_Arango/Portafolio/imagenes/github.png b/StudentsMaterial/Angie_Arango/Portafolio/imagenes/github.png
diff --git a/StudentsMaterial/Angie_Arango/Portafolio/imagenes/html-5.png b/StudentsMaterial/Angie_Arango/Portafolio/imagenes/html-5.png
diff --git a/StudentsMaterial/Angie_Arango/Portafolio/imagenes/java-script.png b/StudentsMaterial/Angie_Arango/Portafolio/imagenes/java-script.png
diff --git a/StudentsMaterial/Angie_Arango/Portafolio/imagenes/linkedin.png b/StudentsMaterial/Angie_Arango/Portafolio/imagenes/linkedin.png
diff --git a/StudentsMaterial/Angie_Arango/Portafolio/imagenes/nodejs.png b/StudentsMaterial/Angie_Arango/Portafolio/imagenes/nodejs.png
diff --git a/StudentsMaterial/Angie_Arango/Portafolio/imagenes/power-bl.png b/StudentsMaterial/Angie_Arango/Portafolio/imagenes/power-bl.png
diff --git a/StudentsMaterial/Angie_Arango/Portafolio/imagenes/python.png b/StudentsMaterial/Angie_Arango/Portafolio/imagenes/python.png
diff --git a/StudentsMaterial/Angie_Arango/Portafolio/imagenes/sql-server.png b/StudentsMaterial/Angie_Arango/Portafolio/imagenes/sql-server.png
diff --git a/StudentsMaterial/Angie_Arango/Portafolio/imagenes/typescript.png b/StudentsMaterial/Angie_Arango/Portafolio/imagenes/typescript.png
diff --git a/StudentsMaterial/Angie_Arango/Portafolio/imagenes/xls.png b/StudentsMaterial/Angie_Arango/Portafolio/imagenes/xls.png
diff --git a/StudentsMaterial/Angie_Arango/Portafolio/portafolio.HTML b/StudentsMaterial/Angie_Arango/Portafolio/portafolio.HTML
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mi Portafolio Personal - Angie Arango Zapata</title>
+    <link rel="stylesheet" href="portafolio.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    />
+  </head>
+  <body>
+    <header>
+      <nav>
+        <ul>
+          <li><a href="#about">Sobre mí</a></li>
+          <li><a href="#projects">Proyectos</a></li>
+          <li><a href="#skills">Habilidades</a></li>
+          <li><a href="#contact">Contacto</a></li>
+        </ul>
+      </nav>
+      <div class="intro">
+        <h1>Angie Arango Zapata</h1>
+        <p>Analista de Datos & Desarrolladora Web en Formación</p>
+      </div>
+    </header>
+
+    <section id="about">
+      <h2>Sobre mí</h2>
+      <p>
+        Soy científica de datos apasionada por el análisis de datos y el
+        desarrollo web.
+      </p>
+    </section>
+
+    <section id="projects">
+      <h2>Proyectos</h2>
+      <div class="project-category">
+        <h3>Proyectos de Desarrollo Web</h3>
+        <div class="project-card">
+          <strong>Estramipyme App</strong>
+          <p>Aplicación para evaluar estrategias organizacionales en pymes.</p>
+        </div>
+      </div>
+
+      <div class="project-category">
+        <h3>Proyectos de Análisis y Ciencia de Datos</h3>
+        <div class="project-container">
+          <div class="project-card">
+            <strong>Criptomonedas-Data-Analytics</strong>
+            <p>
+              Análisis del mercado de criptomonedas utilizando la API CoinGecko.
+            </p>
+          </div>
+
+          <div class="project-card">
+            <strong>MLOps</strong>
+            <p>
+              Proceso de Data Engineering y predicción de precios en
+              videojuegos.
+            </p>
+          </div>
+          <div class="project-card">
+            <strong>Flujos Migratorios</strong>
+            <p>Análisis de flujos migratorios y su impacto global.</p>
+          </div>
+          <div class="project-card">
+            <strong>250 IMDB Movies</strong>
+            <p>Análisis de películas y sistema de recomendación.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="skills">
+      <h2>Habilidades</h2>
+      <div class="skills-container">
+        <div class="skill-item">
+          <img src="imagenes/java-script.png" alt="JavaScript" /> JavaScript
+        </div>
+        <div class="skill-item">
+          <img src="imagenes/html-5.png" alt="HTML" /> HTML
+        </div>
+        <div class="skill-item">
+          <img src="imagenes/css-3.png" alt="CSS" /> CSS
+        </div>
+        <div class="skill-item">
+          <img src="imagenes/angularjs.png" alt="Angular" /> Angular
+        </div>
+        <div class="skill-item">
+          <img src="imagenes/nodejs.png" alt="Node.js" /> Node.js
+        </div>
+        <div class="skill-item">
+          <img src="imagenes/typescript.png" alt="TypeScript" /> TypeScript
+        </div>
+        <div class="skill-item">
+          <img src="imagenes/python.png" alt="Python" /> Python
+        </div>
+        <div class="skill-item">
+          <img src="imagenes/sql-server.png" alt="SQL" /> SQL
+        </div>
+        <div class="skill-item">
+          <img src="imagenes/power-bl.png" alt="Power BI" /> Power BI
+        </div>
+        <div class="skill-item">
+          <img src="imagenes/xls.png" alt="Excel" /> Excel
+        </div>
+      </div>
+    </section>
+
+    <section id="contact">
+      <h2>Contacto</h2>
+      <p>Puedes encontrar más sobre mí en:</p>
+      <ul>
+        <li>
+          <a href="https://www.linkedin.com/in/angie-arango/">
+            <img src="imagenes/linkedin.png" alt="LinkedIn" /> LinkedIn
+          </a>
+        </li>
+        <li>
+          <a href="https://github.com/Angiea18">
+            <img src="imagenes/github.png" alt="GitHub" /> GitHub
+          </a>
+        </li>
+      </ul>
+    </section>
+
+    <footer>
+      <p>&copy; 2024 Angie Arango Zapata. Todos los derechos reservados.</p>
+    </footer>
+
+    <script src="scripts.js"></script>
+  </body>
+</html>
diff --git a/StudentsMaterial/Angie_Arango/Portafolio/portafolio.css b/StudentsMaterial/Angie_Arango/Portafolio/portafolio.css
@@ -0,0 +1,90 @@
+body {
+  font-family: Arial, sans-serif;
+  color: #333;
+  margin: 0;
+  padding: 0;
+}
+
+header {
+  background-color: #58b0a8;
+  color: white;
+  padding: 20px;
+  text-align: center;
+}
+
+nav ul {
+  list-style: none;
+  padding: 0;
+  text-align: center;
+}
+
+nav ul li {
+  display: inline;
+  margin: 0 10px;
+}
+
+nav ul li a {
+  color: white;
+  text-decoration: none;
+}
+
+section {
+  padding: 20px;
+}
+
+.project-container {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.project-card {
+  background-color: #f9f9f9;
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin: 10px;
+  text-align: center;
+}
+
+.skills-container {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.skill-item {
+  background-color: #f9f9f9;
+  border: 1px solid #ccc;
+  padding: 10px;
+  text-align: center;
+  margin: 5px;
+}
+
+#contact ul {
+  list-style: none;
+  padding: 0;
+}
+
+#contact li {
+  margin: 5px 0;
+}
+
+#contact a {
+  color: #58b0a8;
+  text-decoration: none;
+}
+
+footer {
+  background-color: #58b0a8;
+  color: white;
+  text-align: center;
+  padding: 10px;
+}
+.skill-item img {
+  width: 40px;
+  height: 40px;
+}
+#contact img {
+  width: 24px;
+  height: 24px;
+}
diff --git a/StudentsMaterial/Angie_Arango/Practica_HTML/index.html b/StudentsMaterial/Angie_Arango/Practica_HTML/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Determinar Día de la Semana</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <section class="main">
+      <div class="container">
+        <h1 id="day-week">Determinar Día de la Semana</h1>
+        <div class="input-container">
+          <input
+            type="number"
+            id="number-day"
+            placeholder="Ingrese el número del día"
+          />
+          <button class="my-button" onclick="determinarDia()">
+            Buscar día
+          </button>
+        </div>
+        <p id="dia-seleccionado"></p>
+      </div>
+    </section>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/StudentsMaterial/Angie_Arango/Practica_HTML/script.js b/StudentsMaterial/Angie_Arango/Practica_HTML/script.js
@@ -0,0 +1,33 @@
+function determinarDia() {
+  const numeroDia = document.getElementById("number-day").value;
+  let diaSemana;
+
+  switch (Number(numeroDia)) {
+    case 1:
+      diaSemana = "Lunes";
+      break;
+    case 2:
+      diaSemana = "Martes";
+      break;
+    case 3:
+      diaSemana = "Miércoles";
+      break;
+    case 4:
+      diaSemana = "Jueves";
+      break;
+    case 5:
+      diaSemana = "Viernes";
+      break;
+    case 6:
+      diaSemana = "Sábado";
+      break;
+    case 7:
+      diaSemana = "Domingo";
+      break;
+    default:
+      diaSemana =
+        "El número ingresado no corresponde a ningún día de la semana. Ingrese un valor entre 1 y 7.";
+  }
+
+  document.getElementById("dia-seleccionado").textContent = diaSemana;
+}
diff --git a/StudentsMaterial/Angie_Arango/Practica_HTML/style.css b/StudentsMaterial/Angie_Arango/Practica_HTML/style.css
@@ -0,0 +1,22 @@
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+input {
+  margin-right: 5px;
+  width: 200px;
+}
+
+button {
+  width: 100px; /* Ancho del botón */
+}