All solutions

Mini project to test some Frame Motion animations on.

Another fun site to build. No issues to speak of.

ADA issues are present in the site from the design's lack of enough contrast between foreground/ background colors. I didn't want to fly in the face of the design by dropping in AA/AAA passing colors but it's worth pointing out. This said I do have an alternative setup with Lighthouse passing everything in 100%.

As always please poke around in the code to see if I can be doing something better, always open to constructive criticism.

All the best, Steve

Went against the design slightly for the contact form. I moved the error text message below and to the left because a lot of people use LastPass and their icon sits where the message was in the design I think it is important for people to be able to still use LastPass as it should be.

I parsed out some sections of data into their own data.json file to create an easier method for building out the swiperJS, portfolio, and leader sections.

As was suggested in the brief I did use Leaflet to create the map and bespoke popups. But I wasn't able to get the flyTo method working in this version of React. So if anyone has had success getting the flyTo method to work I would appreciate some advice for that. This is why I haven't included the links that are in the design.

I did pick an new design layer for the map that I thought was more fitting for the site design and in doing so I had to update the map pins to fit.

Oo-wee! This was tricky. I have never made a shopping cart before and I am glad I pushed myself to have a go. Really happy with the way this turned out. There were lots of bumps along the way but nothing deterred me from reaching out for help in some discord groups I'm in or mother Google!

As always have a look over it and give me feedback.

I loved making this project! Lots of nice design challenges. Always pushing myself to learn more about the React layer.

The biggest hurdle in this was finally getting a good fix/workaround for GH-Pages not supporting multi-page React apps using <HashRouter>, which is a lot simpler than using the 404 redirect method that I've tried in the past.

I was very happy with the SwiperJS integration I use for showing the data on the inner pages. Using this library I was able to add subtle animation effects for transitioning from one slide to the next. In my opinion, subtle animations give for a much nicer UX, nothing is jarring.

Anyway, poke at my code and let me know if you would have done something differently or let me know if something could be done better. Always happy to take constructive criticism.

• Took the raw HTML that came with the project and re-factored the HTML into data for the projects list. It might be slightly over-engendering for data this small but I did it to brush up on creating a data file and mapping over a nested array.
• Concentrated on keyboard controls to make sure all tabbable elements were reachable.
• Added a unique focus style, one that differs from the hover effect for a better ADA UI.
• Dropped in some subtle animation on the rings just for a little eye candy.
• Used React Hook Form for a simple way to do form validation.

Have a poke around, and let me know what you think, what I can improve, and what I missed.

All the best, Steve

This one was a long time coming! I had to do a lot of React Router learning and a LOT of setState learning!

Please poke around in the code and let me know what I could have done better.

Not too much to talk about on this. Did this mini project to remind me how to use the Grid as I don't get to us it much/at all in my daily work. I kept practicing the placement of columns using the grid-column.

The first venture using React. Loved it! If there are any pros that want to pass their expert eye over my code I'd welcome any feedback. I'm not sure yet of best practices and would appreciate this being pointed out to me.

And if anyone has any advice on pushing React apps with routing that would be really good! I want to try this out in a future build and I can see that adding a React app with routing needs a few extra steps and I'm unsure where to start looking.

Always ready to listen to constructive criticism, pointers tips, and tricks!

Always ready to listen to constructive criticism, pointers tips, and tricks!

Always ready to listen to constructive criticism, pointers tips, and tricks!