Frontend Mentor - Fylo dark theme landing page Challenge solution

This is a solution to the Fylo dark theme landing page Challenge challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
• My process
  • What I learned
  • Continued development
  • Useful resources

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

My process

What I learned

I'm glad I completed this project—not because of its complexity, but due to the challenging image layout. It was initially confusing to implement, but working through it allowed me to learn from my mistakes and improve my approach to layout design.

Continued development

I attempted to integrate parallax effects and smooth scrolling using Framer Motion but faced significant challenges. Moving forward, I plan to deepen my understanding of animation techniques to refine my skills before applying for jobs. Additionally, I aim to strengthen my grasp of Next.js alongside my MERN stack, as it significantly enhances SEO, performance, and developer experience.

Useful resources

Resource Name	Description	Link
Vitest Documentation	Official documentation for Vitest testing framework.	Vitest Docs
TypeScript Documentation	Comprehensive guide on TypeScript language features and best practices.	TypeScript Docs
Tailwind CSS v4 Documentation	Official documentation for Tailwind CSS version 4, including utilities and configurations.	Tailwind CSS v4 Docs
Framer Motion Documentation	Detailed documentation for the Framer Motion library for animations.	Framer Motion Docs
React Documentation	Official React documentation covering concepts, hooks, and advanced patterns.	React Docs