Build a portfolio website

It’s hard to know where to start when building a portfolio website and there is a lot to consider. I have tried to simplify this as much as possible. Putting it down on paper (so to speak) to help myself as much as anyone else.

Get Organised

If like me you have an understanding of design and how you want to portray yourself, before you begin the process of building a portfolio website you should create a mock up. How many pages? My site is pretty simple an About me (Homepage), a Work and a Contact page (and now a Services section, as I’ve gone freelance). Start with the Homepage, this will be all about you and will hold the keyword phrase that you want to be found on search engines for. Mock it up, if you have any reviews from clients this might be where to put them, show off a bit and big yourself up.

Fonts

It is good to use only 2 fonts ‘a font pairing’  on your site. I love using fontjoy.com for this, it’s a brilliant resource as once you have chosen your pairing you can click on the font names and download the .ttf font files from google fonts easily.

Colours

Keep it simple and readable. Contrast is important for readability not just for humans, crawler bots (Google spiders) will also rate your site on readability for the visually impaired. You will need to use Hex colours for web, the ones that start with # e.g. my green is #8EC63D.

Images

Wherever possible use only images which you own. If you have to use an image from another source you should not just grab something from Google images. There are lots of paid for image sites but there are also a few great free ones, my favourite is unsplash.com. Images should be resized to fit your design and be small in size. If you are thinking of putting images into a carousel these should all be the same size (pixel ratio). There is so much to consider here as if your image is too big it will slow down your site but if it’s too small it will become pixelated. If you have access to Photoshop then exporting to web and devices under the file tab will take care of a lot of the conversion for you, I use gifs. If you don’t have Photoshop you can do resizing on pixlr.com using the crop tool for free (no sign up) or for more advanced photo editing you can sign up for picmonkey.com.

Menu / Header / Footer

This is where I usually start my site build. It appears on every page, it needs to be clean and super easy to use. Do you have a logo? Do you need one? If you are your brand perhaps you want to use a photo of yourself like on LinkedIn. You will also need something that works for your Favicon, (I had no idea what this was either) the small icon which appears in a google search and in the tab at top of the browser. It is best if your logo is a square/circle shape, you can use an online tool to convert your logo to the right file type (.ico) for you, I used favicon-generator.org for mine.

Get a host and a domain

Everyone would like there own domain name without the wordpress.org in the domain name and splattered in your footer. The only way to do this is to pay for a hosting provider who will usually throw in a free domain and security certificate. Generally the first year is at a reduced rate, if you are building the site as part of your CV when you land your dream job you can back up your site and cancel the subscription. I have used ionos.co.uk for all my sites, I highly recommend them for price and reliability they are also incredibly helpful and efficient with 24/7 telephone support. For a WordPress portfolio site you will only need the basic managed package.

Once you have signed up you can choose your domain or use a system domain to build your site then switch to your chosen domain later. If possible your domain should match your keywords or phrase. But with a portfolio website you might be best to stick with your name. I would say use .co.uk where possible if you are UK based, .com if you are going international. Select use your domain and install WordPress through your host. Once you have finalised your domain name you should activate the SSL certificate, this changes your site from http to https and tells browsers that this is a safe site.

Get ready to build

Login to your host account and click through to edit your site in WordPress. WordPress has an inbuilt block builder which works, but if like me you are used to a more visual approach I choose to use the Elementor Page Builder plugin, Elementor also uses a lot of the short cut keys that you may be used to using from Adobe CC. Click on Plugins on the left panel, Add New and search for Elementor, Install Now and Activate.

Choose a theme: You will need to choose a theme for your website there are a lot of WordPress themes which are compatible with Elementor. Find some here. I prefer to use the Hello Elementor Theme as this is basically a blank canvas and doesn’t add a load of plugins to your WordPress that slow down your site and you might not even use. Go to Appearance, Themes, Add New and search for the theme that you want – Install and Activate. It is a good idea to uninstall any themes that you are not using, you can always put them back if you change your mind.

Plugins, plugins, plugins: Plugins add functions to your site and you will need to get used to installing, activating and updating them. Luckily WordPress makes this simple. I recommend:
Hummingbird – Speeds up your site
RankMath – For Search Engine Optimisation (SEO)
Insert Headers and Footers – Where you will put your Google Analytics header code
UpdraftPlus – Backup and restore your website
Elementor – Page Builder
Elementor Pro – this is a upgrade to Elementor and is worth every penny

Depending on the Theme that you have chosen you may have some more already activated in the Plugins section on WordPress, the Theme may need these to work so just keep them updated.

TBC.

Sorry, I got busy being busy, more to follow when I come up for air. 

This website uses cookies to ensure you get the best experience on our website.

This website uses cookies to ensure you get the best experience on our website.