Personal Website

Technologies used: HTML5, CSS3, JavaScript, VScode

Go back to main page

Purpose:

The purpose of this website is to serve as my professional portfolio for potential employers.

Development Process:

As I am learning new skills this website is going through multiple design iterations

Iteration 1.

Using beginner HTML. The content is organized on different pages which can be accessed through links. No detailed project description. No use of color theory. Primary, secondary and accent colors are not picked. Home buttons on 2 different pages use the same CSS but look differently.

Iteration 2.

Primary, secondary and accent colors are picked. Improved and organized HTML containers. Improved navigation and fixed the home page buttons. No detailed project description.

Iteration 3.

New structure of the page. All information is stored on 1 page to reduce clicking. Added scroll bar percentage in JavaScript (not implemented for mobile devices). Added animation to website sections on scroll using Intersection Observer in JavaScript. No detailed project description.

Iteration 3.

Going forward I would like to stick with iteration 3 improving the website incrementally. In this iteration I’ve added detailed information about my projects and improved the CSS of the section displaying my projects via “swiping”. The progress bar section lost the percentage display and is now taking up all of the height of the viewport. Furthermore in this iteration I slightly changes the CSS in the article elements for the title of the article to be above the purple container, which I think gives a bit more breathing room to the page.

Issues & Future Changes:

The challenging part in the development of the site was the functionality that I implemented with JavaScript in the “projects” section. A YouTube video “ImNotGoodEnough.js” from Hyperplexed inspired me to implement a swiping function to displaying my projects, because I thought it was more entertaining and I wanted to try coding the feature myself. The challenge in this task was appropriating a code that was used for a similar task to do what I wanted to do. Since my task required the sequential display of the projects I needed to implement a more strict rule for the function that was changing the indexes of the 3 fixed positions: before, active and after.