pure_sagacity/Portfolio-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Maaz
2025-06-14 18:44:46 -05:00
parent 78077c1931
commit 3a92598dbf
5 changed files with 1042 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/App.tsx
View File

@@ -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-100/40 to-cyan-100/40"
} backdrop-blur-lg rounded-xl p-8 border ${
isDarkMode ? "border-blue-400/30" : "border-blue-300/50"
}`}
? "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 border-blue-200"
} 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`}
>
<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-100/40 to-emerald-100/40"
} backdrop-blur-lg rounded-xl p-8 border ${
isDarkMode ? "border-green-400/30" : "border-green-300/50"
}`}
? "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 border-green-200"
} 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`}
>
<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>