Overview
Smoothie is a visually rich desktop-focused landing page inspired by a community design from Nickelfox Design(opens in a new tab) on Figma Community(opens in a new tab). This project translates the original visual concept into a high-fidelity web application with enhanced motion and interaction design.
While the design is not responsive and targets desktop screens only, it serves as a focused exercise in animation and layout fidelity using modern front-end tooling.
Role
Front-End Web Developer — responsible for implementing the layout, enhancing interaction with custom animations, and refining UI behavior for desktop environments.
Core Stack
Let's take a look at the core stack used in this project:
The core stack used in this project includes:
- TypeScript – Static type checking for better code structure and maintainability.
- React.js – A JavaScript library for building component-driven user interfaces.
- Tailwind CSS – Utility-first CSS framework for efficient styling and layout construction.
- Vite – A fast build tool and development server.
- Framer Motion – Used to create seamless and performant UI animations.
Features
- Desktop-only layout optimized for 1440px and above
- Motion-enhanced user interface using Framer Motion
- Layout and style faithfully based on the Figma design
- Informative screen size notice for unsupported viewports
- Fast load time with modern tooling
Development Timeline
Initial Commit: June 8, 2024
Live Preview
This project does not support mobile or tablet viewports.
A screen width of 1440px or larger is required to view the application.
Users on smaller devices are shown a message:
Please use a bigger screen to view this page. At the moment, this page is only supported on screens with a width of 1440px or higher.
