Desafío- GitHub | Desafío Latam

assets/css/estilos.css

@@ -5,7 +5,7 @@ body {
 /* Hero Section */
 
 #Hero-Section {
-  background-image: url("../img/bg-hero.jpg");
+  background-image: url("../img/main_pic.jpeg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: left;

index.html

@@ -10,7 +10,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <title>Olivia Ros</title>
+    <title>Carlos Madrid</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
         integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -21,22 +21,25 @@
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
         <div class="container">
             <a class="navbar-brand" href="#">
-                <img src="assets/img/logo.png" class="img-fluid">
+                <img src="assets/img/logo_personal.png" class="img-fluid">
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
                 <ul class="navbar-nav ms-auto mb-2 mb-lg-0 fs-5">
+                    <li>
+                        <a class="nav-link" href="index.html">Inicio</a>
+                    </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#">Acerca de mi</a>
+                        <a class="nav-link" href="#Acerca-de-mi">Acerca de mi</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#">Trabajos</a>
+                        <a class="nav-link" href="#Mis-trabajos">Trabajos</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#">Contacto</a>
+                        <a class="nav-link" href="#Contacto">Contacto</a>
                     </li>
 
                 </ul>
@@ -49,16 +52,14 @@
         <div class="container">
             <div class="ms-auto col-12 col-md-7 ">
                 <h1 class="display-1 fw-bold my-5">
-                    Comidas del fin <br> del mundo
+                    Ingeniero Informático <br>
                 </h1>
                 <p class="my-5">
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, accusamus iusto quibusdam
-                    dignissimos labore sequi. Cupiditate reiciendis eius dolore, illum adipisci harum voluptas iste
-                    mollitia inventore provident labore voluptatum nemo.
+                    Ingeniero Informático, fotógrafo a ratos, eterno jugador de tenis, practico ski cuando puedo. 
                 </p>
                 <div class="mb-5 pb-5">
-                    <button class="btn btn-lg btn-outline-info text-light me-4">Trabajos</button>
-                    <button class="btn btn-lg btn-info text-light">Contacto</button>
+                    <a href="#Mis-trabajos"><button class="btn btn-lg btn-outline-info text-light me-4">Trabajos</button></a>
+                    <a href="#Contacto"><button class="btn btn-lg btn-outline-info text-light">Contacto</button></a>
                 </div>
             </div>
         </div>
@@ -71,40 +72,41 @@ <h1 class="display-1 fw-bold my-5">
         <h2 class="display-3 fw-bold my-4">Acerca de mi</h2>
 
         <p class="my-4">
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio quisquam distinctio, odit laborum aliquam
-            earum itaque cum sequi, dolorem optio vol
+            Soy ingeniero informático, poseo un diplomado en Ciberseguridad, cuento 
+            más de 4 años de experiencia en el área de QA. En camino a convertirme en
+            un QA automatizador.
         </p>
 
 
         <div class="row">
             <div class="col-12 col-md-4">
-                <i class="fas fa-camera fa-3x my-3"></i>
-                <h3 class="my-3 fw-bold">Fotógrafa de comida</h3>
+                <i class="fa fa-laptop fa-3x my-3"></i>
+                <h3 class="my-3 fw-bold">Desarrollo Web</h3>
                 <p class="my-3">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing 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.
+                    Diseñar no solo el aspecto de un sitio web, sino tambien su 
+                    funcionamiento para el usuario final. Responsabilizarse de 
+                    que funciones se puede realizar cuando un usuario llega a la 
+                    página web.
                 </p>
             </div>
             <div class="col-12 col-md-4">
-                <i class="fas fa-bullhorn fa-3x my-3"></i>
-                <h3 class="my-3 fw-bold">Crítica culinaria</h3>
+                <i class="fa fa-terminal fa-3x my-3"></i>
+                <h3 class="my-3 fw-bold">Pentester</h3>
                 <p class="my-3">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing 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.
+                    Hacer pruebas en aplicaciones, dispositivos de red e 
+                    infraestructuras en la nube. Diseñar y realizar ataques 
+                    controlados. Investigar y experimentar con diferentes 
+                    tipos de ataques.
                 </p>
             </div>
             <div class="col-12 col-md-4">
-                <i class="far fa-map fa-3x my-3"></i>
-                <h3 class="my-3 fw-bold">Bloggera de viajes</h3>
+                <i class="fa fa-bug fa-3x my-3"></i>
+                <h3 class="my-3 fw-bold">Analista QA</h3>
                 <p class="my-3">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing 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.
+                    Desarrollo de planes de prueba para luego ejecutarlos de 
+                    acuerdo a los requerimientos del cliente. Ejecutar pruebas
+                    exploratorias, funcionales, de regresión y no funcionales,
+                    Realizar seguimiento a incidencias.
                 </p>
             </div>
         </div>
@@ -118,14 +120,14 @@ <h2 class="display-4 fw-bold text-center text-light mb-3">Mis trabajos</h2>
         <div class="row">
             <div class="col-12 col-sm-4 py-2">
                 <div class="card">
-                    <div class="image-top" style="background-image: url(assets/img/card-1.jpg)"></div>
+                    <div class="image-top" style="background-image: url(assets/img/pimentelco-staff.png)"></div>
                     <div class="card-body">
-                        <h5 class="card-title fw-bold">Asado en la Patagonia</h5>
+                        <h5 class="card-title fw-bold">Sitio web Pimentelco Co</h5>
                         <p class="card-text">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                            Explicabo iure sint, perspiciatis distinctio molestias nihil
-                            repudiandae neque rem adipisci repellendus libero illo quo
-                            blanditiis, velit quasi ad, recusandae voluptates officia.
+                            Se desarrolló un sitio web a pedido del cliente, quien era
+                            una peluqueria con bastante prestigio en la ciudad de 
+                            Concepción. Además del sitio web, se realizaron sesiones 
+                            fotográficas y el diseño del logo utilizado en el sitio web.
                         </p>
                         <button type="button" class="btn btn-outline-info">
                             Ver más
@@ -135,14 +137,15 @@ <h5 class="card-title fw-bold">Asado en la Patagonia</h5>
             </div>
             <div class="col-12 col-sm-4 py-2">
                 <div class="card">
-                    <div class="image-top" style="background-image: url(assets/img/card-2.jpg)"></div>
+                    <div class="image-top" style="background-image: url(assets/img/XSS_Modulo.png)"></div>
                     <div class="card-body">
-                        <h5 class="card-title fw-bold">Papas del fin del mundo</h5>
+                        <h5 class="card-title fw-bold">Pentesting entidad Bancaria</h5>
                         <p class="card-text">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                            Deserunt a culpa doloremque voluptatem dicta nam. Maxime ipsum,
-                            consequatur quos error fuga excepturi quo. Laudantium optio
-                            pariatur laboriosam modi, ea molestias?
+                            Realice una búsqueda de vulnerabilidades en un sitio web de 
+                            una entidad bancaria extranjera. Una vez realizado el 
+                            pentesting, se desarrollo un informe técnico y un informe
+                            comercial, acompañado de una presentación de lo encontrado 
+                            al equipo de desarrollo y gerencial.
                         </p>
                         <button type="button" class="btn btn-outline-info">
                             Ver más
@@ -152,14 +155,14 @@ <h5 class="card-title fw-bold">Papas del fin del mundo</h5>
             </div>
             <div class="col-12 col-sm-4 py-2">
                 <div class="card">
-                    <div class="image-top" style="background-image: url(assets/img/card-3.jpg)"></div>
+                    <div class="image-top" style="background-image: url(assets/img/Test_Cases.jpg)"></div>
                     <div class="card-body">
-                        <h5 class="card-title fw-bold">Salmones de Alaska</h5>
+                        <h5 class="card-title fw-bold">Plan de Prueba entidad Bancaria</h5>
                         <p class="card-text">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                            Obcaecati facere quibusdam sint id laborum magni velit ducimus
-                            corporis facilis qui architecto dolor, accusamus eveniet
-                            exercitationem fugit. Quod autem neque ducimus.
+                            Se diseño un plan de prueba para testear una nueva funcionalidad
+                            de una entidad bancaria nacional, se ejecutaron las pruebas, verificando el buen 
+                            funcionamiento de la nueva funcionalidad y de que las otras 
+                            funcionalidades no fueron tocadas.
                         </p>
                         <button type="button" class="btn btn-outline-info">
                             Ver más
@@ -177,11 +180,11 @@ <h5 class="card-title fw-bold">Salmones de Alaska</h5>
 
         <h2 class="display-4 fw-bold text-center my-4">Contáctame</h2>
 
-        <p class="text-center my-4 d-none d-md-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.
-            Doloribus
-            sapiente, autem delectus totam expedita
-            animi corporis dolorem qui magnam, aspernatur officiis quasi culpa tempora est commodi. Voluptate beatae
-            tempora quaerat?</p>
+        <p class="text-center my-4 d-none d-md-block">Si necesitas un nuevo sitio web, que verifiquen
+            la seguridad de tu aplicación móvil, aplicación web o sitio web o validar que tu proyecto 
+            este funcionando bajo los requerimientos funcionales. Dejame un mensaje, te mandare un mail
+            para coodinar una reunión y asi ayudarte con tu proyecto web.
+        </p>
 
         <form>
 
@@ -215,7 +218,7 @@ <h2 class="display-4 fw-bold text-center my-4">Contáctame</h2>
 
 
     <footer class="bg-dark text-center text-light p-4">
-        <p class="mb-0">Olivia Ros 2019. Todos los derechos reservados.</p>
+        <p class="mb-0">Carlos Madrid 2024. Todos los derechos reservados.</p>
     </footer>