Frontend Developer Test Task

Task Description

The task was to create a responsive layout based on the provided design in Figma. The layout should adapt to different screen sizes and resolutions. Additionally, animations were required to mimic the behavior outlined in the provided animation guide. A video was provided to be integrated into the text "Mars".

Preview Links

Figma Project
Solution

Task Requirements

• Create an adaptive layout based on the provided Figma design.
• Ensure compatibility with the latest stable versions of the following browsers:
  • Mozilla Firefox 91
  • Microsoft Edge 92
  • Google Chrome 93
  • Opera 78
  • Safari 12
  • IOS Safari 12
  • MI browser 13
  • Samsung Internet Browser 14
• Maintain cross-browser compatibility.
• Implement Pixel Perfect design, with a maximum deviation of 5 pixels.
• Ensure sliders, masks, and scripts function correctly.
• Present the completed project by providing a link to the Figma project, Netlify deployment, and the project repository.
• Provide comments and information about any challenges faced during the task.
• Emphasis was placed on the absence of bugs in the submitted task.

Completion Notes

The project has been completed according to the specifications outlined in the task. The layout is responsive and adapts to various screen sizes. Animations have been implemented as described in the animation guide, and the provided video has been integrated successfully into the text "Mars". The layout has been tested and confirmed to function properly in the specified browsers.

Challenges Faced

1. Missing Fonts: The font used in the design didn't support Cyrillic characters. I had to find and apply a compatible font with minimal stylistic differences. Initially, I tried a hack by imitating Russian letters with Latin characters, like using "MAPS" instead of "Марс".

2. No Framer Motion: I'm used to implementing animations smoothly with React and Framer Motion. Working without them meant relying solely on CSS keyframes, which can be more time-consuming.

3. Pixel-Perfect Layout: I have limited experience with pixel-perfect layouts. To ensure accuracy, I used a browser extension called PerfectPixel to compare the layout with the Figma design and make adjustments where needed.

Comments

Implementing this project was fun, and I even added a little surprise inside! ☄️🌌