DOCS

Overview

DOCS is a modern UI project featuring an interactive interface with draggable cards. It is built using Framer Motion for smooth animations, Vite for efficient bundling, and Tailwind CSS for styling. The project is structured into two main components:

1. Background - Provides the base UI layout.
2. Foreground - Contains draggable cards that enhance user interactivity.

Features

• Three draggable cards placed in the foreground.
• Smooth and seamless drag animations powered by Framer Motion.
• Efficient and optimized performance with Vite.
• Styled using Tailwind CSS for a modern and responsive design.

Tech Stack

• React.js – Core framework for building the UI.
• Vite – Fast and lightweight build tool.
• Framer Motion – For smooth drag and motion animations.
• Tailwind CSS – Utility-first CSS framework for styling.

Project Structure

DOCS/
│── src/
│   ├── components/
│   │   ├── Background.jsx
│   │   ├── Foreground.jsx
│   │   ├── Card.jsx
│   ├── App.jsx
│   ├── main.jsx
│── public/
│── index.html
│── package.json
│── tailwind.config.js
│── vite.config.js

Usage

• Users can drag the cards around the screen.
• The motion effects ensure a smooth and interactive experience.
• The layout is fully responsive and adaptable to different screen sizes.

Contributing

Contributions are welcome! If you’d like to improve the project, follow these steps:

1. Fork the repository.
2. Create a new branch (feature-branch-name).
3. Commit your changes.
4. Push to your fork and create a pull request.

License

This project is licensed under the MIT License.

Contact

For any inquiries or suggestions, feel free to reach out:

• Email: nk9411123@gmail.com
• GitHub: Ojhanaveen

Enjoy working with DOCS! 🚀