The purpose of this website is to showcase my skills and abilities as an aspiring web developer for an audience of potential employers for work opportunities and fellow developers for networking purposes.
Although the 'Projects' and 'Blog' sections are currently made up of place-holder text and images, I plan to update the website with my actual work as I continue through my coding bootcamp course.
I went into the design process with accessibility at the front of my mind, researching accessible color palettes on (https://venngage.com) and the most accessible fonts which is what lead to my choosing the font 'Poppins'from Google Fonts and a color palette featuring contrasting colors.
Appears as the header on every page and provides links to all other main pages, each button changes color when hovered over
Just above the footer on all pages, clicking this button takes you back to the top of the current page to save the user having to scroll all the way back to the top.
Appears on every page as the footer with icons that link to my LinkedIn profile, GitHub profile and an option to send me an email.
Working 'Contact Me' form with inputs for first name, last name and a space to write a message. Clicking the 'Submit' button sends the content to my email address.
I don't have any actual projects to add yet so instead I made Flip Cards that currently show an image on the front and then when hovered over they flip to show 'Coming Soon' on the other side but I plan to update these with actual projects when I have them. This page utilises a media queary so that on desktop it will show the cards next to each other in a row format, while on mobile view the cards appear underneath each other in a column format.
These preview cards show the blog post title, date published, a smaller version of the image in the post along with a short amount of text and a 'Read More' button with a hover effect that changes color and that when clicked, takes the user to the individual page for that blog post. Each card has a 3D shadow effect to make the cards stand out. This page utilises a media queary so that on desktop view the preview cards appear next to each other in a row format, while on mobile the cards appear underneath each other in a column format.
- HTML5
- CSS3
- Figma
- Netlify
- GitHub
- MarkDown
- VS Code
As shown in the above diagram the Home/Index page links to all other pages - About, Projects, Blog and Contact - these page links appear in the head Nav Bar on every page. The About page has a link to download my CV and the main Blog page links to all individual blog post pages.
Mobile Wireframes showing pages in this order:
- Home
- About Me
- Projects
- Blog Main Page
- Blog post page
- Contact Me
All pages have the same Nav Bar header, Back to Top button above footer, and footer with social media icon links.
The flipcards on the Projects page and Blog Preview cards on the Blog main page are in the column format so they appear underneath each other in this smaller screen format.
Desktop Wireframes showing pages in this order:
- Home
- About Me
- Projects
- Blog Main Page
- Blog Post Page
- Contact Me
All pages have the same Nav Bar header, Back to Top button above footer and footer with social media icon links.
The flipcards on the Projects page and Blog Preview cards on the Blog main page are in the row format so they appear next to each other in this bigger screen format.
Rest of Desktop Screennshots located here
Rest of Mobile Screenshots located here