Learning Log

While I was working on my midterm portfolio project, I found a website called cssanimation.io

This website is super cool because it shows you all the possible css animations that you can do, both with words/letters and with blocks. I used a couple in my midterm, including FadeIn, LeFadeIn, and FadeInTop.

For example for the h1 that says “Hello I’m Alina!” I added a leFadeIn that fades in the phrase by letter. I didn’t have to do the keyframe css thing since I imported a library from https://cdn.jsdelivr.net/gh/yesiamrocks/[email protected]/cssanimation.min.css

opacity: 0;
    animation: leFadeIn 1s forwards 2.3s;

I also spaced out the forwards time to distribute the amount of time it took for each part of the page to load to lead the user’s eye.

They also have a lot of other cool ones like Lightning and Water Wave, but I just find those unfitting for the clean aesthetic I was going for.

On each portfolio item, I added a hover effect with a pseudo element:

.portfolioitem:hover {
    background-size: 103%;
  }

This is meant to draw the user’s eye to each portfolio item as they scroll down the page rather than scrolling past everything.

Midterm

I originally wanted to create a music analysis platform, but after trying to access the api for a while and trying to graph things on github I decided to switch over to doing a portfolio for myself instead since I was applying for jobs and having one would be super necessary.

The Figma wireframe/mockup:

https://www.figma.com/file/smZoehSYJE5bQAJcBcNp06/portfolio-website?type=design&node-id=0%3A1&mode=design&t=bBTYNUex7fzTUPPt-1