Summary

The color pattern used in my web site design is meant to reflect the theme from my favorite videogame, Call of Duty: Modern Warfare. Additionally, I tried to keep the overall design pattern as consistent as possible across the whole website, with a top navigation menu and a main container holding all the elements of the current page subsequently with their respective headers, occasionally splitting up into two containers as needed.

Subsite Design

The website is made up of the following subsites, as mentioned before, they each possess a consistent design/layout and color pattern:

Personal Subsite

This subsite is seperated into 4 sections: A welcome section explaining what the page is about, a contact section with my picture and info at the center of the page because the contact section is the most important, A hobbies section which is not so important and thus at the bottom of this page along with an Interest section which also isnt that important so is located at the bottom as well. Additionally, there is a hidden, middle section that comes to view through javascript and contains a few pictures of the most popular places in my home country.

Portfolio Design Subsite

This subsite is more of an informative page, so, all of the format that is used for the Personal Subsite isn't exactly the same for this subsite. Theinformation will be one big section of information. But, because there will be a lot of information put into this subsite, there are headings and subheadings to improve readability. Images help out a lot with the visualization of the process and are therefore outlined throughout this subsite.

Web Tech Online Subsite

This subsite expresses my overall experience in the course. Therefore, not too much information will be displayed on this subsite. This is an informative subsite close to the Portfolio Design Subsite and thus that they both have a similar feel; one block with heading and subheadings to seperate information.

Sample Work Subsite

This subsite is more a visual type of site. For this subsite, I wanted to seperate the information into blocks like I did with my Personal Subsite. The most important information is displayed on the center of the page while the links are found at the bottom of the page.

Technology Features

The website implements a couple of small javascript code snippets in the Personal Subsite for looking up gamertag information and movies. Additionally, the page use Javascript and Jquery to display additional pictures when clicking on the trigger in the info section, similarly, it uses a separate function to close up that section by clicking on a different trigger.

Block Layout Drawing

File Organization

I will be organizing my images into folders and subfolders. The images that are only used for one subsite are put into a folder of its own. Images that are used for every page are put into the main image folder. I will then put the html folders into one folder called html folder. There will also be a folder called javascript for all of my javascript files. I only use one css file to handle all my subsites, however, there are assignments from the Showcase page that have their own styling sheets, therefore, it seemed practical to create a CSS folder for all of these.

The image below shows how my files are organized:

Design History