The making of : My portfolio website

The concept

As a web developer, one of the best ways to show your skills is with your portfolio website. My previous iterations had served their purpose, but they had been boring and static. I knew I wanted my site to be dynamic and unique, so I started coming up with some ideas.

European heatmap

The process

I wanted this site to showcase my talent for web development, so I decided on a flexible, fast and familiar technology stack.

  • NodeJS
  • Express
  • React (NextJS)
  1. The code that fetches the song I’m currently listening to.
  2. The code that generates a background image based on said song.

Step 1: Fetching the song

The song fetching subroutine
The gradient generation subroutine
const audioFeatures = await getAudioFeatures(token, id);
const gradientArray = audioFeatures.sections.map((section) => {...})

Some examples

Conclusion

After getting the background to work reliably, I added all the standard, boring-ish features of a portfolio site (not interesting enough to talk about here), adding simple, but attractive elements to display my work and show off my skills.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Wyatt Sell

Wyatt Sell

I like programming and using technology to make awesome stuff