1. How do I navigate to the different pages?

• Navigation to different pages can be accessed at the top of the screen through the Navbar.

2. Why is the page still loading? Why is the performance so bad? 

• Many components of the site involve different parts that move and require processing power. When the page is first loaded, these components will be generated and will need time to load in properly. Once loaded in, performance should be ideal.

3. What does the year mean? 

• The year in the middle is supposed to repersent the year of this portfolio, iterating through different times in the 21st century. It also starts when I was born, and ends when I made this. (2008-2025).

The overall theme of this assignment was to take a more personal approach to representing my portfolio. By leveraging some of the features Google Sites had, I was able to better represent myself through gifs, images, and more.

I wanted to connect to some of the things I enjoy doing, like swimming or scuba diving. I represented this through the overall theme of water, prioritizing fluidity and smoothness throughout the site.

I overall wanted to take a more minimalistic approach, going for quality simplicity over other aspects. 

The different mediums used were: 

• Photoshop

• Premiere Pro

• Youtube

• GIF Compressor 

• Independent Documentations

• Font Websites

• PNG Compressor

• Youtube to MP4

• Adobe Illustrator

After familiarizing myself with how Google Sites worked, I recognized how limited many things were. For example, when uploading gifs/images, there's a maximum size of only 47 mb, which seriously compromises quality and overall bitrate. When I wanted to incorporate the ocean into the background, I ran into a lot of issues.

OCEAN BACKGROUND

1. There wasn't any stock footage of good quality online that could be directly applied to my background.

• After spending a couple of hours researching and trying to find gifs/videos that were black & of good quality, I decided to take a different approach.

2. Rather then looking for pre-made gifs with the right colors & quality, I finally decided to make my own.

• I looked on different creative common publication sites for high quality footage of the ocean, and after scrolling for a bit, found the one I wanted to use. The author allows free usage, however, I will still be referencing them. 

• After finding the raw video, I converted it into a MP4 and imported it into Premiere Pro. I changed the ratios and the resolution of the video to properly fit Google Sites. I additionally changed the standard frame rate to 60, as the base 25 resulted in very jittery and inconsistent footage.

• After I was happy with the base footage, I utilized Premiere Pros' built in color and saturation lab, to which I lowered the saturation to 0 and adjusted some of the darknesses and sharpnesses to provide an "dark ocean". 

• From this point, I wanted my background to fit nicely as an intro. To do this, it needed to sync well with the background aspects and allow for easy reading. After making my navbar transparent (meaning it has an opacity of 0 and is see through), I wanted to incorporate a black gradient that would feather in opacity to provide a nice smooth "downwards" direction to the intro (also allowing for the navbar to be better read).

• To do this, I took a shape, scaled it up to my footage, and then made it black. I then used an opacity mask, picking the rectangular shape and sizing it drastically outside the proportions of my footage, and then raised the feathering to 100 - allowing for a nice gradient. 

• Once this was done, I trimmed the footage and also added keyframes at the beginning and end so they would phase into eachother nicely.

• Now ready to export, I finally had to deal with Google Sites low import rates - being capped at only 47 mb. Since the videos I was exporting (benchmarked in high & low qualities) were all significantly higher then this, I had to look externally for GIF Compressors to lower the size.

• After spending at least 65 attempts compressing it and modifying the length, I finally had a background I liked. 

NAME LOGO

1. Being one of the more simplistic things, this part was relatively easy. After researching the recommended resolutions and ratios for this picture, I went into photoshop and set my canvas size.

• I then looked on daFont for fonts that I liked. To help go along with the modern & simplistic vibes, I looked for a cursive font that resembled a signature. After scrolling for a bit, I found the one I liked - downloading it and importing it as an OTF.

2. From this point, I simply added a text layer in Photoshop, typed out my name, trimmed the background, and then imported. I used a PNG compressor to compress it. 

YEAR ANIMATION 

1. I wanted to add something that would add creativity and uniqueness to my website - so I went out and tried to make an year wheel that would iterate and scroll through different times. I felt this would make it a lot more dynamic, adding to the overall quality of my website. 

2. To create this in Premiere Pro, I would need to first properly set up my sequence settings and ensure it was in the right configuration - which involved changing the resolution, format, and more.

3. I then looked at daFont and looked for a good numbers font that would add to the modern & realistic vibe I was aiming for. After looking for a bit, I found the perfect one.

4. To create the animation, I first inputted in a text layer. I wrote "2008" first and then scaled it up to the desire size. From this point, I then entered after every number, iterating all the way up to 2025. 

5. With this done, and with my numbers centered, I then added a gaussian blur filter to the text layer and then went to the start and added keyframes for the position and blur amount.

6. I then. moved my "cursor" all the way to the front, so the playback would end at the desired interval where I wanted the animation to complete, and added another keypoint for 0 gaussian blur. I also took the y-axis of my position value, and iterated through it until I had 2025 in the middle of my screen. Once this was done, I added a mask for the opacity and placed it ontop of the 2025, adding a feathering of 100. 

7. Once that was done, I moved the playback to the center and added another keyframe for gaussian blur - this time at 300 instead of 0.

8. This meant the blur would peak in the middle, rising to 300 in the first portion and then decreasing to 0 in the ending portion - adding a good sense of momentum.

9. I then modified the keyframes and added motion transitions to both ease in and ease out when it reaches the beginning and ends.

10. Finally, I exported it as a gif in alpha mode, and then added it to my website.