Portfolio

Open-source projects categorized as Portfolio
Edit details
Language: + JavaScript + HTML + TypeScript + SCSS + Vue + MDX + Markdown + Java
Topics: React portfolio-website Nextjs personal-website JavaScript
The modern identity platform for B2B SaaS
The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
workos.com
Sponsored

Top 23 Portfolio Open-Source Projects

  • awesome-github-profile-readme

    😎 A curated list of awesome GitHub Profile READMEs πŸ“

    • Project mention: How to Make Your Awesome GitHub Profile | dev.to | 2024-01-07

  • </code></li> <li><code><style></code></li> <li><code><xmp></code></li> <li><code><iframe></code></li> <li><code><noembed></code></li> <li><code><noframes></code></li> <li><code><script></code></li> <li><code><plaintext></code></li> </ul> <blockquote> <p>πŸ’‘: To learn more, here's the <a href="https://github.github.com/gfm/#html-blocks">GitHub Flavored Markdown Spec</a> related to HTML blocks.</p> </blockquote> <h3> <a name="finding-inspiration" href="#finding-inspiration"> </a> Finding Inspiration </h3> <p>To help you get started, I suggest looking at other awesome GitHub profiles for ideas. You can go to <a href="https://github.com/abhisheknaiidu/awesome-github-profile-readme">awesome-github-profile-readme</a>, where I've found inspiration when making my profile. </p> <p>Since the profiles are open-source, you can use some of the good ideas for your awesome profile!</p> <p>You can also check out <a href="https://github.com/kshyun28">my profile</a> for some ideas. πŸ˜‰</p> <h3> <a name="adding-badges" href="#adding-badges"> </a> Adding Badges </h3> <p>For adding badges to your profile, you can check out <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a>. The repository has a wide selection to choose from, ranging from programming languages to streaming platforms like Netflix.</p> <p>If you can't find what you're looking for or want to create custom badges, you can go to <a href="https://shields.io/">shields.io</a>, which is what <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a> use. </p> <p>Here's an example where I used <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a> on my profile.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--rlrJWZvX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/badges-example_t6jyr6.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rlrJWZvX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/badges-example_t6jyr6.png" alt="Markdown badges example" loading="lazy" width="800" height="127"></a></p> <h3> <a name="adding-icons" href="#adding-icons"> </a> Adding Icons </h3> <p>For adding a <code>skills</code> or <code>tech stack</code> section to your profile, I recommend using <a href="https://github.com/tandpfun/skill-icons">skill-icons</a> which provide beautiful icons.</p> <p>If your icon is not supported, you can go to <a href="https://simpleicons.org/">simpleicons</a>, which has over 2900 SVG icons for popular brands.</p> <p>Here's an example where I used <a href="https://github.com/tandpfun/skill-icons">skill-icons</a> for my profile's tech stack section. <br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QcxDGziL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/icons-example_nyo1sn.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QcxDGziL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/icons-example_nyo1sn.png" alt="Icons example" loading="lazy" width="800" height="182"></a></p> <h3> <a name="using-emojis" href="#using-emojis"> </a> Using Emojis </h3> <p>In GitHub Flavored Markdown, you can use emojis. To see the full list of supported emojis, you can go to this <a href="https://github.com/ikatyang/emoji-cheat-sheet">emoji-cheat-sheet</a>.</p> <p>If you want to get the list of supported emojis yourself, you can use <a href="https://docs.github.com/en/rest/emojis/emojis#get-emojis">GitHub's Emoji API</a>.</p> <p>Going to <a href="https://api.github.com/emojis">https://api.github.com/emojis</a> on your browser should show a JSON response of all supported emojis.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="p">{</span><span class="w"> </span><span class="nl">"+1"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"-1"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f44e.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"100"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"1234"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f522.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"1st_place_medal"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f947.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"2nd_place_medal"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f948.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"3rd_place_medal"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f949.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"8ball"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f3b1.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="err">...</span><span class="w"> </span></code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode Exit fullscreen mode Here's an example where I used emojis for my profile. Adding GitHub Stats For adding cards and stats for your GitHub activity, I recommend using github-readme-stats. You can customize your stat cards with different layouts and themes. Here's an example where I added GitHub stats to my profile. Adding Quotes Adding random quotes to your profile can add a nice touch for visitors. I found github-readme-quotes to be useful for doing just that. Here's what it looks like on my profile. I personally like to add quotes to provide some value to my profile visitors. More Ideas For adding more infographics to your profile, I recommend checking out metrics. This is one of the most starred repositories on GitHub with the github-profile topic, so I couldn't leave this out. Then I found this beautiful resource beautify-github-profile, where you can find more ways to customize your profile. If you're also feeling adventurous, you can explore the github-profile topic here. The repositories are sorted by the number of stars by default. Feel free to explore repositories with the github-profile topic. You might even find ones that aren't used as much but are just what you need. GitHub Profile Achievements While this is not related to customizing your GitHub profile's README.md, I feel the need to include it. If you go to your GitHub profile, you'll notice an Achievements section on the left sidebar. These achievements are fun to collect and can improve your overall GitHub profile. To learn more about what achievements are available and how to get them, check out the list of GitHub profile achievements. Conclusion To recap, we walked through how to create your GitHub profile. Then I showed how to format your profile with GitHub Flavored Markdown and HTML. After that, I shared where you can get inspiration for your own profile. Finally, I gave tips and resources on ways to customize your profile. I hope this can help you in making your awesome GitHub profile. I'd love to see what you can come up with! Thank you for reading and feel free to comment or connect with me here. Resources Managing your GitHub profile README GitHub Basic Writing and Formatting Syntax awesome-github-profile-readme repository markdown-badges repository shields.io skill-icons repository simpleicons.org emoji-cheat-sheet GitHub's Emoji API github-readme-stats repository github-readme-quotes repository metrics repository beautify-github-profile repository repositories with "github-profile" topic github-profile-achievements list

  • simplefolio

    ⚑️ A minimal portfolio template for Developers

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo

  • hugo-PaperMod

    A fast, clean, responsive Hugo theme.

    • Project mention: Engineers who have a personal website/blog, what are you using to host/generate it? | /r/ExperiencedDevs | 2023-05-01

    I use Hugo with the papermod theme

  • hugo-blox-builder

    😍 EASILY BUILD THE WEBSITE YOU WANT - NO CODE, JUST MARKDOWN BLOCKS! δ½Ώη”¨ε—θ½»ζΎεˆ›ε»Ίδ»»δ½•η±»εž‹ηš„η½‘η«™ - ζ— ιœ€δ»£η γ€‚ δΈ€δΈͺεΊ”η”¨η¨‹εΊοΌŒζ²‘ζœ‰δΎθ΅–ι‘ΉοΌŒζ²‘ζœ‰ JS

  • leerob.io

    ✨ My portfolio built with Next.js, Tailwind, and Vercel.

    • Project mention: Upgrade my blog to Next.js 13.4 with MDX, Prisma, Tailwindcss, Planetscale, Giscus and Contentlayer | /r/nextjs | 2023-07-19

    Shen Lu's portfolio, inspired by leerob.io.

  • nextjs-notion-starter-kit

    Deploy your own Notion-powered website in minutes with Next.js and Vercel.

  • developerFolio

    πŸš€ Software Developer Portfolio Template that helps you showcase your work and skills as a software developer.

    • Project mention: Okay portfolio vs no portfolio | /r/csMajors | 2023-12-11

    Here's a more interesting one

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo

  • devportfolio

    A lightweight, customizable single-page personal portfolio website template built with JavaScript and Sass

    • Project mention: Okay portfolio vs no portfolio | /r/csMajors | 2023-12-11

    Here's a simple one

  • LeetHub

    Automatically sync your leetcode solutions to your github account - top 5 trending GitHub repository

    • Project mention: LeetHub VS Leet-Code-and-GFG - a user suggested alternative | libhunt.com/r/LeetHub | 2023-06-01

  • vcard-personal-portfolio

    vCard is a fully responsive personal portfolio website, responsive for all devices.

  • Portfolio

    My self coded personal website build with React.js (by soumyajit4419)

  • ghostfolio

    Open Source Wealth Management Software. Angular + NestJS + Prisma + Nx + TypeScript 🀍

    • Project mention: Hacktoberfest 2023 with Ghostfolio | dev.to | 2023-09-26

    At Ghostfolio, we are very excited to participate in Hacktoberfest for the second time, looking forward to connecting with new and enthusiastic open-source contributors. Hacktoberfest is a month-long celebration of open-source projects, their maintainers, and the entire community of contributors. Each October, open source maintainers from all over the world give extra attention to new contributors while guiding them through their first pull requests on GitHub. This year the event celebrates its 10th anniversary.

  • portfolio-ideas

    A curation of awesome portfolio website ideas for developers and designers to draw inspiration from. Raise a pull request to add more. πŸ’œ

    • Project mention: πŸ’‘ Discover Your Life Goals and Make Your First Open Source Contribution with Before I Die Code πŸš€ | dev.to | 2023-08-18

    Additional assistance and recourse came from studying other open source projects and developers repositories. For example, while searching GitHub, I found the frontend developer, open source developer & technical writer Victor Eke. Of the many open source projects that he has assisted with and created, I used his repository Portfolio Ideas to get ideas on the structure of documentation and, in additionally, reading his blog article β€œHow my open source project got 1000 stars on GitHub in 4 months” on what he did to surpass the 1,000 stars on his open source project. I also studied one of the most popular stared first-contributions repositories (which has over 37,000 stars) for the excellent structure of the documentation. And lastly, to add more visual interest to the documentation found throughout the Before I Die Code, I used the Animated Fluent Emojis open source project by Tarikul Islam Anik.

  • masterPortfolio

    πŸ”₯ The Complete Customizable Software Developer Portfolio Template which lets you showcase your work and provides each and every detail about you as Software Developer.

  • Dopefolio

    Dopefolio πŸ”₯ - Portfolio Template for Developers πŸš€

  • playground-macos

    My portfolio website simulating macOS's GUI, developed with React and UnoCSS.

  • portfolio

    Track and evaluate the performance of your investment portfolio across stocks, cryptocurrencies, and other assets.

    • Project mention: Show HN: Portfolio Performance An open source tool to calculate investments | news.ycombinator.com | 2023-12-28

  • awesome-portfolio-websites

    A community maintained open source project aimed at making a personal portfolio for researchers, developers, and analysts simple, fast, and less cumbersome. We make sure you have a full-fledged website to showcase your work while you can spend time on your learning and innovative endeavors. (by smaranjitghose)

  • react-resume-template

    A personal resume website template built with React.js, Typescript, Next.js, and styled with Tailwind css

  • gitprofile

    πŸš€ Create and deploy a dynamic portfolio by just providing your GitHub username.

  • react-portfolio-template

    Modern React Portfolio Template (FREE)

    • Project mention: What am I doing wrong ? | /r/cscareerquestions | 2023-06-08

    Your project portfolio I actually thought was a troll at first, the colors, alignments, fonts, are all just horrendous. No offense, you're not a designer. But just use a nice clean template, there are hundreds out there. Use a UI kit, something. It has to be readable at the very least. Here, free - https://github.com/chetanverma16/react-portfolio-template

  • home

    The personal website/portfolio template by Hashir Shoaib. Built using React and Bootstrap. (by hashirshoaeb)

  • personal-site

    My personal website - built with React, React-Router, React-Snap for Static-Export, and GitHub Pages. (by mldangelo)

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020).

Portfolio related posts

Index

What are some of the best open-source Portfolio projects? This list will help you:

Project Stars
1 awesome-github-profile-readme 22,422
2 simplefolio 13,125
3 hugo-PaperMod 8,616
4 hugo-blox-builder 7,787
5 leerob.io 6,853
6 nextjs-notion-starter-kit 5,796
7 developerFolio 4,992
8 devportfolio 4,276
9 LeetHub 3,792
10 vcard-personal-portfolio 3,770
11 Portfolio 3,596
12 ghostfolio 3,568
13 portfolio-ideas 3,351
14 masterPortfolio 3,228
15 Dopefolio 3,219
16 playground-macos 3,109
17 portfolio 2,649
18 awesome-portfolio-websites 2,221
19 react-resume-template 1,728
20 gitprofile 1,395
21 react-portfolio-template 1,236
22 home 1,212
23 personal-site 1,191

Sponsored
Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com