How I Re-Wrote my Portfolio Site

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:

@keyframes myanimation {
    0% {
      top: 0px;
    }
    50% {
      top: 50px;
    }
    100% {
      top: 0px;
  }
}

.hovered {
  animation: myanimation 3s;
}

Array.from(document.getElementsByClassName('letter')).forEach(letter => {
  letter.addEventListener("mouseover", (e) => {
    letter.classList.add("hovered")
  })
  letter.addEventListener("animationend", (e) => {
    letter.classList.remove("hovered")
  })
})

After tweaking the CSS a bunch, I ended up with a mockup Codepen of my name. 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.

Mockup Codepen

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

I had also recently seen a couple cool Code Pens using p5.js. Two of my favorites were an interactive physics playground and a Wikipedia change visualizer. 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.

Interactive Physics Playground

Wikipedia Change Visualizer

My Random Shapes

The P5 JavaScript code looked like this:

const numShapes = 3
const maxSize = 200

let colors = []
function setup () {
  colors = [
    color(255, 143, 0, 80),
    color(255, 128, 171, 80),
    color(255, 193, 7, 80),
    color(76, 175, 80, 80),
    color(0, 188, 212, 80),
    color(171, 71, 188, 80),
    color(239, 83, 80, 80)
  ]
  createCanvas(window.innerWidth, document.body.offsetHeight)
  noStroke()
}

function randomNumber (size) {
  return Math.floor(Math.random() * size)
}

function randomChoice  (choices) {
  let index = randomNumber(choices.length)
  return choices[index]
}

function mouseClicked () {
  let sideLength = randomNumber(maxSize)
  fill(randomChoice(colors))
  let shapeType = randomNumber(numShapes)
  if (shapeType % numShapes == 0) {
    ellipse(mouseX, mouseY, sideLength, sideLength)
  } else if (shapeType % numShapes == 1) {
    rect(mouseX, mouseY, sideLength, sideLength)
  } else {
    triangle(mouseX, mouseY, mouseX + sideLength, mouseY, 
      mouseX + (.5 * sideLength), mouseY - sideLength)
  }
}

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 straightforward 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 working on my FlexBox skills since I used to use 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!). Of course, a lot of that can be attributed to social media use after the rewrite, but people have been really nice about how it looks!

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! I think it represents my personality well, and it showcases my work. If you want to check out the site, it is aspittel.github.io and the code is on my GitHub!

Part of my On Learning New Things Series

Comments

[Will Vincent]

Between the p5 library and the 'brands.js' file, you've got over 400K (compressed) of 3rd party requirements, before any of your own code. That's super heavy for what the resulting page actually is.

I'd recommend finding ways to trim that down, considerably.. especially if mobile users are a target consumer of the page.

[Adrian B.G.]

Nice.

I have a burning questions for years, how can I display the beauty of backend services and algorithms, the front end devs got it easy :D

[Ali Spittel]

Ah! I actually have professionally worked as a backend engineer but not as a frontend one!

[Adrian B.G.]

Yes but if I would make a fancy CSS3 portofolio website I am afraid I would give the wrong impression that I like front-end :)) god forbid, for me is a necessary evil, I may be good at it but doesn't mean I like it.

[Ana Vasquez]

Hahaha!! I love backend too (more than I will ever like front end). I think back end is more logical and harder to showcase, so maybe when showcasing the end product, it's better to accompany it with an article or post. Then the article would need:
1) problems you faced
2) how you solved it
3) relevant code that helped

Another insight here: freelancing.stackexchange.com/ques...

[Chelsey]

How do you stop the music from the CodePen ?

[Mark Powell]

This is awesome Ali! I'm playing with shapes this weekend!
Oh, and your favicon is the Vue logo.

[Ben Greenberg]

This is awesome. Thanks for sharing the process and the site looks amazing.

[Tim Myers]

When you leave your website the music doesn't stop! :P

[Salvador Montiel]

You have a nice portfolio site!

[Charles D. Villard]

Hey! There seems to be a weird formatting bug in your post. Your link to your site is rendering as dev.to/aspittel/aspittel.github.io.

[Ali Spittel]

Fixed it! Thank you 🙂

[LuisPa]

THIS IS AWESOME!

[Javid Asgarov]

Very cool, but I have horizontal scroll on my screen. It seems to come from 'width: 100%' on the body? What do you need it for? If it's really crucial, try adding 'overflow-x: hidden'.

[Ali Spittel]

Ah thanks! Fixed it. At some point I was having issues getting the canvas to be 100%, but fixed that and kept the body one accidentally!