I Made a Custom GitHub Profile README Portfolio (and you can, too)

I made a custom GitHub profile page that is visually stunning and incredibly easy to make, because all software developers need a portfolio. This was the title of a video I made about two to three years ago, and it still holds true. But now, as of like two years ago, but still now, you can easily do that with a custom GitHub profile readme. It allows you to turn your bland GitHub profile into a beautifully custom and professional webpage like this. One that tells a story of your work through your lens, just as I have with mine. I've included a brief description of who I am, professionally speaking, with custom badges laying out my subscriber data, my view data from my YouTube channel, my follower data, and my star data from my GitHub profile. A list of languages and tools I use using the icons, you know, to beautifully display it. Pulling in live data from my YouTube channel and displaying it in a way that looks natural to YouTube. My GitHub stats, which are pretty poor other than the total stars I've earned, which has somehow gotten me into S tier. And a brief description of my coding journey in a collapsed view, because it's not super important, but it's there for who wants to read it. And today, I'm going to show you how I created my custom GitHub profile and how you can do it too. A portfolio is one part to help you get a job. Another potential avenue that could help you land a job or take your career to the next level is Formation.dev, the sponsor of today's video. They're a career accelerator who have one goal, to help early career software engineers land life-changing roles at top-tier companies like Google, Airbnb, Dropbox, and Apple. But how they do it is what really piqued my interest. Instead of the traditional one-size-fits-all curriculum, the program offers an adaptive technology that identifies the exact skills you need to land your dream role and creates a customized roadmap to get you there. For example, Diana has a CS degree and one year of front-end experience. She is targeting a mid-level front-end role, so her roadmap will focus on front-end skills like React and intermediate-level algorithms as you see here. The program helps engineers fill specific skill gaps, offers ongoing mentorship from senior engineers at top-tier companies, and you also get referrals directly into top companies. And two things I really like about Formation is that they support their fellows unconditionally until they get a signed offer letter. And they don't take just anyone. You have to apply to the program to see if you're a good fit. While they've had a plethora of programmers in the fellowship with different levels of experience, it's best fit for engineers with one to three years of experience who are looking to level up and land front-end, back-end, and full-stack roles at top-tier companies. They offer the program full-time and part-time with an income share agreement so you can pay nothing until you get the job. Check out Formation's program at the link in the description and apply for free today. Back to the video. I'm an indie full-stack developer and content creator building my version of the digital world one step at a time. So for my GitHub profile, I want to reflect that. I have a small bio introducing myself in that context, explaining how I build applications and make videos from nothing to ----. And getting started is very straightforward. You just need to create a new repo, name it the same as your GitHub profile. Mine already exists. You shouldn't run into this issue. Set to public, add a readme file, and create repository. It is a Markdown file, so we're using Markdown and some HTML, where the very first bit that you see here is an h1 tag. So the h1 tag is my name. And then what is supposed to be used for code, to display code, I just like the way it looked for digital craftsmen. I heard this term once and I just fell in love with it because it grasps perfectly exactly what a lot of us are. Digital craftsmen. Developer, filmmaker, creator. Didn't know what to do for video maker. Filmmaker just looked nicer. We're going to roll with it. And then just some plain text. This is very specific to you. I've seen individuals have GIFs in here above everything, bullet points listing different things, other creative ways to showcase who they are. So have fun with it. What I went for is whoever is reading this, what do they need to know about me? How do I want to portray myself in this context? They don't need to know about all my different hobbies and things right off the rip that can be shared later on if need be. I briefly explained to them how I build my apps, how I make my videos and where those videos are published. And what adds to this main section would be my credentials. At least those that I actually care about. Views and followers because I'm a shallow individual. But actually though, it allows the profile viewers to get a quick glance at who I am and what I've done in this context. For you, this may be where you list your GitHub stats and repos that you're proud of. Or similar to what I'm doing, linking your social profiles using custom badges. My subscribe count and view count being linked to my YouTube channel. And my follower count and stars count linked to my followers and my repositories. Because what's the point of linking it to my GitHub profile if the only way you're seeing it is because you're on my GitHub profile? I think that makes sense. And I have to thank DenverCoder1 for putting this together. Here's an example of the default shields.io badge, which is the standard. But I don't like the available icons. So I found this individual took care of that with his custom icon badges repo. Where all you do is replace the shields URL with this URL and easily use octacons or upload your own with this demo site he set up. I just chose some default octacons that I really liked. I didn't bother uploading my own because this video one fits perfectly. The eye for the views fits perfectly. The follower, adding, whatever. And then the star for stars. I like it. And to use it, again, you can simply change the URL, but also come down here, click one of these and copy the URL, changing it to your liking. Or you could do what I did, where I went to his profile, saw that he has exactly what I wanted, go to the raw file, copy pasta, and change the data to mine. That makes up the overview of my profile, which I indicated using a thick horizontal line, as you can see here. So above the line is the first glance. And below the line is the more detail to give context to the first glance, like the languages and tools I primarily use. Java, Spring, TypeScript, Git, JavaScript, Python. You get it. It started with an H3 header and a toolbox icon because, well, these are my tools. And I use dev icon for all of the icons. I would just search Java, click on Java, and then come down here and copy the SVG version of whichever one I wanted. But if you leave it like this, it's giant. So I threw in alignment, width, and padding to make it fit properly. I actually saw that Jesse, the code stacker, had his icons neatly organized. So I looked at his raw code for his readme file, pulled this out and that out, increasing the width just a smidge to where I felt it was perfect, and that's it. I used a header tag to put this thin horizontal line right here, because I only know how to do the large one, but it felt too extreme. So I just wanted a little bit of separation. So I figured this works because I needed that separation for my favorite section in this whole page, my YouTube videos. Not just listed out and linked, but displayed just as it does on YouTube. But wait, there's more. Inside the actual repository, we have an action, a GitHub action that runs every hour. I did set it to once a day, but I wanted the views to update more consistently. So we have a GitHub actions workflow running a cron job every hour to pull in my YouTube data and update the code. I again have DenverCoder1 to thank for this. What a beautiful way to form it. I actually discovered it when I found the custom badges and checked out his profile. But this is how it's done. Add the following snippet to your markdown file where you want the cards to appear. In your repo, create a .github folder, and inside, create a folder named workflows if it doesn't exist. Then create a file in your .github workflows folder and give it a name such as youtube-cards.yaml with the following contents. Make sure to change the channel ID to your YouTube channel ID. And I added more customization. Trigger the workflow manually to start, which adds code in between the previous comments. And make sure you pull that to your local repository if you have one, so you don't run into any merge conflicts. Because when the code runs, it adds that data to your readme file. And if you try to push up, it'll be like, merge conflict. So, you know. And that was it. It was beautiful. But because the spacing was a bit weird below the videos, well, I used the same badges as before to have this subscribe for more badge here. I included another header line in my stat section showing off my S tier performance. Yes, the only reason being due to the amount of stars my open source CS repos have. But I'll take what I can get, alright? This is the user and the repo we get to thank for putting this together alongside the 217 other contributors. And it's very straightforward how I implemented it. I came down to themes because it had icons true in theme right here. Copy pasta, change the info to what I want, which is my github profile, and the grovbox theme, which I found to be my favorite after exploring all available themes. Which, there's a really, really ugly one all the way at the bottom right here. Code stacker. I'm playing, I'm playing. I actually really like his color scheme, but I mean, I like grovbox better. I like those pastel muted colors, as y'all know, when I made my terminal website. Now we get to appreciate all of my S tier glory. And the final section, also separated by a header line, has an h3 tag and a plain text that briefly overviews my coding journey. Not everything, but the important bits. I did put this in a collapsed position as default, because I just felt it was too bulky and in the way when you're scrolling down. Maybe it fits, but at the same time, I don't know. And this is an amazing way to attract attention of potential employers and clients who visit your github. It's really all you need, but as a developer, you may be so inclined to create your own developer portfolio website, and I don't blame you. Now you've seen me create the terminal website, which was really just a fun terminal website that I happened to fill with some of my information and kind of acted as a portfolio site, but it wasn't a full-fledged portfolio website. But in my next video, I'm actually going to be creating my own developer portfolio website, and I think you'll really like that. If you want to see that, just make sure you're subscribed, hit the notification bell so you do get alerted. I don't upload that much. It's not like I'm going to spam your notification box or anything like that. And if not, no worries. I just hope you enjoyed this video, and if so, show it by giving it a like. I'd really appreciate it. It's not for my own vanity. It's for the YouTube algorithm. I think you'll know that by now. But anyway, until next time, y'all have a good one.