Some interesting challenges in the making of this website
Contact Form
This website was created entirely without a back-end. So you might be wondering how does a website with no back-end is able to process a contact form, and to that I say, thanks to this Github repository, I found a way around it. Instead of using a server to send email, it uses Google to send email on your behalf and Google Spreadsheets to keep track of the data.
The Google spreadsheet looks like this.
It records the time the contact form was submitted, the user's name, the message, and the user's email.
Every email I receive is from my personal email to myself.
And this is how the email I receive looks.
Video Editing Gallery
Another challenge I faced while creating this site was creating the video gallery. At first, I planned on just doing a page with one video after the other in a column format, but that didn't look as clean as I wanted it to look, so I looked into carousels while looking for other ways to showcase my videos. A carousel is a small representation of visual elements that allows you to cycle through them. Two black frames with the word "video" in them can be seen in the image below. These are the other videos that are part of the carousel but are hidden from view until you click the "prev" or "next" button.
However, achieving this was not easy; I tried it myself but failed to make it look as I wanted. Then, while doing more research, I came across this other Github repository. This repository enabled me to create a beautiful responsive carousel slider with very few steps.
Then, while testing the carousel, I noticed that if you play a video and then go to either the previous or next video, the sound from the previous video would continue to play, so I had to add my own script on each button that awaits for a click, and once you've clicked on either button, the script pauses all videos, allowing you to play the next video without the noise from the previous video.
Certificates Page
The last challenge I faced was figuring out how to display all of my certificates within the same iframe element.
Someone online suggested that I create an HTML file with all of the iframes I needed for each certificate and
display them full size in that file. Then, from the certificates page, I could use another iframe element that uses that HTML file as a source, allowing you to scroll down through my certificates.
When I was finished, I liked how it looked, but mostly because it took me a long time to get it that way, not because it looked good.
Initially, the PDFs had a grey bar between them, as seen in the image below on the left side, and it was pretty inconsistent with different screen sizes.
But then it occurred to me that I didn't need my certificates in pdf format; I could convert them to any other format and display them that way. I'd also be able to compress the image files, making them load much faster. On the right side of the image, we can see how it looks now that I'm using photos instead of PDFs.
Also, don't judge me for not incorporating the certificate photos into a single page, as I did with this one. At least, this allows me to demonstrate other methods of displaying content.