This project is my submission for the Noo.ma recruitment process. It showcases a full-page layout with various interactive features of my idea.
You can view a live demo of the project here: Noo.ma Demo
- React: For building the user interface.
- TypeScript: For adding type safety to the JavaScript code.
- Tailwind CSS: For styling the application with utility-first CSS.
- Vite: For bundling the application with a modern, fast build tool.
You can check the design files in /public/design directory of the repository.
The project was designed to be a full-screen layout with appropriate margins, allowing the content to stretch across the entire page. Due to the unavailability of the project's original font file, I opted for the closest match available.
The core requirements (design) were implemented within 4.5 hours. An additional 3 hours were invested to add enhancements for the visual effects that deliver a sense of high interactivity and engagement.
- Photos Shuffle: Images are shuffled upon page load, giving users the impression of encountering new images each time.
- Entrance animtaion: Gallery up-slide animation activates upon page load.
- Image Reveal: Images unveil as the user scrolls down, adding a dynamic feel to the gallery.
- Smooth scroll to Gallery: A feature that scrolls the user down to the gallery section upon unlocking.
- Subtle Image Hovering: Slight background enhancement for improved text readability.
- Dynamic Glow Effect: Based on mouse movement, this effect adds a layer of interactivity to the images.
- Auto-Generated Content: Titles and descriptions (on larger screens) are dynamically generated from file names.
- Footer: A simple footer to round off the page.
These features are implemented to not only capture the user's attention but also to create a memorable and engaging user experience.
While the project might seem modest, it incorporates a range of features intended to demonstrate both functionality and creativity.