Site Upgrades from v1.0 to v2.0
There was little relief on completion of the first build of my portfolio site as the design was incomplete, quality content was insufficient and the structure unfinished which initiate several issues with the responsiveness and usability. Thus, there was lots of room for improvement.
Firstly, was the HTML code. Whilst this was initially easy to read and adhered to best practices, there was little use of classes and containers. To improve on this, I have implemented new classes and containing elements across the whole site to enable better control over individual site sections.
A clear example of how these implementations have improved the design is in the recent posts section. I added containing elements around the whole section and each of the cards to enable the creation of a scrolling slider and navigation, thus catering for the need of more blog posts and showcasing them simultaneously in a concise format. Raster images are now supplied for each blog post card and are all contained smoothly within the scrolling slider. The scrolling slider is also completely responsive on all screen sizes and scales accordingly. The scrolling slider demonstrates memorable and satisfying design for the end user and adds to the overall design of the site.
Upon reopening the initial CSS file from the first build, it was difficult to navigate and find what I was looking for within the code. To mitigate this situation in the future and better organise the code overall, making it more human readable, the CSS was reformatted, and comments were added to divide the CSS up into sections, clearly labelling what each section does to the HTML. This makes it much easier to navigate and make changes.
I was unable to implement a pre-processor, to reduce the amount of browser prefix code needed, as there was too little knowledge in this area to execute successfully. However, I am exploring this concept in my self-initiated project 2, along with creating a library of UI components. Combining BEM and utility classes will ultimately achieve a scalable CSS architecture to make writing new pages in the HTML easier and more intuitive in the future. This would inevitably save myself time when writing new content for my site, whilst reducing any issues from styling global elements, such as headings and headers.
The menu design has been completely revisited to ensure fluidity on all screen sizes. To improve usability and avoiding cramping on smaller screens, I used CSS, JavaScript and jQuery to accomplish a slide toggle vertical menu for small screens, such as mobile. The site is now responsive down to a screen width of 230 px.
I have addressed several elements of incompleteness, focusing on the content and changes needed for the ACW 2 submission. I have added content to the pages where there was none in the initial build, including the about me section, my previous work and my contact page. Populating these sections makes the site more personable rather than just a shell and allows the end user to get to know me and my work. I will revisit the missing blog content from the ACW 1 submission when I resubmit the assignment in the summer.