Skip to content

Transform 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.

Notifications You must be signed in to change notification settings

Anna2024WebDev/project-design-handoff-vite

 
 

Repository files navigation

Design Handoff Project

This week we should follow a design from a UX student. We should also use styled and reusable components.

The Problem

We started of with the planning of components and what could be reusable. Another aim was to keep the app.jsx file as clean and concise as possible which I think we achieved. We have followed the design as close as we could but our main problems was the linear gradient which changed depending on screen but I think we fixed quite well in the end. The flower in the bottom right corner is not placed exactly as it should and the footer is floating in some screens. We haven't solved those problem completely.

Tools and techniques that we used apart from reusable and styled components is that we created a global styles file for universal styles that apply across the entire app. We created json files for the quotes and spells to store structured data that that can easily be accessed and keep the code clean. We also created React hooks like useEffect and useState.

View it live

https://dailyspells.netlify.app/

Collaborators: Anna Hansen Erika Olsson

[Anna2024WebDev,erikamolsson]

About

Transform 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.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 95.7%
  • HTML 4.3%