Website Gallery: Video Production

Today, I reviewed my website by checking for missing elements and broken links. I also changed background colours, upgraded the home page by adding images, text, and a button linked to my portfolio subpage, as well as making some smaller visual updates.

Initially, I started by creating a new project subpage - "Cloud Gaming in 5 Minutes”. From the left-side vertical menu, I opened a ‘Pages” section, and from the top-right, I clicked on a “+” symbol to add a page, and then I renamed it.

My next step was to add my video project from YouTube. I selected the section in the new subpage, then clicked on “Add an Element”, and from the “Quick Add” section in the left-side menu, I selected “Video Player” to add it to the section. After a container was added, I clicked on it, and from the context menu, I selected a gear icon to enter the settings, where I changed a link.

I then copied a button from my previous project and pasted it into my new subpage.

Next, I changed the size of the video container, centred it horizontally and vertically and added the title above the video.

In the Portfolio subpage, I added an image and a button above that is linked to my project subpage. “+” -> “Quick Add” -> “Image”, then copied a button RMB -> “Copy” -> “Paste” and placed both adequately on the page.

I then went back to the home page. I clicked on the section and removed the background image using the right-side menu.

In the next step, I split the container into 4 cells. I needed only two, but the other two I used to manipulate the container and adjust the space between elements. LMB -> “Add Cell” -> “To Top” x4.

I added an image container by clicking on the top cell, then from the left side, in the “Quick Add”, I clicked on “Image”. After a container was added, I clicked on it and selected the “Change Image” option. I selected my background image and in the right panel, “Adjust” and edited the image by darkening the “frame” to make it consistent with the background of the page, and adjusting the colours, making them more vibrant by increasing saturation and contrast while decreasing the shadows option to get enhanced effect of vignette option, I edited and saved the image multiple times setting this option to 100%. After the image was done, I clicked on “Update” to apply the changes.

Before:

After:

After the image container was added, I clicked “Set image as a background” to expand the image in the section.

In the same way, I added a “Basic Shape” and set its opacity to 70% in the right panel and then, the text container.

In the next cell, I added a button and a “Repeater” with four symbolic images that I selected. All elements were centred horizontally and vertically.

Then, I adjusted the button using some CSS in global.css. The code is already commented on, so I won't describe it here again.

After this, I changed the vertical menu background from solid colour to gradient by selecting the menu, and from the right panel, selected the “Dropdown Container” and changed the background.

I also changed the page’s background to a lighter colour and then adjusted the behaviour of the header and its colours. Now the header is hiding when scrolling down, but before it changes its colour to the colour of the page background.

In the next step, I changed the shape dividers on the top and the bottom of the section to create an interesting dimensional effect and a nice transition. I clicked on the section and selected “Shape Dividers”, then selected one and adjusted.