Week 11 of Technigo Boot camp. Collab with UX design student. A Landing page and About page with React. Browser router, reusable components and Internationalisation library (react-i18next) for translation.
Reusable components in this project: Logo, footer, infofooter, navbar, burgermenu, moodmusic
The key learning-goal for this week was to collaborate with a Ux-designer and to implement their design. Since we are both students not knowing that much about each other's field there were some challenges to implement photos of low quality, waiting for info and interpretting the design. 1/3 prototypes was working (mobile) which made it a bit hard to interpret design and sizes. With good communication mid-week we decided not to code in detail and to shorten the About page (I had to change designer which gave me less time as I had prepared for the first one). A link to the designer's Figma was added to the About page with a hover effect (click the "GALACTIC FITNESS 2023 BY RODOPI DESIGNS" in the footer). In that way the designer can show the link but also direct the viewer to her original work.
Squoosh.app was used to reduce file-size to load the site faster as it was a bit slow at first.
A burger menu is prepped with styling etc.. Decision was made with designer to click the burger icon to go to the About page, and click the logo to go to the Landing page. And instead of spending time on hamburger to try to input music from Star-wars. After a while I ended up getting a link with code from Spotify due to property rights. Buttons were added for translation.
A form was prepped but as there was no form in the design I decided to comment it out. As one of the learning goals was to try out animations they are left in this project in learning purposes. I have attentionally left files from animation in learning purposes as well.
Team-mates, course material, chatGPT were used. chatGPT was used for the translation as it could save time copying the endpoints and code I've written in the en.json file. Although the translation itself would had to be change in a real world scenario.
With more time I would have changed the components and added the backround another way as it gets blurry on some parts. I would also add the hamburger and add more content to the About page. I would also have re-arranged some of the components to make the structure better and easier to understand.