<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: hasithasandun</title>
    <description>The latest articles on DEV Community by hasithasandun (@hasithasandunlakshan).</description>
    <link>https://dev.to/hasithasandunlakshan</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1599644%2F59fb22ff-abeb-41dc-b49d-3c15eb4763d6.jpeg</url>
      <title>DEV Community: hasithasandun</title>
      <link>https://dev.to/hasithasandunlakshan</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/hasithasandunlakshan"/>
    <language>en</language>
    <item>
      <title>Build Your Open-Source Portfolio in Under a Minute</title>
      <dc:creator>hasithasandun</dc:creator>
      <pubDate>Wed, 08 Jul 2026 17:03:54 +0000</pubDate>
      <link>https://dev.to/hasithasandunlakshan/build-your-open-source-portfolio-in-under-a-minute-41m4</link>
      <guid>https://dev.to/hasithasandunlakshan/build-your-open-source-portfolio-in-under-a-minute-41m4</guid>
      <description>&lt;p&gt;You’ve contributed to open-source projects, merged pull requests, fixed bugs, improved documentation, reviewed code, and collaborated with developers around the world.&lt;/p&gt;

&lt;p&gt;But when someone visits your portfolio, how do you present those contributions clearly and meaningfully?&lt;/p&gt;

&lt;p&gt;This was a question I started asking myself after becoming more involved in open-source communities.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;That is what led me to build &lt;strong&gt;OpenSource Showcase&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxcn9fnnnrdpvb6ec0e2o.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxcn9fnnnrdpvb6ec0e2o.png" alt=" " width="800" height="471"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Problem
&lt;/h2&gt;

&lt;p&gt;Developers often invest significant time contributing to open-source projects.&lt;/p&gt;

&lt;p&gt;These contributions may include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Pull requests&lt;/li&gt;
&lt;li&gt;Bug fixes&lt;/li&gt;
&lt;li&gt;Documentation improvements&lt;/li&gt;
&lt;li&gt;Feature implementations&lt;/li&gt;
&lt;li&gt;Code reviews&lt;/li&gt;
&lt;li&gt;Community support&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;However, these contributions are usually distributed across multiple repositories and organizations.&lt;/p&gt;

&lt;p&gt;When applying for internships, software engineering roles, open-source programs, or maintainer opportunities, it can be difficult to demonstrate the impact of this work quickly.&lt;/p&gt;

&lt;p&gt;GitHub contains the information, but visitors often need to move between repositories, pull requests, organization pages, and developer profiles to understand what someone has contributed.&lt;/p&gt;

&lt;p&gt;I wanted a simpler way to present that work.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Idea
&lt;/h2&gt;

&lt;p&gt;The idea started with a simple question:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;What if developers could showcase their open-source contributions in the same way they showcase their personal projects?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Developers should not need to manually maintain lists of pull requests or build custom portfolio sections every time they make a new contribution.&lt;/p&gt;

&lt;p&gt;Instead, there should be a tool that can retrieve real GitHub contributions, allow developers to select the work they want to highlight, and generate a professional portfolio automatically.&lt;/p&gt;

&lt;p&gt;That idea became &lt;strong&gt;OpenSource Showcase&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Is OpenSource Showcase?
&lt;/h2&gt;

&lt;p&gt;OpenSource Showcase is a command-line tool that helps developers curate their merged GitHub pull requests and generate a dedicated open-source portfolio.&lt;/p&gt;

&lt;p&gt;The tool creates a &lt;code&gt;.opensource&lt;/code&gt; GitHub repository containing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A portfolio website&lt;/li&gt;
&lt;li&gt;A formatted README&lt;/li&gt;
&lt;li&gt;Machine-readable contribution data&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The main objectives are to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Make open-source contribution data easier to showcase&lt;/li&gt;
&lt;li&gt;Reduce repetitive portfolio maintenance&lt;/li&gt;
&lt;li&gt;Help developers document their open-source journey&lt;/li&gt;
&lt;li&gt;Generate a dedicated website for their contributions&lt;/li&gt;
&lt;li&gt;Make contribution information easier for recruiters and maintainers to understand&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  How It Works
&lt;/h2&gt;

&lt;p&gt;Getting started requires a single command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx opensource-showcase
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The CLI then:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Authenticates with GitHub&lt;/li&gt;
&lt;li&gt;Retrieves your merged pull requests&lt;/li&gt;
&lt;li&gt;Allows you to select repositories and contributions&lt;/li&gt;
&lt;li&gt;Generates a dedicated &lt;code&gt;.opensource&lt;/code&gt; repository&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fccwhjuw4wtrzmxzqh530.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fccwhjuw4wtrzmxzqh530.png" alt=" " width="799" height="346"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Inside that repository, OpenSource Showcase creates the following files:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.opensource/
├── index.html
├── README.md
└── contributions.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;code&gt;index.html&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;This file contains the generated portfolio website.&lt;/p&gt;

&lt;p&gt;It presents your selected open-source contributions in a format that can be viewed and shared as a standalone portfolio.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;README.md&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;This file contains a formatted summary of your contributions.&lt;/p&gt;

&lt;p&gt;It makes the repository itself useful as a GitHub-based open-source profile.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;contributions.json&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;This file stores structured, machine-readable contribution data.&lt;/p&gt;

&lt;p&gt;It can be used for future integrations, custom portfolio implementations, analytics, or other tools that need access to contribution information.&lt;/p&gt;

&lt;p&gt;The generated website is also prepared for GitHub Pages deployment, allowing developers to publish a dedicated website for their open-source work.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fe1bjlszryu4zcva1g2rs.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fe1bjlszryu4zcva1g2rs.png" alt=" " width="800" height="461"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Instead of manually copying contribution links into a portfolio, the showcase is generated directly from actual GitHub pull requests.&lt;/p&gt;

&lt;h2&gt;
  
  
  Keeping the Portfolio Updated
&lt;/h2&gt;

&lt;p&gt;A portfolio becomes less useful when it is outdated.&lt;/p&gt;

&lt;p&gt;One of my main requirements was to make the generated showcase maintainable without forcing developers to rerun the entire setup process after every new contribution.&lt;/p&gt;

&lt;p&gt;After creating the showcase, you can run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx opensource-showcase setup-bot
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This installs a GitHub Actions workflow inside the &lt;code&gt;.opensource&lt;/code&gt; repository.&lt;/p&gt;

&lt;p&gt;Once the workflow is configured, the showcase can be managed through GitHub issue comments.&lt;/p&gt;

&lt;h3&gt;
  
  
  Add a contribution
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/showcase add https://github.com/org/repo/pull/123
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Remove a contribution
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/showcase remove https://github.com/org/repo/pull/123
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Refresh contribution data
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/showcase refresh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When you merge a new pull request, you can add it to the portfolio with a comment.&lt;/p&gt;

&lt;p&gt;When you no longer want to display a contribution, you can remove it.&lt;/p&gt;

&lt;p&gt;When repository metadata or contribution details change, you can refresh the generated data.&lt;/p&gt;

&lt;p&gt;This approach does not require:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;An additional server&lt;/li&gt;
&lt;li&gt;A custom backend&lt;/li&gt;
&lt;li&gt;A dedicated GitHub App&lt;/li&gt;
&lt;li&gt;Manual portfolio editing&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;GitHub Actions handles the automation inside the generated repository.&lt;/p&gt;

&lt;p&gt;As your open-source journey grows, your showcase can continue evolving with it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F622be844i9kvecpngtc2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F622be844i9kvecpngtc2.png" alt=" " width="800" height="695"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why a Dedicated &lt;code&gt;.opensource&lt;/code&gt; Repository?
&lt;/h2&gt;

&lt;p&gt;I wanted the portfolio to be independent from any individual project repository.&lt;/p&gt;

&lt;p&gt;A dedicated &lt;code&gt;.opensource&lt;/code&gt; repository provides a central location for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The generated website&lt;/li&gt;
&lt;li&gt;Contribution records&lt;/li&gt;
&lt;li&gt;Portfolio configuration&lt;/li&gt;
&lt;li&gt;Automation workflows&lt;/li&gt;
&lt;li&gt;GitHub Pages deployment&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It also separates open-source contribution history from personal project repositories.&lt;/p&gt;

&lt;p&gt;The repository becomes a portable representation of the developer’s open-source work.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Not Just Use a GitHub Profile?
&lt;/h2&gt;

&lt;p&gt;GitHub is excellent for hosting code and tracking development activity.&lt;/p&gt;

&lt;p&gt;However, a GitHub profile and an open-source portfolio serve different purposes.&lt;/p&gt;

&lt;p&gt;A GitHub profile contains the evidence of your activity.&lt;/p&gt;

&lt;p&gt;A portfolio provides context and presentation.&lt;/p&gt;

&lt;p&gt;A portfolio should help visitors understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Which projects you contributed to&lt;/li&gt;
&lt;li&gt;What type of work you completed&lt;/li&gt;
&lt;li&gt;Which pull requests were merged&lt;/li&gt;
&lt;li&gt;What technologies or ecosystems you worked with&lt;/li&gt;
&lt;li&gt;How your open-source experience developed over time&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;OpenSource Showcase does not replace GitHub.&lt;/p&gt;

&lt;p&gt;It creates a clearer presentation layer using contribution information already available on GitHub.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why I Built It
&lt;/h2&gt;

&lt;p&gt;My interest in open source has grown significantly over the past few years.&lt;/p&gt;

&lt;p&gt;By contributing to different projects, I had opportunities to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Learn from experienced maintainers&lt;/li&gt;
&lt;li&gt;Receive valuable code-review feedback&lt;/li&gt;
&lt;li&gt;Understand unfamiliar codebases&lt;/li&gt;
&lt;li&gt;Improve technical communication&lt;/li&gt;
&lt;li&gt;Collaborate with developers from different backgrounds&lt;/li&gt;
&lt;li&gt;Participate in real software development workflows&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;As I updated my portfolio and professional profiles, I realized there was no simple way to present all those contributions in one place.&lt;/p&gt;

&lt;p&gt;Most developer portfolio templates focus heavily on personal projects.&lt;/p&gt;

&lt;p&gt;They often provide sections for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Personal applications&lt;/li&gt;
&lt;li&gt;Technology stacks&lt;/li&gt;
&lt;li&gt;Work experience&lt;/li&gt;
&lt;li&gt;Education&lt;/li&gt;
&lt;li&gt;Blog posts&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;However, they provide limited support for presenting open-source involvement.&lt;/p&gt;

&lt;p&gt;I could have built a custom portfolio section, but I would then need to update it manually whenever I completed another contribution.&lt;/p&gt;

&lt;p&gt;Instead of solving that problem only for myself, I decided to build a reusable tool for other contributors.&lt;/p&gt;

&lt;h2&gt;
  
  
  Who Is It For?
&lt;/h2&gt;

&lt;p&gt;OpenSource Showcase may be useful for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Students building their first developer portfolio&lt;/li&gt;
&lt;li&gt;Developers applying for internships or jobs&lt;/li&gt;
&lt;li&gt;Open-source contributors&lt;/li&gt;
&lt;li&gt;Google Summer of Code applicants&lt;/li&gt;
&lt;li&gt;Freelancers&lt;/li&gt;
&lt;li&gt;Maintainers&lt;/li&gt;
&lt;li&gt;Developers building in public&lt;/li&gt;
&lt;li&gt;Anyone who wants to document their open-source journey&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It may be especially valuable for developers whose strongest experience comes from contributions made across several external repositories.&lt;/p&gt;

&lt;h2&gt;
  
  
  Installation
&lt;/h2&gt;

&lt;p&gt;You do not need to install the package globally.&lt;/p&gt;

&lt;p&gt;Run it directly using &lt;code&gt;npx&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx opensource-showcase
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To configure the automation workflow afterward, run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx opensource-showcase setup-bot
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can find the package on npm:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.npmjs.com/package/opensource-showcase" rel="noopener noreferrer"&gt;https://www.npmjs.com/package/opensource-showcase&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Looking Ahead
&lt;/h2&gt;

&lt;p&gt;This is only the beginning of the project.&lt;/p&gt;

&lt;p&gt;Some improvements I am considering include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Enhanced contribution analytics&lt;/li&gt;
&lt;li&gt;Better contribution visualizations&lt;/li&gt;
&lt;li&gt;Additional customization options&lt;/li&gt;
&lt;li&gt;Modern portfolio themes&lt;/li&gt;
&lt;li&gt;Animations&lt;/li&gt;
&lt;li&gt;Public contributor profile generation&lt;/li&gt;
&lt;li&gt;Contribution categorization&lt;/li&gt;
&lt;li&gt;Improved filtering&lt;/li&gt;
&lt;li&gt;More export formats&lt;/li&gt;
&lt;li&gt;Better support for non-code contributions&lt;/li&gt;
&lt;li&gt;Custom contribution descriptions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Community feedback will play an important role in deciding which features should be prioritized.&lt;/p&gt;

&lt;h2&gt;
  
  
  Feedback I’m Looking For
&lt;/h2&gt;

&lt;p&gt;I would especially appreciate feedback on the following areas:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Does the generated portfolio explain contributions clearly?&lt;/li&gt;
&lt;li&gt;Is the CLI workflow easy to understand?&lt;/li&gt;
&lt;li&gt;What information should be shown for each pull request?&lt;/li&gt;
&lt;li&gt;Should developers be able to add custom descriptions to contributions?&lt;/li&gt;
&lt;li&gt;What portfolio customization options would be valuable?&lt;/li&gt;
&lt;li&gt;What additional GitHub automation commands would be useful?&lt;/li&gt;
&lt;li&gt;How should documentation, design, testing, and community contributions be presented?&lt;/li&gt;
&lt;li&gt;What contribution analytics would you find useful?&lt;/li&gt;
&lt;li&gt;Did you encounter any installation or authentication issues?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Bug reports, feature suggestions, design feedback, and contributions are welcome.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Open source is about more than writing code.&lt;/p&gt;

&lt;p&gt;It is also about collaboration, learning, sharing knowledge, reviewing work, improving documentation, supporting communities, and helping projects grow.&lt;/p&gt;

&lt;p&gt;Those contributions represent real engineering experience, but they are not always easy to present professionally.&lt;/p&gt;

&lt;p&gt;If you are contributing to open source, your work deserves to be visible and understandable.&lt;/p&gt;

&lt;p&gt;OpenSource Showcase started as an attempt to solve a problem I personally experienced. I hope it can also help other developers present their contributions and document their open-source journeys.&lt;/p&gt;

&lt;p&gt;You can try it here:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.npmjs.com/package/opensource-showcase" rel="noopener noreferrer"&gt;https://www.npmjs.com/package/opensource-showcase&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I would love to hear your feedback, feature ideas, and suggestions.&lt;/p&gt;

&lt;p&gt;Happy contributing! 🚀&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
