Skip to content

Bryan-Herrera-DEV/Como-Crear-un-Perfil-Hermoso-con-README

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 

Repository files navigation

Creando un Github Profile Hermoso

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.

Indice

Introduccion

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.

Creando nuestro repositorio

  • 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:

  • Nota:

    Estare usando una cuenta secundaria para crear de cero el archivo.

Conceptos basicos

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.

Estructuras y elementos basicos

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.

Propiedades Basicas

  • Titulos

    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
  • Soporte para HTML

    Con markdown tenemos soporte para HTML y escribir nuestra estructura con este, pero, no todas las propiedason permitidas, un ejemplo: input, select, etc

  • Soporte para imagenes

    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:

    ![octocat](https://myoctocat.com/assets/images/base-octocat.svg)

    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 integradas en github

Herramientas que github implementa en su markdown para crear elementos visuales

Mermaid

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
    
Loading

About

Aqui les dejare unas instrucciones sobre como crear un perfil en github genial con README

Topics

Resources

Stars

Watchers

Forks