Yesterday, I Built a small web app to add custom CSS to my Profile readME, which I call Cool Readme, With Cool Readme, all You have to do is enter your username and add some CSS, and you have a custom-built profile.
My Motivation
One of the things I've always wanted for GitHub profile readmes is custom css. It's supported on hashnode and other platforms for blogs, and it's a game changer. Every Blog on Medium looks the same, other than Logo and Name, while on hashnode, we can change so much more, with blog fonts, colors, and other styles, making Hashnode blogs way more unique and personalized.
GitHub Profiles Face the same issue on a smaller scale. People use many methods to try and make their profiles unique, whether it's trying to update their readme with GitHub Actions or Using giant banners.
That's the reason for the existence of Cool Readme
How I built it
The app is a simple static web page hosted on Vercel, and Into three parts
the landing page
the CSS editor
the rendered readmes
The Landing Page
the landing page is really simple, though one cool trick I found was the underlined gradient, which is just made using ::before
#title::before {
content: '';
position: absolute;
top: 100%;
width: 100%;
left: 0%;
height: 5px;
border-radius: 2px;
background: linear-gradient(45deg, #f3ec78, #af4261); }
the rest is just a simple form directing you to render
The CSS editor
The CSS editor uses the Monaco editor, which was quite an upgrade from the ace editor, which I've used for previous projects, as the Monaco editor was more powerful from the start, especially for CSS, where I often use the RGB color picker feature. The Iframe and Link icon constantly refreshes with a simple onkeyup event listener.
The rendering
To render the page, I have two URL variables, the user u and the CSS styles. The user variable is used with the raw Github link I got from the GitHub API, and the styles are then Injected into it, giving you a customized readme!
I hope you enjoyed reading, and Share Your customized readmes!