You’ve contributed to open-source projects, merged pull requests, fixed bugs, improved documentation, reviewed code, and collaborated with developers around the world.
But when someone visits your portfolio, how do you present those contributions clearly and meaningfully?
This was a question I started asking myself after becoming more involved in open-source communities.
GitHub provides contribution graphs, pull request histories, and repository activity. However, presenting those contributions professionally on a personal website was not as straightforward as I expected.
That is what led me to build OpenSource Showcase.
Inside that repository, OpenSource Showcase creates the following files:
.opensource/
├── index.html
├── README.md
└── contributions.json
index.html
This file contains the generated portfolio website.
It presents your selected open-source contributions in a format that can be viewed and shared as a standalone portfolio.
README.md
This file contains a formatted summary of your contributions.
It makes the repository itself useful as a GitHub-based open-source profile.
contributions.json
This file stores structured, machine-readable contribution data.
It can be used for future integrations, custom portfolio implementations, analytics, or other tools that need access to contribution information.
The generated website is also prepared for GitHub Pages deployment, allowing developers to publish a dedicated website for their open-source work.
Why a Dedicated .opensource Repository?
I wanted the portfolio to be independent from any individual project repository.
A dedicated .opensource repository provides a central location for:
- The generated website
- Contribution records
- Portfolio configuration
- Automation workflows
- GitHub Pages deployment
It also separates open-source contribution history from personal project repositories.
The repository becomes a portable representation of the developer’s open-source work.
Why Not Just Use a GitHub Profile?
GitHub is excellent for hosting code and tracking development activity.
However, a GitHub profile and an open-source portfolio serve different purposes.
A GitHub profile contains the evidence of your activity.
A portfolio provides context and presentation.
A portfolio should help visitors understand:
- Which projects you contributed to
- What type of work you completed
- Which pull requests were merged
- What technologies or ecosystems you worked with
- How your open-source experience developed over time
OpenSource Showcase does not replace GitHub.
It creates a clearer presentation layer using contribution information already available on GitHub.
Why I Built It
My interest in open source has grown significantly over the past few years.
By contributing to different projects, I had opportunities to:
- Learn from experienced maintainers
- Receive valuable code-review feedback
- Understand unfamiliar codebases
- Improve technical communication
- Collaborate with developers from different backgrounds
- Participate in real software development workflows
As I updated my portfolio and professional profiles, I realized there was no simple way to present all those contributions in one place.
Most developer portfolio templates focus heavily on personal projects.
They often provide sections for:
- Personal applications
- Technology stacks
- Work experience
- Education
- Blog posts
However, they provide limited support for presenting open-source involvement.
I could have built a custom portfolio section, but I would then need to update it manually whenever I completed another contribution.
Instead of solving that problem only for myself, I decided to build a reusable tool for other contributors.
Who Is It For?
OpenSource Showcase may be useful for:
- Students building their first developer portfolio
- Developers applying for internships or jobs
- Open-source contributors
- Google Summer of Code applicants
- Freelancers
- Maintainers
- Developers building in public
- Anyone who wants to document their open-source journey
It may be especially valuable for developers whose strongest experience comes from contributions made across several external repositories.
Installation
You do not need to install the package globally.
Run it directly using npx:
npx opensource-showcase
To configure the automation workflow afterward, run:
npx opensource-showcase setup-bot
You can find the package on npm:
I would love to hear your feedback, feature ideas, and suggestions.
Happy contributing! 🚀
SOCIAL SHARE CARD GENERATOR