A fresh look at my website

For our last week at Phase 0, we were asked to update and improve our website by practicing our HTML/CSS skills. 2 ways were suggested, either implementing a framework in order to solidify our code, or improve upon existing code. Since I already had a few ideas on how to improve the design and overall UX of my website, I set out to work off my existing files.

I did a lot of designing tweaks that, overall, make the site simpler and easier to navigate. I was surprised how many improvement opportunities I was noticing after a few weeks of regular visits, this was rewarding in the sense that I’ve been developing an eye for web UX, whenever I see something cool or interesting I try to figure out how it is built using the Chrome dev tool. Here is a quick list of the tweaks I made:

1. More neutral background color,
2. Simplification of the homepage and blog index page,
3. Improvement of the font setup for better readability,
4. Changed the color of the navigation bar for better contrast in certain pages,

But the biggest item I’ve worked on is a new animated index page working as a welcome page. I did a bit of research and came across great examples on Codepen (link: codepen.com). I was able to bootstrap from open source code and had to learn a great deal about CSS media queries along the way. Media Query is a new feature in CSS3 that adds interaction and animations to a web page using CSS only. The animation is described in separate declarations using the code: @keyframes animationName and applied to the elements we want to animate, along with a few other parameters. Here is how it looks for one animation:

.tagline {
    width: 100%;
    top: 350px;
    text-align: center;
    font-size: 22px;
    letter-spacing: -0.04em;
    font-family: 'Alegreya Sans SC';
    color: black;
    position: fixed;
    animation-name: fadeInUp;
    animation-duration: 3s;
    animation-delay: 4.5s;
    animation-fill-mode: both;
    margin: 0 2%;
    }

    @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      transform: none;
    }
    }
    

The overall experience was great, my next step will be to add more interactivity using JavaScript and JQuery. In the meantime, I really encourage you to spend time on Codepen, it’s full of amazing things!