Your Personal Portfolio Website

Creating your personal portfolio website with four pages.

Introduction

Your personal portfolio website is based on the following four web pages:

  • Home page  (in main folder)
  • Privacy page  (also in main folder)
  • Portfolio page  (in 📁 portfolio sub-folder)
  • Contact page  (in 📁 contact sub-folder)

Your four pages will have the following web addresses.

project images

For your inspiration, here are some sample portfolio websites from web designers and developers.

1: Rename your old index.html web page

In your 'main' 📁 websites folder, you already have a file named index.html. Before continuing, rename this file to exercises.html.

2: Download images

Your next step is to download the following seven images to your 📁 websites/assets/img sub-folder.

Your 📁 assets/img folder should now contain the files shown below.

3: Download your custom.css stylesheet file

Do you want a light-coloured (or mostly light-coloured) website?

Or a dark-coloured (or mostly dark-coloured) website?

Download one of these two files to the 📁 assets/css sub-folder of your 'main' websites folder.

Clicking on either link will automatically begin the download.

If this file downloads to your 📁 Downloads folder, delete it from there after you copy it your 📁 websites/assets/css folder.

4: Download your Home page

Download one of these two files to your 'main' websites folder.

Clicking on either link will automatically begin the download.

If this file downloads to your 📁 Downloads folder, delete it from there after you copy it to your 📁 websites folder.

Open the following two files in VS Code.

  • The index.html file in your 'main' websites folder.
  • The custom.css file in your 'main' assets/css sub-folder.
File Explorer VS Code

5: Download your Portfolio page

You should already have a 📁 portfolio folder in your 'main' websites folder. This should contain sub-folders for each of your portfolio projects as shown below.

Download one of these two files to your 📁 portfolio folder.

Clicking on either link will automatically begin the download.

If this file downloads to your 📁 Downloads folder, delete it from there after you copy it to your 📁 websites/portfolio folder.

6: Download your Contact page

Create a new folder in your 'main' websites folder named contact.

Download one of these two files to your new 📁 contact folder.

Clicking on either link will automatically begin the download.

If this file downloads to your 📁 Downloads folder, delete it from there after you copy it to your 📁 websites/contact folder.

7: Download your Privacy web page

Download the file below to your 'main' website folder.

Clicking on either link will automatically begin the download.

If this file downloads to your 📁 Downloads folder, delete it from there after you copy it to your 📁 websites folder.

You do not need to update any details on this web page.

9: Choose a colour palette

Use the websites below or similar to choose a nice color palette (colour combination) for your Home, Portfolio and Contact pages.

You can use this option from Lunevedy to experiment with colours in the <navbar> and <header>.

Use this option from Lunevedy to experiment with colours in the three-column <section>

Use this option from Lunevedy to experiment with colours in the two-column form.

And use this option from Lunevedy to experiment with colours in the single-column <footer>

Update your custom.css stylesheet with your colour choices.

10: Replace the hero image

Replace the sample hero image with a visual of your own choice.

You can use this option from Lunevedy to experiment with image shapes, videos, bleeding edges, and animation.

Use the options at the link below to adjust your image as required:

In the <head> of your Home page, preload your hero image as follows:

<link rel="preload" href="assets/img/hero-image.jpg" as="image">

11: Add a Google Font or Fonts

Follow the instructions here to add a Google Font or Fonts.

Here are the more widely-used serif and sans-serif fonts in 2023.

See the websites below for font-pairing inspiration

13: Add a favicon to your web pages

A favicon is a small icon (really a set of icons for different screens) that is displayed within the browser tabs and bookmarks bar of a web browser.

Projects

If you have not already done so, create a favicon using one of the following websites:

Place your favicon files in your websites/assets/img sub-folder.

When finished, add the favicon code to your Home, Portfolio and Contact web pages, to just below the description meta tag in the <head>.

See the example below for your Home page.

<link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png">
    <link rel="manifest" href="assets/img/site.webmanifest">

For your Portfolio and Contact pages, your links will begin with "../assets" and not "assets".

14: Personalise your meta tags

Each of your three sample web pages contains template text for the page's title and description tags. These two tags are examples of so-called meta-tags.

Your first task in personalising the sample web pages is to update the content of the meta tags with text of your own choice. Follow the steps below.

  1. In VS Code, open your web pages.   index.html
    📁 contact/index.html
    📁 portfolio/index.html
  2. In the <head> of each web page, in the title and description tags, replace the sample text with your own details.

Here are a few examples.

Home page:

project images

Portfolio page:

project images

Contact page:

project images

See the helpful links below for guidance on using the title and description meta tags on your web pages.

Introduction to HTML

DO NOT use the same meta tags on different web pages of the same website.

This 'confuses' Google and other search engines.

"When two, or more, of your pages contain similar title tags, it falls upon the search engine to try to determine which page the user really wants to see in their results. What happens is that some of your pages will get preferred ranking status, while others get ignored completely. " Source.

16: Add the Google Analytics code

In the <head> of your Home, Portfolio and Contact web pages, ensure you have added a link to your Google Analytics account. It should look as shown below.

Sign into your Google Analytics and, if necessary, click the option to "Migrate to GA4".

17: Create and add your cookie privacy message

Create a ‘pop-up’ cookie consent message and add it to your Home, Portfolio and Contact pages.

This is required under EU law for any web page that uses Google Analytics.

18: Update the endpoint of your contact form

You need update your contact/index.html web page with the endpoint code you received from the Formspree website.

  1. In VS Code, display the contact/index.html web page.
  2. Update the form's action value by copying-and-pasting the endpoint value from Formspree. See the example shown below. github-signin
  3. Save your contact/index.html file.

You can check your form is working by entering some details and clicking the Send button.

You are now ready to upload your files to your account on GitHub.

19: Create and submit a sitemap

Create a sitemap, edit it as appropriate, and upload it to the top-level folder of your website repo on GitHub:

https://www.xml-sitemaps.com

Sign in to your account on Google Search Console and submit your sitemap.

21: Check for any performance issues

Check your Home, Portfolio and Contact web pages for any issues that affect their performance using the website below from Google: