Brendan Munnelly, Lecturer in Web Design

brendan@munnelly.com

Your Personal Portfolio Website

Creating your four-page personal website.

Introduction

In this project you will create your personal website, 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)
project images

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.

nad.is
www.usmahm.tech
ivanvotti.com
inakisoria.com
brittanychiang.com
simonrahm.pro
gorimmerman.webflow.io
www.camilleluang.com
www.shapesbysons.com
www.lustrestudio.co
www.andrejilderda.nl
www.joshkimux.com
rachitmathur.webflow.io
www.jesseye.site
victorkaiwong.com
www.lauracharvey.dev
www.bhawinworx.com
gaddafirusli.my
rafa.design
http://findmatthew.com
caferati.me
www.eina.ca
http://www.pavelhuza.com
mattfarley.ca
denisechandler.com

 

This might be a good time to revisit these topics:

Portfolio project folders and files

Your first task is to create a sub-folder named 📁 contact to hold your new Contact web page.

Create this in your 'main' 📁 websites folder.

Project resources

Your next task is to obtain the text and visual content needed for this project.

Project Text

You will find some sample text for the pages in your portfolio website in the file below. Only <p> tags have been used for basic formatting.

text.html

You do not need to download this file. You can simply copy-and-paste from it.

Project web pages

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

project images

Download and save the following web page to three locations.

  • Save one copy to your 'main' 📁 websites folder.
  • Save one copy to your 📁 websites/portfolio sub-folder.
  • Save one copy to your 📁 websites/contact sub-folder.

Project stylesheets

Download the following three stylesheet files to your 📁 websites/assets/css sub-folder.

Project images

Download the following four images to your 📁 websites/assets/img sub-folder.

Sample image project-van-gogh.png
Sample image project-smoothie.jpg
Sample image project-fashion.jpg
project images website-logo.png

That's it. You now have all the resources you need.

Creating your new 'home' page

You can see two sample 'home' pages below.

samle home pages

You will use the UI-Kit app to create the three 'blocks' of content.

samle home pages
  1. In VS Code, open the following two files:
    • websites/index.html
    • websites/assets/css/custom.css
  2. Open the UI-Kit and create a new header of your choice.   On the Buttons menu, accept the default option of Two.
  3. Use the Copy HTML and Copy CSS buttons to copy-and-paste your work to the index.html and custom.css files.
  4. Update the words with examples from the text.html file.
  5. In the index.html web page, update the two button hyperlinks as follows:   <a href="portfolio/index.html" class="btn btn-secondary"><i class="fas fa-shopping-cart"></i> Portfolio</a>   <a href="contact/index.html" class="btn btn-primary"><i class="fas fa-arrow-right"></i> Contact</a>
    6. samle home pages
  6. Update the Font Awesome icons with more appropriate options.
  7. Replace the header image with one of your choice.

Your header or 'hero block' should now look similar to the examples below.

project images

Next, create a three-column section under the header to showcase three of your projects. Here are the steps:

  1. Open the UI-Kit and create a new Three-column layout of your choice. Use theme-one.   On the Buttons menu, choose your prefered button options.
  2. Use the Copy HTML and Copy CSS buttons to copy-and-paste your work to the index.html and custom.css files.
  3. In the index.html web page, update the three button hyperlink destinations as follows:   portfolio/van-gogh.html
    portfolio/smoothies.html
    portfolio/fashion.html
  4. Update the text of each button to 'View project' or similar.
  5. Update the Font Awesome button icon with a more appropriate option.
  6. In the UI-Kit, choose the Footer layout, make any colour changes you require, and use the Copy HTML and Copy CSS buttons to copy-and-paste your work to the index.html and custom.css files.
  7. Save your web page and stylesheet, and view the result in your web browser.

Creating your new 'portfolio' page

The purpose of this web page is to showcase your portfolio of web design work.

You will use the UI-Kit app to create the three 'blocks' of content.

  1. In VS Code, open the following two files:
    • websites/portfolio/index.html
    • websites/assets/css/custom.css
  2. In the <head> of the index.html page, update the links to the two stylesheets as follows: project images
  3. Open the UI-Kit and create a new header with a similar layout as the header on your 'home' web page.   On the Buttons menu, choose One.
  4. Use the Copy HTML and Copy CSS buttons to copy-and-paste your work to the index.html and custom.css files.
  5. Update the words with examples from the text.html file.
  6. In the index.html web page, update the Contact button hyperlink as follows:   a href="../contact/index.html"
  7. Replace the header image with one of your choice.

Your header or 'hero block' should now look similar to the examples below.

project images

Next, create a three-column section under the header to showcase three of your projects.

  1. The simplest option is to copy-and-paste the three-column block from your 'home' page.
  2. You will need to update the links to the images as follows:   "../assets/img/project-van-gogh.png"
    "../assets/img/project-fashion.png"
    "../assets/img/project-smoothie.png"
  3. And the hyperlinks on the buttons as follows:   van-gogh/index.html
    smoothies/index.html
    fashion/index.html
  4. in the UI-Kit, choose the Footer layout, make any colour changes you require, and use the Copy HTML and Copy CSS buttons to copy-and-paste your work to the index.html and custom.css files.
  5. Save your web page and stylesheet, and view the result in your web browser.
  6. In the UI-Kit, choose the Footer layout, make any colour changes you require, and use the Copy HTML and Copy CSS buttons to copy-and-paste your work to the index.html and custom.css files.

Creating your new 'contact' page

The purpose of this web page is to provide a contact form.

You will use the UI-Kit app to create the three 'blocks' of content.

  1. In VS Code, open the following two files:
    • websites/contact/index.html
    • websites/assets/css/custom.css
  2. In the <head> of the index.html page, update the links to the two stylesheets as follows: project images
  3. Open the UI-Kit and create a new header with a similar layout as the header on your 'home' and 'portfolio' web pages.   On the Buttons menu, choose One.
  4. Use the Copy HTML and Copy CSS buttons to copy-and-paste your work to the index.html and custom.css files.
  5. Update the words with examples from the text.html file.
  6. In the index.html web page, update the Portfolio button hyperlink as follows:   a href="../portfolio/index.html"
  7. Replace the header image with one of your choice.

Your header or 'hero block' should now look similar to the examples below.

project images

Next, create a contact form.

  1. In the UI-Kit, choose the Contact form layout, make any colour changes you require, and use the Copy HTML and Copy CSS buttons to copy-and-paste your work to the index.html and custom.css files.
  2. Save your web page and stylesheet, and view the result in your web browser.

Updating the endpoint of your contact form

Your final step is to 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 sign up form is working by entering an email address and clicking the Send button.

Personalising your web page footers

Follow these steps to update the content of the footers on the three sample web pages.

  1. Scroll down to the <footer> block of each page.
  2. Edit the template text as required. project images
  3. Edit the social media contacts points and remove links you do not want to use. project images Typically, you will want to include only links to your GitHub account and your Linkedin profile page.

For the internal hyperlnks between your web pages, update them as follows:

Home page

project images

Portfolio page

project images

Contact page

project images

Personalising 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.

Meta tags: Further resources

What is a title tag?. From moz.com.

What is a meta description? From moz.com

Meta Tags for SEO: Definition, Examples, & Best Practices. From Neil Patel

Content Optimization Strategies: Meta Descriptions. From Brian Dean

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.

Adding 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 favion. The instructions are here.

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

When finished, add the favicon code to your three sample index.html 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".

Pre-upload checklist

Before uploading your files to GitHub, ensure you have performed all the updates in the following checklist.

  • You have personalised the title and description meta tags in your three web pages. These two meta tags should be unique for each page.
  • You have personalised the footer on each of your three web pages.
  • You have replaced the sample logo image with your own logo image.
  • You have added a favicon to each of your three web pages.
  • You have updated the endpoint of your contact form with your unique ID from Formspree.

After you have uploaded your web pages and asset files to GitHub, it is a good idea to check that the hyperlinks between your web pages all work correctly.

You can use the Dead Link Checker website for this purpose.

github-signin

You can ignore the following two apparent errors. This is a fault with the online link checker.

github-signin

After performing all these changes, you have two further updates you need to apply to your three web pages:

Uploading your files to GitHub

After finishing your updates, you are now ready to upload your files to your account on GitHub.

  1. Open a new tab in your web browser and go to GitHub.com. If you are not already signed in to your GitHub account, sign in now. github-signin
  2. On your GitHub home page, click the ‘repo’ that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io github-signin
  3. On the next GitHub screen displayed, near the right of the screen, you can see a button named Add file. Click on it. github-upload-portfolio
  4. From the dropdown list displayed, choose the option Upload files. Project Animation Google Fonts
  5. In File Explorer (Windows 10) or Finder (Apple Mac), drag-and-drop your 'main' index.html file, and your 📁 portfolio, 📁 assets and 📁 contact sub-folders, to upload them to your repository on GitHub. Project Animation Google Fonts
  6. Scroll down to the bottom of the GitHub screen, and accept or edit the short message (Add files via upload) in the Commit changes box.
  7. Finally, click the green Commit changes button to upload your files. Project Animation Google Fonts

Your portfolio web pages are now published on GitHub at web addresses similar to the following:

https://username.github.io/index.html
https://username.github.io/portfolio/index.html
https://username.github.io/contact/index.html

Or, simply:

https://username.github.io
https://username.github.io/portfolio
https://username.github.io/contact

It may take a few minutes for your uploaded files to appear on GitHub.