I’ve always been inspired by the openness within the developer community—the way they freely share solutions and source code for anyone to explore. Beyond the vast array of available learning materials and self-study courses, there are entire repositories filled with code you can dive into, adapt, learn, and borrow solutions from for your projects. In contrast, the graphic design world tends to be more closed off. Designers often showcase only final results, with little insight into their creative process. For me, the openness in development helps move the whole field forward. We all benefit from those contributions when everyone can access knowledge and tools. A Multidisciplinary Approach to Design While graphic design has always been my core focus, I’ve been drawn to other fields that intersect with it—motion design, illustration, typography, photography, and digital design. This doesn't mean I have mastered each profession (there are always far more experienced professionals in each specific field), but I believe in a multidisciplinary approach. Understanding the foundations of a field before diving into it helps shape your design perspective and ensures that the practical aspects of the medium inform your work. For instance, in graphic design, it’s important to understand the specifics of printing before preparing a layout. That knowledge guides the design process. Similarly, when I began designing a website for my design studio, I became interested in front-end and back-end website development. At that time, I had some knowledge of HTML, CSS, and a little JavaScript, so the first version of the site I built manually without any CMS. But soon, I realized I needed a more flexible content management system. Exploring CMS Options A developer friend of mine recommended Kirby, a flexible and user-friendly file-based PHP CMS that’s ideal for small sites. Using it helped me understand the core concept of setting up content management systems and integrating it with the frontend, which had previously felt so complex. Later I even built a student exhibition website using Kirby, where 150 students uploaded their work themselves, but that’s a story for another day. This opened the door for me to explore new tools, and I started experimenting with Gatsby (a React-based framework for static sites) and Sanity (a headless CMS). I set myself a challenge: to update my portfolio website using these tools to learn more about them. In that process, I was greatly helped by the large amount of knowledge, documentation, and video tutorials available: it's a fascinating process. Once I finished and published my studio’s website, I had an idea. Why not create a tool for other designers? Specifically, an open-source portfolio template that any designer or visual creator could use to build their own website. Visual-First Approach & Customisation There are plenty of portfolio templates built with Next.js which can be easily deployed on Vercel. But those templates are usually made for developers with a focus on development specifics. Designers, on the other hand, need a different approach—one that highlights their visual work. That’s why, for this template, I used a grid layout with large project previews and project pages that emphasize imagery and content. Customization is also key for designers. When building the template, I included features like setting custom background and text colors, reordering projects displayed on the main page, and creating project pages using modular content blocks—images, video embeds, and text. The idea is to be able to easily compile a story about a particular project out of predefined content pieces, creating an ideal visual storytelling. I used Tailwind CSS for the frontend, which makes styling and adapting content for different devices extremely easy. Thanks to Sanity’s powerful content management and the integration with Next.js, users can update content without needing to rebuild with each content update through Webhook-triggered Incremental Static Revalidation. This makes it easy to populate the portfolio with projects from scratch, keep it updated, and add projects on the go when a new project is completed and ready to be published. Easy Deployment and Accessibility Using Vercel, a user can deploy a copy of their own website with just one click, even with no development experience. The only thing needed is to register a set of free accounts: GitHub, Vercel, and Sanity. And for those who are more technically inclined, the code is open-source, so they can tweak it to suit their needs. Vercel and Sanity have more than enough traffic and content storage for a small portfolio site, and with the provided CDN, loading time is minimized, which is important for a site with a large amount of visual content. The only thing left is to connect a custom domain, which will make the portfolio site truly personal for the designer. This template is perfect for junior and experienced designers, even small design studios. One of the biggest challenges for designers in creating a portfolio is the blank page syndrome—getting stuck while being overwhelmed with designing and structuring their future portfolio website. I’ve taken care of the design and layout part, so all designers need to do is select their best projects and publish them. I named the template Collected, as it’s a place to collect and showcase the best work. I’ve created a small dedicated website to showcase the template, complete with a visual overview, a demo version, step-by-step instructions, and a video screencast where I show how to set up a portfolio website. My goal is to make the process as intuitive and visual as possible, showing designers how they can easily create a professional portfolio site without development experience. collected.to What’s next Looking ahead, I plan to keep expanding the template’s functionality. I want to add options for choosing fonts from Google Fonts, changing the grid’s column layout on the main page, and adding even more flexibility in the project page builder. I’m excited to see how the design community will use and adapt this project. Some of my fellow designers have already shared their work using this template, and I am thrilled to see what they have created. I think that by encouraging a culture of openness, we can push design forward, creating better tools and more collaborative opportunities, similar to what I've seen in the developer community. I hope this project will inspire more designers to explore the technical aspects of their craft, as understanding the tools we use is as important as creating designs in today's digital world. The complete source code for this project can be found on GitHub. I’ve always been inspired by the openness within the developer community—the way they freely share solutions and source code for anyone to explore. Beyond the vast array of available learning materials and self-study courses, there are entire repositories filled with code you can dive into, adapt, learn, and borrow solutions from for your projects. In contrast, the graphic design world tends to be more closed off. Designers often showcase only final results, with little insight into their creative process. For me, the openness in development helps move the whole field forward. We all benefit from those contributions when everyone can access knowledge and tools. A Multidisciplinary Approach to Design While graphic design has always been my core focus, I’ve been drawn to other fields that intersect with it—motion design, illustration, typography, photography, and digital design. This doesn't mean I have mastered each profession (there are always far more experienced professionals in each specific field), but I believe in a multidisciplinary approach. Understanding the foundations of a field before diving into it helps shape your design perspective and ensures that the practical aspects of the medium inform your work. For instance, in graphic design, it’s important to understand the specifics of printing before preparing a layout. That knowledge guides the design process. Similarly, when I began designing a website for my design studio, I became interested in front-end and back-end website development. At that time, I had some knowledge of HTML, CSS, and a little JavaScript, so the first version of the site I built manually without any CMS. But soon, I realized I needed a more flexible content management system. Exploring CMS Options A developer friend of mine recommended Kirby , a flexible and user-friendly file-based PHP CMS that’s ideal for small sites. Using it helped me understand the core concept of setting up content management systems and integrating it with the frontend, which had previously felt so complex. Later I even built a student exhibition website using Kirby, where 150 students uploaded their work themselves, but that’s a story for another day. This opened the door for me to explore new tools, and I started experimenting with Gatsby (a React-based framework for static sites) and Sanity (a headless CMS). I set myself a challenge: to update my portfolio website using these tools to learn more about them. In that process, I was greatly helped by the large amount of knowledge, documentation, and video tutorials available: it's a fascinating process. Kirby Gatsby Sanity Once I finished and published my studio’s website, I had an idea. Why not create a tool for other designers? Specifically, an open-source portfolio template that any designer or visual creator could use to build their own website. Visual-First Approach & Customisation There are plenty of portfolio templates built with Next.js which can be easily deployed on Vercel. But those templates are usually made for developers with a focus on development specifics. Designers, on the other hand, need a different approach—one that highlights their visual work. That’s why, for this template, I used a grid layout with large project previews and project pages that emphasize imagery and content. Customization is also key for designers. When building the template, I included features like setting custom background and text colors, reordering projects displayed on the main page, and creating project pages using modular content blocks—images, video embeds, and text. The idea is to be able to easily compile a story about a particular project out of predefined content pieces, creating an ideal visual storytelling. I used Tailwind CSS for the frontend, which makes styling and adapting content for different devices extremely easy. Thanks to Sanity’s powerful content management and the integration with Next.js, users can update content without needing to rebuild with each content update through Webhook-triggered Incremental Static Revalidation. This makes it easy to populate the portfolio with projects from scratch, keep it updated, and add projects on the go when a new project is completed and ready to be published. Easy Deployment and Accessibility Using Vercel, a user can deploy a copy of their own website with just one click, even with no development experience. The only thing needed is to register a set of free accounts: GitHub, Vercel, and Sanity. And for those who are more technically inclined, the code is open-source , so they can tweak it to suit their needs. Vercel and Sanity have more than enough traffic and content storage for a small portfolio site, and with the provided CDN, loading time is minimized, which is important for a site with a large amount of visual content. The only thing left is to connect a custom domain, which will make the portfolio site truly personal for the designer. open-source This template is perfect for junior and experienced designers, even small design studios. One of the biggest challenges for designers in creating a portfolio is the blank page syndrome—getting stuck while being overwhelmed with designing and structuring their future portfolio website. I’ve taken care of the design and layout part, so all designers need to do is select their best projects and publish them. I named the template Collected , as it’s a place to collect and showcase the best work. I’ve created a small dedicated website to showcase the template, complete with a visual overview, a demo version, step-by-step instructions, and a video screencast where I show how to set up a portfolio website. My goal is to make the process as intuitive and visual as possible, showing designers how they can easily create a professional portfolio site without development experience. Collected collected.to collected.to collected.to What’s next Looking ahead, I plan to keep expanding the template’s functionality. I want to add options for choosing fonts from Google Fonts, changing the grid’s column layout on the main page, and adding even more flexibility in the project page builder. I’m excited to see how the design community will use and adapt this project. Some of my fellow designers have already shared their work using this template, and I am thrilled to see what they have created. I think that by encouraging a culture of openness, we can push design forward, creating better tools and more collaborative opportunities, similar to what I've seen in the developer community. I hope this project will inspire more designers to explore the technical aspects of their craft, as understanding the tools we use is as important as creating designs in today's digital world. The complete source code for this project can be found on GitHub. The complete source code for this project can be found on GitHub . GitHub

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

This post provides insights into new product. 

Bridging Design and Development: Creating an Open-Source Portfolio Website Template for Designers

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

I Built An Open-Source Website Platform for Group Exhibitions—Here's How

30 Next.js Interview Questions: Get Ready for Your Dream Job

5 reasons to consider Next.js for your next projects

5 Reasons to Convert from React to Next.js

50+ GitHub Repositories Every Front-End Developer Needs

6 Easy Steps to Use Next Auth in Next.js 13 Using Route Handler

I Built An Open-Source Website Platform for Group Exhibitions—Here's How

30 Next.js Interview Questions: Get Ready for Your Dream Job

5 reasons to consider Next.js for your next projects

5 Reasons to Convert from React to Next.js

50+ GitHub Repositories Every Front-End Developer Needs

6 Easy Steps to Use Next Auth in Next.js 13 Using Route Handler

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps