Building a Better Portfolio: My Open-Source Next.js Portfolio Builder

Joshua Hughes 🐎 — Tue, 21 Jan 2025 16:52:33 +0000

G'day!

I've been heads-down on a project that I want to share with the DEV community: a Next.js Portfolio Builder. As web developers, we all know the importance of a strong portfolio, but the process of building and maintaining one can be, well, a bit of a pain. So, I decided to do something about it...

This project is a fully open-source monorepo built with Next.js, Yarn Workspaces, TypeScript, and Tailwind CSS. The goal? To make creating and managing web design portfolios smoother, faster, and a lot more enjoyable.

What's Under the Hood?

This isn't just a simple template. It's a robust development environment designed to streamline your workflow. Here's a peek at some of the key features:

🚀 Blazing Fast, Incremental Builds: Thanks to Yarn Workspaces and a smart build system, only the packages that have changed are rebuilt. This means significantly faster build times, especially as your portfolio grows.
🧩 Reusable UI Components: Create a library of custom React components and easily share them across all your portfolio projects. No more copy-pasting the same code over and over!
🤖 Automation is Your Friend: I've included scripts to automate the boring stuff, like generating new example projects and UI packages. Just run yarn create:example or yarn create:package, answer a few prompts, and you're good to go.
🎨 Styling Made Easy with Tailwind CSS: Tailwind's utility-first approach makes styling a breeze. Get your portfolio looking sharp without writing a ton of custom CSS.
✨ Clean Code Out of the Box: ESLint and Prettier are pre-configured to keep your code consistent and error-free.

Why I Built This (And Why You Might Care)

Honestly, I was tired of the usual portfolio project setup. Each project lived in its own silo, with its own dependencies and configuration. Sharing code between projects was a hassle, and keeping everything up-to-date was a nightmare.

This Portfolio Builder solves those problems by:

Centralizing configuration: Manage ESLint and TypeScript settings from the root of the project.
Providing a consistent development environment: Work on all your portfolio examples within a single, unified workspace.
Encouraging code reuse: Easily share components and utilities between projects.
Simplifying updates: Update dependencies and configurations in one place.

Get Involved!

This project is 100% open source, and I'd be thrilled to have you contribute! Whether you're a seasoned developer or just starting out, there are plenty of ways to get involved:

⭐ Star the repo on GitHub:

PlutonusDev / nextjs-portfolio-builder

A powerful and flexible monorepo template designed to streamline the creation and management of your web design portfolio.

nextjs-portfolio-builder is a powerful and flexible monorepo template designed to streamline the creation and management of your web design portfolio. It leverages the latest web technologies, including Next.js, Yarn Workspaces, TypeScript, and Tailwind CSS, to provide a robust and scalable development environment.

Overview

This project provides a well-organized structure for showcasing multiple web design examples, each as a separate Next.js application within a unified Yarn workspace. It also includes utilities for easily creating reusable UI component packages that can be shared across your examples.

Features

Monorepo with Yarn Workspaces: Manage multiple Next.js example projects and shared packages efficiently in a single repository.
Next.js: Build fast, SEO-friendly, and scalable React applications for each of your portfolio examples.
TypeScript: Enhance code quality, maintainability, and developer experience with static typing.
Tailwind CSS: Rapidly style your components and examples using a utility-first CSS framework.
Automated Package and Example Creation: Use…

View on GitHub

🛠️ Use the builder to create your own portfolio: Let me know what you think!
🐛 Report bugs or suggest features: Open an issue on GitHub.
💻 Contribute code: Submit a pull request with fixes or new features.

Let's Build Awesome Portfolios Together

I want to make a difference in how we create and manage our web design portfolios. I'm excited to see what can be built with it.

Putting Dev.to to work - using it as a CMS

Joshua Hughes 🐎 — Mon, 02 May 2022 22:02:41 +0000

I've been pretty lazy these past few months. Little to no progress on any of my projects, and no will to change that. Then, out of the blue, I came across the old project folder for my then portfolio website. That was the spark I needed to start working again.

So, what did I do?

I started out by searching online for other portfolios people have created for inspiration. It was then that I came across James Wallis' portfolio, and I loved the design, to understate how I felt.

The deliberate minimalism was definitely something I was aiming for, and this hit the nail on the head.

Some of the features that really stood out for me were:

The choice of using Tailwind CSS, a CSS framework that I was comfortable with,
The use of Next.JS to programmatically create dynamic pages,
The overall design; uncluttered and intuitive
Using Dev.to as a CMS to automatically populate the portfolio and blog

A CMS?

Yes! A Content Management System. With the tech that James has developed, I can harness Dev.to to act as a provider for the information I display on my website. There's a few awesome benefits you get for doing this too, like:

Dev.to stores the articles and any images that are uploaded and used.
I can use Dev.to's editor and the ability to draft an article and publish it later.
It has a built-in RSS feed that I can use to share my articles to other sites such as CodeNewbie and Medium.
Although Dev.to has the article first, the use of a canonical URL ensures that Google and other sites see my personal website as the source site for the articles.

How it works

Built using Next.JS, we have access to two helper functions (getStaticPaths and getStaticProps to generate the Articles and Portfolio pages.

Before an article is displayed on my website, it must meet the two following requirements:

Must be published (obviously) Must have a canonical URL directing to my website. This enables me to pick which articles are displayed, what the article's path will be on my website (not the post ID).
Moreover, an article with a canonical URL pointing to https://plutonus.dev/articles/... will be built as part of my blog whereas, if its canonical URL is https://plutonus.dev/portfolio/... it will be a portfolio piece.

For every article that meets the requirements, the subsequent build process is followed:

At build time, Next.js calls the getStaticPaths function which

Fetches a list of my published articles using the Dev.to API (/api/articles/me).
Converts the article's markdown to HTML.
Saves the articles to a cache file for use in the next step.
A dynamic page is created within the Next.js context for each article - the page slug will be the canonical URL path.
For each page, Next.js calls getStaticProps which fetches the page's article from the cache. The article contains the name, description and HTML.

The pages are rendered with the markdown using remark-html.
Finally, the page is rendered. I use custom elements to display the article name and description and then display the HTML I rendered earlier in getStaticPaths using remark-html. For styling, I use the Tailwind Typography plugin.

Well, that pretty much sums it up. You can view the articles I write on Dev.to, including this one, on my brand new site!

DEV Community: Joshua Hughes 🐎