Introduction

In this project, I collaborated with a local event management company to develop a visually engaging and media-rich landing page. The design was provided by the client, and I worked closely with their designer to implement it, focusing on ensuring a responsive and accessible experience across devices, especially for mobile and desktop users.

Technology and Implementation

Next.JS for Content Management

Given the need for flexibility and dynamic content, I opted for Next.JS as the framework. Next.JS offered the perfect balance between local content management and dynamic rendering. I set up a structure where content—such as markdown, images, and videos—could be managed locally in dedicated folders, allowing the system to automatically generate the page content. This setup also made the landing page multilingual, ensuring ease of content management for future updates.

Focus on Accessibility (WCAG)

Accessibility was a key focus throughout development. I ensured that the page adhered to WCAG guidelines by implementing alt tags, aria tags, and other accessibility features to provide a barrier-free user experience.

Performance Challenges

One of the major challenges in this project was maintaining performance while implementing the design's heavy use of large, colorful backgrounds and animations, including mouseover effects. Initially, the page used SVGs with pre-applied blur effects, which caused performance issues. I optimized this by switching to SVGs with blur filters, which improved performance temporarily. However, adding mouseover animations reintroduced performance problems on certain systems, which still need further optimization.

Project Status

The project was temporarily paused due to a lack of content from the client, with performance optimizations and additional features pending.

Conclusion

The landing page successfully blends dynamic media elements and accessibility, thanks to the flexibility provided by Next.JS. Performance challenges remain, but further optimizations are planned once the project resumes.