Website Project

HTML + CSS

Before this website, I had an online CAD portfolio from one of my classes, however I felt like I could improve on it. During quarantine, I came up with this idea so that I could learn some new skills and properly showcase my skills to potentially employers. The home page shows what can be found on the website, a list of skills, projects and some information about myself like my hobbies and interests.

As someone with limited coding experience, making a nice looking website with all the animations and styles that I want seemed like a daunting task. Before starting the website, I audited a quick introduction to HTML and CSS class on edX to familiarize myself with the two languages. Afterwards, I went on HTML5 UP to start off with a template since I was still just a beginner. The template was a good start so I could come with ideas for the look of the site and didn't have to worry as much on aspects like different sized viewports or certain animations. I started off with the Spectral template and messed around with different parts of the website to apply what I learned from the edX class.

I eventually got the ball rolling and here is a list of some of the things I have changed:

  • Icons and element styles
  • Sections to home page and added more
  • Scroll and hover animations
  • Webpages dedicated to different subjects
  • Lightbox from a tutorial by Lokesh Dhakar
  • Grid layout for portfolio items
  • Contact information form that redirects to my email via formspree.io
  • Debug to remove unused code

Mobile

As mentioned before, the template was helpful in dealing with the issue of viewports. It already included the code for various sized viewports, so it reduced the workload. To the left is a screen recording I trimmed and cropped on my phone and edited into a clipart phone.

Laptop/Desktop

To the left is what you see if you are viewing my website on a wider viewport like a computer. This was recorded on my desktop and it was edited and trimmed like the previous video.