Project Planning
When I began the planning stages I created some documents to help decide on how the portfolio should turn out. This included created a sitemap, UML diagrams, Logical Design, Top Down design, and some workflow diagrams for the algorithms in the application.
Planning Stages (Wireframes)
Next in the planning stages, I needed to create wireframes of each page so there would be an idea of what the finished site would look like. Here are the wireframes initially planned for each page.
Development Stage
After all of the planning, next it was time to start building the application. Here is what the finished pages ended up looking like.
Below is the main opening page. This page gives a short introduction to the user and allows them to play an asteroids like game by hitting the button on the screen.
This is the Portfolio page that shows the different projects featured. At the top are buttons that allow the user to sort each project by technology. The images have hover over events and going from page to page has a page transition.
This is one of the project pages, they each have a similar format. There is a link to visit the website. Also, a scrolling images carousel.
Below is the contact page. This contains a multi-step form that allows the user to send an email to the creator. It uses Email.js and has form validation.
Below is the navbar that is used on every page.
It was also important to ensure that each page works with responsive sizing. Here are images of each page using responsive sizing.
To Visit the website yourself go to: https://www.warren-peterson.com
