Evavic44/portfolio-ideas: a Markdown table of real developer portfolios
A curation of awesome portfolio website ideas for developers and designers to draw inspiration from. Raise a pull request to add more. 💜
At a glance
- What is it?
- Portfolio Ideas is a curated Markdown list of working developer and designer portfolio sites, each with a screenshot, live URL, source repository and tech stack. It is a reference for inspiration, not a template or a generator.
- Who is it for?
- Adopt Portfolio Ideas if you are a developer or designer who wants to see how real portfolio sites are built before writing your own, and if you are willing to click through to the live URL and the source repository rather than copy a template. Do not adopt it if you need a starter kit, a design system or a component library: the repository ships a Markdown table and a VitePress docs site, not a portfolio.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository last received commits 59 days ago.
- What is it written in?
- Mainly Markdown, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on September 30, 2026, and from our analysis. They are not legal advice.
Editorial analysis
The problem Portfolio Ideas addresses: a table instead of a tutorial
Most advice about building a developer portfolio is either a listicle of screenshots or a tutorial that builds one specific site. Portfolio Ideas takes a third position. It is a curation of portfolio website ideas for developers and designers, presented as a single Markdown table where every row is a real portfolio that exists on the web. The README states the intent plainly: the collection is for drawing inspiration when someone decides to create their own. The audience is developers, designers and students who are about to build a personal site and want to compare concrete examples before committing to a layout, a stack or a tone.
The useful part is the row structure. Each entry carries an author, a screenshot, a live URL, a repository link and a tech stack. That last column is what separates this from a Pinterest board. A row for Brittany Chiang lists React, Gatsby and Styled-components; a row for Tania Rascia lists React, Gatsby, CSS, Netlify and NodeJS. You can filter mentally by what you already know, or by what you want to learn. The repository is MIT licensed, so the curation itself can be reused.
How the repository is organised: Markdown table, VitePress docs, extract script
The data lives in README.md between two HTML comment markers: a line reading PORTFOLIO LINE START and a matching end marker. Everything between them is the table. This is a deliberate design choice, because the project also publishes a web view at portfolio-ideas.vercel.app/portfolio.html, and the table is the single source that feeds it.
The tooling around that table is small. package.json declares vitepress and vue as dependencies, with husky, lint-staged and prettier as devDependencies. Three scripts drive a documentation site: docs:dev, docs:build and docs:serve, all pointed at the docs directory. A fourth script, deploy, runs ./extract.sh, which is the step that turns the README table into the published page. A lint-staged rule runs npx prettier --write over md, ts, js, tsx and jsx files, and a prepare script installs husky hooks. The test script prints "no test available", which is honest about what this repository is: content plus a build step, not an application with a test suite.
There is no database, no API and no search index in what the repository exposes. The data flow is README.md to extract.sh to a static page. That means the freshness of the published site depends entirely on someone running the deploy script after the table changes.
Installing Portfolio Ideas locally and previewing the docs site
There is nothing to install to read the collection. Open README.md on GitHub and the table renders. If you want the local documentation site that VitePress builds, clone the repository and install the declared dependencies. The package.json lists vitepress and vue as runtime dependencies and husky, lint-staged and prettier as devDependencies, so a standard install covers both.
git clone https://github.com/Evavic44/portfolio-ideas.git
cd portfolio-ideas
npm installAfter the install finishes, start the VitePress dev server with the script the package.json defines. This serves the contents of the docs directory.
npm run docs:devVitePress prints a local URL in the terminal when the server is ready. That is the preview of the docs site, not of the README table itself; the table is the source file you edit. To produce a static build instead, run npm run docs:build, and npm run docs:serve to serve that build. The deploy script is separate: it runs ./extract.sh, which is the step the project uses to publish the portfolio page. If you only want to browse examples, none of this is necessary.
Contributing a portfolio and the limits of a curated list
The README points contributors at CONTRIBUTING.md for the guidelines, and the table format is strict: author, screenshot, live URL, repository link, tech stack. A row where the repository column says None is allowed, as the entry for Rekhchand Sahu shows. The screenshot column expects a hosted image URL, which means a contributor has to upload an image somewhere before the row is complete. That is a real friction point for a first pull request.
The bigger limitation is that a curated list ages. Every row links to a third-party domain and, in most cases, a third-party repository. When an author changes a domain, redesigns a site or deletes a repository, the row keeps pointing at the old target until someone notices and opens a pull request. The project does not control those targets, and nothing in the repository layout suggests an automated link checker. Treat the table as a starting point and click through before you cite an example.
There is also a mismatch between the project and the search questions people ask about it. Portfolio Ideas does not tell you what to write in a portfolio, and it does not walk you through creating one. It shows finished work. If you need a process, a checklist or a template, this repository will not supply it.
Portfolio Ideas compared with a portfolio starter template
The closest alternative is a portfolio starter template, such as the Gatsby-based v4 repository linked in the table itself. The difference in approach is the direction of the work. A starter gives you one opinionated implementation you clone and edit: routing, styling, build config and deployment are already decided, and your job is to replace the content. Portfolio Ideas gives you no implementation at all. It gives you a set of finished sites to compare, and you still choose and assemble your own stack.
That trade-off cuts both ways. A starter gets you to a deployed site faster, but it also gets you a site that looks like everyone else who cloned it. Browsing a curated table first can push you toward a layout or a stack you would not have picked by default, and the tech stack column makes the cost of each choice visible. If you already know exactly what you want to build, the table is a detour. If you do not, it is a faster way to narrow down than opening twenty tabs from a search engine.
Maintenance, licence and the cost of keeping the table current
The repository is not archived, and the most recent push recorded is 2026-08-02. The most recent tagged release is v1.0.4 (new-ui) from 2024-06-09, with earlier tags v0.07 and v0.0.6. The version field in package.json still reads 0.0.1, so the tag history and the package metadata do not agree; do not read the tag numbers as a release cadence for the content.
Upgrade cost is low because the runtime surface is small. VitePress and Vue are the only runtime dependencies, and the build scripts are three one-line commands. A VitePress major change is the main thing that would force edits to the docs setup. The content itself has no upgrade path: rows are added and corrected by pull request, and a stale row stays stale until a human fixes it. There is a renovate.json at the top level, which suggests dependency updates are automated through Renovate, though the file's contents are not visible here.
The licence is MIT. That permits reuse and modification of the repository's own content and code, with the usual requirement to keep the licence notice. It does not extend to the portfolios listed in the table: those sites and their source repositories carry their own licences, and the README does not claim otherwise. Check the licence of any repository you copy code from, because a permissive licence on the curation says nothing about the projects it curates.
Editorial conclusion
Adopt Portfolio Ideas if you are a developer or designer who wants to see how real portfolio sites are built before writing your own, and if you are willing to click through to the live URL and the source repository rather than copy a template. Do not adopt it if you need a starter kit, a design system or a component library: the repository ships a Markdown table and a VitePress docs site, not a portfolio. Verify first that the entries you care about still resolve, since the table links to third-party domains and repositories that this project does not control, and check the CONTRIBUTING.md guidelines before opening a pull request, because the table format is enforced.
Frequently asked questions
What is an example of a portfolio in Portfolio Ideas?
The table includes entries such as Brittany Chiang's v4.brittanychiang.com, built with React, Gatsby and Styled-components, and Tania Rascia's taniarascia.com, built with React, Gatsby, CSS, Netlify and NodeJS. Each row also carries a screenshot and a link to the source repository where one exists.
How do I create my portfolio with Portfolio Ideas?
Portfolio Ideas does not generate or scaffold a portfolio. It is a curation of existing portfolio sites with screenshots, live URLs, repositories and tech stacks, intended for inspiration when you decide to build your own.
How do I create a student portfolio using this list?
The repository does not document a student-specific process. The README describes the collection as portfolio ideas for developers and designers to draw inspiration from, so the intended use is browsing entries and following the live URL or repository link of the ones that fit your goals.
What should I write in my portfolio?
Portfolio Ideas does not answer this. The README does not document content guidance, writing advice or a checklist; it documents how to browse the curated table and how to contribute a portfolio to it.
Official sources
Add this badge to your README
If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.
[](https://hysenlabs.com/projects/evavic44-portfolio-ideas)