How I Created My Personal Portfolio Website Using No-code

How I Created My Personal Portfolio Website Using No-code

In this post I discuss why created a personal, portfolio as a Product Manager and Maker, how I built it and the importance of creating a personal brand. I also provide 40+ examples.

Sam Dickie Personal site example

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.

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.

Mood board for samdickie.me

My design moodboard

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 💁‍♂️

Sam Dickie Personal website portfolio example

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.

Design
how-to