Portafolio - freeCodeCamp.org

8 Ideas de proyectos en React.js para ayudarte a aprender haciendo

Constanza Areal — Mon, 16 Oct 2023 06:00:00 +0000

Artículo original: 8 React.js Project Ideas to Help You Start Learning by Doing

Una de las mejores formas de aprender es haciendo. Pero a veces a los desarrolladores se les dificulta la pregunta de qué construir.

Aquí hay ocho ideas de proyectos, con resumen del proyecto e ideas de bosquejo incluidas, para que puedas empezar a aprender mediante la práctica.

Negocios y Mundo Real: Mapa de información estadística
Divertido e interesante: Instrumento musical
Personal y Portfolio: Blog
Productividad: Notebook
Puzzles y Juegos: Space Invaders
Herramientas y Librerías: Tema para la librería Gatsby
Complementos para el proyecto: Webmentions
Clon: Product Hunt

Esto es un avance del libro electrónico gratuito 50 Projects for React & the Static Web. Puedes encontrar las 50 ideas de proyecto (incluidas estas 8) en 50reactprojects.com.

Mapa de información estadística

Categoría: Negocios y Mundo real

Crea un mapa que muestre información estadística y geográfica sobre la enfermedad COVID-19.

Resumen

Tratar de abordar una pandemia global significa que los virus como el coronavirus impactan en el mundo de forma distinta, de acuerdo a la ubicación geográfica.

Tener un mapa detallado con la información estadística de cada país es útil para poder determinar en que países tuvo un mayor impacto.

Nivel 1

La manera más fácil de ver las estadísticas de cada país es tener un mapa navegable, con las estadísticas de ese país al lado de su nombre.

Crea una aplicación de mapeo que use la API Coronavirus disease.sh para añadir marcadores para cada país y el número de casos de COVID-19.

Nivel 2

Si bien es útil tener estadísticas de cada país, sería aún más útil poder comparar esas estadísticas con el número de casos en todo el mundo.

Añade un tablero estadístico que muestre el número de casos de COVID-19 alrededor del mundo y cualquier otra estadística de la API que sea útil.

Nivel 3

Obtener estadísticas actualizadas nos sirve para entender la situación mundial actual, pero ¿cómo se comparan históricamente?

Usa la API de información estadística para mostrar gráficos en el tablero que den contexto al crecimiento y esparcimiento del virus.

Tareas a realizar

Crear una nueva aplicación de mapa
Obtener de la API información de los países
Añadir marcadores al mapa
Añadir estadísticas a los marcadores
Obtener de la API información mundial
Crea un tablero estadístico
Añadir estadísticas mundiales
Obtener de la API información histórica
Añadir gráficos al mapa

Idea de bosquejo

Idea de maquetado del mapa estadístico

Instrumento musical

Categoría: Divertido e Interesante

Crear un piano interactivo en el cual puedas tocar música usando tu teclado.

Resumen

No todos tienen el placer de tener un instrumento musical, pero quizás si tienen una computadora, un teléfono o una tablet. Tener un piano es una forma poderosa de que las personas puedan tocar música aún si nunca tuvieron oportunidad de hacerlo.

Nivel 1

Usando el navegador y APIs de sonidos web, es posible crear sonidos que, al usarlos todos juntos, pueden crear una melodía.

Crea una serie de botones que al apretarlos suenen las notas en una escala.

Nivel 2

Aunque no todos hayan tocado un instrumento, el concepto y la interfaz de un instrumento como el piano es generalmente más intuitivo que un par de botones.

Crea un bosquejo de un teclado de piano a través de botones que funcionen haciendo clic o con el teclado de la computadora.

Nivel 3

Si bien tenemos un espacio limitado en el navegador, hay una amplia variedad de notas, escalas y sonidos que un teclado eléctrico podría reproducir con algunos efectos adicionales.

Crea botones para alternar los sonidos de las notas cuando están activados.

Tareas a realizar

Crear botones
Realizar un sonido cuando se hace clic
Ubicar las notas en una escala
Crear el bosquejo del piano
Programar eventos del teclado
Crear efectos para el bosquejo
Alternar efectos de audio

Caja de herramientas

React HotKeys (en inglés, github.com)

Tutoriales

Construyendo un piano con React Hooks (en inglés, dev.to)
Cómo construir un teclado de piano con Vanilla JavaScript (en inglés, freecodecamp.org)
¡Construye un piano con tone.js! (en inglés, dev.to)
Como creé un piano de solo 1kb de JavaScript (en inglés,frankforce.com)

Inspiración

React Guitar (en inglés, react-guitar.com)

Idea de bosquejo

Idea de bosquejo del instrumento musical

Blog

Categoría: Personal y Portfolio

Crea un blog que puedas usar para compartir tu experiencia laboral y proyectos.

Resumen

Para cualquier campo laboral, tener un blog para compartir tus experiencias es una buena forma para que los demás puedan saber en que estás trabajando y que los demás puedan aprender de tus experiencias.

También es una manera de reforzar lo que ya aprendiste para poder usarlo como referencia a ello en el futuro.

Nivel 1

Para poder compartir tus experiencias, necesitas una estructura de sitio web que te permita tanto crear nuevo contenido como administrar el que ya existe.

Una forma de hacerlo es crear archivos de lenguaje de marcado para que tu sitio web pueda utilizarlos para crear nuevas páginas y mostrar los distintos posteos.

Crea un blog usando archivos de lenguaje de marcado como fuente del contenido.

Nivel 2

Tener tu contenido en archivos de lenguaje de marcado es una buena manera de gestionar contenido estático pero quizás no es lo mejor estar editando el código cada vez que escribes o editas un posteo.

Integrar un sistema de gestión del contenido que te permita añadir nuevo contenido o editar el que ya existe con una interfaz de usuario bonita.

Nivel 3

Si vas a compartir código en tu blog, HTML viene con herramientas nativas integradas que te ayudan a darle formato al código de forma legible. Pero éste no incluye ninguna herramienta que ayuda a resaltar la sintaxis del código y de esta manera mejorar la legibilidad.

Integra una herramienta que resalte los bloques de códigos para hacerlos más legibles.

Lista de tareas

Crear un blog
Añadir primero contenido estático
Busca contenido estático
Integra un CMS
Añadir código al contenido
Añadir herramienta para resaltar la sintaxis del código

Herramientas

Netlify CMS (en inglés, netlifycms.org)
Prism.js (en inglés, prismjs.com)

Tutoriales

Creando un Blog con Gatsby y Netifly CMS (en inglés, gatsbyjs.org)
Cómo crear desde cero tu blog sobre código usando Gatsby y MDX (en inglés, freecodecamp.org)

Inspiración

Gatsby Netlify CMS Starter (gatsby-netlify-cms.netlify.app)

Idea de bosquejo

Idea de bosquejo de Blog

Cuaderno de notas

Categoría: Productividad

Crea una app de notas para agregar, gestionar y organizar notas.

Resumen

Tomar notas es una gran manera de registrar nuestros pensamientos o aspectos claves de una reunión. Para poder encontrarlos después, es importante poder organizarlos de manera fácil.

Nivel 1

El primer requisito de un cuaderno de notas es que se pueda hacer notas en él. Esto puede ser bastante simple para empezar ya que necesitamos algún campo de entrada que tome lo que escribas ahí y lo guarde en algún lado para poder usarlo más tarde.

Crea un formulario para añadir nuevas notas y visualizarlas en una lista.

Nivel 2

Para poder encontrar después las notas, vas a querer tener una forma de organizarlas y buscarlas. Eso incluye agregar categorías o algún tipo de sistema de etiquetado y también armar una interfaz de usuario para poder hacer búsquedas.

Agrega la posibilidad de etiquetar o categorizar notas y un campo de búsqueda para filtrarlas.

Nivel 3

Aunque nos demos cuenta o no, podemos encontrar conexiones entre nuestros pensamientos y nuestras notas. Esa red de pensamientos nos servirá para poder usar en nuestro cuaderno de notas.

Agrega un sistema de enlazado de notas inspirado en Roam Research para crear una red de pensamientos.

Lista de tareas

Crear un formulario
Almacenar nuevas notas
Listar notas
Agregar etiquetas o categorías
Agregar búsqueda de notas
Agregar red de notas

Caja de herramientas

Gatsby Brain Theme (github.com)
Fuse.js (en inglés, fusejs.io)

Tutoriales

Cómo agregar una búsqueda a una aplicación React con Fuse.js (en inglés, freecodecamp.org)

Inspiración

Foam (en inglés, foambubble.github.io)
Roam Research (en inglés, roamresearch.com)
Gatsby Garden Theme (en inglés, github.com)

Idea de bosquejo

Idea de bosquejo para el cuaderno de notas

Space Invaders

Categoría: Puzzles y Juegos

Crear un juego de disparos de naves espaciales basado en el Space Invaders para disparar a varias olas de naves enemigas.

Resumen

Space Invaders es un videojuego clásico de arcade en el cual te enfrentas a una invasión alienígena. Mientras tratas de dispararles, ellos devuelven el fuego y solo tienes protección limitada dentro de tu nave espacial hasta que se acaba y quedas al descubierto para que te disparen.

Nivel 1

La parte central el juego es que te estás moviendo dentro de tu nave espacial mientras tratas de dispararles a los aliens. Mientras que tu estás solo, hay un montón de ellos.

Crea una nave espacial que pueda moverse y dispararle a los aliens que no se mueven.

Nivel 2

Lo que hace al juego difícil es que los aliens se están moviendo constantemente. Cada vez que se pegan contra el borde del área de juego, bajan una línea y aumentan su velocidad, acercándose cada vez más a tu nave.

Agrega movimiento a los aliens que van de lado a lado del área de juego. Cada vez que los aliens llegan al borde, deberían bajar un nivel y aumentar su velocidad a determinados intervalos.

Nivel 3

Estás a tu suerte, pero por lo menos tienes algo de protección. Tienes escudos tras los que puedes esconderte y que te ayudarán a protegerte mientras duren.

Delante de la nave de tu jugador, crea varios escudos que puedan aguantar un número limitado de ataques.

Lista de tareas

Crear una partida nueva
Crear aliens estáticos
Crear la nave espacial del jugador
Agregar controles de la nave espacial
Agregar armas a la nave espacial
Configurar daño a los aliens
Hacer que los aliens devuelvan el fuego
Hacer que los aliens se muevan
Agregar intervalos de los aliens
Agregar escudos

Tutoriales

Aprende JavaScript mientras construyes 7 juegos (en inglés, freecodecamp.org)

Inspiración

Space Invaders (codepen.io)

Idea de Bosquejo

Idea de bosquejo para Space Invaders

Tema para librería de Gatsby

Categoría: Herramientas y Librerías

Crear un tema para Gatsby que instale un proyecto con la librería Tailwind CSS.

Resumen

Como desarrolladores, muchas veces tenemos que hacer los mismos pasos cada vez que creamos un proyecto nuevo. Pero herramientas como los temas nos permiten abstraer esos pasos y empaquetarlos de forma fácil para reutilizarlos en cada proyecto nuevo.

Nivel 1

Los temas de Gatsby son como una extensión de sistema con el cual podemos usar la arquitectura en pipeline de Gatsby para compartir funcionalidades como un paquete de NPM.

Esto nos abre las puertas para poder hacer cualquier cosa que haríamos en un sitio Gatsby pero reusable en cualquier sitio Gatsby.

Crea un nuevo tema de Gatsby que, cuando se use, cree una nueva guía de estilo en cualquier proyecto al cual se agregue.

Nivel 2

El objetivo de los temas no es solo crear páginas, sino también agregar funcionalidades que nos sirva. Esto incluye librerías y configuraciones de proyecto.

Agrega un librería CSS al tema Gatsby que permita al proyecto en donde se agrega usar esa librería.

Nivel 3

A veces nos sirve tener nuestra propia opinión y pensar que los temas sirven mejor como herramientas. Una forma de agregar funcionalidades útiles a una librería CSS es crear un stock de componentes.

Crea componentes reusables de React que usen la librería que puede ser usada por el proyecto al que el tema esté siendo usado.

Lista de tareas

Crear un nuevo tema
Añadir proyecto de prueba
Crear nueva página de estilo
Añadir librería de CSS
Usar CSS en el proyecto de prueba
Crear componentes
Usar componentes

Caja de herramientas

Temas Gatsby (en inglés, gatsbyjs.org)
Tailwind (en inglés, tailwindcss.com)

Tutoriales

Creando un Tema( en inglés, gatsbyjs.org)
Qué es Tailwind CSS y cómo puedo añadirlo a mi sitio web o aplicación React (en inglés, freecodecamp.org)

Inspiración

Tema Gatsby con Tailwind (en inglés, github.com)

Idea de Bosquejo

Idea de bosquejo para Tema de Librería

Webmentions

Categoría: Complementos para Proyectos

Agregar una integración de webmentions al sitio web para que muestre las interacciones de Twitter con el sitio web.

Resumen

La interacción social es una forma poderosa de atraer más audiencia y discusión sobre los temas que escribimos.

Tener algo en un sitio web que muestre esa interacción puede ser útil tanto para inspirar a las personas que quieren ayudar o hacer que las personas sientan que pueden ser parte.

Nivel 1

Para poder Webmetions, un sitio web tiene que tener configurado los metas tags para suministrar información.

Agrega los meta tags correctos a un sitio web y valídalos con webmention.io.

Nivel 2

La API de Webmentions es una forma ordenada de ver conexiones entre las interacciones sociales desde una URL de tu sitio web. Te muestra el tipo de interacción y hasta la foto de perfil de una persona.

Conecta un sitio web a Webmentions y agrega una lista de interacciones sociales a las páginas de un blog.

Nivel 3

Ahora que el sitio web muestra todas las interacciones, tendría que haber una manera fácil de sumarnos a la discusión.

Lista de tareas

Agregar meta tags al sitio web
Validar meta tags
Conectarse a Webmention
Conectar las cuentas de redes sociales a Bridgy
Lista las interacciones
Agrega botón para crear un tweet

Caja de herramientas

Webmention.io (en inglés, webmention.io)
Bridgy (en inglés, brid.gy)
Extensión de Webmention para Gatsby (github.com)

Tutoriales

Indieweb, parte 2: Usando Webmentions en Elventy (en inglés, mxb.dev)
Webmentions del lado de cliente (en inglés, swyx.io)
Introducción a Webmentions con Gatsby (en inglés, knutmelvaer.no)
Creando una extensión de Webmentions para Gatsby (en inglés, christopherbiscardi.com)

Inspiración

Knut Melvær (knutmelvaer.no)
Swyx (swyx.io)

Idea de Bosquejo

Idea de bosquejo para Webmentions

Product Hunt

Categoría: Clones

Crear un clon de Product Hunt que permita a los usuarios publicar un nuevo producto con calificaciones.

Resumen

Todos usamos productos, ya sea nuestros móviles o las aplicaciones que usamos en nuestras computadoras portátiles.

Si bien hay toneladas de productos en el mundo, puede ser difícil distinguir lo bueno de lo malo. Herramientas como Product Hunt ofrecen una plataforma para aprender sobre nuevas herramientas y obtener reseñas de otras personas.

Nivel 1

La parte más importante de aprender sobre nuevos productos es el propio producto.

Vamos a querer saber sobre qué es el producto, su apariencia y cómo funciona.

Crea una página que te permita añadir un nuevo producto a un sitio con un título, imagen y descripción.

Nivel 2

Cuando estamos aprendiendo sobre nuevos productos, las reseñas son una forma de confiar en el producto antes de comprarlo. Nos ayuda a crear confianza en lo que vamos a comprar o utilizar nuestro tiempo.

Añade la posibilidad de que las personas agreguen reseñas sobre cada producto.

Nivel 3

Las personas aman los productos, por eso hay toneladas de ellos en el mundo. Debido a que hay demasiados para clasificarlos y ordenarlos manualmente, necesitamos crear un mecanismo para buscar y filtrar.

Añade la posibilidad de buscar productos y filtrarlos por categoría.

Lista de tareas

Crear sitio web del producto
Crear la base de datos
Añadir formulario de productos
Añadir producto a la base de datos
Hacer un petición de la página de producto
Añadir formulario de reseña
Añadir reseñas a la base de datos
Añadir reseñas al producto
Añadir buscador de productos
Añadir categorías de producto

Caja de herramientas

Hasura (en inglés, hasura.io)

Tutoriales

Construyendo un clon de Product Hunt con Hasura y Next.js (en inglés, logrocket.com)
Cómo construir una versión básica de Product Hunt con React (en inglés, freecodecamp.org)

Idea de bosquejo

Idea de bosquejo de Product Hunt

Más Proyectos

Si quieres más ideas de proyectos, podés visitar el sitio: 50 Proyectos para React y la web estática 50 Projects for React & the Static web!

Descárgalo gratis en 50reactprojects.com

Como construir tu propio portafolio web de desarrollador con HTML, CSS y JavaScript

Jorge Torres Torres — Wed, 14 Sep 2022 02:37:32 +0000

Artículo original: How to Build Your Own Developer Portfolio Website with HTML, CSS, and JavaScript

En estos días todos necesitan tener un sitio web y aplicaciones web. Así que si trabajas como desarrollador web hay muchas oportunidades para ti .

Pero si quieres conseguir trabajo como desarrollador web, necesitarás un buen sitio web como portafolio para poder mostrar tus habilidades y experiencia.

En este tutorial, discutiré algunas de las razones por los que debes construir tu propio portafolio web. Luego, te guiaré en el proceso de construcción de tu portafolio web responsivo con HTML, CSS y JavaScript.

Tabla de contenidos

¿Qué es un portafolio sitio web de desarrollador?
¿Por qué deberías tener un Portafolio website?
Proyecto de Portafolio – ¿Cómo construir tu propio Portafolio en línea de Desarrollador?
La estructura de carpetas del Proyecto
El Código Básico de HTML
La Sección de Barra de Navegación
Como dar Estilos a la Barra de Navegación
Como construir la sección de Hero
Como dar estilo a la Sección de Hero
Como construir la Sección de Más sobre mí
Como construir la Sección de Habilidades
Como dar estilo a la Sección de Habilidades
Como construir la sección de Proyectos
Como dar estilos a la Sección de Proyectos
Como construir la Sección de Contacto
Como dar estilo a la sección de Contacto
Como dar estilo a los iconos de Redes Sociales
Como agregar el botón desplazarse Hacia Arriba
El HTML para el botón desplazarse Hacia Arriba
Como dar estilos al icono de Desplazarse hacia arriba
Como hacer que tu Portafolio web sea responsivo
Como crear la Consulta de Medios para Tablets y teléfonos celulares (max-width 720px)
Como construir el Menú de Hamburguesa
El JavaScript para el Menú de Hamburguesa
Como hacer responsiva la Sección de Hero
Como hacer responsiva la Sección de Más sobre mí
Como hacer responsiva la sección de Habilidades
Como hacer responsiva la Sección de Proyectos
Como hacer responsivo el formulario de Contacto
Como hacer responsivo el sitio web para teléfonos celulares pequeños
Conclusión

¿Qué es un portafolio web de desarrollador?

Un portafolio web de un desarrollador provee de información relevante sobre tus habilidades, experiencia y proyectos en los que hayas trabajado para empleadores potenciales.

Puedes considerar a tu portafolio web como tu currículum en línea.

¿Porqué deberías tener un Portafolio web de Desarrollador?

1. Un Portafolio web incrementa tu presencia en línea

Como desarrollador, necesitas tener presencia en línea. Puedes hacer crecer tu presencia en línea utilizando plataformas de redes sociales tales como Twitter, Facebook, e Instagram. Pero esas plataformas no son completamente tuyas, ya que los moderadores de esas plataformas tienen casi control total sobre tu cuenta.

En cambio, tu portafolio web, está montado en tu propio dominio en línea. Y la gente puede fácilmente encontrarte cuando hace una búsqueda de tu nombre en algún buscador como Google, siempre que pongas las cosas correctas y en su lugar haciendo uso de SEO (Search Engine Evaluation).

2. Un portafolio web es tu currículum en línea

Tu portafolio web es como tu currículum en línea. Clientes potenciales y Reclutadores de Recursos Humanos pueden encontrarte fácilmente en línea y revisar tus proyectos pasados y tus habilidades.

Esto también significa que cuando alguien te quiera dar una oportunidad para trabajar para ellos, y te pregunten por tus proyectos pasados, solamente les das el link a tu sitio web (tu portafolio). Que no solamente tiene tus proyectos, si no también tu conjunto de habilidades e información sobre tu experiencia pasada.

3. Un portafolio es evidencia de tu experiencia en tu área

Tener (y mucho menos construir tu propio) portafolio web como envía un claro mensaje como desarrollador de que estás poniendo tus habilidades en práctica y que realmente sabes lo que estás haciendo.

Un portafolio puede también ayudarte a construir confianza con clientes porque tienen evidencia de la calidad de tu trabajo.

Proyecto portafolio - Como construir tu propio portafolio en línea de desarrollador

Puedes crear tu propio portafolio web con HTML, CSS y JavaScript, Y eso es lo que haremos aquí.

Ya hice esto hace algunos meses y lo puse a disposición de todos como un producto gratuito en Gumroad, así que decidí crear un tutorial sobre cómo lo hice.

Esta es la demostración de lo que construiremos.

Para seguir el proceso conmigo, puedes obtener los archivos de inicio de Github.

La estructura de carpetas del proyecto

Para evitar confusión, ordenaré el HTML, CSS, JavaScript, iconos e imágenes del proyecto en sus respectivas carpetas.

El archivo de HTML va en la carpeta root, y los archivos de imagen, icono, CSS, y JavaScript estarán separados en sus respectivas subcarpetas en una carpeta de assets. Esta es una práctica común.

También hay un archivo readme que contiene todas las herramientas que utilicé en el proyecto con sus respectivos enlaces. También está disponible en los archivos de inicio.

El código básico de HTML

Todos tienen sus preferencias al escribir código de un proyecto completo con HTML, CSS y JavaScript. A algunos les gusta definir todo el código HTML repetitivo primero y luego el CSS, pero a mí me gusta hacerlo todo sección por sección.

Entonces empezaré con la sección de la barra de navegación. Pero es bueno mostrar primero cómo se ve el código HTML básico:



  
    
    
    

    
    

    
    
    

    
    
    Jane Doe | Desarrolladora Web

Tengo todas las secciones comentadas en el HTML para que puedas seguirlas mejor. En la plantilla también hay Content Delivery Network (Red de Distribución de Contenido), también hay CDN para animaciones de CSS (Una Biblioteca de animación CSS), iconos de Ionic, la librería de iconos que elegí para este proyecto.

Tengo un favicon hecho a través de Favicon IO y lo vinculé en la sección head. Favicon es la pequeña imagen que se muestra en una pestaña del navegador.

La Sección de la barra de navegación

La barra de navegación contiene el logotipo simple del texto h1 y el menú de navegación:

 
      JANE DOE
      
        Acerca de Mí
        Habilidades
        Proyectos
        Contacto

Si te estás preguntando que representa el elemento botón, son las barras para alternar el menú de navegación en dispositivo móvil (menu de hamburguesa). Este estará escondido en nuestra versión de escritorio pero se mostrará en dispositivo móvil.

También vincularé las secciones individuales del sitio web a estos elementos de navegación, por lo tanto, cuando el usuario hace click en cualquiera de los elementos de navegación, se le lleva a la sección que corresponde al elemento de navegación en el que hace click.

Es por eso que tengo los atributos de referencia (href) establecidos en #sobremi, #habilidades, #proyectos, and #contacto, respectivamente. La sección individual del sitio web tendrá estos atributos como ids.

La barra de navegación ahora luce así:

Como dar estilos a la barra de navegación

La barra de navegación necesita definitivamente algo de estilo para que se vea un poco mejor.

Antes de darle estilos a la barra de navegación, declararé algunas variables de CSS para facilitar las cosas más adelante. Esto se debe a que, con las variables CSS, es más fácil evitar la redundancia y la repetición en tu archivo de CSS.

La sintaxis para declarar variables de CSS luce así:

:root {
  --variable-name: value;
}

Para usar la variable, debes hacer esto:

selector {
  propiedad: var(--nombre-variable);
}

También importaré la fuente Roboto de Google, y declararé algunos resets de CSS para remover algunas funciones predeterminadas, como el margin y padding para elementos, text-decoration para etiquetas anchor y list-style-type para listas.

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");

/* Variables */
:root {
  --font-family: "Roboto", sans-serf;
  --normal-font: 400;
  --bold-font: 700;
  --bolder-font: 900;
  --bg-color: #fcfcfc;
  --primary-color: #4756df;
  --secondary-color: #ff7235;
  --primary-shadow: #8b8eaf;
  --secondary-shadow: #a17a69;
  --bottom-margin: 0.5rem;
  --bottom-margin-2: 1rem;
  --line-height: 1.7rem;
  --transition: 0.3s;
}
/* Variables fin */

html {
  scroll-behavior: smooth;
}

/* CSS Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
}

body {
  font-family: var(--font-family);
}

Si lo notas, configuré un hover state para todos los enlaces del sitio web desde la línea 39 a la 41. Cuando el usuario se desplaza sobre cualquier enlace, cambia al color secundario que establecí en las variables de CSS.

Aquí hay una buena regla general para declarar variables CSS: si te encuentras usando la misma propiedad y el mismo valor a menudo en el mismo archivo CSS, puedes declarar una variable de css para evitar repetición.

También debes hacer que los nombres de tus variables sean lo más descriptivos posible, como hice yo, para ayudar a otros que podrían trabajar con tu código.

Con los resets, hay algunos cambios en la barra de navegación del navegador:

Para dar estilos a la barra de navegación y alinear su contenido, usaremos CSS Flexbox:

nav {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3.5rem;
  background-color: var(--bg-color);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

¿Qué está haciendo el Código de CSS?

Le di a la barra de navegación el valor de sticky en la propiedad de position para que permanezca en la parte superior sin importar qué.

La propiedad de z-index con el valor de 1 se asegura de que la barra de navegación se muestre sobre cualquier otro elemento de la página web. Así es como se hace sticky una barra de navegación.

Además, también apliqué una sombra en la parte inferior de la barra de navegación con la propiedad box-shadow .

La barra de navegación tiene un nuevo aspecto:

Pero aún no hemos terminado. Los elementos del menú de navegación debe estar uno al lado del otro, no uno encima del otro. También lo haremos con Flexbox.

También terminaré el resto del estilo de la barra de navegación haciendo que h1, los elementos de navegación y el botón de menú de hamburguesas se vean mejor. Haremos esto con algunas variables CSS declaradas inicialmente.

nav h1 {
  color: var(--color-primario);
}

nav a {
  color: var(--color-primario);
  transition: var(--transicion);
}
nav a:hover {
  color: var(--valor-secundario);
  border-bottom: 2px solid var(--valor-secundario);
}

nav ul {
  display: flex;
  gap: 1.9rem;
}

nav ul li {
  font-weight: var(--negrita);
}

El menú hamburguesa también necesita estar escondido. Tiene una clase de .menu-hamburguesa, podemos aplicarle un atributo de display con valor de none y así haremos que el botón luzca mejor.

.menu-hamburguesa {
  color: var(--primary-color);
  font-size: 2rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: none;
}

Nuestra barra de navegación luce más se ve mucho mejor ahora:

Como construir la sección Hero

La siguiente sección en la que trabajaremos. Esto no requerirá tanto trabajo como la barra de navegación.

La plantilla de HTML para la sección principal se encuentra en el fragmento de código a continuación:


      
      
        Sobre Mí
        
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia sed
          dolorem fugit sapiente porro veniam pariatur dolore nostrum delectus
          inventore tempore minus nemo, iste ullam illo laboriosam maiores
          repudiandae quos!

La única cosa que es un poco extraña son las clases de animate__animated animate__shakeX aplicadas al div que contiene el texto de Sobre Mí . Los nombres de clase son de CSS animado y son útiles para dar animación al container de texto Sobre Mí.

Con esto, el sitio web tiene un nuevo aspecto:

Como dar Estilo a la Sección Hero

Flexbox vendrá al rescate una vez más! Esta sección tiene dos conjuntos principales de contenido – una imagen y un texto en un div. Podemos usar flexbox para mostrarlos uno al lado del otro. A continuación puedes ver como funciona en el fragmento de código de CSS :

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  max-width: 68.75rem;
  margin: auto;
}

Nuestra imagen de Jane Doe es muy grande, así que necesitamos reducir su anchura y altura. También necesitamos darle estilo al texto de bio (Sobre Mí texto) para legibilidad. Las variables de CSS que declaramos inicialmente serán muy útiles aquí.

.hero img {
  height: 37.5rem;
  width: 37.5rem;
}

.bio {
  width: 25rem;
  padding: 0.625rem;
  border-radius: 6px;
  box-shadow: 0px 2px 15px 2px var(--primary-shadow);
}

.bio h1 {
  margin-bottom: var(--bottom-margin);
}

.bio p {
  line-height: var(--line-height);
  padding: 0.3rem 0;
}

La sección hero ahora luce genial:

Como construir la sección Más Sobre Mí

Incluí esta sección para incluir más información sobre Jane Doe con un texto placeholder.

Puedes aprovechar esto para incluir información que no tuviste posibilidad de incluir en la sección Sobre Mí.

La Plantilla HTML para esta sección es sencilla y simple:

    
      Más sobre mí
      
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
        nesciunt excepturi quos obcaecati incidunt voluptatem ipsam sunt ipsum,
        autem deleniti cupiditate molestias quis unde quae totam porro dicta
        iure animi inventore, veniam hic! Omnis nulla, delectus a voluptatibus
      
      
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur
        nostrum dolor minus, libero delectus praesentium perferendis
      
      
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero,
        consequuntur labore? Ea totam voluptas amet!

El CSS también es sencillo. Todo lo que haremos es configurar un background-color con --bg-color como variable de CSS, hacer que la sección sea legible configurando el padding, el margin y la line-height, y alinear el texto h2 al centro:

.mas-sobre {
  background-color: var(--bg-color);
  padding: 1rem 6rem;
}

.mas-sobre h2 {
  margin-bottom: var(--bottom-margin);
  text-align: center;
}

.mas-sobre p {
  line-height: var(--line-height);
  padding: 0.4rem;
}

En el navegador, la sección Más Sobre More luce así:

Como construir la sección de Habilidades

Desde la demostración en vivo, verás que la sección de habilidades contiene habilidades relevantes como HTML, CSS, JavaScript, etc. Pude conseguir los iconos de esos lenguajes en formato SVG en la página de Icons8 I.

La Plantilla de HTML para esta sección se encuentra en el fragmento de código a continuación:

 
      Mis mejores habilidades

Hay seis iconos en total. Y en lugar de tener que alinearlos con Flexbox, los agruparemos en dos lugares (3 cada uno), con las clases de primer y segundo conjunto, para que se mantengan uno encima del otro. Esto significa que los estilos que aplicaremos serán más legibles. ¡Fácil!

Tengamos en cuenta que hemos adjuntado el atributo de carga a los íconos e imágenes individuales y configurándolo en lazy. Esto asegurará que las imágenes se carguen solo cuando el usuario se desplace a las secciones que las contienen.

Como aplicar estilos a la sección de Habilidades

Sin aplicar estilos, la sección de estilos luce así:

Debemos dar un poco de estilos a la sección por que aun no se ve lo suficientemente bien::

.habilidades {
  max-width: 68.75rem;
  margin: auto;
  text-align: center;
  margin-top: 2.5rem;
}

.encabezado-habilidad {
  margin-bottom: 1rem;
}

.contenedor-habilidad img {
  padding: 1.25rem;
}

.icono {
  width: 11.875rem;
  height: 11.25rem;
}

En el CSS de arriba, establecimos un ancho máximo para toda la sección para posicionar los elementos al centro del navegador para una mejor experiencia de usuario.

Otros estilos que aplicamos están relacionados a claridad y la legibilidad. Por ejemplo, Incrementamos el tamaño de los iconos para hacerlos más visibles con sus propiedades de alto y ancho. También aplicamos un padding de 1rem (16pixeles) a todos los iconos para dar un poco de espacio entre ellos .

La sección de habilidades ahora luce mejor:

Y aún así, creo que la sección puede lucir mejor, así que he decidido hacer algunos ajustes más con la propiedad box-shadow:

Recordemos que en el HTML hay un atributo de clase llamado .tarjeta-icono adjunto a todos los iconos. I will be using the class name to put all the icons in a card:

.tarjeta-icono {
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 3px 10px var(--secondary-shadow);
  padding: 20px;
  margin: 10px;
}

La sección de habilidades ahora debe lucir mejor:

¡Mira eso!

Como construir la sección de Proyectos

Uno de los propósitos principales de un sitio web portafolio es mostrar tus proyectos. Por lo tanto, tendremos que crear una sección para mostrar los proyectos en los que has trabajado en el pasado.

Esta sección es probablemente la más tediosa en aplicar estilos, pero Flexbox (Modelo de Caja) no dejará de ser nuestro amigo.

La estructura de HTML para esta sección se encuentra en el fragmento de código más abajo:


      Algunos de mis proyectos recientes
      
        
          
          Rastreador de Gastos
          
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
            ratione vel inventore labore commodi modi quos culpa aut saepe!
            Alias!
          
          Check it Out
        
        
          
          Netflix Clone
          
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
            ratione vel inventore labore commodi modi quos culpa aut saepe!
            Alias!
          
          Check it Out
        
        
          
          Greeny Earth
          
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
            ratione vel inventore labore commodi modi quos culpa aut saepe!
            Alias!
          
          Echale un vistazo!

Revisando el HTML, hay tres proyectos en total, en sus elementos divs individuales con el nombre de clase contenedor-de-proyecto y tarjeta-de-proyecto. Estas clases serán muy relevantes en aplicar estilos consistentemente al proyecto.

El elemento de sección contenedor en sí mismo tiene una clse de proyectos y un atributo de identificación de proyectos también. El nombre de la clase es para diseñar los estilos y la identificación es para vincularla al enlace Proyectos en la barra de navegación.

Los proyectos tienen sus imágenes individuales con el nombre de clase of foto-proyecto, sus títulos con una clase titulo-de-proyecto, detalles con el nombre de clase detalles-de-proyecto, y en laces con la clase de enlaces-de-proyecto.

El único propósito de darle a todos los elementos clases únicas es para aplicarles estilos.

Estos son algunos de los proyectos en los que trabajé cuando empecé como desarrollador.

La sección de proyectos luce así en el navegador:

Sin embargo, la sección no se ve tan bien, incluso hay una molesta barra de desplazamiento horizontal causada por las imágenes. Así que tenemos mucho trabajo por hacer en CSS.

Como dar estilos a la sección de Proyectos

En primer lugar, daré a toda la sección un color de fondo configurando el color grisáceo (--bg-color) que declaramos en las variables CSS como valor.

También reduciré el ancho y el alto de las imágenes del proyecto usando la clase foto-de-proyecto . Luego usaré Flexbox para poner los proyectos uno al lado del otro.

.proyectos {
  background-color: var(--bg-color);
  padding: 32px 0;
  margin-top: 2rem;
}

.foto-de-proyecto {
  width: 65%;
  height: 60%;
}

.contenedor-de-proyectos {
  display: flex;
  align-items: center;
  justify-content: center;
}

La sección ahora luce mejor:

Las imágenes ahora lucen mejor, pero el título del proyecto, detalles de proyecto, y enlaces de proyectos necesitan alinearse muy bien dentro de sus contenedores individuales.

Toda la sección del proyecto también debe ser empujada hacia el centro. Sin embargo, no necesita Flexbox para hacer esto se puede hacer configurando la propiedad de text-align con el valor de center:

.titulo-de-proyectos {
  text-align: center;
  margin-bottom: 1rem;
}

.contenedor-de-proyectos {
  text-align: center;
  width: 21.875rem;
  padding: 1rem;
}

Debemos tener en cuenta que también estable un ancho de 21.875rem (350 pixeles) para los contenedores de proyectos individuales. Esto los separará de los lados para una mejor experiencia de usuario. En este caso, el usuario no necesitaría mirar completamente para ver todo.

La sección ahora luce mejor:

Aún podemos hacer que esta sección se vea mejor. Los títulos de proyectos, detalles de proyectos y los enlaces de proyectos se ven agrupados, por lo que debemos agregar algo de padding y margin.

Los contenedores de proyectos individuales también deben verse más distintos. La propiedad box-shadow va ser fundamental aquí, así que las pondremos en sus tarjetas individuales.

.contenedor-de-proyecto p {
  padding: 0.4rem;
}

.titulo-de-proyecto {
  margin-bottom: var(--bottom-margin);
}

.detalles-de-proyecto {
  margin-bottom: var(--bottom-margin);
}

.tarjeta-de-proyecto {
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 3px 10px var(--primary-shadow);
  padding: 20px;
  margin: 10px;
}

La sección de proyectos ahora luce mejor:

Como construir la sección Contacto

Si un potencial empleador o cliente encuentra tu portafolio website atractivo, podrían querer contactarte. Así que te recomendamos tener un formulario de contacto en esta sección, junto con enlaces para tus cuentas de redes sociales.

El HTML para esta sección se vería así:


      Contactame
      
        
          
            
              Nombre
              
            
            
              Correo Electrónico
              
            
            
              Mensaje

Aquí construimos el formulario de contacto con campos de entrada para nombre y correo electrónico, una etiqueta textarea para que la gente escriba el mensaje que quieran enviar, y el botón enviar para enviar el mensaje para que puedas verlo.

Si echas un vistazo al elemento form, verás que tenemos un atributo de acción establecido en una URL de Formspree. Este es el que hemos elegido para el envío de formulario. Con Formspree, puedes recibir el mensaje directamente a la bandeja de entrada de tu correo electrónico sin necesidad de configurar un servidor con PHP o JavaScript complejos.

Ten en cuenta que no podrás usar mi URL -no funcionará para ti. Puedes fácilmente configurar el tuyo en el sitio web de Formspreee de forma gratuita. También adjunté un recurso sobre cómo configurar Formspree en el archvio de readme del proyecto.

Establecí algunos atributos id y class para los inputs individuales para darle estilos. También hay un atributo name para todos los campos de input. Esto es requerido por el servicio de envió de formularios de Formspree.

Para obtener una validación básica, adjunté un atributo required , de esa forma, el formulario se niega a enviar la información si el usuario deja algún campo vacío.

Como dar estilo a la sección Contacto

Sin estilo, la sección de contacto no se ve nada bien:

Todo lo que haremos en CSS es alinear todo el contenido al centro y hacer que los campos de input se vean mejor.

Con las propiedades de text align y margin, puedes alinear la etiqueta h2 y el contenedor para el formulario del contacto al centro .

También pondremos todo el formulario en una tarjeta con la propiedad de box-shadow .

.contacto {
  margin-top: 2rem;
}

.contacto h2 {
  text-align: center;
  margin-bottom: var(--bottom-margin-2);
}

.contenedor-formulario-contacto {
  max-width: 40.75rem;
  margin: 0 auto;
  padding: 0.938rem;
  border-radius: 5px;
  box-shadow: 0 3px 10px var(--secondary-shadow);
}

Los inputs, textarea, labels y los placeholders necesitan definitivamente también algo de estilo para ayudar con la alineación y la claridad:

.contenedor-formulario-contacto label {
  line-height: 2.7em;
  font-weight: var(--bold-font);
  color: var(--primary-color);
}

.contenedor-formulario-contacto textarea {
  min-height: 6.25rem;
  font-size: 14px;
}

.contenedor-formulario-contacto .input-field {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 5px;
  border: none;
  border: 2px outset var(--primary-color);
  font-size: 0.875rem;
  outline: none;
}

El formulario luce mejor

Pero los placeholders no son consistentes con las etiquetas. Así que necesitamos darle algo de color y padding. Le daremos el conjunto de color primario que asignamos en la lista de Variables de CSS.

Para seleccionar los placeholders y darle estilos, podemos usar la pseudo-class placeholder :

.input-field::placeholder {
  padding: 0.5rem;
  color: var(--primary-color);
}

En el formulario de contacto, lo único que falta es dar estilo al elemento button. Los botones son bastante fáciles de estilizar:

.submit-btn {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  background-color: #fff;
  border: 2px solid var(--primary-color);
  border-radius: 5px;
  font-size: 1rem;
  font-weight: var(--bold-font);
  transition: var(--transition);
}

En el fragmento de código de CSS anterior, hice que el botón pasara por todo el contenedor del formulario dándole un ancho del 100%. También lo hice más visible dando padding, margin, un borde y más font-weight.

La propiedad de border-radius con un valor de 5px remueve las bordes afilados y la transición sirven para ralentizar un poco las cosas cuando el botón está en estado de desplazamiento.

El estado de hover se define en el fragmento de código CSS a continuación:

.submit-btn:hover {
  background-color: var(--primary-color);
  border: 2px solid var(--primary-color);
  cursor: pointer;
}

El formulario luce mucho mejor ahora:

Recuerda que tener tus enlaces de redes sociales en tu sitio web portafolio es de gran ventaja para que cualquier persona interesada en contactarte lo haga. Este es el siguiente paso que realizaremos, y lo haremos de una forma única.

El código de HTML para los botones de redes sociales está en el fragmento abajo:

Los iconos de redes sociales que elegiremos son gifs animados de la plataforma icons8. Colocaremos a todos en el mismo contenedor con la clase de sociales, y les daremos una clase individual de socicon para dar estilos más fácilmente.

Debajo puedes ver unos iconos de redes sociales animados que parpadearan en nuestro sitio web:

Como dar estilos a los iconos de redes sociales

.sociales {
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 1%;
  bottom: 50%;
}

.socicon {
  width: 2rem;
  height: 2rem;
}

Con el CSS de arriba, los iconos de redes sociales estarán fijos al lado derecho del sitio web, así que todos los que visiten el sitio web podrán visualizar siempre los iconos aún cuando el usuario se desplace hacia abajo por la página.

También reduciremos el tamaño de los iconos asignándoles a todos sus valores de propiedad de width y height .

Mira el resultado!

Lo único que nos falta es el footer. No hay nada complejo en el HTML y CSS de footer, aparte de la entidad de caracteres reservados para el símbolo de derechos de autor y el corazón:


      © Copyright 2021
      
        Built with ♡ by
        Kolade Chris (Ksound)

footer {
  background-color: var(--bg-color);
  padding: 1.25rem;
  text-align: center;
  margin: 2rem 0 0;
}

Ahora tenemos un sitio web portafolio completo!

Pero necesitamos hacerlo responsivo, porque en su estado actual no se vería bien en dispositivo más chicos:

Necesitamos hacer que todo el contenido de las secciones individuales se muestre en una sección encima de la otra ( en un diseño de columna) . Podemos hacer esto muy fácilmente con media queries y Flexbox.

Antes de agregar las media queries para la responsividad de nuestra página, vamos a implementar un botón de desplazarse-hacia-arriba con HTML, CSS, y JavaScript.

Como Agregar un Botón de Desplazarse hacia Arriba

El HTML para el botón Desplazarse hacia Arriba

Para el HTML, tenemos un icono animado de Icons8 y al que asignaremos en una etiqueta de i.

La etiqueta de i tiene una clase de desplazarse-hacia-arriba para dar estilos y un id de desplazarse-hacia-arriba para seleccionarlo con JavaScript. Esto se debe a que para nuestros proyectos, recomiendo usar clases para dar estilos y ids para las funcionalidades que agregaremos con JavaScript.

Como dar estilos al icono de Desplazarse-hacia-Arriba

Haremos que el icono de desplazarse-hacia-arriba tenga una propiedad de fixed para que se quedé estático como los iconos de redes sociales. También le daremos una propiedad de pointer al cursor, para que este cambie cuando posicionamos el cursor encima del icono.

Con la clase de flecha-arriba al icono de desplazarse-hacia-arriba, incrementaremos el tamaño del icono para visibilidad:

.desplazarse-hacia-arriba {
  position: fixed;
  right: 0.5%;
  bottom: 3%;
  cursor: pointer;
}

.flecha-arriba {
  width: 3rem;
  height: 3rem;
}

El icono se ve muy bien:

Pero aún no hace nada. Así que necesitamos hacerlo funcional con algunas lineas de JavaScript:

// funcionalidad de desplazar hacia arriba
const desplazarArriba = document.querySelector("#desplazarse-hacia-arriba");

desplazarArriba.addEventListener("click", () => {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth",
  });
});

¿Qué está haciendo el código de arriba?

La primera línea selecciona el botón de desplazar-hacia-arriba con el atributo id adjunto a el en el HTML. Usamos el método querySelector() aquí. También podríamos utilizar el método getElementById() .

En las líneas restantes, usamos el eventListener del click para obtener la acción click del usuario y hacer que reaccione la parte de scrollTo del objeto de Windows para que el botón funcione.

Con esta funcionalidad, cuando el usuario hace click en el botón desplazar-hacia-arriba, la página se desplaza hacia arriba y al lado izquierdo del sitio web suavemente. Hicimos esto configurando las propiedades top a 0, left a 0, y behavior a smooth.

Puedes aprender más sobre el objeto windows abriendo la consola de herramientas de desarrollo del navegador. Escribe en la ventana y da enter, luego verás todo lo disponible en el objeto de Windows, como lo hacemos a continuación:

Como hacer Responsivo tu Portafolio web

Para hacer responsivo tu sitio web, usaremos media queries de CSS y Flexbox.

Primero, necesitaremos hacer que las imágenes y el texto se vean más pequeños, y luego haremos que el contenido de cada sección se muestre en un diseño vertical configurando la propiedad flex-direction a column.

En la consulta de medios, estaremos usando 2 breakpoints – 720px y 420px.

El breakpoint de 720px es para tabletas y teléfonos móviles, y el de 420px es para teléfonos pequeños como un iPhone 6, y teléfonos Android pequeños.

Los breakpoints de la consulta de medios son los puntos en el que queremos que el contenido del sitio web responda de acuerdo al ancho del dispositivo. Así que, cualquier código que pongamos debajo del breakpoint de 720px se refleje en dispositivos con una pantalla menor o mayor de 720px, dependiendo de como especifiques el ancho máximo o ancho mínimo.

En el caso de utilizar un max-width of 720px, la sintaxis de la consulta de medios luce así:

@media screen and (max-width: 720px) {
  /* los cambios se reflejan en una pantalla con un ancho de 720px ye inferior */
}

Como crear la Consulta de Medios para Tabletas y Teléfonos móviles (max-width 720px)

Empezaremos por hacer el sitio responsiv0 desde la barra de navegación, porque comúnmente la barra de navegación no se ve bien en dispositivos más pequeños.

Primero, vamos a reducir el padding de la barra de navegación para que el logo de h1 l y los elementos del menú de navegación encajen bien:

nav {
    padding: 1.5rem 1rem;
  }

Las cosas ahora se ven un poco mejor:

En dispositivos más pequeños, los elementos del menú de navegación deben estar uno encima del otro y deben estar ocultos. Entonces, es hora de actualizar el código para que el menú de hamburguesas esté inicialmente oculto.

Como construir el menú de hamburguesas

Para hacer el menú de hamburguesas, debemos sacar los elementos del menú de navegación del viewport. Luego, debemos establecer una clase de presentacion en los elementos de la lista de navegación que se alternarán con unas pocas líneas de JavaScrip (recordemos que los elementos de navegación están en una lista desordenada).

 nav ul {
    position: fixed;
    background-color: var(--bg-color);
    flex-direction: column;
    top: 86px;
    left: 10%;
    width: 80%;
    text-align: center;
    transform: translateX(120%);
    transition: transform 0.5s ease-in;
  }

   nav ul li {
    margin: 8px;
  }

En el fragmento anterior de código CSS, establecimos una posición de fixed en la lista desordenada (ul) para que flote en la pantalla. También lo empuje 86px hacia abajo desde la parte superior con top: 86px y 10% a la izquierda.

Le dimos un ancho de 80% en relación a su elemento padre (el elemento de navegación del HTML), lo empujó hacia el centro context-align: center, y finalmente lo oculto con la propiedad de transformación establecida en translateX(120%). Esto lo empujará hacia la derecha y lo sacará del viewport.

Y ahora, cuando el usuario de click para mostrar los elementos de la barra de navegación, todos se deslizan desde la derecha. Impresionante.

Si quieres que los elementos de la barra de navegación se deslicen desde la izquierda, cambia el valor de la propiedad transform a transform: translateX(-120%) (esto es el opuesto directo de transform: translateX(120%)). Es tan fácil como eso, dependiendo de tu preferencia.

También asigné un margen de 8px a los elementos de navegación para darles más espacio.

La barra de navegación ahora luce así:

El menú de hamburguesas permanece oculto. Por lo tanto, necesitamos mostrarlo dandole un display: block, asignándole una clase de show para en la propiedad transform dar el valor de 0 en el eje-X translateX(0) para mostrarlo, y después interactuar con el usando JavaScript .

 .menu-hamburguesa {
    display: block;
  }

  nav ul.show {
    transform: translateX(0);
  }

Nuestro menú de hamburguesa puede mostrarse, pero los elementos de la barra de navegación están ocultos. Para mostrarlos, necesitamos activar y desactivar la clase show con JavaScript.

Escribiendo JavaScript para hacer el Menú de Hamburguesa

Para activar y desactivar con JavaScript los elementos del menú de la barra de navegación, necesitamos primero seleccionar todos los elementos relevantes de la barra de navegación y guardarlos en algunas variables:

// Selecciones para Barra de navegación hamburguesa

const burger = document.querySelector("#burger-menu");
const ul = document.querySelector("nav ul");
const nav = document.querySelector("nav");

La variable burger seleccionan la barra de menú de hamburguesa.
La variable ul selecciona los elementos de la lista (los enlaces de navegación en conjunto ).
La variable nav selecciona el propio contenedor (el elemento de navegación).

Lo siguiente que necesitamos hacer es activar la clase de nav ul.show cuando el usuario hace click en el menú de hamburguesa de la barra de navegación. Haremos esto agregando un eventListener click al menú de hamburguesa del barra de menú, y después usar el método para activar to the hamburger menu bar, y luego usando el método de alternar para eliminar y agregar la clase de show. show.

Recordemos que lo seleccionamos y lo guardamos en una variable llamada burger.

burger.addEventListener("click", () => {
  ul.classList.toggle("show");
});

Nuestros elementos de navegación ahora se pueden activar y desactivar:

Pero hay un problema – la barra de navegación en móvil no se oculta cada vez que se hace click en cualquiera de los enlaces de los elementos de navegación. Por lo tanto, debemos eliminar la clase de nav ul.show cuando se hace click en cualquiera de los enlaces del elemento de navegación.

Podemos hacer esto con solo algunas líneas de JavaScript también:

// Cerrar el menú de hambuguesa cuando se hace click en un enlace  

// Seleccionar enlaces de navegación
const navLink = document.querySelectorAll(".nav-link");

navLink.forEach((link) =>
  link.addEventListener("click", () => {
    ul.classList.remove("show");
  })
);

Recuerda que los enlaces de navegación tienen una clase de enlace de navegación del HTML. Así que los seleccioné todos con esa clase y los puse en una variable llamada nav-link. Hicimos esto con el método querySelectorAll() .

Luego recorrí todos los enlaces con el método forEach de arreglos y puse un event listener de click en todos ellos. Después usé el método remove() proporcionado por el DOM para eliminar la clase de show cada vez que se hace click en cualquiera de los elementos del menú de navegación. Esto sacará del viewport todos los elementos de la lista.

Mira eso !

Esto es un gran avance. Con lo que hemos cubierto ya puedes hacer un menú de hamburguesa para cualquier sitio web.

Como hacer responsiva la sección Hero

La sección Hero no se ve muy bien actualmente:

Todo lo que tenemos que hacer es usar la propiedad flex-direction con un atributo de column en la consulta de medios, reducir el ancho y altura de la imagen de Jane Doe, y hacer que el texto de Sobre Mí (bio texto) sea legible.

.hero {
    margin-top: -4rem;
    flex-direction: column;
    gap: 0;
  }

  .hero img {
        height: 37.5rem;
        width: 30rem;
    }

  .bio {
    margin-top: -7rem;
    width: 20.5rem;
  }

La sección hero luce mejor ahora :

Como hacer responsiva la sección de Más Sobre mí

La sección de Más sobre mí no se ve tan mal, pero claramente podemos hacer algo por mejorarla:

Tenemos el siguiente código de CSS para hacerlo más legible y presentable:

 .mas-sobre {
    margin-top: 2rem;
    padding: 1rem 3.5rem;
  }

  .mas-sobre h2 {
    text-align: center;
  }

  .mas-sobre p {
    text-align: justify;
  }

Movimos toda la sección un poco hacia abajo y le incrementamos el padding en todos sus lados, alineamos el h2 al centro, y justificamos el texto.

Como hacer responsiva la sección de Habilidades

Los iconos de habilidades lucen muy grandes:

Todo lo que tenemos que hacer en la consulta de medios es reducir el tamaño de todos los iconos con las propiedades de width y height: :

.icono {
    width: 5.875rem;
    height: 5.25rem;
  }

Como hacer responsiva la sección de Proyectos

En esta sección de proyectos, necesitamos hacer que los tres proyectos se apilen uno encima del otro configurando la propiedad de flex-direction a column. También reduciremos un poco el ancho de los contenedores individuales.

 .contenedor-proyectos {
    flex-direction: column;
  }

  .contenedor-proyecto {
    width: 20.875rem;
  }

Como hacer responsivo el formulario de Contacto

Necesitamos reducir el ancho del formulario de contacto para alejarlo de los lados y asegurarse de que los iconos fijos de las redes sociales no estén encima.

Todo lo que necesitamos es establecer un ancho máximo:

 .contenedor-formulario-de-contacto {
    max-width: 23.75rem;
  }

El formulario de contacto ahora se ve mejor:

Como hacer responsivo el sitio web para teléfonos pequeños

En teléfonos pequeños como el iPhone 6, 7, y 8 plus, los iconos de redes sociales y el icono de desplazamiento-hacia-arriba no se muestran. También hay una barra de desplazamiento horizontal.

Para corregir estas peculiaridades, agregaremos consulta de medios en un breakpoint de 420px:

@media screen and (max-width: 420px) {
  .hero img {
    height: 37.5rem;
    width: 23rem;
  }

  .bio {
    width: 18.3rem;
  }

  .contenedor-proyecto {
    width: 17.875rem;
  }

  .contenedor-formulario-de-contacto{
    max-width: 17.75rem;
  }
}

Reduje el tamaño de nuestra imagen de Jane Doe y también reduje el ancho del texto de la biografía (Texto Acerca de Mí), el contenedor del proyecto, y el formulario de contacto.

Todos estos cambios harán que se muestren los iconos fijos en el lado derecho del sitio web: las redes sociales y los iconos de desplazamiento-hacia-arriba.

Ahora todo se ve bien:

Ese es el final de todo. Tenemos un portafolio de nuestro sitio web totalmente responsivo.

Puedes descargar la versión final en el archivo formato zip desde este repositorio de GitHub repo.

También puedes consultar la live demo del sitio web del portafolio. Tiene un archivo readme que contiene información sobre las herramientas que utilicé y como puedes personalizar el sitio web.

Conclusión

En este tutorial, aprendiste que es un portafolio de un desarrollador web y las razones por las que deberías tener uno.

También aprendiste como hacer un sitio web portafolio completamente responsivo usando HTML, CSS, y JavaScript.

Las partes diferentes de este tutorial son cada uno de de los proyectos, que combinados, se convierten en un sitio web más grande. Por ejemplo, puedes hacer el diseño de una tarjeta, una barra de menú responsiva, un formulario de contacto funcional, y un botón de desplazamiento-hacia-arriba, ya que el tutorial los cubre todos.

Siéntete libre de personalizar el sitio web a tu gusto .

Si encuentras útil este tutorial, puedes compartirlo con tus amigos y familiares. Realmente lo apreciaría.