🚀 Technology Stack Component

A reusable Technology Stack component built with Next.js, Tailwind CSS, Sera UI, and GSAP.
Easily showcase the technologies your project uses in a clean, animated, and responsive design.

---

📦 Features

• ⚡ Next.js 14+
• 🎨 Tailwind CSS styling
• 🧩 Sera UI components
• 🎞️ Smooth GSAP animations
• 📱 Fully responsive & customizable
• 💻 Works seamlessly in Visual Studio Code

---

🛠️ Installation

1. Clone Repository

   git clone https://github.com/your-username/technology-stack.git
   cd technology-stack

2. Install Dependencies

   Make sure you have Node.js (>=18) installed.

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Install Tailwind CSS

   If your project doesn’t already have Tailwind set up:

   npx tailwindcss init -p

   Update your tailwind.config.js:

   module.exports = {
     content: [
       "./src/**/*.{js,ts,jsx,tsx}",
       "./node_modules/@seraui/components/**/*.{js,ts,jsx,tsx}"
     ],
     theme: { extend: {} },
     plugins: [],
   };

   👉 Alternatively, follow Sera UI installation guide.

4. Install Sera UI

   npm install @seraui/components
   # or
   yarn add @seraui/components

5. Install GSAP (Required for Animations)

   npm install gsap
   # or
   yarn add gsap

---

⚙️ Usage

Import and use the TechnologyStack component in your Next.js project:

import { TechnologyStack } from "@/components/TechnologyStack";

export default function Home() {
  return (
    <main className="flex items-center justify-center h-screen">
      <TechnologyStack/>
    </main>
  );
}

---

👨‍💻 Development (VS Code Recommended)

• Open in Visual Studio Code
• Install extensions:
  • Tailwind CSS IntelliSense
  • Prettier (Code Formatter)
• Run dev server:

  npm run dev

• Visit http://localhost:3000 to view the component.

---

📸 Preview

---

📝 Contribution

Pull requests are welcome!
For major changes, please open an issue first to discuss what you’d like to change.

---

👤 Author

Haider Ali