Personal Website

Screen shot of the 2016 DubHacks website

Timeline: Jun 2014 - Ongoing

Project Type: Personal Project

Skills: Frontend Engineering, Web Development, Web Design, Speed Testing/Optimization

Context

My window into the tech industry

In the summer of 2014, I finishing my first year of college, completely new to the tech industry, new to programming, and full of hunger to develop marketable skills for myself. I devoted that summer to learning web development. I bought a domain and a server and, thus, cedricith.com was born.

My personal website became the foundation that supported my web development education.

By having my own domain, I had a place to host all of my personal projects that were to come. I could make it live and show my friends. I was liberated to explore all of my creative website ideas. It was the first website I ever built but it looked nothing like what it is now. It started off looking like crap. But everytime I look back at it, I love seeing how much I've improved in such a short amount of time.

This website is an extension of my skills and capabilities not just in web development but also in personal growth through its history. Let me take you through this part of my life that has changed and grown with me.

V1: Foundations

This was the first website I ever built and the first version of my personal website. While the result is underwhelming, I learned a lot about web development. Besides the basics of HTML and CSS, I also learned how to use hover effects, parallax backgrounds, and the CSS transition property. If you're looking to learn HTML and CSS, I wouold highly suggest CodeAcademy. Their course in HTML and CSS was extremely easy to go through.

The very first version of my website.

V2: Exploration

By the end of the summer, I had completely scrapped my earlier design and rebuilt my website from scratch again. This was the was the result. Not too shabby, I'd say. It was still a place for me to explore new ideas and learn more web tools. I implemented this website using flexbox - a powerful tool I still use. I also added Google Analytics.

The second version of my website.

V3: A Design Portfolio

Graduating from one-pagers

This version of my site was a huge learning experienced condensed into a very short amount of time. Fun Fact: This site was bulit during an all-nighter for fun (~8 hours straight).

It was the first time building a multi-paged website. A lot of planning went into building reusable code and designing a cohesive design language since I knew a lot of components were going to be repeated. This was also my first time doing web optimization and testing.

The second version of my website.

Tech Stack

Testing/Optimization

What I've Learned So Far

Besides learning how to use/getting better at the long list of tools up above, here are other things I've been learning from this website:

  • Knowing that my target audience was recruiters and design professionals, I wanted to make it optimized around skimmability. Apart of this optimization involved learning about the Optimal Line Length for readability (You have to scroll down near the bottom of the page). The idea is that each line should be between 30 and 90 characters long (60 being optimal).
  • This was one of the first multi-paged websites I've built so learning how to develop modularized CSS components was an interesting change in how I planned my web development. I was no longer allowed to practice poor web development hacks and specify super specific CSS. This lead to cleaner and more reusable code. In the future, I want to rebuild the site in SASS and some frontend framework (probably Angular or React).

Future Development

There are a few concept designs that I've been playing around with. Let me know if you like either of these!

One of my website concept designs.
One of my website concept designs.

My personal website is always going through iterations and I'm always making small changes. I'm also constantly adding new projects so be sure to check-in every now and again!

I'll see you at Version 4 ;)

Thanks for scrolling!