Updated links and added discord

Added christmas effects
Changed variable names
2026-01-12 20:06:49 +01:00 · 2025-12-24 13:19:17 +01:00 · 2025-12-24 13:19:10 +01:00 · 2025-12-19 14:00:31 +01:00 · 2025-12-19 13:54:23 +01:00 · 2025-12-19 12:14:14 +00:00
8 changed files with 155 additions and 68 deletions
--- a/index.html
+++ b/index.html
@@ -1,13 +1,12 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <!-- Title -->
-    <title>Liquid Development</title>
-
    <!-- Standard Meta -->
+    <title>Liquid Development</title>
+    <meta name="description" content="Open-source software development team">
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <meta name="description" content="das ">
+    <meta name="robots" content="index"/>

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,9 @@
        "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-icons": "^5.5.0",
+        "react-snowfall": "^2.4.0"
      },
      "devDependencies": {
        "@types/react": "^18.2.43",
@@ -2229,6 +2231,21 @@
        "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-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.17.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -2239,6 +2256,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",
--- a/package.json
+++ b/package.json
@@ -12,7 +12,9 @@
    "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-icons": "^5.5.0",
+    "react-snowfall": "^2.4.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
--- a/src/App.jsx
+++ b/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/>
--- a/src/components/Bubbles.jsx
+++ b/src/components/Bubbles.jsx
@@ -1,26 +1,40 @@
 import React from 'react';
 import {motion} from 'framer-motion';

-export const Bubbles = () => (
+export const Bubbles = () => {
+    const sizes = [20, 40, 60, 80];
+
+    return (
        <div className="absolute inset-0 overflow-hidden pointer-events-none z-0">
-        {Array.from({length: 15}).map((_, i) => (
-            <motion.div key={i}
-                        className="absolute rounded-full bg-[#00A3FF]/20 backdrop-blur-sm border border-[#00A3FF]/30"
+            {Array.from({length: 15}).map((_, i) => {
+                const size = sizes[i % sizes.length];
+
+                return (
+                    <motion.div
+                        key={i}
+                        className="absolute rounded-full"
                        initial={{
                            y: "120vh",
                            x: Math.random() * 100 + "vw",
-                            scale: Math.random() * 0.5 + 0.5,
                            opacity: 0
                        }}
-                        animate={{y: "-20vh", opacity: [0, 1, 0]}}
+                        animate={{y: "-20vh", opacity: [0, 0.7, 0]}}
                        transition={{
-                            duration: Math.random() * 10 + 10,
+                            duration: Math.random() * 10 + 15,
                            repeat: Infinity,
                            ease: "linear",
                            delay: Math.random() * 10
                        }}
-                        style={{width: Math.random() * 50 + 20 + "px", height: Math.random() * 50 + 20 + "px"}}
+                        style={{
+                            width: `${size}px`,
+                            height: `${size}px`,
+                            aspectRatio: '1/1',
+                            boxSizing: 'border-box',
+                            border: `${size / 5}px solid rgba(0, 163, 255, 0.6)`
+                        }}
                    />
-        ))}
+                );
+            })}
        </div>
    );
+};
--- a/src/components/TeamMember.jsx
+++ b/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}/>
--- a/src/data/content.js
+++ b/src/data/content.js
@@ -1,15 +1,21 @@
 import { Github, Mail } from 'lucide-react';
+    import { FaDiscord } from 'react-icons/fa';

 export const NAV_LINKS = ['Home', 'Projects', 'Team'];

 export const SOCIALS = [
    {
        name: "GitHub",
-        link: "https://github.com/LiquidDevelopmentDE/",
+        link: "https://github.liquid-dev.de",
        icon: Github
    },
    {
-        name: "Email",
+        name: "Discord",
+        link: "https://discord.liquid-dev.de",
+        icon: FaDiscord
+    },
+    {
+        name: "E-Mail",
        link: "hello@liquid-dev.de",
        icon: Mail
    }
@@ -20,8 +26,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 +35,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 +44,8 @@ export const TEAM_MEMBERS = [
        name: "Mathis",
        nickname: "Sneeex",
        roles: [0, 1],
-        img: "https://github.com/mathiskir.png",
-        gh: "https://github.com/mathiskir",
+        imageLink: "https://github.com/sneeex.png",
+        githubLink: "https://github.com/sneeex",
        email: "mathis@liquid-dev.de",
        website: "https://mathiskirchner.de"
    }
@@ -47,6 +53,6 @@ export const TEAM_MEMBERS = [


 export const ROLES = [
-    {id: 0, role: "FOUNDER", bgColor: "#00A3FF", borderColor: "#00A3FF", textColor: "#00A3FF"},
-    {id: 1, role: "DEVELOPER", bgColor: "#3b82f6", borderColor: "#3b82f6", textColor: "#93c5fd"},
+    {id: 0, role: "FOUNDER", bgColor: "#1e40af", borderColor: "#1e40af", textColor: "#60a5fa"},
+    {id: 1, role: "DEVELOPER", bgColor: "#0284c7", borderColor: "#0284c7", textColor: "#00b8f9"},
 ];
--- a/src/sections/Hero.jsx
+++ b/src/sections/Hero.jsx
@@ -11,58 +11,77 @@ export const Hero = () => {
    const rawEmail = emailSocial ? emailSocial.link : 'hello@liquid-dev.de';

    return (
-        <section id="home" className="relative h-screen flex items-center justify-center pt-20 overflow-hidden"
+        <section
+            id="home"
+            className="relative h-screen flex items-center justify-center pt-20 overflow-hidden"
        >
-            <div className="absolute inset-0 opacity-10"
+            <div
+                className="absolute inset-0 opacity-10"
                style={{
                    backgroundImage: 'radial-gradient(#ffffff 1px, transparent 1px)',
-                     backgroundSize: '40px 40px'
-                 }}>
-            </div>
+                    backgroundSize: '40px 40px',
+                }}
+            />
+
            <Bubbles />
+
            <div className="relative z-10 text-center px-6 max-w-6xl mx-auto">
-                <motion.div initial={{scale: 0.8, opacity: 0}} animate={{scale: 1, opacity: 1}}
+                <motion.div
+                    initial={{ scale: 0.8, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 1 }}
                    transition={{ duration: 0.8 }}
                    className="mx-auto mb-8 w-24 h-24 md:w-32 md:h-32 rounded-full bg-[#00A3FF]/5 flex items-center justify-center border border-[#00A3FF]/30 shadow-[0_0_60px_-10px_rgba(0,163,255,0.4)]"
                >
                    <BrandLogo className="w-14 h-14 md:w-20 md:h-20 text-[#00A3FF]" />
                </motion.div>

-                <motion.div initial={{y: 20, opacity: 0}} animate={{y: 0, opacity: 1}} transition={{delay: 0.2}}>
+                <motion.div
+                    initial={{ y: 20, opacity: 0 }}
+                    animate={{ y: 0, opacity: 1 }}
+                    transition={{ delay: 0.2 }}
+                >
                    <h1 className="text-4xl md:text-7xl font-extrabold tracking-tighter mb-6">
-                        <ObfuscatedMail email={rawEmail}
+                        <ObfuscatedMail
+                            email={rawEmail}
                            className="cursor-pointer hover:opacity-80 transition-opacity duration-300 bg-transparent border-none p-0 font-extrabold tracking-tighter text-4xl md:text-7xl text-white"
                        >
                            LIQUID
-                            <span
-                                className="text-transparent bg-clip-text bg-gradient-to-r from-[#00A3FF] to-cyan-200"
-                            >
+                            <span className="ml-3 text-transparent bg-clip-text bg-gradient-to-r from-[#00A3FF] to-cyan-200">
                                DEVELOPMENT
                            </span>
                        </ObfuscatedMail>
                    </h1>
                </motion.div>

-                <motion.p initial={{y: 20, opacity: 0}} animate={{y: 0, opacity: 1}} transition={{delay: 0.4}}
-                          className="text-lg md:text-2xl text-gray-400 mb-10 max-w-2xl mx-auto font-light">Open-source
-                    software development team
+                <motion.p
+                    initial={{ y: 20, opacity: 0 }}
+                    animate={{ y: 0, opacity: 1 }}
+                    transition={{ delay: 0.4 }}
+                    className="text-lg md:text-2xl text-gray-400 mb-10 max-w-2xl mx-auto font-light"
+                >
+                    Open-source software development team
                </motion.p>

-                <motion.div initial={{y: 20, opacity: 0}} animate={{y: 0, opacity: 1}} transition={{delay: 0.6}}
-                            className="flex flex-col sm:flex-row gap-6 justify-center items-center">
-                    <a href="#projects"
+                <motion.div
+                    initial={{ y: 20, opacity: 0 }}
+                    animate={{ y: 0, opacity: 1 }}
+                    transition={{ delay: 0.6 }}
+                    className="flex flex-col sm:flex-row gap-6 justify-center items-center"
+                >
+                    <a
+                        href="#projects"
                        className="px-8 py-3 rounded-full border border-[#00A3FF] hover:bg-[#00A3FF]/10 text-white font-bold transition-all flex items-center justify-center gap-2"
                    >
                        Explore Work
                    </a>

-                    {/* Obfuscated Text Button */}
                    <ObfuscatedMail
                        email={rawEmail}
                        className="group flex items-center gap-2 text-white hover:text-gray-400 transition-colors font-medium cursor-pointer"
                    >
                        Contact Team
-                        <ArrowRight size={18}
+                        <ArrowRight
+                            size={18}
                            className="group-hover:translate-x-1 transition-transform text-[#00A3FF]"
                        />
                    </ObfuscatedMail>
Author	SHA1	Message	Date
Felix Kirchner	bc47a53a07	Updated links and added discord	2026-01-12 20:06:49 +01:00
Felix Kirchner	873cacdf0a	Added christmas effects	2025-12-24 13:19:17 +01:00
Felix Kirchner	211c6cf3ea	Changed variable names	2025-12-24 13:19:10 +01:00
Felix Kirchner	18f52ab751	Updated colors	2025-12-19 14:00:31 +01:00
Felix Kirchner	f98c6062e1	Updates meta tags	2025-12-19 13:54:23 +01:00
sneeex	cd42922983	add space between hero title	2025-12-19 12:14:14 +00:00
mathiskirchner	1c97147a6d	changed github name	2025-12-19 12:05:58 +00:00
Felix Kirchner	c5e385318b	Adjusted bubbles	2025-12-18 22:33:57 +01:00
Felix Kirchner	6f2dbfd966	typo	2025-12-18 21:55:16 +01:00