Cómo crear una página estática para portafolio con CSS y JavaScript

() translation by (you can also view the original English article)

En este tutorial utilizaremos todo el poder de flexbox y aprenderemos a crear una simple, pero atractiva página estática para portafolio en HTML. También crearemos un gráfico de columnas responsivas sin usar ninguna biblioteca externa de JavaScript, SVG, o el elemento canvas. ¡Únicamente con CSS!

Aquí está el proyecto que vamos a crear (haz clic en el enlace Skills [Habilidades] en la esquina superior):

Nota: Este tutorial asume que tienes algunos conocimientos de flexbox. Si estás comenzando, Anna Monus tiene una gran colección de guías para principiantes:

Flexbox

Una guía completa para la alineación de Flexbox

Anna Monus

1. Inicia con el marcado de la página

El marcado de la página es bastante simple; una cabecera, un título, un enlace mailto y una sección:

<body class="position-fixed d-flex flex-column text-white bg-red">
  <header class="page-header">
    <nav class="d-flex justify-content-between">
      <a href="" class="logo">...</a>
      <ul class="d-flex">
        <li>
          <a href="">...</a>
        </li>
        <!-- possibly more list items here -->
      </ul>
    </nav>
  </header>
  <h1 class="position-absolute w-100 text-center heading">...</h1>
  <a class="position-absolute contact" href="">...</a>
  <section class="position-absolute d-flex align-items-center justify-content-center text-black bg-white skills-section" data-slideIn="to-top">
    <!-- content here -->
  </section>
</body>

Dentro de la sección, colocamos un botón de cierre y un elemento de envoltura con dos listas. Estas listas son responsables de crear el gráfico de columnas:

<section class="position-absolute d-flex align-items-center justify-content-center text-black bg-white skills-section" data-slideIn="to-top">
  <button class="position-absolute skills-close" aria-label="Close Skills Section">✕</button>
  <div class="d-flex chart-wrapper">
    <ul class="chart-levels">
      <li>Expert</li>
      <li>Advanced</li>
      <li>Intermediate</li>
      <li>Beginner</li>
      <li>Novice</li>
    </ul>
    <ul class="d-flex justify-content-around align-items-end flex-grow-1 text-center bg-black chart-skills">
      <li class="position-relative bg-red" data-height="80%">
        <span class="position-absolute w-100">CSS</span>
      </li>
      <li class="position-relative bg-red" data-height="60%">
        <span class="position-absolute w-100">HTML</span>
      </li>
      <li class="position-relative bg-red" data-height="68%">
        <span class="position-absolute w-100">JavaScript</span>
      </li>
      <li class="position-relative bg-red" data-height="52%">
        <span class="position-absolute w-100">Python</span>
      </li>
      <li class="position-relative bg-red" data-height="42%">
        <span class="position-absolute w-100">Ruby</span>
      </li>
    </ul>
  </div>
</section>

Nota: Más allá de las clases específicas de los elementos, nuestro marcado contiene un número de clases de utilidad (auxiliares). Usaremos esta metodología para mantener nuestro CSS lo más DRY (No te repitas, por sus siglas en inglés. También se le conoce como: Una vez y solo una) posible. No obstante, por razones de legibilidad, dentro del CSS no agruparemos las reglas comunes de CSS.

2. Define algunos estilos básicos

Cumpliendo con lo que acabamos de comentar, ahora especificamos algunas reglas de reinicio junto con una serie de clases auxiliares:

:root {
  --black: #1a1a1a;
  --white: #fff;
  --red: #e21838;
  --transition-delay: 0.85s;
  --transition-delay-step: 0.3s;
}

* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

.d-flex {
  display: flex;
}

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

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

.align-items-center {
  align-items: center;
}

.align-items-end {
  align-items: flex-end;
}

.flex-grow-1 {
  flex-grow: 1;
}

.w-100 {
  width: 100%;
}

.position-relative {
  position: relative;
}

.position-fixed {
  position: fixed;
}

.position-absolute {
  position: absolute;
}

.text-center {
  text-align: center;
}

.text-black {
  color: var(--black);
}

.text-white {
  color: var(--white);
}

.bg-black {
  background: var(--black);
}

.bg-white {
  background: var(--white);
}

.bg-red {
  background: var(--red);
}

Las nomenclaturas para nuestras clases auxiliares están inspiradas en los nombres de las clases de Bootstrap 4.

3. Estiliza el diseño de la página

El diseño de la página será tan simple como esto:

Aquí están los requisitos del diseño:

La página debe ser a pantalla completa.
El logotipo se sitúa en la esquina superior izquierda de la página, el menú en la esquina superior derecha y el enlace mailto en la esquina inferior derecha.
El título está centrado de forma horizontal y vertical.
La sección que contiene el gráfico está inicialmente oculta (fuera de la pantalla).

Aquí están los estilos correspondientes para hacer todo esto:

body {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font: 1rem/1.5 "Montserrat", sans-serif;
  overflow: hidden;
}

.page-header {
  padding: 20px;
  border-bottom: 1px solid #e93451;
}

.page-header li:not(:last-child) {
  margin-right: 20px;
}

.page-header .logo {
  font-size: 1.2rem;
  z-index: 1;
  transition: color 0.3s;
}

.window-opened .page-header .logo {
  color: var(--black);
  transition-delay: 0.8s;
}

.heading {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
}

.contact {
  bottom: 20px;
  right: 20px;
}

.skills-section {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(100%);
}

El progreso hasta ahora

¡Esto es lo que hemos creado hasta el momento!

4. Alternando la sección

Como se comentó anteriormente, al principio la sección está oculta. Se hará visible con un agradable efecto deslizante cada vez que hagamos clic en el enlace del menú. Haremos esto añadiendo la clase window-opened al elemento body y alterando el CSS según sea necesario. De la misma manera, la sección desaparecerá tan pronto como hagamos clic en el botón de cerrar.

Como bonificación, nos daremos la facultad de establecer la dirección de la animación de deslizamiento. Podemos pasar el atributo personalizado data-slideIn a la sección que determinará la posición inicial de su animación. Los posibles valores de los atributos son: to-top, to-bottom, y to-right. De manera predeterminada, la sección aparece de derecha a izquierda.

Aquí están los estilos asociados:

.skills-section {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(100%);
  transition: transform 1s;
}

.window-opened .skills-section {
  transform: none;
}

[data-slideIn="to-top"] {
  transform: translateY(100%);
}

[data-slideIn="to-bottom"] {
  transform: translateY(-100%);
}

[data-slideIn="to-right"] {
  transform: translateX(-100%);
}

Y el código JavaScript necesario para alternar su estado:

const skillsLink = document.querySelector(".page-header li:nth-child(1) a");
const skillsClose = document.querySelector(".skills-close");
const windowOpened = "window-opened";

skillsLink.addEventListener("click", (e) => {
  e.preventDefault();
  document.body.classList.toggle(windowOpened);
});

skillsClose.addEventListener("click", () => {
  document.body.classList.toggle(windowOpened);
});

4. Estiliza el gráfico

En este punto, veremos más de cerca el contenido de nuestra sección. Primero tenemos el botón de cierre situado en la parte superior derecha de la sección.

Aquí está su marcado:

1	<button class="position-absolute skills-close" aria-label="Close Skills Section">✕</button>

Y sus estilos:

.skills-close {
  top: 20px;
  right: 20px;
  font-size: 2rem;
}

A continuación tenemos el gráfico en sí. También revisemos nuevamente su estructura:

<div class="d-flex chart-wrapper">
  <ul class="chart-levels">
    <li>Expert</li>
    ...
  </ul>
  
  <ul class="d-flex justify-content-around align-items-end flex-grow-1 text-center bg-black chart-skills">
    <li class="position-relative bg-red" data-height="80%">
      <span class="position-absolute w-100">CSS</span>
    </li>
    ...
  </ul>
</div>

Aquí están los puntos clave con respecto a este marcado:

Configuramos el elemento .chart-wrapper como un contenedor flexible con dos listas como elementos flexibles.
La segunda lista, que mide el conocimiento de una determinada habilidad, es en sí misma un contenedor flexible. Le damos flex-grow: 1 para crecer y ocupar todo el espacio disponible.

Las reglas iniciales de CSS para nuestro gráfico:

.chart-wrapper {
  width: calc(100% - 40px);
  max-width: 500px;
}

.chart-levels li {
  padding: 15px;
}

En este momento, veremos más de cerca los elementos de la segunda lista.

Puntos a recordar:

Todos tienen un ancho del 12%. Los distribuimos uniformemente a través del eje principal dando justify-content: space-around a la lista principal.
Deben estar situados en la parte inferior de su contenedor y, por lo tanto, establecemos align-items: flex-end a la lista principal.
Su altura inicial es 0. Tan pronto como la sección se hace visible, su altura se anima y recibe un valor igual al valor de su atributo data-height. Solo ten en cuenta que debemos reescribir los valores de altura deseados en nuestro CSS porque establecer height: attr(data-height) no funciona :(

Aquí están los estilos relacionados:

:root {
  ...
  --transition-delay: 0.85s;
  --transition-delay-step: 0.3s;
}

.chart-skills li {
  width: 12%;
  height: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: height 0.65s cubic-bezier(0.51, 0.91, 0.24, 1.16);
}

.window-opened .chart-skills li:nth-child(1) {
  height: 80%;
  transition-delay: var(--transition-delay);
}

.window-opened .chart-skills li:nth-child(2) {
  height: 60%;
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step)
  );
}

.window-opened .chart-skills li:nth-child(3) {
  height: 68%;
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 2
  );
}

.window-opened .chart-skills li:nth-child(4) {
  height: 52%;
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 3
  );
}

.window-opened .chart-skills li:nth-child(5) {
  height: 42%;
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 4
  );
}

Como puedes ver en el código anterior, utilizamos las variables de CSS transition-delay y transition-delay-step junto con la función calc() CSS para controlar la velocidad de los efectos de transición. Microsoft Edge no soporta esas operaciones matemáticas, así que si necesitas admitirlo, pasa algunos valores estáticos como este:

.window-opened .chart-skills li:nth-child(2) {
  transition-delay: 1.15s;
}

.window-opened .chart-skills li:nth-child(3) {
  transition-delay: 1.45s;
}

Para generar la cantidad de conocimiento estipulada para una cierta tecnología, usaremos el pseudo-elemento ::before.

Using sudo element to output the amount of knowledge

Este valor se extrae del atributo data-height que se asigna a los elementos de la segunda lista.

Aquí están los estilos que realizan este trabajo:

.chart-skills li::before { 
  content: attr(data-height);
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  font-size: 0.85rem;
  color: var(--white);
}

Por último, añadimos algunos estilos al elemento span que está situado dentro de cada uno de los elementos de la lista. Este elemento se comporta como una etiqueta y almacena los nombres de la tecnología.

Los estilos correspondientes:

.chart-skills span {
  bottom: 0;
  left: 0;
  transform: translateY(40px) rotate(45deg);
}

5. Volviéndola responsiva

¡Ya casi hemos terminado! Como último punto, asegurémonos de que la página tenga una apariencia sólida en todas las pantallas. Aplicaremos dos reglas específicamente para las pantallas estrechas:

@media screen and (max-width: 600px) {
  html {
    font-size: 12px;
  }
  
  .chart-levels li {
    padding: 15px 10px 15px 0;
  }
}

Una nota importante aquí es que en nuestros estilos hemos utilizado rem para ajustar el tamaño de las fuente. Este enfoque es realmente útil porque los tamaños de las fuentes no son absolutos y sus valores dependen del valor del elemento raíz. Por lo tanto, si disminuimos el tamaño de la fuente del elemento raíz como en el código anterior, los tamaños de la fuente relacionados con rem disminuirán de forma dinámica. ¡Buen trabajo amigos!

El estado final de nuestro proyecto:

6. Compatibilidad con navegadores

La demostración funciona bien en todos los navegadores y dispositivos recientes.

Como ya se comentó anteriormente, Microsoft Edge aún no soporta operaciones matemáticas con propiedades personalizadas dentro de la función calc(). Para superar este problema, deberás usar valores codificados en su lugar.

Conclusión

En este tutorial, mejoramos nuestras habilidades con flexbox creando una atractiva página estática para portafolios. Incluso nos desafiamos a nosotros mismos, pues hemos aprendido a crear un gráfico de columnas responsivo sin usar ninguna biblioteca externa de JavaScript, SVG, o el elemento canvas. ¡Solamente con CSS!

Espero que hayas disfrutado este tutorial tanto como yo disfruté escribiéndolo, y que esta demostración te inspire para desarrollar el sitio para tu portafolio. Me encantaría ver tu trabajo, ¡asegúrate de compartirlo con nosotros!