Grit - Deploy Vision
GRIT Website Project: Front-end implementation from Figma to code
I was responsible for translating GRIT’s full website design from Figma into production-ready code using HTML, CSS, and JavaScript. The project came through Deploy Vision (US), where I collaborated directly with the backend developer and the CEO to deliver a pixel-perfect, fully responsive implementation across 11 pages.
Key Achievements
- Converted 11 Figma designs into responsive HTML, CSS, and JavaScript pages.
- Reused and adapted design patterns for typography, grids, and components to ensure brand and visual consistency.
- Implemented responsive layouts and interactions for both desktop and mobile.
- Debugged and aligned front-end behaviour with backend logic for a smooth integration.
- Delivered on-time within a tight production timeline, maintaining attention to detail.
Impact
- Ensured a smooth handoff from design to development, reducing rework.
- Delivered a consistent, user-friendly website ready for launch.
- Improved maintainability by structuring reusable components and clean code.
My role focused on the front-end build, ensuring each of the 11 pages matched the Figma designs while remaining scalable and responsive. I worked closely with the backend developer to connect dynamic data and with the CEO to address business requirements throughout the process. The implementation required adaptability, testing across devices, and constant alignment with both design and technical needs.
Custom Implementation
Responsive Layouts
Every page was built to adapt seamlessly across desktop, tablet, and mobile. Special attention was given to typography scaling, flexible grid systems, and media optimization.
Desktop Figma Design:
Mobile Figma Design:
