Mejorando nuestro Website con el diseño de @thespianartist

Hola compañeros del curso Responsive Design.

Quería realizar este pequeño tutorial para agregar algunas mejoras, o mejor, tratar de realizar el diseño brindado por @thespianartist.

Primero mejoremos uno de los vínculos de nuestra web.

Lo primero que hice fue agregarle una clase, y la llamé border:

<li><a class="link border" href="#contacto">Trabajemos juntos</a></li>

Luego en nuestro archivo estilos.css le agregué un border, un padding y lo centré de esta forma:

.header ol li .border {
  height: initial;
  border: 1px solid white;
  padding: 10px 20px;
  border-radius: 4px;
  margin: 14px 0; 
}

También tenía que reiniciar el height, ya que si no el borde se iba hacia los costados y no se iba a dejar modificar.
Este es el resultado:

Luego vamos a agregar el borde a la izquierda en cada sección:

.portfolio, event-list {
	border-left: 10px solid #026fff;
}

Y ahora vamos a agregar un círculo al lado de cada h2 para tratar de hacerlo más parecido al diseño, pero en el mediaqueri max-widht: 1024px. Si ustedes gustan puedes hacerlo también para pantallas grandes.

h2:before {
  content: '';
  position: absolute;
  left: -25px;
  top: 20%;
  font-size: 10px;
  color: #026fff; 
  width: 20px;
  height: 20px;
  background-color: #026fff;
  border-radius: 50%;
}

En este caso estamos usando la pseudoclase :before. Con esto lo que estamos haciendo es colocar antes del texto un pequeño círculo y empujandolo hacia la izquierda para que quede pegado al borde:


El de “MÁS SOBRE MI EXPERIENCIA” quedó así por lo que lo tenemos por fuera del event-list pero a mi me gustó cómo quedó.
Para que se vea mejor en móviles lo que hice fue modificar el tamaño y la posición en el mediaqueri max-widht: 480px:

h2:before {
    width: 15px;
    height: 15px;
    left: -24px;
  }

Ahora, vamos quitarle el borde que tienen nuestras card y agregarles una pequeña sombra:

.project, .event {
	box-shadow: 1px1px10px1px lightgray;
}

Aquí quedaría:

Con esto intentamos parecernos más al diseño que nos brindaron y a mi parecer a quedado más bonito nuestro portafolio.

Así quedó mi website: https://juancafelizzola.github.io/portafolio-desarrollo-web/
Le agregué algunas mejoras para la vista en los diferentes dispositivos. Sólo es de jugar y dejarlo como más te guste.

Cualquier duda o aporte puedes dejarlo en comentarios.