morganbat,Morgan Batterham,github

Morgan Batterham

Portfolio Website for assessment T1A3

repo hosted at https://github.com/MorganBat/morganbat.github.io

website available at https://morganbatterham.me

Purpose

The purpose of this website is to create a mobile responsive website to showcase my abilities in various web development technologies such as HTML, CSS etc.

The website will contain data such as my name, email address, and links to various social media profiles including my GitHub, LinkedIn, Twitter and Medium profiles.

Functionality/Features

Top Nav Bar

The top navigation bar is designed to cover the entire width of the page. The index, about, blog and projects links are all aligned to the left of the page while the contat link is aligned to the right. Through the use of media queries these will wrap vertically on devices with smaller screens like tablets and smartphones.

Footer with Social Media links

The footer contains copyright information on the bottom left of the screen and links to social media on the right. If the copyright notice is moused over it will create a visual effect of stretching. When the social media icons are moused over then they will expand and change colour.

Media queries have again been used to make these icons wrap on devices with smaller screens.

Index Page

I went for a minimalistic design on the index page, with just my name and the phase "Full Stack Developer". I used CSS Grid to position these dynamically in the page. I also used CSS to create a mouseover effect similar to what was done with the copyright notice.

Media queries have been used to change the text size and the wrapping as required.

About Page

The about page contains a small blurb including my interests and a brief overview of my former career. I have also included a link to download a PDF copy of my CV. At the bottom I have included buttons that link to my social media profiles. These buttons are styled when clicked via CSS.

Media queries have been use to change the text size and wrapping of the heading and content. I have also used media queries and flexbox to scale the distance between the icons so they are always split equally across the screen on mobile devices.

Blog Page

My blog page is quite scarce as I do my blogging on Medium. I have included the titles of the blog posts with a picture immediately below. Clicking anywhere on either the title or image will open the blog posts in a new tab. For the purposes of this assignment there are some placeholder blog posts which merely direct to a new page full of placeholder text.

Projects Page

My projects page is very similar to my Blog page, with the title of the project directly above an image representing my project. Clicking either of these direct to the github repository of the project. I have also included a small blurb below each image which explains the purpose of the app

Contact Page

My contact page is very barebones as my social media is linked in the footer of every page and on special icons on the about page. I have also included a mailto: link directed at my email.