This project is assignment 1 for the Webware class at Worcester Polytechnic Institute, where I deployed a basic portfolio website with information about myself using Heroku, Git, HTML, CSS and NodeJS. It showcases some information about me and my professional goals. It also highlights my experience with different tech stacks. You can view the website here: https://a1-hr23232323.herokuapp.com/
This project dives deeper into the technical and design space, than what is highlighted in the assigment, by exploring a custom Navbar and Visual Hierarchy. These are further elaborated below.
- I explored creating a basic navbar from scratch without using any external libraries. I created HTML anchors to different parts of the page so the user experience becomes better. To create the actual navbar, I created an unordered list with the elements styled as inline.
- Additionally, I also explored the various stages on the life cycle of a link which includes the normal, active, visited and hover states and then styled my navbar links based on the principles learnt.
- Utilized human scan patterns to create a page more likely to capture attention. This was done by arranging informtion suitable for the "F scan pattern", where users scan top-down on the left side of the page, looking for headings or short bullet points that may interest them. More information can be found here: https://digitalcommons.wpi.edu/cgi/viewcontent.cgi?article=1018&context=uxdmrl-pubs (Visual Hierarchy and Viewing Behavior: An Eye Tracking Study)
- Explored the concept of "bigger font captures attention" to draw viewer attention towards the main points inside a block of text. This was specially done in the intro paragraph about myself where I increased the font size of certain elements to capture user attention.