Website

Portfolio Website

A teal background with two screenshots of the header of this webpage. One is in light mode on a large screen and the second is in dark mode for a mobile screen. On the mobile screen the picture of Jamie wraps under the title instead of to the left of it

About the Website

Basics

Description

A website displaying my skills, qualifications and past projects.

My skills are broken down to show my abilities as a software engineer and as a cybersecurity specialist. My qualifications include my degrees and certifications.

I have selected four of my projects to showcase, including this portfolio website.

Technology Used

  • HTML
  • CSS
  • JavaScript
  • Bootstrap

Interesting Features

Tooltips

I added tooltips to interactive elements such as buttons, links and toggles throughout the website in order to clarify what they do.

The tooltip for the link to verify a certification.
The tooltip for the link to verify a certification
The tooltip for the link to LinkedIn in the header.
The tooltip for the link to LinkedIn in the header

Dark Mode

I added a toggle for dark mode to the website. It also slightly turns down the brightness on some of the images so they are not too glaringly bright.

A zoomed in view of the dark mode toggle in light mode.
The toggle in light mode
A zoomed in view of the dark mode toggle once it is in dark mode showing the difference in colorschemes.
The toggle in dark mode

Navigation Bar Tracking

The navigation bar on the home page highlights the section to which you have scrolled

A screenshot of the top of home page showing 'Home' highlighted on the navigation bar.
The top of the home page
A screenshot of the projects section showing 'Projects' highlighted on the navigation bar.
The project section

Website Design

Different Viewing Modes

The website is designed in order to be viewed on desktop and mobile browsers as well as in both light mode and dark mode.

Header

  • Light Mode
    Desktop Browser
    The header region viewed in light mode on a desktop browser.
  • Dark Mode
    Desktop Browser
    The header region viewed in dark mode on a desktop browser.
  • Dark Mode
    Mobile Browser
    The header region viewed in dark mode on a mobile browser.

Projects Section

  • Light Mode
    Desktop Browser
    The projects section viewed in light mode on a desktop browser.
  • Dark Mode
    Desktop Browser
    The projects section viewed in dark mode on a desktop browser.
  • Dark Mode
    Mobile Browser
    The projects section viewed in dark mode on a mobile browser.

Certification Section

  • Light Mode
    Desktop Browser
    The certifications section viewed in light mode on a desktop browser.
  • Dark Mode
    Desktop Browser
    The certifications section viewed in dark mode on a desktop browser.
  • Dark Mode
    Mobile Browser
    The certifications section viewed in dark mode on a mobile browser.