Simple Website Portfolio

This project was my introduction to two fundamental web development languages: HTML and CSS. Since many IT and cybersecurity tasks require a strong understanding of web structures, I wanted to immerse myself to the inner workings of web development. The main goal was to gain hands-on experience with web development, to help build a deeper understanding of how websites function while refining my ideas for my portfolio site. Below I expand further on my thought process and the problems I encountered during this project.

Note: As my inspiration grew and I dove deeper into the project I quickly ran into the limitations of HTML and CSS. As such, this project remains unfinished as I decided to transition to Wix, which offered more flexibility to showcase my work, hence the title Simple Website Portfolio. However, this project still proved to be a valuable learning experience that shaped my approach to web design.

HTML Structure

The first few lines of code written was to set the parameters of the website. For example, <!DOCTYPE html> lets a web browser know that the file is using HTML5, and <html lang="en"> indicates that the language being used is English, helping the search engine optimization and the screen readers.

Looking at the <head> section of the code (lines 3 - 8) we see what the website characteristics are. For example, <meta charset= "UTF-8"> (line 4) ensures that the characters on the website are displayed correctly whether it be symbols or different langauges. Line 5 is where I encountered the main issue of the project, however the idea was to have the website adapt to different screen sizes, whether it be a computer screen or a mobile device. Line 6 displays the name of the website on the browser tab, while line 7 connects to an external CSS file for styling.

After the <head> section, the code goes into the header and navigation portion of the website (lines 10 - 23). Starting off with <header> this creates the top section of the website. To allow easier navigation around the website, <nav> was used to create the navigation bar with clickable links. To remind the ones that are looking at the website, that it is my own personal portfolio I had my name displayed at the top of the website using <h1>. The sections that start with <a> are hyperlinks that allow users to navigate different sections of the page. When the links are clicked it will automatically scroll them to that section, open a file (i.e. my resume), or open new page (i.e. project portfolio).

The next part of the code was added to provide context to each section of the website. The goal showcase my personality and skillset in a more digestible way other than my resume. As such I explained a little bit of my personal background, work experience, and education.

JavaScript for smooth scrolling

Without smooth scrolling, the website will instantly jump to a new position when scrolling making navigation around the website feel disorienting. As such smooth scrolling is needed for optimal user experience.

On the right we have the JavaScript code being implemented into the HTML code, with the actual JavaScript File being right below it. Starting on the HTML code on line 79 essentially waits for everything in the HTML code to load in before running any JavaScript code. Line 80 allows for all links inside the navigation menu to have smooth scrolling.

Lines 82 allows actions to be done on each link in the navigation, while line 83 executes the actions when a user clicks on a navigation link. Line 84 "e.preventDefault();" prevents the browser from immediately jumping to the target section, allowing for smooth scrolling.

Lines 86 -87 involve finding the section of the website the user clicked on. Line 86 extracts information on where the section the link is pointing to, with line 87 identifiying the section the user wants to scroll to when clicking the link.

To enable smooth scrolling refer to lines 89 - 91, it starts by scrolling to a specific position, once it's in position the code tells the browser to scroll to the top of the section, while having the behavior of the scroll be "smooth". Lastly on line 97, I call to a JavaScript file to allow a dynamic scrolling effect.

The entire purpose of the JavaScript file was to have dynamic scrolling. Essentially as one scrolls down the page, the background image changes in size, giving the illusion of zooming in or out. At the same time, the text within the background fades in or out when scrolling, this was all done to make the page feel more interactive and engaging. This can be seen in the demo video below.

This is done because the Js code listens for a scroll to happen, triggering changes in the background and text. The size of the background imgae and the opacity of the text are adjusted using CSS properties, allowing for smooth transitions during user interactions.

JavaScript in HTML

JavaScript File

CSS

Lines 1 - 8 the basic setup of the CSS file can be seen.

Padding and margin removes the default spacing, making sure that all items are aligned properly. Font-family determines the font and box-sizing ensures none of the padding/margines affect any element sizes. Lastly overflow-x: hidden prevents any horizontal scrolling from happening, keeping everything within the user's screen.

The background section (lines 10 - 21) creates a visually engaging background, ensures text is readable and centered, and works with JavaScript to resize the background when scrolling. Lines 11 - 17 make sure that the background image is set in place, while taking up the full screen height. The background size was set to cover to make sure it scales properly without any distortion, and the position was set to 50% and 100% allowing the image to be horizontally centered and bottom positioned.

Lines 23 - 65 are tied to the navigation bar. On line 23 - 31 is centered around the styling of the navigation bar, making sure all items are aligned, have even spacing, and making sure that the bar stays on the top of the page on full width. Lines 38 - 65 styles all the links on the navigation bar making it more engaging and visually interactive.

Lines 67 and beyond handle the layout of each section of the website. Each setting of each section follow the same layout of a dark background, white text, a header, padding for spacious formatting, and line-height: 2; to make texts easier to read.

Problems Encountered

The video on the right showcases the final version of the HTML website, demonstrating how all the elements come together. Altough the website design is simple, it can still function as a personal portfolio. However, I soon encountered a problem with formatting. I realized that when looking at the website on a tablet or mobile device, everything would seem out of place and was very confusing to navigate.

With many people using their mobile devices to browse on the internet, I knew that this layout wasn't optimal and had to pivot. Rather than spending excessive time troubleshooting responsive designs on a simple website, I decided to transition to Wix Studio.

This allowed me to focus on creating a professional and polished portfolio without worrying about formatting. It also provided more flexibility, allowing me to design a website I can be proud of.