feat: add Firebase integration and update UI components with animations and styles

- Added Firebase dependency to package.json
- Implemented Firebase initialization in firebase.ts
- Updated App.tsx to enhance UI with hover effects and animations for various components
- Created a new empty reviewsApi.ts file for future API integration

firebase.ts

@@ -0,0 +1,22 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getFirestore } from "firebase/firestore";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: "AIzaSyDjjh1mePjkVmSq6jSQLQ99bsqIPHuotLU",
+  authDomain: "portfolio-ff4f6.firebaseapp.com",
+  projectId: "portfolio-ff4f6",
+  storageBucket: "portfolio-ff4f6.firebasestorage.app",
+  messagingSenderId: "44240859214",
+  appId: "1:44240859214:web:094f0ab145c1910cde931f",
+  measurementId: "G-FLETQXV0G5"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const db = getFirestore(app);
+export { app, db };

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "firebase": "^11.9.1",
     "lucide-react": "^0.514.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"

src/App.tsx

@@ -619,15 +619,13 @@ const App = () => {
 
           <div className="grid gap-8 md:grid-cols-2">
             <div
-              className={`${
+              className={`$${
                 isDarkMode
-                  ? "bg-gradient-to-br from-blue-900/20 to-cyan-900/20"
+                  ? "bg-gradient-to-br from-blue-900/20 to-cyan-900/20 border-blue-900"
-                  : "bg-gradient-to-br from-blue-100/40 to-cyan-100/40"
+                  : "bg-gradient-to-br from-blue-100/40 to-cyan-100/40 border-blue-200"
-              } backdrop-blur-lg rounded-xl p-8 border ${
+              } backdrop-blur-lg rounded-xl p-8 border-2 transition-all duration-300 transform hover:scale-105 hover:border-blue-400/70 hover:shadow-lg`}
-                isDarkMode ? "border-blue-400/30" : "border-blue-300/50"
-              }`}
             >
-              <div className="mb-4 text-4xl">🏊‍♂️</div>
+              <div className="mb-4 text-4xl group-hover:animate-bounce">🏊‍♂️</div>
               <h3 className="mb-4 text-2xl font-bold text-blue-400">
                 Swimming Competitions
               </h3>
@@ -638,15 +636,13 @@ const App = () => {
             </div>
 
             <div
-              className={`${
+              className={`$${
                 isDarkMode
-                  ? "bg-gradient-to-br from-green-900/20 to-emerald-900/20"
+                  ? "bg-gradient-to-br from-green-900/20 to-emerald-900/20 border-green-900"
-                  : "bg-gradient-to-br from-green-100/40 to-emerald-100/40"
+                  : "bg-gradient-to-br from-green-100/40 to-emerald-100/40 border-green-200"
-              } backdrop-blur-lg rounded-xl p-8 border ${
+              } backdrop-blur-lg rounded-xl p-8 border-2 transition-all duration-300 transform hover:scale-105 hover:border-green-400/70 hover:shadow-lg`}
-                isDarkMode ? "border-green-400/30" : "border-green-300/50"
-              }`}
             >
-              <div className="mb-4 text-4xl">🏸</div>
+              <div className="mb-4 text-4xl group-hover:animate-bounce">🏸</div>
               <h3 className="mb-4 text-2xl font-bold text-green-400">
                 Badminton Competitions
               </h3>
@@ -677,9 +673,9 @@ const App = () => {
 
           <div className="grid gap-8 md:grid-cols-2">
             <div
-              className={`${cardClasses} rounded-xl p-8 border border-white/10`}
+              className={`${cardClasses} rounded-xl p-8 border border-white/10 transition-all duration-300 transform hover:scale-105 hover:border-orange-400/70 hover:shadow-lg`}
             >
-              <Rocket className="mb-4 text-orange-400" size={40} />
+              <Rocket className="mb-4 text-orange-400 group-hover:animate-bounce" size={40} />
               <h3 className="mb-4 text-2xl font-bold text-orange-400">
                 Entrepreneurial Spirit
               </h3>
@@ -691,9 +687,9 @@ const App = () => {
             </div>
 
             <div
-              className={`${cardClasses} rounded-xl p-8 border border-white/10`}
+              className={`${cardClasses} rounded-xl p-8 border border-white/10 transition-all duration-300 transform hover:scale-105 hover:border-red-400/70 hover:shadow-lg`}
             >
-              <Zap className="mb-4 text-red-400" size={40} />
+              <Zap className="mb-4 text-red-400 group-hover:animate-pulse" size={40} />
               <h3 className="mb-4 text-2xl font-bold text-red-400">
                 Growth Mindset
               </h3>