Today, we were introduced to GitHub, and I spent some time exploring how I could use it to organize my work and build out my portfolio.
While GitHub is commonly used for storing code and collaborating on projects, I was particularly interested in how I could use it to showcase my work, especially since many of my projects are currently centered around data visualization.
Building Out My Profile
One feature I found particularly interesting was GitHub's special profile repository. By creating a public repository with the exact same name as your GitHub username, GitHub automatically displays that repository's README.md directly on your profile.
Rather than serving as documentation for an individual project, this README becomes an introduction to you and your work.
I started by putting together a short introduction, linking some of my Tableau visualizations, and experimenting with ways to make the page more visually engaging.
Of course, I wanted my profile to reflect a little more of my personality, so I created a custom banner in Canva and incorporated an animated GIF.
I also experimented with HTML to customize my README beyond basic Markdown formatting. While Markdown handles headings, links, and lists, HTML gives you more flexibility when working with images and layouts.
For example, I used:
<img src="assets/newbanner.png" width="100%">
This tells GitHub to display an image from my assets folder and scale it to the available width.
There are limitations to how much you can customize, though. GitHub doesn't support arbitrary CSS styling in READMEs, so changing things like background colors and font styles isn't as straightforward as it would be on a regular website.
Still, there's a surprising amount you can do within those constraints. I enjoyed figuring out how to work with what GitHub supports to get closer to the look I wanted.
I also created a separate repository called Before-the-Data-School to organize some of my earlier Tableau projects. Eventually, I'd like to expand the documentation for each project to include the analysis, design decisions, and reasoning behind the finished visualizations.
A Few Things I Ran Into
One issue I spent some time troubleshooting was getting my Canva banner to display properly.
The README rendered on GitHub, but instead of showing the banner, it displayed a broken image.
I went back to check how I had referenced the image in my HTML and realized the file path wasn't pointing to the correct location.
My banner was stored in a folder called assets, but my original image reference didn't include that folder.
I also realized that while I had added the image to my local project folder, I hadn't included the actual file in my published repository.
This was a useful reminder that referencing a file and making that file available are two separate things. Even with the correct HTML, GitHub can't display an image that isn't where it's expected to be.
I also noticed some differences between how content looked in VS Code and how it appeared once rendered on GitHub. Spacing, heading sizes, and HTML formatting all needed a little adjustment.
I found myself going back and forth between editing, previewing, and checking the rendered result. It was a good exercise in paying attention to the smaller details that affect how someone experiences the final product.
What's Next?
I'm looking forward to experimenting with GitHub some more, especially as I build out my portfolio with new projects and certifications.
I want my profile to be a place where people can easily explore my work and understand the thought process behind it. And, of course, I still have plenty of ideas for making it look pretty!
For now, it's a work in progress, and I'm enjoying the process of making it my own.