DisonObudho
Gym Fitness Website Project
Project Overview: I developed a comprehensive and responsive Gym Fitness website to showcase my expertise in modern web development technologies. This project highlights my skills in front-end design, CSS, animations, JavaScript, React, and my familiarity with Django Rest for backend integration.
Key Features:
- Responsive Design: Implemented a fully responsive layout to ensure optimal viewing across a wide range of devices, from mobile phones to large desktop screens.
- Modern UI/UX Design: Designed an intuitive and visually appealing user interface that enhances user experience, focusing on ease of navigation and accessibility.
- CSS and Animations: Utilized advanced CSS techniques and animations to create smooth transitions and interactive elements that enhance user engagement.
- React Integration: Leveraged React to build reusable components, manage state efficiently, and improve overall application performance.
- Django Rest Backend: Incorporated Django Rest framework to handle API requests, manage user authentication, and securely store user data.
Technologies Used:
- Front-end: HTML5, CSS3, JavaScript, React
- Animations: CSS animations
- Back-end: Django Rest Framework
- Tools: Git, Webpack, Babel
Project Highlights:
- Created a seamless user experience with responsive design and interactive elements.
- Developed and integrated RESTful APIs for efficient data management.
- Showcased proficiency in both front-end and back-end technologies.
This project exemplifies my ability to deliver a fully functional, responsive, and visually engaging website, demonstrating my technical prowess and attention to detail in modern web development.
React Public Site Link:
Django Rest Public API Link:
The following react depencies were used in this project:
"animate.css": "^4.1.1",
"@reduxjs/toolkit": "^1.9.7",
"aos": "^3.0.0-beta.6",
"axios": "^1.6.1",
"bootstrap": "^5.3.2",
"framer-motion": "^10.16.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-leaflet": "^4.2.1",
"react-redux": "^8.1.3",
"react-router": "^6.18.0",
"react-router-dom": "^6.18.0",
"react-toastify": "^9.1.3",
"reactstrap": "^9.2.1",
"remixicon": "^3.5.0",
"sass": "^1.69.5",
"swiper": "^11.0.4"
Sections
Homepage
The animation effect in the home page is managed by Aos. A simple and powerfull open source library for creating beatiful animations.
Exercise Benefits Section
A Higly responsive section created using raw scss.
Pricing Card
This card is bult with pure scss, framer-motion and bootstrap to create beatiful animation when hovering. The UI is higly responsive.
Testimonials
This beautiful testimonials component is created using swiper. It creates a good impression to the user and also improves user experience by simplifying image browsing.
Installation
React
Cloning the site
To clone the project, ensure you have git installed
| |
| |
| |
| |
Django Rest
| |
| |
| |
| |
| |
| |