Year
2024
Client
Personal Project
Category
Food
Product Duration
1 week
The inspiration behind Ratatouille came from modern culinary websites and gourmet restaurant menus. Research was focused on how top-tier recipe sites structure their content, how food photography is framed on-screen, and how minimal UI helps highlight visuals. Special attention was paid to responsiveness and user accessibility, ensuring the site works seamlessly across devices and screen sizes. The project also explored how color palettes influence appetite and emotion, which guided the visual decisions throughout.
The design prioritizes simplicity, elegance, and visual warmth. A soothing color palette and large food imagery dominate the layout, drawing users into each recipe card. Components like category filters, ingredient lists, and recipe steps were structured for clarity and quick readability. Subtle hover animations, image transitions, and font pairings were chosen to give a premium, restaurant-style digital vibe. Responsive design ensures that the UI adapts gracefully to tablets and phones without losing structure.
Ratatouille is a static front-end project developed with vanilla HTML, CSS, and JavaScript. CSS Flexbox and Grid were used extensively to handle layout design, while JavaScript handles small interactive elements like menu toggles and dynamic image previews. The site was deployed on Vercel, offering fast loading speeds and smooth performance. The development emphasized semantic HTML and reusable CSS classes, keeping the codebase clean and maintainable.
