Michael Little

GitHub

Melbourne , Australia

My Projects

Random Joke Generator

Pulls a random joke from the Jokes API

Rock Paper Scissors

Single Player Rock Paper Scissors build with Vanilla JS and CSS Grid

Visitor Counter

This simple visitor counter was a fun weekend project designed to explore serverless architecture on AWS. It uses an API Gateway REST API to trigger a Lambda function, which reads, updates, and writes a visitor count stored in DynamoDB. The updated count is returned to the frontend and displayed in real-time. IAM roles manage access between services securely, and CORS is configured on the API Gateway to allow requests from the frontend.

Frontend Mentor Challenges

Frontend Mentor offers real-world coding challenges to help developers improve their frontend skills with hands-on projects.

NFT

This NFT component was a fun little weekend challenge I have built this using react, building the component data with a custom hook. It loads the data from an external json file to simulate an API call.

The price is dynamically calculated from an AUD value using the free coinlayer api to get the current price of etherium.

QR Code

This QR component was a little more basic than my last couple of projects, so it felt like a good opportunity to write my first ever react component.

This was definitely overkill for this project but turned out to be a good learning experience in setting up and structuring a react project, writing the component with jsx and building and deploying the project.

It has highlighted some issues that i will need to solve around the efficiency of the project creation and build steps, as well as the general need to get better at react.

Ratings Component

This is a working ratings component, the selected radio button's value gets passed through to the javscript and then removes and re-renders the elements inside the ratings component.

I found this project a little frustrating on the js side. Creating each element after the form submission felt a bit verbose and kind of messy. I think this is the value of using a framework like react, and has encouraged me to begin learning a framework.

Product Preview

This project featured a simple two-column layout that shifts to one column on mobile. While not the most technically challenging, breaking down elements into categories and applying past experience helped me complete it quickly. My main goal with these Frontend Mentor projects is to enhance my speed and efficiency in frontend implementation.

Results Summary

A responsive results summary component built with css grid

This was a challenge to style and match a more data driven user experience.

I have extended this project by pulling the data in from a series of random json files to simulate an API call, and I have created some themes that get assigned based on the users overall score. This score is calculated as the average of each of the category scores.

Preview Card

A responsive design built with html and vanilla CSS.

This small project was very simple and felt like a good way to work on speed, especially with the css, as well as a good oppertunity to get used to css grid.

Recipe Page

A responsive design built with html and vanilla css.

This was a nice way to dip my toe back into front end development. It was very relaxing to bulid something without the pressure of a university grade hanging over my head.

Social Links

A responsive design built with html and vanilla css.

This small project was very simple and felt like a good way to work on speed, especially with the css. I think this also will be a good project to revisit to add infrastructure to, and make more dyanmic.

Faq Accordion

An interacive Faq Accordion Element, build with css grid and vanilla js.

This project was a bit challenging, as it involved several responsive elements that needed to be both adaptable and interactive. It was a valuable lesson in slowing down and ensuring each component was correctly implemented before moving forward. Looking at the final result, I see potential opportunities for improvement, particularly by incorporating animations to enhance the user experience.