This Site:
Portfolio Project
This project is the culmination of the 6 months I've spent studying at BCIT, and as a result, I tried to showcase as much as possible both in the site itself, as well as the portfolio pieces. It features filtering on the project page by skills used using Isotope.js, a PHP contact form utilizing sessions, as well as CSS and JavaScript animations. It is fully responsive and designed and coded mobile-fist.
I began the process with brainstorming the content I planned to put on, and then listed and organized it into sections and pages. Once that was done, I made a quick initial wireframe, featuring both mobile and desktop views. Since it is a personal project, I made modifications to the design and layout as I went. My personal favourite features are the gradient underlines on links, the vibration animation on the pet Instagram icons, and the sliding up animation on my "call-to-action". There are a couple of hidden surprises in my code on the home page, for anyone looking through there, as well. :)
I tried to pay special attention to usability, so I added a scroll to top button, navigation between project pages, a "sticky" top navigation bar that's always visible, as well as a footer that allows for the navigation between pages. External links also open in a new tab, allowing for users to more easily return to browsing. The design is quite clean and simple, but I wanted to make it "pop" with the animations, a fun heading font, and the splashes of gradient in my favourite colours.
Skills Used
Highlights and Code Snippets
My personal favourite part of this site are the animations. I have added various CSS hover animations (Hover.css and Animista) on most icons and links, and utilized the AOS (Animate On Scroll) library to spruce up otherwise plain pages with smooth transitions on headers and images. CSS gradients were used on elements to add a splash of colour to an otherwise simple design. Filtering on my portfolio page was implemented with the Isotope.js library.
On each project page there are arrows on the bottom in order to more easily navigate between projects. A simple scroll-to-top button has also been added to allow users to quickly jump to the top of the page. I tried to pay extra attention to usability to ensure users would spend more time clicking around my site before leaving.
The contact form will send an email to my personal email address from a "do not reply" email address, as well as a copy of the message to the user who sent it. It utilizes sessions to tell the user if they erred filling out the form, or to confirm that they successfully sent the message. Code is validated to prevent spoofing. The form validation code can be found here on my GitHub.