MateDesign is a training project that demonstrates proficiency in design implementation and responsive development. Inspired by a concept design found on Pinterest, the design was recreated in Figma for three breakpoints and then built using modern web technologies.
- Responsive design implemented for three breakpoints
- Smooth animations for an interactive user experience
- Built as a practice project to refine design-to-development workflow
- Build Tool: Vite
- Frontend: React.js
- UI Components: ChakraUI
- Styling: Tailwind CSS
- Animation: Framer Motion
-
Clone the repository:
git clone https://github.com/your-username/matedesign.git cd matedesign -
Install dependencies:
npm install
-
Start the development server:
npm run dev
- dev: Start the development server.
- build: Create a production build.
- lint: Run the linter for code quality checks.
- preview: Preview the production build.
The design was implemented based on a concept found on Pinterest and recreated in Figma for three screen sizes (mobile, tablet, desktop). The goal was to practice design replication and responsive development techniques.
This project is primarily for learning purposes, but feel free to open issues or contribute if you'd like.
This project is licensed under the MIT License.