A guide to creating my personal portfolio website using no-code

Including a directory of 40 + personal websites for inspiration | free list of tools & how to guide 💥

In an attempt to build my personal brand as a Product Manager and also create a centralised place for all of my work, accomplishments, learnings, writing and personal side projects I decided to succumb and build my own personal site.

I say succumb because I’ve always been hesitant to create my own site for a number of years, as I personally thought it was a little vain and always cringed at the fact people would put so much effort into them in an attempt to brag about everything they have accomplished.

However, whether you know it or not, you have a personal brand. When you Google yourself, what pops up? These results are the first impression people will have of you. This goes for your socials as well. The question is, do you want to allow your online reputation to take on a life of its own or do you want to control the narrative? I believe creating a personal brand is more important than ever!

I suppose some people don’t like to self promote themselves - I'm certainly that type of person.

But I didn’t get it at the time. People don’t necessarily make personal sites to brag about themselves, they create for a whole host of reasons. They create them to:

  • Display their artwork, designs, illustrations, photography
  • Share their learning and failures in their endeavours
  • Create online resumes
  • Freelancers looking to present their work and sell their services
  • Blogging

Self-promotion shouldn’t be seen a bad thing. It should be encoraged. To get promoted, you first have to promote yourself.

You have to talk about your accomplishments, get out there within your organisation and industry, and build a supportive network around you and make sure your hard work doesn’t go unnoticed.

I personally chose to build my own site from scratch because I feel sites like LinkedIn don’t work for people in a creative industry — it doesn’t allow you to define your page layout — you are confined by their layout and it lacks any personality and character. Behance and Dribble are great for designers, illustrators and visual artists to show off their work but don’t provide anywhere to add writing or other media content and again, lack the customisation a website can provide.

I wanted one place on the internet that I could aggregate everything and not have multiple locations I needed to constantly keep up to date. A place where people could find me with similar interests.

Planning 💡

Before getting stuck straight into building your site I would first define and plan the following four elements:

  1. What do I ultimately want to achieve by creating a personal website?
  2. What would my website’s design, brand, structure, colour scheme, layout etc look like?
  3. What content do I want to present on my website?
  4. How will people find my website?

Inspiration 👨‍🎨

When I set out to create my personal portfolio I first needed to get some inspiration. I'm no designer so it doesn’t come naturally to start with a blank canvas. So I jumped online and over the course of a few weeks curated a list of over 40+ personal websites I admired. You can view my list by clicking on the link below 👇

To gather some design inspiration I created a quick mood board using an awesome free tool called MoodBoard. I gathered a few sites I liked due to their aesthetic design components, layouts and structure.

My design mood board

As you will notice I went with a similar look to Matt Giovanisci’s Money Lab. Loved the simplicity, simple UX and clear call to actions.

After gathering all the inspiration I got stuck into building the site. It took me about 8 weeks spending a few hours a day writing all the copy, gather all the content and creating some new graphics.

And behold — my V1 💁‍♂️

Tools 🛠

  • 🖥 Weebly: free drag and drop website builder
  • 🌐 Hover: Domain
  • Makerlog: Embedded task list
  • 🎨 ucraft: Free logo maker
  • 📧 Privy: Embedded email capture form
  • HeyMeta: Quickly build meta tags
  • 🎨 Canva: Free web-based graphic design tool
  • 🖥 Screenly: Free browser frame mockup tool

Building and maintaining the site basically cost me nothing, just the monthly Weebly subscription I already pay for my other sites which works out around $8 a month. It’s also worth pointing out I built the site entirely using no-code.

Quick tip 🔔: It’s worth noting once you have launched your personal website you need to keep it up to date. It’s dynamic. It’s ever-changing. The moment you accomplish something new - add it to your website. When you complete a project -add it in your portfolio for all to see. You don’t want people seeing old content. Through researching hundreds of personal websites I noticed a lot hadn’t updated their websites in quite some time which looks like you have neglected it or given up! not a good first impression for new visitors to your site.

Any questions don’t hesitate to reach out in the comments below or on twitter @thisdickie. Check out my personal site and let me know what you think 💬

Written by

Lead Product Manager @ucreate_ & Founder @nocodetech (acquired) + BetaTesta — www.samdickie.me

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store