NOTE - UPDATE - 21st Nov 2023

Unfortunetly, my designer was not able to supply a finished product. My code coaches have connected me with the UX Design teachers who have given me a new design to start again. My initial project has been moved to another branch so I can begin again on main as I cannot fork the repo twice.

Submitted 2nd design on December 2nd 2024: All styling complete and all translation, home page and event page both in English and German.

Submitted again on January 5th 2024: To fix some styling and add hover effects.

Design Handoff Project

This week we transformed a UX student's design into a React-based landing page for a gym/fitness club. This project bridges the gap between design and development, showcasing the art of bringing visuals to life with code. The teacher did not specify where to put the translation box and told me I was welcome to change the design to fit it in, it now appears as flag buttons in the footer which I rearranged a little.

The Problem - 2nd Design

Describe how you approached to problem: I was happy to do this week again with a design supplied by the UX Design teachers. I had a few issues with the styling and grid box, and completing all of the translation was time consuming but gave me a great sense of accomplishment!

The Problem - 1st Design

Describe how you approached to problem: This week was a fanastic experience and a good challenge. I really enjoyed the real-life aspect of taking a design and following specs to create it. Unfortunetly, my designer had some heath and scheduling issues that meant I have been coding with an incomplete design, and was only given a hand-off on Wednesday morning. My designer did not attend our demos on Friday.

As of Saturday, I have a complete homepage of desktop and tablet design to work from. I have no mobile design and no form/about me page. Therefore, my requirements as a developer cannot be met, and I have informed Technigo of the situation. When my designer is complete I will continue to work on the project.

I had some styling issues this week:

There is a background image that covers both hero section and navbar section, I think I need to move my navbar component into the hero section?
In the "meet the founders" section the 3 images on the right also bleed out the top and bottom of the section. I haven't solved this yet. The bottom of the section is also not a horizontal line, with a small upward slant, I have been researching ideas to acheive this.
The footer has also give me issues, trying to use grid box to aline the items as specified
At this stage all language functionality is in the program and it is tested with a button at the bottom, I need to link this button to the rest of the components and fill out the .json files. I have started with the "About Us" section and once the button is working I will do the rest.

What tools and techniques you used to solve it: I used React Router (Route, Routes, Link, NavLink) and i18next to handle language translation.

What technologies did you use?: HTML5, CSS3, React, React Router, with Editor: VS Code

If you had more time, what would be next?: I would have loved more time with the designer and a more complete (and more simple!) design. I do value the experience as this will no doubt happen in the real world. The designer made some difficult design choices that I found very hard to acheive as the developer.