Website Creation: Home Page

In this post, I would like to talk about the process of creating my home page for my website.

First of all, I will be creating my website using Wix. To begin with, I started off with a blank canvas because I feel that the templates are not fitting to how I would like to make my home page in terms of layout, which is mostly using columns and sections which I found hard to customize and arrange. I changed the title into my website's name, changed the website's domain or link, and finally changed the copyright on the bottom into my own. I chose a theme with the balanced colors of white and black, and with a sans serif font called Avenir to give off a modern-feel. Then, I changed the menu or navigation layout, along with changing its font to Avenir as well. 

Afterwards, I began by creating my first box. I created a black box by going to Add Elements and then the Box section. I then wrote my introduction to the website with the title "My Work Showcase." This paragraph includes my interests, my study route, and who I am, which is an aspiring filmmaker. The title's size is 54px, while the paragraph's size is 25px.

Moving on, I decided that it would be a great idea to add a short loop of me using the camera. So what I did is set up my EOS 5D Mark II and record myself in a mirror, with the motion of the camera going from horizontal to vertical. I had shot the footage at 1080p, 24 frames per second, with ISO 800. Afterwards, I pull out the CF card and put it on a card reader to transfer the footage to my laptop. 

To create the loop effect, I used Adobe Premiere Pro. I first created a new project, then put my video in to edit it. I begin by going to the fx symbol on the footage, clicking it, going to time remapping, and clicking speed in order for me to be able to adjust the speed of the footage. Moving on, I hold the ctrl button and click on the middle of the footage, which created a marker. I then dragged the speed on the right side of the footage down, reducing its speed. Afterwards, I dragged the left marker to the beginning of the footage, resulting in the footage gradually being slower as it reaches the end.

The next step I took is to change the time interpolation to optical flow to make it smoother. I then press enter to render the video. After that, I created another copy of the work I've made on the right side. I then went to speed/duration and changed it to reverse. The result is a short loop of me turning the camera to vertical form before turning it again to horizontal. 

The last touch I did is to change the color of the footage as it looks bland. I went to color, changed the look into Kodak 5218 Kodak 2383, and did some adjustments in basic correction such as a warmer white balance, a little blue to the shadow, slightly increased exposure and highlights, etc. After I've done color correction, I exported the video into mp4 format.

With the video finished, I went back to my website to upload the video. I went to Add Elements, Video & Music section and picked one video box. I then arranged my introduction on the left side, while putting the video box on the right side. To upload the video, I clicked the video box, went to change the video, and uploaded my video there.

Moving on to the next section, which is the small photography gallery and "What to Expect?" To create this short gallery, which its purpose is to add more color to the website and show off my work, I first went to Add Elements, Gallery, and then chose the showcase one. After that, I went to manage media and began to upload photographs that I want to include. Then, I created another black box on the right side with Add Elements, added the title of "What to Expect", sized 54px, and wrote a short list of what I can do and what my followers can expect from my work with a size of 34px. I also added an additional text as to the relevance of these photos for my journey as a filmmaker with Avenir, sized 45px.

To add more details on what I did and learned from each photo, I clicked on the photos gallery and clicked "Manage Media." In it, I changed all the titles of the photos as fitting to them. I included what I learned and did on each photos that helps me for filmmaking. As such, when visitors clicked on one of the photos in the Gallery, the description of my experience from the photo is shown.

In the last section, I want to add a reference to the project I'm currently working on right now in Digital Arts, which is a 10-15 long page script with the theme of grief and loss. I repeated the same process of creating a black box and following it with white text, sized 56px, 28px, and 42px. Following that, I went searching for a screenshot of the script and uploaded it to the website using Add Elements, and Upload Images. Then, I added a black border to the script because of its white background. After that I  added a social media bar on the bottom of the page, along with a comments section using the app by CodeMagic LTD, which I found in the Add Apps section. Lastly, I created a "Back to Top" and "Contact" button by going to Add Elements, Buttons, and then linking one to the top of the home page while linking the other one to the Contact page.

After finishing my desktop version of the home page, I went to work on the mobile version. To begin with, I changed the title size into 25px, while making the text 12px. Since the black box was too big, I also reduced the size of the black box to fit in. After that, I reduced the size of the video, and put it on the middle of the website..

The next step is to edit the rest of the home page, which includes the "What to Expect?", Photos Gallery, and Major Project section. Starting off with "What to Expect?", I changed the title text size to 25px and made the text 17px. Afterward, I decreased the size of the black box and made the text and box left-aligned. Moving on, I made the gallery smaller and made the layout to be the center of the page. I also changed the text size of the Gallery description to be 9px.

Then, I reduced the size of the Major Project title to 28px and the description to 18px, while making the black box smaller and left-aligned. Lastly, I made my script picture smaller and put it in the middle.

With that, I finished my home page. You can check out my website through this link: Charlie's Film Journal.