My Personal Site Re-Write
By: Ali Spittel
Tags: Portfolio, JavaScript, Code, HTML, CSS

This week, instead of learning one new thing, I got a little bit obsessed with re-writing my portfolio site. I decided to write a blog post about that process and the things I learned along the way instead of the typical article on one technology. I used three tools that I haven’t done a ton with in the past during this project: P5.js, CSS animations, and FlexBox.

Earlier this week, I noticed an animation that I liked on the Creative Coding Club’s website. The “Creative Coding Club” title moves dynamically on hover. I fired up a Code Pen and started trying to recreate it. I ended up with a pretty different animation where the letters fell and then returned to their original place after a few seconds. I originally had a CSS animation that ran on hover; however, the animation ended after you moved your mouse. I had to use JavaScript to add a class dynamically that would be removed when the animation finished.

This was my first time using keyframes and CSS animations, and it was surprisingly easy! The relevant code looks like this:

The top location changes depending on what percent of the animation has passed. All elements with the class name letter are selected, and the event handler is added to each element. Once the animation is complete, that class name is removed so that it doesn’t run again until you hover over the letter again.

My original Code Pen

I ended up really liking the animation, and I decided to run with it and redesign the rest of my site to match the rainbow name! I am not a trained designer by any means, and — though I probably should — I don’t usually wireframe my sites ahead of time or use any design software. I add a feature that I envision and then tweak it until it looks good on the page.

I also decided to use vanilla JavaScript (so no framework), my own CSS (again no framework),

I saw a couple cool Code Pens using p5.js recently — like these two:

I decided that I wanted to try and learn the library for this project. I just looked through the basic demos on the P5 site. I thought that it could be fun to draw a bunch of random shapes based on user input. Doing so was a pretty easy extension from the demos on the website.

Randomly sized, shaped, and colored items

The above P5.js code generated the effect above. The setup function runs as soon as the file is loaded — it initializes an HTML canvas. The mouseClicked function runs when the user clicks anywhere on the canvas. It runs a couple random number generations to get the size, color, and shape. I found it pretty straight forward to work with, and I would do so again in the future.

From there I had to move down the page and add sections for about, portfolio, and contact me. I’ve recently been moving on my FlexBox skills since I have used CSS libraries like Bootstrap and Materialize with builtin grids for most of my projects. I really enjoyed FlexBox Froggy for learning it — and CSS Grid Garden if you want to get ahead on CSS Grid! I used it for gridding out the two part bio section with my picture and my bio, and for the cards that display my different portfolio items. I still think I have some bugs in Safari and on really big screens, but I think I’m close to getting it all of the way there!

Overall, I had a lot of fun working on this full site rewrite and my traffic has increased pretty substantially (21,416.7% according to Google Analytics!). I’ve been taking a more minimalistic approach to using libraries, which reinforces knowing the standard JavaScript and CSS libraries. I do think React or Vue would have made some of the HTML more modular — the final HTML code is over 400 lines! I really like how fun and colorful the design is, even though it may break the three color design rule! If you want to check out the site, it is aspittel.github.io and the code is here: