Website: mattty-t.github.io
Github Profile: https://github.com/mattty-t
Github Repo https://github.com/mattty-t/mattty-t.github.io
Purpose
The purpose of this website is to showcase the skills that I have learned so far during my time at CoderAcademy. By utilising the knowledge I have learned to design a website using HTML and CSS. This site will also evolve over time as my skills improve. It is to showcase my current and future projects and acts as a online resume for future employers. I have kept this site minimalistic, simple and vibrant. It shows the design and style I would like to pursue.
Functionality and Features
- Simple Navigation Bar - A simple navigation bar on tablet and pc view that will allow ease of navigation to other pages
- Footer This will allow the user to understand that they are at the bottom of the page and that there is no more content and to also show who designed the website
- Logo - A simple name logo on the top left of the screen that when clicked on will redirect to the home page
- Hamburger navigation bar- Whenever the screen on mobile devices goes below 400px; a hamburger navigation bar will be displayed. Clicking the toggle button will create a list that will drop down and allow the users to navigate the website. The toggle button was made using Javascript
- Hover effect and transition effect - Hovering over the sections on the navigation bar will allow users to know which page they want to visit. It is very visual and will allow easier readability
- Contact Form function - The form function will allow potential employers and customers to connect with me and contact me through submitting the required details
- Social Media Icons Used to allow people to access my social media and also professional accounts just by clicking on the icon
- Download function Users will be able to access and download my resume by clicking on the resume icon on the skills page
- Simple, clean and minimalistic website to make the viewing experience pleasant
Sitemap
The sitemap of the website is basic. The sitemap will have a total of four pages that are linked to the Home Page. The Home Page can be accessed through any of the pages and also each page can also access each other pages through the navigation bar and as seen by the sitemap.
Screenshots
Below will show the screenshots of my website.
Home Page
Mobile Version Home Page with Toggle Feature
About Me Page
Skills Page
Blogs Page
Contact Page
Target audience
The target audience for my website is for potential employers who are looking for front-end/full stack-developers.
Tech stack (e.g. html, css, deployment platform, etc)
I used Visual Studio Code to code my website. I mainly used Front-end tech stack of:
- HTML - used to to design my website and pages (home, about, skills, blog and contact). Using semantic tags such as header, section, main, footer for most of my pages. I used article for my blog page. I used these semantics to define different types of the page and makes it easier for the browser and other people looking at my code to better understand the layout and design of my page.
- CSS - used to format and style the layout of my website and also adjust the font size and style, color, of my webpages to make it more visually appealing and easier to read.
- JavaScript - Used to code a toggle button feature for my hamburger navigation bar when the screen goes below 400px for mobile.
- GitHub - Used to create a GitHub repository on my GitHub account which will allow me to edit and push my changes to it. It also allowed me to deploy my site from a static website to a dynamic website.
- Trello - Used to help me keep me accountable and make sure I meet my deadlines and also the marking criteria.
- Font-Awesome - I used their icons on the skills page and my home page website and to make it more visually appealing for the target audience
I used other tech stack listed below to help assist with my website:
Screenshots of Trello Board
I used Trello board to keep me on track. Below are a few screenshots of the work I have completed over the past 2 weeks to meet the criteria of this assessment.
Below you can find my trello link to the project and also screenshots.
Trello Link - https://trello.com/b/T993fyq7/portfolio
