Designer / Developer Portfolio Website

Project Summary

Designer / Developer Portfolio is a fully responsive single page portfolio website developed using HTML5, CSS3, JavaScript and jQuery. This was a personal project I created during the three week summer break with the idea of creating a modern and user friendly design. The motive of this project was to demonstrate working knowledge and application of HTML5, CSS3, JavaScript and jQuery. Also, Media Queries to make the website fully responsive.

Project Details

Role

Designer/Developer

languages

HTML5, CSS3,  JavaScript, jQuery

goal

Create a fully responsive modern single page website

Process

The first steps of preproduction I drew up a mind map to brainstorm ideas and crucial elements needed to produce the mood and feel of the Designer / Developer single page website. 

Sketches

I then gathered up my ideas and started creating sketches, laying out the information architecture to show where each UI elements should be placed for user friendly experience.

Wireframes

Finally, before developing the landing page I used Adobe XD to create low fidelity wireframes to confirm the design model of the project for both desktop and mobile. 

Special Features

  • Overlay navigation menu for unique design
  • AOS Animate on Scroll for dynamic animations
  • JavaScript smooth scroll to top button
  • jQuery Animation
  • Font Awesome icons for high quality styling
  • Vertical Timeline
  • Creating fully responsive website design across multiple devices by applying Media Queries

Final Product

Target Audience

Business professionals, UI / UX Designers, Front-end Web Developers looking to communicate their brand and gain credibility.   

Design Choices

For user friendly experience I added an overlay effect to the navigation. Since I decided to make a single page website I thought it would be effective and keep the user engaged to create animations as the user scrolls down the page. After doing some research I came across the plugin AOS Animate on Scroll Library. A really effective plugin for adding simple animations. Also, to make the website more user friendly I added a Scroll To Top button to help the user get back to the start of the page.   

Design Philosophy

The goal of the Designer / Developer Portfolio website was to demonstrate working knowledge and application of HTML5, CSS3, JavaScript and jQuery to build a fully responsive single page website. I decided to make my first portfolio website as a personal project.     

Challenges

The most challenging parts of this whole project was creating the scroll to top button and overlay navigation. I was still very new to JavaScript and had to do some researching on Stack Overflow to figure it out how to implement them.  

Thanks for Reading!

Lets Work Together!