Antes, la única manera de personalizar tu perfil de Github era actualizando la imagen o cambiando tu nombre. Esto significaba que todos los perfiles de Github tenían el mismo aspecto y las opciones para personalizarlos o destacar eran mínimas.

Desde entonces, tienes la opción de crear una sección personalizada usando Markdown. Puedes incluir tu CV, tus intereses y aficiones para que tu perfil refleje quién eres. Es una de las secciones principales que cualquiera ve cuando accede a tu perfil.

En este artículo te mostraré cómo creé mi archivo Léame de Github con un toque diferente. Usaré Markdown y resolveré su problema principal. El problema es que puede ser muy restrictivo, ya que no se pueden cambiar los colores, ajustar las posiciones y el espaciado puede resultar difícil. Para resolverlo, hay una manera de agregar CSS a tu archivo Léame de Github e incluso agregar transiciones para presentar una mejor UX.

Pero comencemos primero creando el archivo Léame. Para ello, deberá crear un nuevo repositorio público que sea exactamente su nombre de usuario de Github. Verás un pequeño texto que muestra que este será un repositorio único.

Ahora, cualquier cosa que actualices en tu archivo [README.md](), se mostrará en tu perfil. Puede utilizar la sintaxis de Markdown o HTML para mostrar su contenido. Si agrega algún estilo en línea, archivos CSS o JavaScript, Github lo eliminará, por lo que esa solución no se puede realizar.

la solución

En tu archivo README.md puedes incluir imágenes. Eso incluye archivos SVG. La laguna que nos permite agregar CSS es incrustar HTML y CSS personalizados utilizando el elemento ForeignObject en un archivo SVG. El elemento ForeignObject le permite incluir elementos de otros lenguajes de marcado dentro de un gráfico SVG.

Creemos un nuevo archivo en nuestro repositorio, llamado header.svg. En mi caso, me gustaría que se mostrara un texto en mi perfil que dijera CodeFlow., con un bonito degradado y un efecto de máquina de escribir. Para lograrlo, escribí algo de CSS y HTML anidado en un objeto extranjero en mi archivo SVG:

Ahora actualicemos el archivo README.md para usar este SVG como imagen y mostrarlo en nuestro perfil:

Y eso es todo. En realidad, es solo algo de CSS y HTML dentro de un SVG. Mira el resultado final a continuación o, si quieres verlo en acción, mi perfil de Github está aquí.