This is a professional frontend job task built using modern tools and best practices. It showcases animated, responsive UI design with a smooth user experience using React 19, Vite, TailwindCSS, and Framer Motion.
- ⚛️ React 19 + Vite 7 for blazing fast development
- 🎨 TailwindCSS 4 for clean and customizable design with responsive layouts
- 🌀 Framer Motion for smooth animation effects
- 🧭 React Router v7 for navigation
- 👁 Intersection Observer for scroll-based animation triggers
- 🕸️ Hero section with animated dot network and linking lines
- 🧼 Clean, maintainable, and reusable code structure
rococo-melba-job-task/
├── public/ # Static assets like favicon, images
├── src/
│ ├── assets/ # Static images, fonts, etc.
│ ├── components/ # Reusable UI components
│ ├── layouts/ # Layout components (Header, Footer, etc.)
│ ├── pages/ # Route-based pages
│ ├── routes/ # Application routing logic
│ └── styles/ # Tailwind & global CSS
├── .eslintrc.cjs # ESLint configuration
├── vite.config.ts # Vite configuration file
├── package.json # Project metadata and scripts
├── pnpm-lock.yaml # Lock file for pnpm
├── package-lock.json # Lock file for npm (if used instead of pnpm)
├── .gitignore # Ignored files in Git
└── README.md # You're here!
| Tech | Description |
|---|---|
| React 19 | JavaScript library for building UIs |
| Vite 7 | Fast build tool and dev server |
| TailwindCSS 4 | Utility-first CSS framework |
| Framer Motion | Declarative animation library |
| React Router v7 | Declarative routing |
| ESLint | Code linting for clean structure |
---
## 📦 Installation
Clone and install dependencies:
# Step 1: Clone this repository and enter the project folder
git clone https://github.com/khriad991/rococo-melba-job-task.git
cd rococo-melba-job-task
# Step 2: Install all dependencies
npm install
# Step 3: Run the app in development mode
npm run dev
# (Optional) To build the app for production
npm run build- 🟢📞 +8801533190476
- 🌐 Portfolio
- 📂 Other Projects
- 💼 GitHub