Creando el proyecto

AlanHQ-code · Jul 1, 2024 · d46b6c7 · d46b6c7
commit d46b6c7
Show file tree

Hide file tree

Showing 10 changed files with 213 additions and 0 deletions.
diff --git a/about.html b/about.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="es-mx">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sobre mí</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header class="header">
+        <nav class="header__menu">
+            <a class="header__menu__link" href="index.html">Inicio</a>
+            <a class="header__menu__link" href="about.html">Sobre mí</a>
+        </nav>
+    </header>
+    <main class="presentacion">
+        <section class="presentacion__contenido">
+            <h1 class="presentacion__contenido__titulo">Sobre mí</h1>
+            <p class="presentacion__contenido__texto">Soy estudiante de ingeniería de sistemas y computación en el X ciclo, apasionado por la programación
+                y el trabajo en equipo en un entorno dinámico. Tengo experiencia en Python, JavaScript, HTML, CSS y
+                cloud, me interesa aplicar estos conocimientos en proyectos relacionados con ERP. Mi habilidad para
+                comunicarme y mantener una documentación ordenada me permite cumplir eficazmente con los
+                requerimientos de desarrollo asignados y participar de manera constructiva en reuniones de equipo</p>
+        </section>
+        <img class="presentacion__imagen" src="./assets/Imagem.png" alt="Foto de Ana García desarrolando un proyecto">
+    </main>
+    <footer class="footer">
+        <p>Desarrollado por Alan Huaman</p>
+    </footer>
+</body>
+</html>
diff --git a/assets/github.png b/assets/github.png
diff --git a/assets/imagem.png b/assets/imagem.png
diff --git a/assets/instagram.png b/assets/instagram.png
diff --git a/assets/linkedin.png b/assets/linkedin.png
diff --git a/assets/twitch.png b/assets/twitch.png
diff --git a/assets/twitter-novo.png b/assets/twitter-novo.png
diff --git a/assets/twitter.png b/assets/twitter.png
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="es-mx">
+<head>
+    <meta charset="UTF-8"> 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Portafolio</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+    <header class="header">
+        <nav class="header__menu">
+            <a class="header__menu__link" href="index.html">Inicio</a>
+            <a class="header__menu__link" href="about.html">Sobre mí</a>
+        </nav>
+    </header>
+    <main class="presentacion">
+        <section class="presentacion__contenido">
+            <h1 class="presentacion__contenido__titulo">
+                Eleve tu negocio digital a otro nivel 
+                <strong class="titulo-destaque">con un Front-end de calidad!
+                </strong></h1>
+                <p class="presentacion__contenido__texto">¡Hola! Soy Alan Huaman, desarrollador Front-end con
+                    especialización en React, HTML y CSS. Ayudo a pequeños
+                    negocios y diseñadores a llevar a cabo buenas ideas.
+                    ¿Hablamos?
+
+                </p>
+                <div class="presentacion__enlaces">
+                    <h2 class="presentacion__enlaces__subtitulo">Accede a mis redes</h2>
+                    <a class="presentacion__enlaces__link" href="https://instagram.com/"> 
+                        <img src="./assets/instagram.png" alt=""> Instagram</a>
+                    <a class="presentacion__enlaces__link" href="https://github.com/"> 
+                        <img src="./assets/github.png" alt=""> GitHub</a>
+                </div>  
+        </section>
+            <img class="presentacion__imagen" src="./assets/Imagem.png" alt="Foto de Ana García desarrolando un proyecto">
+    </main>
+    <footer class="footer">
+        <p>Desarrollado por Alan Huaman</p>
+    </footer>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,138 @@
+@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');
+
+:root{
+    --color-primario: #000000;
+    --color-secundario: #F6F6F6;
+    --color-terciario: #22D4FD;
+    --color-hover: #272727;
+
+    --fuente-monserrat: 'Montserrat', sans-serif;
+    --fuente-krona: 'Krona One', sans-serif;
+
+}
+
+* {
+    padding: 0;
+    margin:0;
+}
+
+body{
+    box-sizing: border-box;
+    background-color: var(--color-primario);
+    color: var(--color-secundario);
+}
+
+.header{
+    padding: 2% 0% 0% 10%;
+}
+
+.header__menu{
+    display: flex;
+    gap: 80px;
+
+}
+
+.header__menu__link{
+    font-family: var(--fuente-monserrat);
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--color-terciario);
+    text-decoration: none;
+}
+
+.presentacion {
+    padding: 6% 10%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 82px;
+}
+
+.presentacion__contenido{
+    width: 50%px;
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+}
+
+.presentacion__contenido__titulo{
+    font-size: 2.25rem;
+    font-family: var(--fuente-krona);
+}
+
+.titulo-destaque {
+    color: var(--color-terciario);
+}
+
+.presentacion__contenido__texto{
+    font-size: 1.5rem;
+    font-family: var(--fuente-monserrat);
+}
+
+.presentacion__enlaces{
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
+    gap: 32px;
+}
+
+.presentacion__enlaces__subtitulo{
+    font-family: var(--fuente-krona);
+    font-size: 1.5rem;
+    font-weight: 400;
+}
+
+.presentacion__enlaces__link{
+    width: 50%;
+    padding: 21.5px 0;
+    border-radius: 8px;
+    text-align: center;
+    font-family: var(--fuente-monserrat);
+    font-size: 1.5rem;
+    font-weight: 600;
+    text-decoration: none;
+    color: var(--color-secundario);
+    border: 4px solid var(--color-terciario);
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+}
+
+.presentacion__enlaces__link:hover{
+    background-color: var(--color-hover);
+}
+
+.presentacion__imagen{
+    width: 50%;
+    border-radius: 20px;
+}
+
+.footer{
+    background-color: var(--color-terciario);
+    padding: 24px;
+    color: var(--color-primario);
+    text-align: center;
+    font-family: var(--fuente-monserrat);
+    font-size: 1.5rem;
+    font-weight: 400;
+}
+
+@media (max-width: 1000px){
+    .header{
+        padding: 10%;
+    }
+
+    .header__menu{
+        justify-content: center;
+    }
+
+    .presentacion{
+        flex-direction: column-reverse;
+        padding: 5%;
+    }
+
+    .presentacion__contenido{
+        width: auto;
+    }
+}