Cobalt Development
Visit the projectThis project was for a subsidiary company of Cobalt Group, called Cobalt Development. My brief was to create a website in a similar style to their existing websites (Cobalt Aluminium & Cobalt Construction); which would introduce their company and showcase their work.
Due to the simplicity of the site, this meant I could build it for SSG (static site generation), as I would not have to fetch data from a database, or any external API. I created the design on Figma, and after receiving client feedback, moved on to the development phase. When choosing the technologies, I used Next.js, Framer Motion, and Tailwind CSS.
Web technologies used:
Next.js, Framer Motion, Tailwind CSS, and Node.js
![[object Object] logo.](/_next/static/media/nextjs.df05eec9.svg){kind=small}
![[object Object] logo.](/_next/static/media/framer.b6fb3532.svg){kind=small}
![[object Object] logo.](/_next/static/media/tailwind.032739dc.svg){kind=small}
![[object Object] logo.](/_next/static/media/nodejs.fbbc6b30.svg){kind=small}
Design process:
After discussing the website with the client, the first step was to get some ideas down on Figma. I created three different wireframe varients and presented them to the client. After hearing what design they preferred, I moved onto a more detailed design, which I then prototyped for the client. The screenshot below is the finished design on Figma; including the design variants for all devices.
Challenges and their solutions:
As I have improved as a developer, I have made sure that the websites I build are accessible. The main concern I had was making sure that when navigating the website via keyboard, the element highlighted is clear and concise. Using the Tailwind focus state, this was made pretty easy. However, when testing the website, I discovered another problem which was that the tablet and mobile navigation wasn't focused locked.
This small problem broke the functionality of the site, and I couldn't have that. Due to my lack of experience in the accessibility field at the time, I researched ways around this and found a few node dependencies which fit. After giving them a go, they didn't quite work how I wanted them to, this led me down a research rabbit hole, when I finally came to the conclusion to just code it myself.
In the end, I solved my issue by using Reacts Ref hook to mark the first and last item in the menu, and created a function that was called onKeyDown. This made the focus change back to the first item if the last item is navigated from and created a seamless transition.
The code referenced above can be found below.
I hope you enjoyed this project!
I appreciate you taking time to check out this project! If you'd like to see more, feel free to explore my other projects.
Go back to projectsCobalt Development
This project was for a subsidiary company of Cobalt Group, called Cobalt Development. My brief was to create a website in a similar style to their existing websites (Cobalt Aluminium & Cobalt Construction); which would introduce their company and showcase their work.
Due to the simplicity of the site, this meant I could build it for SSG (static site generation), as I would not have to fetch data from a database, or any external API. I created the design on Figma, and after receiving client feedback, moved on to the development phase. When choosing the technologies, I used Next.js, Framer Motion, and Tailwind CSS.
Web technologies used:
Next.js, Framer Motion, Tailwind CSS, and Node.js
Design process:
After discussing the website with the client, the first step was to get some ideas down on Figma. I created three different wireframe varients and presented them to the client. After hearing what design they preferred, I moved onto a more detailed design, which I then prototyped for the client. The screenshot below is the finished design on Figma; including the design variants for all devices.
Challenges and their solutions:
As I have improved as a developer, I have made sure that the websites I build are accessible. The main concern I had was making sure that when navigating the website via keyboard, the element highlighted is clear and concise. Using the Tailwind focus state, this was made pretty easy. However, when testing the website, I discovered another problem which was that the tablet and mobile navigation wasn't focused locked.
This small problem broke the functionality of the site, and I couldn't have that. Due to my lack of experience in the accessibility field at the time, I researched ways around this and found a few node dependencies which fit. After giving them a go, they didn't quite work how I wanted them to, this led me down a research rabbit hole, when I finally came to the conclusion to just code it myself.
In the end, I solved my issue by using Reacts Ref hook to mark the first and last item in the menu, and created a function that was called onKeyDown. This made the focus change back to the first item if the last item is navigated from and created a seamless transition.
The code referenced above can be found below.
I hope you enjoyed this project!
I appreciate you taking time to check out this project! If you'd like to see more, feel free to explore my other projects.
Go back to projects