En este repositorio explicare las diferentes tecnicas que existen para estilizar de la mejor forma un perfil en github utilizando varias herramientas, repositorios externos y como no, nuestra creatividad a la hora de ponerlos en marcha.
Cabe recalcar que este archivo README lo creare de la manera mas simple para no distraer la vista del lector, sin mas que añadir, continuemos.
Lo primero que debemos saber es que los perfiles de github se crean sobre un repositorio con nuestro nombre.
Este repositorio contiene un archivo README.md el cual utiliza un lenguaje de marcado llamado MARKDOWN. Este permite crear salidas de texto estilizadas de una manera sencilla, aunque su limitante mas grande es sin duda la poca flexibilidad a la hora de agregar estilos.
-
Lo primero que debemos hacer es ir a a la ventana repositoiros
-
Seguido a esto le daremos al boton de la derecha: New
-
Seguido a esto veremos una pagina titulada "Create a new repository", destro de esta es donde crearemos nuestro repositorio
-
Con la mirada buscaremos el recuadro llamado "Repository name" aqui pondremos nuestro nombre de usuario, en mi caso: Bryan-Herrera-Dev.
Si no sabes donde encontrar tu nombre de usuario en el recuadro de alado esta, solo copialo y pegalo.
Como vemos a mi me tira un error, pues ya tengo dicho repositorio.
Para verificar que lo hicimos bien, debajo a estos recuadros tendremos un mensaje de github diciendo que hayamos un secreto. Si no muestra este mensaje comprueba que hayas puesto bien tu nombre de usuario.
-
Luego iremos hasta la parte de abajo, marcaremos la opcion "Add a README file" y luego presionaremos el boton "Create Repository"
-
Cuando vayamos a nuestro perfil veremos algo asi:
-
Estare usando una cuenta secundaria para crear de cero el archivo.
Una vez creado el repositorio, iremos a nuestros a la ventana repositorios y abriremos la repo con nustro nombre de usuario. Abriremos el repositorio y veremos algo asi:
Abrirmos el archivo README.md, le daremos al boton "Edit this file"
Cuando lo abramos borraremos todas las lineas que aparezcan y tendremos un archivo vacio.
Antes de comenzar con los aspectos esteticos debemos tomar en cuenta la estructura que le daremos a nuestro archivo puesto que, si tienes los elementos dispersos por cualquier sitio daria exactamente igual.
-
En Markdown podemos definir varios tipos de título, si conoces un poco de HTML sabrás que tenemos 5 jerarquías para esto y aquí podemos hacer referencia a esa jerarquía de dos maneras: por medio de etiquetas y por numerales
#Por medio de etiquetas:
<h1>Titulo</h1> <h2>Titulo</h2> <h3>Titulo</h3> <h4>Titulo</h4> <h5>Titulo</h5>
Por medio de numerales:
# Titulo ## Titulo ### Titulo #### Titulo ##### Titulo ###### Titulo
-
Con markdown tenemos soporte para HTML y escribir nuestra estructura con este, pero, no todas las propiedason permitidas, un ejemplo: input, select, etc
-
En GitHub Markdown tenemos soporte para insertar imágenes y darles tamaños específicos. Para esto hay dos maneras principales, por medio de Markdown o insertarlas como una etiqueta HTML:
Markdown:
HTML:
<img src="https://myoctocat.com/assets/images/base-octocat.svg" width="200" height="200" alt="octocat">Nota: Si quieres que la imagen se vea en su tamaño original, solo debes dejar el ancho y alto en blanco
En GitHub también tenemos soporte para imágenes que cambian dependiendo el tema del usuario 'Dark' o 'Light', esta propiedad es relativamente nueva y podemos implementarla así:
<picture> <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png"> <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png"> <img alt="Shows an illustrated sun in light mode and a moon with stars in dark mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png"> </picture>
Otro dato muy interesante que con las etiquetas
<kbd></kbd>puedes agregar un margen de color a las imágenes, aunque es casi imperceptible le da un toque más estético a estas.<kbd><img src="https://myoctocat.com/assets/images/base-octocat.svg" width="200" height="200" alt="octocat"></kbd>
Herramientas que github implementa en su markdown para crear elementos visuales
journey
title My estudio para examenes
section Se anuncia el examen
Yo empiezo estudiando: 1: Yo
Hago notas sobre esto: 2: Yo
Pido ayuda a mi amigo: 3: Mi Amigo
Nosotros estudiamos juntos: 5: Mi Amigo
section Dia del EXAMEN
No se que mas poner: 2: Yo