CodeNewbie Community 🌱

Cover image for Mini Portfolio: Bring Your GitHub Profile To The Next Level
Ayu Adiati
Ayu Adiati

Posted on • Originally published at

Mini Portfolio: Bring Your GitHub Profile To The Next Level

Hello Fellow Codenewbies 👋,

A friend asked me how I created my GitHub profile a while ago and if I ever wrote a blog post about it.
I haven't written one even though I wanted to because many people already wrote about it.
But after that conversation, I took a look at my GitHub profile. The last time I updated it was more than a year ago. It was still okay. However, I had some ideas to improve it. And now, not only have I updated it, but it also became my mini portfolio. So, I want to share this process with you.

Ayu Adiati Banner

Hi there! I'm Ayu!

I'm a front-end developer and a tech blogger based in the Netherlands, and I absolutely love what I do. My real passion lies in creating projects that are accessible to everyone, ensuring that technology is inclusive and user-friendly.

The thrill of learning something new is like a burst of energy that keeps me going. And guess what? I'm not one to keep all that knowledge to myself! I love to share my learnings and experiences with others through my blog and Twitter. It's my way of giving back, spreading knowledge, and learning together.

But there's more to me than just coding and blogging. I deeply value collaborations, open source contributions, and being an active part of the tech communities. I believe in the power of diverse perspectives and inclusion, and I'm committed to fostering an environment where everyone feels safe, supported, and empowered.


💡 Improvement Ideas

Create a banner and a footer

I didn't have a banner and a footer. So I wanted to have a banner to give a quick summary of who I am and what I do and a footer to thank everyone who visited my GitHub profile.
I created them with Canva.

Ayu Adiati Banner


Sticking to my brand

Ayu Logo

If you have been following me for a while, you might notice the logo I attached to every blog post's cover picture. The colors that I use for my logo are orange, blue, and white.
So I'm using these colors as a theme for the banner, footer, and background colors.
I want to be consistent and stick to my personal brand across the online platforms.

Change icons to badges

Previously, I used icons from Devicon to display languages and frameworks in the "Skills" section. Even though I set the width and the height of all icons to be the same, they still had different sizes. Adjusting the width and the height individually also didn't do any trick.

Because I want to stick with my brand and don't want to have different sizes of icons, I decided to use badges. With badges, I don't need to adjust width and height, and I can define the background color to follow my brand colors.

Add more sections

Before I updated my GitHub profile, I only had "About Me," "Skills," "Latest Blog Posts," and "Fun Fact About Me" sections.

Then I added the "Accomplishments" section to list all of my accomplishments in tech. I also added a "Community Activities" section to list all my activities in my communities and my volunteer experiences.

Fix the structure

It's not that I didn't have structure for my previous GitHub profile. But after I took a closer look at it, I knew I could improve the structure to be more readable.
So, the new structure would be:

  • The banner
  • About me
  • Skills
  • Contribution stats on GitHub
  • Accomplishments
  • Community activities
  • Latest blog posts
  • Fun fact about me
  • A favorite quote and GIF (just for fun 😄)
  • The footer

I also wanted a custom horizontal line to separate each section instead of using the HTML's default one. Like the banner and the footer, I made this custom horizontal line with Canva.

Horizontal line
horizontal line

🖋 Customize The GitHub Profile

This section will walk you through how I created and updated my GitHub profile.

Maybe you don't have a GitHub profile and want to create one.
So, I will start this section with how to create the GitHub profile 😊.

Create a new GitHub profile

First, you must create a new repository with the same name as your GitHub username.

  • From your GitHub dashboard, click the green "New" on the left bar.

    Create new repo button

  • Enter your GitHub username as the repository name. You also have to make the repository public and initialize a README file.

    Create new repository form

  • Click the green "Create repository" button at the bottom.

    Create repository button

Now you can start customizing your GitHub profile 😄!

Add a banner, footer, and horizontal line

As I mentioned before, I wanted to stick with my brand. The first thing that popped into my mind, although I will create these elements with Canva, they should follow the accessibility rules.
Unfortunately, the color combinations I use for my logo are not accessible if I want to use them as background and small text.
So I tried to find the gradient combination from those colors and check if they meet the WCAG 2.0 guidelines for contrast accessibility by using Accessible Web free tool.

So they are not precisely the same as my brand colors, but they are still within the gradient. And most importantly, they meet the WCAG 2.0 guidelines.

About Me section

I keep this section short and simple. I also included the badges of platforms where people can find me. I created these badges with
If you want to use the awesome wave hand GIF by Martin Heinz like I do, you can grab the code below.

<img src="" width="35px">
Enter fullscreen mode Exit fullscreen mode

Skills section

This section lists the languages, frameworks, and libraries I work with. I also made sub-sections where I listed the frameworks and libraries I worked with and want to learn in the future.
I'm using badges to show the frameworks and libraries.

Create badges with

<img src="" alt="NodeJS">
Enter fullscreen mode Exit fullscreen mode

I will break down and walk you through the above syntax so you can create your badge.

  • Text

After, add a dash followed by a text of what you want to be written on the badge.

  • Background color

After setting the text, add a dash followed by the Hex color for the badge's background. You don't need the # symbol for this.

  • Logo

Now you can insert the logo of the language, framework, library, platform, etc., by adding ?logo= followed by the logo name, with all letters in lowercase. You can search for the available logos on Simple Icons.

This logo name is case-sensitive. So you want to ensure that all letters are in lowercase and use the format as stated on Simple Icons so that your logo will appear on the badge.


  • Logo color

You can add the color for your logo by adding &logoColor= followed by the Hex color. If you want to use the logo's official color, you can also find it on Simple Icon.

Color hex

  • Style of the badge

I want a simple square style for my badges. So I added &style=for-the-badge after the logo color. You can see how to add other styles for the badges on the website under the "Styles" section.

  • Set horizontal space

You can set the width of the logo to give some horizontal padding by adding &logoWidth=. Adjust the width based on your need.

Add contribution stats

I want to keep track of my GitHub activities. So I added a GitHub stats and a GitHub streak stats. I customized the color using the same colors as my banner and footer for these cards.
I used to have a top languages card, but I took it down for now because I only want to focus on my GitHub activities.

You can find the instructions to add these cards on the repositories' README file (click the links above). They are pretty straightforward.

Latest blog posts section

I'm regularly writing blog posts. So I added this section to show my latest five blog posts using GitHub Actions workflow by Gautam Krishna.

  • In the README file, within the section where you want this list to live, add:

    <!-- BLOG-POST-LIST:END -->
  • Create a folder named .github. Then create a sub-folder called workflow.

  • Inside the workflow folder, create a file named blog-post-workflow.yml and copy/paste this code into the file:

    name: Latest posts workflow
       - cron: '0 * * * *' 
       name: Update this repo's README with latest blog posts
       runs-on: ubuntu-latest
         - uses: actions/checkout@v2
         - uses: gautamkrishnar/blog-post-workflow@master
             # Replace this URL with your RSS feed URL/s
             feed_list: ""
             # Optional
             max_post_count: 5
             template: "- `$date` | [$title]($url)  $newline"
             date_format: yyyy-mm-dd
             tag_post_pre_newline: true

    Replace the URL in the feed_list with your RSS feed URL.
    If you don't have your own domain and you're writing on Hashnode, this should be Or if you want to show your blog posts on DEV. Replace the username with your username.

    You can also customize how many posts you want to show, the date format, etc. Look at the available options at Gautam's repository.

  • Commit your changes and wait for it to run automatically.

  • You can trigger it manually to see the result immediately.

    • In your repository, click on the "Actions" tab. Actions tab GitHub
    • Click the "Latest posts workflow" on the left bar. Latest posts workflow tab
    • Click the "Run workflow" dropdown on the right side, then click the green button of "Run workflow". Run workflow button
    • Refresh the page. By now, you should see something on the table. Latest posts workflow table
    • Now, if you go to your GitHub profile, you can see the blog posts list. If not, try to refresh the page.

If you're creating video content on YouTube, you can also show them on your GitHub profile using this workflow. You can read more about it on Gautam's repository.

Accomplishment, community activities, and fun facts about me sections

There is nothing special in these sections. Because I want to treat my GitHub profile as a mini portfolio and an informal resume, I added the Accomplishments and the Community Activities sections to accomplish these goals.

I added the Fun Facts About Me and my favorite quote and GIF because I am a person outside my profession. And I want to add that touch to my profile.

Final Words

Maybe you have a portfolio or don't want to customize your GitHub profile. That's okay. But if you don't have a portfolio or want to show your work and who you are, you can bring your GitHub profile to the next level and show it to the world 😃.

If you have one, share your GitHub profile here in the comment! 😄

Thank you for reading!
Last, you can find me on Twitter. Let's connect! 😊

Oldest comments (2)

terabytetiger profile image
Tyler V. (he/him)

Your Readme looks so cohesive I love it 🤩

adiatiayu profile image
Ayu Adiati

Thank you, Tyler! 😄