React Developer for a design site. GSAP animation

1️⃣ About the project:
CKMS is a design + build company in the design and construction industry

Client came with the request for a new website – React Development from a Figma Design.
The team provided React development and testing works.

📌Clients requests:
– Build a website from Figma to React
– Create the following 4 pages:
Home page, Contact page, Design page, Projects (single project)​
– This website was created in Figma; you need to develop a responsive desktop and mobile
– Implement animations when transitioning between pages and when elements appear. Loading animation, Page transition, Unique Menu animation, Parallax animation
– Custom coded React website. With clean animation and Headless CMS integration. All text content of the project should be maintained and edited via JSON file CKMS
– Need testing and good page speed optimization
– Monthly support to do any updates, improvements, and maintenance

⚙️ Technologies: ReactJs, HTML/CSS, Custom JSON Headless CMS, GSAP

2️⃣ Project tasks:
✔️ Figma to ReactJS
✔️ Custom Headless CMS integration
✔️ Develop a user interface based on the provided design
✔️ Add animation: Loading animation, Page transition, Unique Menu animation, Parallax animation
✔️ Adding content
✔️ Testing the project and Page Speed Optimization

⏳ Estimate project: 65 hours
📌 Pages – 4​
📆 Timeline: 8 business days
💸 Cost: 1950$

3️⃣ What was achieved
💲 Provided Pixel Perfect Figma to React Conversion, matching the final product with the initial design.
💲 Implemented smooth animations during page transitions and element appearances to improve user experience.
💲 Configured all project text content to be managed and edited through a JSON file for easy updates.
💲 Highly efficient site with the indicator of 90+ Page Speed Optimization, fast loading speed
💲 Implemented responsive design for good performance on all devices.
💲 Provided ongoing monthly support for updates, improvements, and maintenance of the website

CKMS website: https://ckms.design/design

  • #ReactJS
  • #scss
  • #GSAP

LET'S CONNECT