Faites ressortir votre profil Github avec CSS

Auparavant, la seule façon de personnaliser votre profil Github était de mettre à jour l'image ou de changer votre nom. Cela signifiait que chaque profil Github se ressemblait, les options pour le personnaliser ou se démarquer étaient minimes.

Depuis, vous avez la possibilité de créer une section personnalisée en utilisant Markdown. Vous pouvez inclure votre CV, vos intérêts et vos passe-temps pour que votre profil reflète qui vous êtes. C’est l’une des principales sections que quiconque voit lorsqu’il arrive sur votre profil.

Dans cet article, je vais vous montrer comment j'ai créé mon fichier readme Github avec une touche d'originalité. Je vais utiliser Markdown et résoudre son problème principal. Le problème est que cela peut être très restrictif, car vous ne pouvez pas changer les couleurs, ajuster les positions et l’espacement peut être difficile. Pour résoudre, il existe un moyen d'ajouter du CSS à votre fichier Lisez-moi Github et même d'ajouter des transitions pour présenter une meilleure UX.

Mais commençons par créer le fichier readme. Pour cela, vous devrez créer un nouveau référentiel public qui correspond exactement à votre nom d'utilisateur Github. Vous verrez un petit texte indiquant qu’il s’agira d’un référentiel unique.

Maintenant, quoi que vous mettiez à jour dans votre fichier [README.md](), cela sera affiché sur votre profil. Vous pouvez utiliser la syntaxe Markdown ou HTML pour afficher votre contenu. Si vous ajoutez un style en ligne, des fichiers CSS ou JavaScript, ils seront supprimés par Github, cette solution est donc interdite.

La solution

Dans votre fichier README.md, vous pouvez inclure des images. Cela inclut les fichiers SVG. La faille qui nous permet d'ajouter du CSS consiste à intégrer du HTML et du CSS personnalisés à l'aide de l'élément ForeignObject dans un fichier SVG. L'élément ForeignObject vous permet d'inclure des éléments provenant d'autres langages de balisage dans un graphique SVG.

Créons un nouveau fichier dans notre référentiel, appelé header.svg. Dans mon cas, j'aimerais qu'un texte s'affiche sur mon profil disant CodeFlow., avec un joli dégradé et un effet machine à écrire. Pour y parvenir, j'ai écrit du CSS et du HTML imbriqués dans un ForeignObject dans mon fichier SVG :

<svg fill="none" width="100%"  xmlns="http://www.w3.org/2000/svg">
 <foreignObject width="100%" height="100%">
  <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
        .wrapper {
          height: 100vh;
          display: grid;
          place-items: center;
        }

        .text {
          width: 9ch;
          animation: typing 1.5s steps(9), blink .5s step-end infinite alternate;
          white-space: nowrap;
          overflow: hidden;
          border-right: 3px solid;
          font-family: monospace;
          font-size: 4em;
          background: linear-gradient(90deg, rgba(0,241,220,1) 0%, rgba(86,115,241,1) 44%, rgba(103,68,241,1) 54%, rgba(254,0,255,1) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        @keyframes typing {
          from {
            width: 0
          }
        }

        @keyframes blink {
          from, to { border-color: transparent }
          50% { border-color: rgba(254,0,255,1); }
        }
      </style>
      <div class="wrapper">
        <div class="text">
          CodeFlow.
        </div>
      </div>
  </div>
 </foreignObject>
</svg>

Mettons maintenant à jour le fichier README.md pour utiliser ce SVG comme image et l'afficher dans notre profil :

<div align="center">
 <a class="link" href="https://github.com/codeflowjs/codeflowjs/blame/main/header.svg">
  <img class="image" src="header.svg" alt="Click to see the source">
 </a>
</div>

Et c’est tout. Il ne s’agit en réalité que de CSS et de HTML enveloppés dans un SVG. Découvrez le résultat final ci-dessous ou si vous souhaitez le voir en action, mon profil Github est ici.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!