Starrymnl is a frontend website inspired by the Instagram page Starrymnl. I built this as a personal project to practice frontend development skills, particularly using React, Chakra UI, and Tailwind CSS to create a visually appealing and responsive design.
The design and layout were inspired by Starrymnl's aesthetic, and while I shared the work with the owner of the page, it was not used in an official capacity. This project remains a personal showcase of what I learned and implemented.
- React (v18.3.1)
- Chakra UI (v2.9.1)
- Tailwind CSS
- React Router DOM (v6.26.2)
- React Icons (v5.3.0)
- React Slick (v0.30.2)
- Responsive design with Chakra UI and Tailwind CSS for modern styling
- Page navigation using React Router DOM
- Slick carousel integration for image and content sliders
- Scalable and maintainable React components
- Browse through content using the homepage carousel
- Navigate between pages via the menu and links
- Responsive layout adapts across screen sizes
- Set up a React project with component-based architecture.
- Implemented routing between pages using React Router DOM.
- Built a responsive UI combining Chakra UI and Tailwind CSS.
- Integrated React Slick for smooth carousel interactions.
- Added React Icons for clean, consistent iconography.
- Built reusable React components with a consistent visual style.
- Combined Chakra UI and Tailwind CSS effectively in one project.
- Translated an Instagram aesthetic into a structured web layout.
- Focused on visual consistency and responsive design.
- Improved understanding of React component architecture and UI library integration.
- Add Framer Motion animations for smoother transitions
- Implement a dynamic gallery with image lightboxes
- Enhance mobile-first responsiveness further
- Clone the repository to your machine.
- Install dependencies: npm install
- Start the development server: npm start
- Open the app in your browser at: http://localhost:3000