Throughout the past seven weeks, I have spent my time relearning the basics of HTML and CSS. Up until the final week of class, we were tasked with making goofy edits to a site we built entirely on our own in order to make sure we understood the possibilities of the markup language and style sheet.
For the final week of the semester, however, we had a much more advanced task: take a template from W3Schools and edit the built-in code in order to make it your own portfolio website.
I chose the Startup Template because it has that very flat style that I like, and it reminds me closest to this site in which you’re reading this blog. Keep reading and I will describe my entire process from turning a template into a stylish portfolio site.
The first step towards making my own site from this template was to obviously change the image. I initially had an editing timeline as this background image, but I decided to move that to the footer and replace this with an image of myself because this is the only picture of my face exposed that’s on this site.
You may notice that my image seems a bit more vibrant than usual. Well, I found out how to change the saturation and brightness of an image using CSS, and I think it looks so much better.
What are all the other styles used for? I wanted to make my background image fade to black when you scroll down, but I could not figure that out. I think the main reason is that my template had strict properties on the dimensions of the blocks used for each section and I did not want to mess with that. I did manage to prevent my image from scrolling up though due to attempting this, and I actually prefer it.
I must also point out that currently, the background image has trouble performing on Safari and Firefox. The image will stutter and slow down performance when you scroll down from it on Safari, and on Firefox the image will follow the menu bar to the top instead of staying fixed. I think the issue may have to do with the image being fixed instead of scrolling up, but for now it will stay the way it is.
Icons and Background Colors
These two features of my site were the most frequently revisited features, as I kept messing around with their properties until I got them just the way I like them.
The icons I used were from Font Awesome. There were already a few in the template so I figured I’d use icons from the same site to keep the code consistent. I figured out how to give each icon their own gradient and seeing the bottom portion of the icons fade into the background gives them a mysterious and almost camouflaged appearance that I really enjoy.
Because each of these icons came from Font Awesome, their name when embedded into the code is “fa-film,” for example. If you want to apply any style changes to them, you must place a “.” directly in front of the name in your CSS file for the changes to take effect. This is because you are editing a “class” and not an “element.”
The icons were not the only features that got the gradient treatment. A few of my backgrounds did too. Applying this gradient was one of the last changes I made to this site. When looking to apply gradients, I noticed that I could potentially remove the lines if I give each alternating page a black gradient on the top and bottom, with a color in the middle. This change makes the entire website for me, as it makes the site feel so much more modern and smooth, acting like one unified page instead of a page divided into sections.
This is also my “video” page, where I have a trailer for the short film I did cinematography for and a button that redirects you to my YouTube channel that houses all of the school projects I’ve worked on.
Creating a Bio section
This page went through one of the biggest changes. I knew I did not want a team section, but I felt this could be the perfect place to add a bio about myself. I got rid of every property except the leftmost image, replaced it with my own image, and added my own text. Getting the text to wrap around the image was tough to figure out, but it was well worth it once I did.
I also gave the text a radial gradient, which I took a chance on trying, not knowing that it was the only other type of gradient CSS knows (aside from a linear gradient). Safari is the only browser that has an issue with this text gradient, as whenever you load or reload the site, the text is hidden and won’t show up until you highlight it. If any of you reading this have any idea what the issue could be and why Safari is the only browser that causes this issue, please comment on this post.
I changed the photos section the least. I added the same gradient background effect as I did to the video section above, but besides that, I simply replaced W3’s images with my own and called it a day. W3 had code built-in that lowers the opacity of the image when you hover over it, so I decided to keep that in because it lets people know they can click on the image to view a larger version of it.
I also optimized the images to make them all below 700kb. This allows them to all load in as fast as possible upon reloading the website.
Contact and Progress Bars
When I got to this part of the template, I realized some serious changes needed to be made. I focused on the contact page first, where I got rid of the location line and the message boxes. I felt those were redundant and if someone wanted to email me they can press the “message me” button I added, which will redirect them to their own email site and draft a message for me automatically. Once I made those changes, I felt that the right side of the page was empty. I wanted to fill it with something. After some thought, I decided that adding the skills bars next to the contact info could be a good idea, as it could fill up all the space I needed. I had no use for the text on the left of the skills bars that the template provided, so I thought this was the best move.
I had a lot of trouble figuring out the code for this site. I got real annoyed with the amount of divs this template had and the intimidatingly large amount of div classes confused me. I tried moving the skills bars to the contact section but they were stuck below the contact info and I could not get them to sit on the right side of the page like they did in their own section.
After a lot of frustration, I reverted the skills charts back to their original section and decided to replace the code on the left with the contact info. I was careful to do one paragraph at a time to make sure I was not messing anything up. Eventually, I got everything to match well.
You will notice that my progress bars have gradients attached to them as well. When you add a linear gradient style, it defaults to a vertical gradient. I wanted a horizontal gradient for the progress bars because it looks better that way. If you look towards the bottom right of the code, you will see I figured out that I needed to add (to right, __) before listing my colors to tell the code in which direction to set the gradient. I think this section looks a lot more colorful and feels a lot more useful than what the template had provided.
Final Image and Animated Buttons
And we’ve made it to the bottom of my website! There are a few small changes I made to the template. First, I replaced the map with an image of an editing timeline for a YouTube video I made. I thought it looks complex enough to catch the eye of some people scrolling through my site. I also copy/pasted the hover-opacity effect that W3 used for the image gallery section above, and attached a link to this image, which actually sends you straight to the YouTube video that this timeline represents.
The final feature you may see (or may have noticed throughout my images thus far) is that I have a 3D button! The button is actually animated, so not only does it change color when you hover over it, but the button animates downward as if it’s being pressed down when you click it. I found this trick through W3’s button page and I feel it adds a lot of depth and emphasis to each of the buttons, almost like they’re waiting for you to click them.
I spent the last few days tweaking this template into the website you see today. I think this website not only gives a good idea on my coding capabilities thus far, but it also represents my personality and my style so well. I love how smooth it is, and how everything looks like it’s on one long page when in reality each of the information is split up into sections.
When I started this class, I thought the code I did for my undergraduate game design class was impressive, but I must say that this is the best looking website I have ever designed (albeit I did get quite a lot of help from the template).
For optimal viewing experience, I would strongly recommend using Chrome on a desktop. Safari has a problem with my gradient text and Firefox has a problem with my background image. And don’t even get me started on mobile. This website is not responsive so save yourself the time and just look at it on a desktop.
Working with code has been a lot of fun, and although this class may be over, I am still interested in playing around with code and will continue to tweak my website as I create more content. For now though, I am really satisfied with not only how the site looks, but with how far I’ve come in my understanding of code, and I’d really appreciate it if you scrolled to the top of this article, clicked the link and gave my website a peek.