liquid-development/website
3
0
Fork 0
Code Issues Pull Requests Activity

Compare commits

base: liquid-development:bc6c112704eb8de37cf9d349ebd24379d5fe9560
Branches Tags
liquid-development:main
...
compare: liquid-development:main
Branches Tags
liquid-development:main

9 Commits
bc6c112704 ... main

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
8 changed files with 155 additions and 68 deletions
Expand all files Collapse all files

7
index.html
View File

@@ -1,13 +1,12 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Title -->
<title>Liquid Development</title>
<!-- Standard Meta --> <!-- Standard Meta -->
<title>Liquid Development</title>
<meta name="description" content="Open-source software development team">
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="das "> <meta name="robots" content="index"/>
<!-- Open Graph / Facebook --> <!-- Open Graph / Facebook -->
<meta property="og:type" content="website"> <meta property="og:type" content="website">

32
package-lock.json generated
View File

@@ -11,7 +11,9 @@
"framer-motion": "^11.0.0", "framer-motion": "^11.0.0",
"lucide-react": "^0.300.0", "lucide-react": "^0.300.0",
"react": "^18.2.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": { "devDependencies": {
"@types/react": "^18.2.43", "@types/react": "^18.2.43",
@@ -2229,6 +2231,21 @@
"react": "^18.3.1" "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": { "node_modules/react-refresh": {
"version": "0.17.0", "version": "0.17.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -2239,6 +2256,19 @@
"node": ">=0.10.0" "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": { "node_modules/read-cache": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

4
package.json
View File

@@ -12,7 +12,9 @@
"framer-motion": "^11.0.0", "framer-motion": "^11.0.0",
"lucide-react": "^0.300.0", "lucide-react": "^0.300.0",
"react": "^18.2.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": { "devDependencies": {
"@types/react": "^18.2.43", "@types/react": "^18.2.43",

17
src/App.jsx
View File

@@ -4,13 +4,30 @@ import {Footer} from './components/Footer';
import {Hero} from './sections/Hero'; import {Hero} from './sections/Hero';
import {Projects} from './sections/Projects'; import {Projects} from './sections/Projects';
import {Team} from './sections/Team'; import {Team} from './sections/Team';
import Snowfall from 'react-snowfall'
export default function LiquidDevelopment() { export default function LiquidDevelopment() {
return ( return (
<div <div
className="min-h-screen bg-[#0e0e0e] text-white font-sans selection:bg-[#00A3FF] selection:text-white overflow-x-hidden"> 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/> <Navbar/>
<Hero/> <Hero/>
<Projects/> <Projects/>
<Team/> <Team/>
<Footer/> <Footer/>

32
src/components/Bubbles.jsx
View File

@@ -1,26 +1,40 @@
import React from 'react'; import React from 'react';
import {motion} from 'framer-motion'; 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"> <div className="absolute inset-0 overflow-hidden pointer-events-none z-0">
{Array.from({length: 15}).map((_, i) => ( {Array.from({length: 15}).map((_, i) => {
<motion.div key={i} const size = sizes[i % sizes.length];
className="absolute rounded-full bg-[#00A3FF]/20 backdrop-blur-sm border border-[#00A3FF]/30"
return (
<motion.div
key={i}
className="absolute rounded-full"
initial={{ initial={{
y: "120vh", y: "120vh",
x: Math.random() * 100 + "vw", x: Math.random() * 100 + "vw",
scale: Math.random() * 0.5 + 0.5,
opacity: 0 opacity: 0
}} }}
animate={{y: "-20vh", opacity: [0, 1, 0]}} animate={{y: "-20vh", opacity: [0, 0.7, 0]}}
transition={{ transition={{
duration: Math.random() * 10 + 10, duration: Math.random() * 10 + 15,
repeat: Infinity, repeat: Infinity,
ease: "linear", ease: "linear",
delay: Math.random() * 10 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> </div>
); );
};

6
src/components/TeamMember.jsx
View File

@@ -4,7 +4,7 @@ import {Github, Mail, Globe} from 'lucide-react';
import {ObfuscatedMail} from './ObfuscatedMail'; import {ObfuscatedMail} from './ObfuscatedMail';
import {ROLES} from '../data/content'; 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}} <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"> 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 <div
@@ -18,7 +18,7 @@ export const TeamMember = ({name, nickname, img, gh, email, website, roles}) =>
<div <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"> 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>
<div className="relative z-10 w-full"> <div className="relative z-10 w-full">
@@ -55,7 +55,7 @@ export const TeamMember = ({name, nickname, img, gh, email, website, roles}) =>
<Mail size={18}/> <Mail size={18}/>
</ObfuscatedMail> </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" 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"> title="GitHub">
<Github size={18}/> <Github size={18}/>

26
src/data/content.js
View File

@@ -1,15 +1,21 @@
import { Github, Mail } from 'lucide-react'; import { Github, Mail } from 'lucide-react';
import { FaDiscord } from 'react-icons/fa';
export const NAV_LINKS = ['Home', 'Projects', 'Team']; export const NAV_LINKS = ['Home', 'Projects', 'Team'];
export const SOCIALS = [ export const SOCIALS = [
{ {
name: "GitHub", name: "GitHub",
link: "https://github.com/LiquidDevelopmentDE/", link: "https://github.liquid-dev.de",
icon: Github icon: Github
}, },
{ {
name: "Email", name: "Discord",
link: "https://discord.liquid-dev.de",
icon: FaDiscord
},
{
name: "E-Mail",
link: "hello@liquid-dev.de", link: "hello@liquid-dev.de",
icon: Mail icon: Mail
} }
@@ -20,8 +26,8 @@ export const TEAM_MEMBERS = [
name: "Felix", name: "Felix",
nickname: "Flixcoo", nickname: "Flixcoo",
roles: [0, 1], roles: [0, 1],
img: "https://github.com/flixcoo.png", imageLink: "https://github.com/flixcoo.png",
gh: "https://github.com/flixcoo", githubLink: "https://github.com/flixcoo",
email: "felix@liquid-dev.de", email: "felix@liquid-dev.de",
website: "https://felixkirchner.de" website: "https://felixkirchner.de"
}, },
@@ -29,8 +35,8 @@ export const TEAM_MEMBERS = [
name: "Yannick", name: "Yannick",
nickname: "Gelbeinhalb", nickname: "Gelbeinhalb",
roles: [0, 1], roles: [0, 1],
img: "https://github.com/GelbEinhalb.png", imageLink: "https://github.com/GelbEinhalb.png",
gh: "https://github.com/GelbEinhalb", githubLink: "https://github.com/GelbEinhalb",
email: "yannick@liquid-dev.de", email: "yannick@liquid-dev.de",
website: "https://yannick-weigert.de" website: "https://yannick-weigert.de"
}, },
@@ -38,8 +44,8 @@ export const TEAM_MEMBERS = [
name: "Mathis", name: "Mathis",
nickname: "Sneeex", nickname: "Sneeex",
roles: [0, 1], roles: [0, 1],
img: "https://github.com/mathiskir.png", imageLink: "https://github.com/sneeex.png",
gh: "https://github.com/mathiskir", githubLink: "https://github.com/sneeex",
email: "mathis@liquid-dev.de", email: "mathis@liquid-dev.de",
website: "https://mathiskirchner.de" website: "https://mathiskirchner.de"
} }
@@ -47,6 +53,6 @@ export const TEAM_MEMBERS = [
export const ROLES = [ export const ROLES = [
{id: 0, role: "FOUNDER", bgColor: "#00A3FF", borderColor: "#00A3FF", textColor: "#00A3FF"}, {id: 0, role: "FOUNDER", bgColor: "#1e40af", borderColor: "#1e40af", textColor: "#60a5fa"},
{id: 1, role: "DEVELOPER", bgColor: "#3b82f6", borderColor: "#3b82f6", textColor: "#93c5fd"}, {id: 1, role: "DEVELOPER", bgColor: "#0284c7", borderColor: "#0284c7", textColor: "#00b8f9"},
]; ];

57
src/sections/Hero.jsx
View File

@@ -11,58 +11,77 @@ export const Hero = () => {
const rawEmail = emailSocial ? emailSocial.link : 'hello@liquid-dev.de'; const rawEmail = emailSocial ? emailSocial.link : 'hello@liquid-dev.de';
return ( 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={{ style={{
backgroundImage: 'radial-gradient(#ffffff 1px, transparent 1px)', backgroundImage: 'radial-gradient(#ffffff 1px, transparent 1px)',
backgroundSize: '40px 40px' backgroundSize: '40px 40px',
}}> }}
</div> />
<Bubbles /> <Bubbles />
<div className="relative z-10 text-center px-6 max-w-6xl mx-auto"> <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 }} 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)]" 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]" /> <BrandLogo className="w-14 h-14 md:w-20 md:h-20 text-[#00A3FF]" />
</motion.div> </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"> <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" 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 LIQUID
<span <span className="ml-3 text-transparent bg-clip-text bg-gradient-to-r from-[#00A3FF] to-cyan-200">
className="text-transparent bg-clip-text bg-gradient-to-r from-[#00A3FF] to-cyan-200"
>
DEVELOPMENT DEVELOPMENT
</span> </span>
</ObfuscatedMail> </ObfuscatedMail>
</h1> </h1>
</motion.div> </motion.div>
<motion.p initial={{y: 20, opacity: 0}} animate={{y: 0, opacity: 1}} transition={{delay: 0.4}} <motion.p
className="text-lg md:text-2xl text-gray-400 mb-10 max-w-2xl mx-auto font-light">Open-source initial={{ y: 20, opacity: 0 }}
software development team 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.p>
<motion.div initial={{y: 20, opacity: 0}} animate={{y: 0, opacity: 1}} transition={{delay: 0.6}} <motion.div
className="flex flex-col sm:flex-row gap-6 justify-center items-center"> initial={{ y: 20, opacity: 0 }}
<a href="#projects" 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" 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 Explore Work
</a> </a>
{/* Obfuscated Text Button */}
<ObfuscatedMail <ObfuscatedMail
email={rawEmail} email={rawEmail}
className="group flex items-center gap-2 text-white hover:text-gray-400 transition-colors font-medium cursor-pointer" className="group flex items-center gap-2 text-white hover:text-gray-400 transition-colors font-medium cursor-pointer"
> >
Contact Team Contact Team
<ArrowRight size={18} <ArrowRight
size={18}
className="group-hover:translate-x-1 transition-transform text-[#00A3FF]" className="group-hover:translate-x-1 transition-transform text-[#00A3FF]"
/> />
</ObfuscatedMail> </ObfuscatedMail>