MikePickett.dev

Join Me On My Journey To Becoming A Front-End Developer

This site is a showcase of various works including some experiments, training challenges and anything else I feel might be related to my path of becoming a Front End Dev.

Album Randomizer

The album radomizer, in its current iteration, is a very simple JS app that pulls 1 to 10 albums from my record collection. Currently this script uses a local json file that needs to be manually updated as I add albums.

I am working on updating this app to instead connect to the Discogs API and pull my collection automatically.

Tech Stack

Spotify API Test

Nothing really impresive to see here, at least not yet. Just playing around with the Spotify API, someday I'll think of some cool way to design a record player interface... my idea is to have an interface that looks like a record sleeve with the licorice pizze sticking out of the top a little, just some of the label showing, and when you press play the record would start to spin and disappear down into the sleeve and be replaced with the lyrics.

Tech Stack

Background Color Change Button

Just simple little color changer. It was a quick and easy tutorial that I found at the start of my JS journey.

I can't recall where this came from, it was some YouTube channel tutorial when I was just getting started, if I can find a match to the code I'll be sure to add a link to the channel, credit where credit is due, right?

Tech Stack

QR Code Component - Frontend Mentor Challenge

This was a pretty simple build, at least for a first challenge after not doing much design that required a full build from scratch. There were a few challenges and I still have some things I'd like to go back in and adjust, we'll see if I find the time to make the udpates - I might just say, meh, fuck it and leave it as is to let it serve as a reminder of where I started again in all of this.

Tech Stack

Blog Preview Card - Frontend Mentor Challenge

I really enjoyed the CSS portion of this. The HTML could use a little work - still getting back into the whole HTML5 sematics thing, so while the icon is listed below, it could use a little work, don't judge.

Tech Stack

Article Preview Card - Frontend Mentor Challenge

Love that was able to get this one completed - my first JS project. It took some digging in the MDN Docs to find a few things that I got stuck on but in the end it works.

I've looked at some of the other designs for this challenge on Frontend Mentor and found that a number of them have the modal appear on hover, but felt that this isn't the best for accessibility, having to click an element I believe is better for keyboard and screen reader access.

I am still going to work on some responsive elements on this design, currently it only works in landscape on mobile devices.

Tech Stack

Coming soon...

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quam tempore magni quas hic est, eum laboriosam quo. Tempora consectetur facilis ad ipsam reiciendis velit quae dolore, est cupiditate asperiores!