Added christmas effects

package-lock.json

@@ -11,7 +11,8 @@
         "framer-motion": "^11.0.0",
         "lucide-react": "^0.300.0",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-snowfall": "^2.4.0"
       },
       "devDependencies": {
         "@types/react": "^18.2.43",
@@ -2229,6 +2230,12 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -2239,6 +2246,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-snowfall": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/react-snowfall/-/react-snowfall-2.4.0.tgz",
+      "integrity": "sha512-KAPMiGnxt11PEgC2pTVrTQsvk5jt1kLUtG+ZamiKLphTZ7GiYT1Aa5kX6jp4jKWq1kqJHchnGT9CDm4g86A5Gg==",
+      "license": "MIT",
+      "dependencies": {
+        "react-fast-compare": "^3.2.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || 17.x || 18.x || 19.x",
+        "react-dom": "^16.8 || 17.x || 18.x || 19.x"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -12,7 +12,8 @@
     "framer-motion": "^11.0.0",
     "lucide-react": "^0.300.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-snowfall": "^2.4.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

src/App.jsx

@@ -4,13 +4,30 @@ import {Footer} from './components/Footer';
 import {Hero} from './sections/Hero';
 import {Projects} from './sections/Projects';
 import {Team} from './sections/Team';
+import Snowfall from 'react-snowfall'
 
 export default function LiquidDevelopment() {
     return (
         <div
             className="min-h-screen bg-[#0e0e0e] text-white font-sans selection:bg-[#00A3FF] selection:text-white overflow-x-hidden">
+            <div style={{
+                position: 'fixed',
+                width: '100vw',
+                height: '100vh',
+                top: 0,
+                left: 0,
+                pointerEvents: 'none',
+                zIndex: 9999,
+            }}>
+                <Snowfall
+                    snowflakeCount={80}
+                />
+            </div>
+
             <Navbar/>
+
             <Hero/>
+
             <Projects/>
             <Team/>
             <Footer/>

src/components/TeamMember.jsx

@@ -4,7 +4,7 @@ import {Github, Mail, Globe} from 'lucide-react';
 import {ObfuscatedMail} from './ObfuscatedMail';
 import {ROLES} from '../data/content';
 
-export const TeamMember = ({name, nickname, img, gh, email, website, roles}) => (
+export const TeamMember = ({name, nickname, imageLink, githubLink, email, website, roles}) => (
     <motion.div whileHover={{y: -5}}
                 className="group relative bg-[#121212] rounded-2xl p-6 border border-white/10 flex flex-col items-center text-center overflow-hidden shadow-lg hover:border-[#00A3FF]/40 transition-all duration-300">
         <div
@@ -18,7 +18,7 @@ export const TeamMember = ({name, nickname, img, gh, email, website, roles}) =>
 
         <div
             className="w-28 h-28 rounded-full mb-5 p-1 border-2 border-[#00A3FF]/30 group-hover:border-[#00A3FF] transition-colors relative z-10">
-            <img src={img} alt={name} className="w-full h-full rounded-full object-cover bg-gray-800"/>
+            <img src={imageLink} alt={name} className="w-full h-full rounded-full object-cover bg-gray-800"/>
         </div>
 
         <div className="relative z-10 w-full">
@@ -55,7 +55,7 @@ export const TeamMember = ({name, nickname, img, gh, email, website, roles}) =>
                     <Mail size={18}/>
                 </ObfuscatedMail>
 
-                <a href={gh} target="_blank" rel="noreferrer"
+                <a href={githubLink} target="_blank" rel="noreferrer"
                    className="flex-1 py-2 rounded-lg bg-white/5 hover:bg-[#00A3FF] hover:text-white text-gray-400 transition-all flex justify-center items-center"
                    title="GitHub">
                     <Github size={18}/>

src/data/content.js

@@ -20,8 +20,8 @@ export const TEAM_MEMBERS = [
         name: "Felix",
         nickname: "Flixcoo",
         roles: [0, 1],
-        img: "https://github.com/flixcoo.png",
-        gh: "https://github.com/flixcoo",
+        imageLink: "https://github.com/flixcoo.png",
+        githubLink: "https://github.com/flixcoo",
         email: "felix@liquid-dev.de",
         website: "https://felixkirchner.de"
     },
@@ -29,8 +29,8 @@ export const TEAM_MEMBERS = [
         name: "Yannick",
         nickname: "Gelbeinhalb",
         roles: [0, 1],
-        img: "https://github.com/GelbEinhalb.png",
-        gh: "https://github.com/GelbEinhalb",
+        imageLink: "https://github.com/GelbEinhalb.png",
+        githubLink: "https://github.com/GelbEinhalb",
         email: "yannick@liquid-dev.de",
         website: "https://yannick-weigert.de"
     },
@@ -38,8 +38,8 @@ export const TEAM_MEMBERS = [
         name: "Mathis",
         nickname: "Sneeex",
         roles: [0, 1],
-        img: "https://github.com/sneeex.png",
-        gh: "https://github.com/sneeex",
+        imageLink: "https://github.com/sneeex.png",
+        githubLink: "https://github.com/sneeex",
         email: "mathis@liquid-dev.de",
         website: "https://mathiskirchner.de"
     }