DEV Community

Cover image for Make Your Github Profile Stand Out With CSS
The Opinionated Dev
The Opinionated Dev

Posted on • Edited on • Originally published at theopinionateddev.com

Make Your Github Profile Stand Out With CSS

Previously the only way you could customise your Github profile was by updating the picture or changing your name. This meant every Github profile looked the same, the options to customise it or to stand out was minimal.

Since then, you have the option to create a custom section using Markdown. You can include your CV, your interests and hobbies to make your profile reflect who you are. It’s one of the main sections that anyone sees when they land on your profile.

In this article I’ll show you how I created my Github readme with a twist. I’ll be using Markdown and solving it’s main problem. The problem that it can be highly restrictive, as you can’t change colours, adjusting positions and spacing can be difficult. To solve there is a way you can add CSS to your Github readme and even add transitions to present a better UX.

But let’s start with creating the readme first. For this, you’ll need to create a new public repository that is exactly what your Github username is. You’ll see a small text showcasing that this will be a unique repository.

Repo settings in Github

Now whatever you update in your [README.md](<http://README.md>) file, it will be displayed on your profile. You can use Markdown syntax or HTML to display your content. If you add any inline styling, CSS files or JavaScript, it’ll be stripped by Github, so that solution is a no-go.

The solution

In your README.md file you can include images. That includes SVG files. The loophole that enables us to add CSS is embedding custom HTML and CSS using the foreignObject element in an SVG file. The foreignObject element allows you to include elements from other markup languages inside an SVG graphic.

Let’s create a new file in our repository, called header.svg. In my case, I’d like a text being displayed on my profile saying CodeFlow., with a nice gradient and a typewriter effect. To achieve that, I wrote some CSS and some HTML nested in a foreignObject in my SVG file:

<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>
Enter fullscreen mode Exit fullscreen mode

Now let’s update the README.md file to use this SVG as an image and display it in our profile:

<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>
Enter fullscreen mode Exit fullscreen mode

Working animation in Github Readme

And that’s it. It’s really just some CSS and HTML wrapped inside an SVG. Check out the end result below or if you’d like to see in in action, my Github profile is here.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more