A portfolio is vital for showcasing your skills, thought process, and creativity. For many designers today, a web portfolio remains the most accessible and effective way to present your work—whether it's in fashion, game development, UX design, or other fields.

As a multidisciplinary designer, I've personally struggled to create a web portfolio that fully represents me. It feels disingenuous to build a website that only highlights one facet of my experience when there's so much more to share. There's also a lack of templates designed for this purpose; most imply you specialize in a single area.

If you find yourself in a similar position, it can take significant effort to discover inspiring examples, a process that can easily lead to scope creep and overwhelm.

Define your objective

In my view, design portfolios fall into two main categories: those that contain projects and those that are projects themselves. Both types share core requirements: they need to effectively showcase your work, be visually appealing, and remain accessible to everyone. The key differentiator lies entirely in your purpose for creating it.

Over several iterations of my personal website, I was learning React, a frontend JavaScript library, and aimed to apply my new skills. I spent weeks refining aspects like styling, responsiveness, and performance optimization, only to find my to-do list continuously expanding. I wanted my website to be a project in itself, demonstrating my abilities, but after many attempts, I had to accept a tough truth: it wasn't serving its primary purpose well enough, and showcasing only my web development skills wasn't my sole objective.

My advice to you: Don't lose sight of what your website's purpose is. What's most important is having an online presence. Before you dive into a custom project, find a free template and get a basic website live.

Creating your website

This website, for instance, began as a Framer template. I own my URL, dylanjkerr.com, and connect it to this site, which Framer then hosts. As someone who values full access to code and customization, I was stubbornly resistant to using a web-builder tool for far too long.

What ultimately swayed me was my prior experience with Framer Motion, their animation library, in my React projects; this familiarity made the transition to their broader tools more comfortable.

While I'm sure numerous niche options exist, to simplify the decision for anyone considering building a website, here are the main paths:

1. Website builder tools
   These are no-code/low-code website builders that allow you to drag and drop elements onto a canvas and then host your website. Prominent examples include: Wix, Squarespace, GoDaddy, Shopify, Webflow, and Framer.

   
   

2. Content management systems (CMS)
   A CMS is a type of website builder tool that emphasizes creating repeatable, templated content in large quantities. In essence, you can generate entire posts or pages on a website by managing text and images from a separate web interface. Examples include WordPress, and some web builder tools, such as Framer, even incorporate CMS functionalities.

   
   

3. Write some code
   Web development can seem daunting, and frankly, it often is! The constant emergence of new JavaScript libraries and frameworks can make understanding the underlying complexity feel impossible. However, if you're interested in learning, it's important to realize that you don't need to get overly fancy to create something good. Furthermore, with the aid of generative AI, you can "vibe code" your way to a new site in minutes- it just requires some foundational knowledge of hosting and editing.

I hope you learned something new, or perhaps I helped you resist the siren's song that is redoing your entire portfolio for the 100th time. Thanks for reading!

-DK