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

Initial commit

Browse Source
This commit is contained in:
Mathis Kirchner
2025-12-18 14:54:10 +00:00
commit 8f1cd47c45
21 changed files with 418 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
Dockerfile Normal file
View File

@@ -0,0 +1,11 @@
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

7
docker-compose.yml Normal file
View File

@@ -0,0 +1,7 @@
services:
liquid-web:
build: .
container_name: liquid-website
restart: unless-stopped
ports:
- "8081:80"

12
index.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Liquid Development</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

26
package.json Normal file
View File

@@ -0,0 +1,26 @@
{
"name": "liquid-website",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"framer-motion": "^11.0.0",
"lucide-react": "^0.300.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.32",
"tailwindcss": "^3.4.1",
"vite": "^5.0.0"
}
}

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

18
src/App.jsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react';
import { Navbar } from './components/Navbar';
import { Footer } from './components/Footer';
import { Hero } from './sections/Hero';
import { Projects } from './sections/Projects';
import { Team } from './sections/Team';
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">
<Navbar />
<Hero />
<Projects />
<Team />
<Footer />
</div>
);
}

8
src/components/BrandLogo.jsx Normal file
View File

@@ -0,0 +1,8 @@
import React from 'react';
export const BrandLogo = ({ className = "w-12 h-12" }) => (
<svg viewBox="0 0 512 512" className={className} fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M396.7 413.6L298.5 217.2V96h21.3c11.8 0 21.3-9.6 21.3-21.3V53.3C341.1 41.5 331.6 32 319.8 32H191.8c-11.8 0-21.3 9.6-21.3 21.3v21.3c0 11.8 9.6 21.3 21.3 21.3h21.3v121.2L115.1 413.6c-10.6 21.2 4.9 46.4 28.5 46.4h224.5c23.7 0 39.1-25.2 28.6-46.4zM245.3 170.7c11.8 0 21.3 9.6 21.3 21.3s-9.6 21.3-21.3 21.3-21.3-9.6-21.3-21.3 9.6-21.3 21.3-21.3zm-42.7 64c11.8 0 21.3 9.6 21.3 21.3s-9.6 21.3-21.3 21.3-21.3-9.6-21.3-21.3 9.6-21.3 21.3-21.3zm85.4 0c11.8 0 21.3 9.6 21.3 21.3s-9.6 21.3-21.3 21.3-21.3-9.6-21.3-21.3 9.6-21.3 21.3-21.3z" className="fill-current text-[#00A3FF]" stroke="currentColor" strokeWidth="20" strokeLinejoin="round"/>
<path d="M138 380 Q 256 340 374 380 L 368 440 H 144 Z" className="fill-[#00A3FF] opacity-80" />
</svg>
);

15
src/components/Bubbles.jsx Normal file
View File

@@ -0,0 +1,15 @@
import React from 'react';
import { motion } from 'framer-motion';
export const Bubbles = () => (
<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"
initial={{ y: "120vh", x: Math.random() * 100 + "vw", scale: Math.random() * 0.5 + 0.5, opacity: 0 }}
animate={{ y: "-20vh", opacity: [0, 1, 0] }}
transition={{ duration: Math.random() * 10 + 10, repeat: Infinity, ease: "linear", delay: Math.random() * 10 }}
style={{ width: Math.random() * 50 + 20 + "px", height: Math.random() * 50 + 20 + "px" }}
/>
))}
</div>
);

15
src/components/Footer.jsx Normal file
View File

@@ -0,0 +1,15 @@
import React from 'react';
import { Github } from 'lucide-react';
import { BrandLogo } from './BrandLogo';
import { SOCIALS } from '../data/content';
export const Footer = () => (
<footer id="contact" className="py-12 border-t border-white/10 bg-black relative overflow-hidden">
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-1/2 h-1 bg-[#00A3FF] blur-[100px] opacity-50"></div>
<div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-8">
<div className="flex items-center gap-3"><BrandLogo className="w-8 h-8 text-gray-600" /><span className="font-bold text-gray-500">LIQUID DEVELOPMENT</span></div>
<div className="flex gap-6"><a href={SOCIALS.github} className="text-gray-400 hover:text-[#00A3FF] transition-colors"><Github size={24} /></a></div>
</div>
<div className="text-center mt-8 text-gray-600 text-sm">&copy; {new Date().getFullYear()} Liquid Development. All rights reserved.</div>
</footer>
);

39
src/components/Navbar.jsx Normal file
View File

@@ -0,0 +1,39 @@
import React from 'react';
import { Github, Mail } from 'lucide-react';
import { BrandLogo } from './BrandLogo';
import { ObfuscatedMail } from './ObfuscatedMail';
import { NAV_LINKS, SOCIALS } from '../data/content';
export const Navbar = () => {
// Extract email address from "mailto:..." string if necessary
const rawEmail = SOCIALS.email.replace('mailto:', '');
return (
<nav className="fixed top-0 left-0 right-0 z-50 backdrop-blur-xl bg-[#0e0e0e]/90 border-b border-white/5">
<div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
<div className="flex items-center gap-3">
<BrandLogo className="w-8 h-8 text-[#00A3FF]" />
<span className="font-bold text-lg md:text-xl tracking-wider text-white">LIQUID<span className="text-[#00A3FF]">DEVELOPMENT</span></span>
</div>
<div className="hidden md:flex gap-6 text-sm font-medium text-gray-300 items-center">
{NAV_LINKS.map((item) => (
<a key={item} href={`#${item.toLowerCase()}`} className="hover:text-[#00A3FF] transition-colors uppercase tracking-wide text-xs">{item}</a>
))}
<a href={SOCIALS.github} target="_blank" rel="noreferrer" className="bg-white/10 hover:bg-[#00A3FF] text-white p-2 rounded-full transition-all" title="GitHub">
<Github size={18} />
</a>
{/* Obfuscated Email Button */}
<ObfuscatedMail
email={rawEmail}
className="bg-white/10 hover:bg-[#00A3FF] text-white p-2 rounded-full transition-all flex items-center justify-center"
title="Contact Us"
>
<Mail size={18} />
</ObfuscatedMail>
</div>
</div>
</nav>
);
};

24
src/components/ObfuscatedMail.jsx Normal file
View File

@@ -0,0 +1,24 @@
import React, { useState } from 'react';
export const ObfuscatedMail = ({ email, className, children, title }) => {
// Start with a dummy link so bots don't see 'mailto:'
const [href, setHref] = useState("#");
// Only reveal the real email when the user hovers or focuses
const reveal = () => {
setHref(`mailto:${email}`);
};
return (
<a
href={href}
onMouseEnter={reveal}
onFocus={reveal}
onClick={reveal}
className={className}
title={title || "Send email"}
>
{children}
</a>
);
};

43
src/components/TeamMember.jsx Normal file
View File

@@ -0,0 +1,43 @@
import React from 'react';
import { motion } from 'framer-motion';
import { Github, Mail, Globe } from 'lucide-react';
import { ObfuscatedMail } from './ObfuscatedMail';
export const TeamMember = ({ name, nickname, img, gh, email, website, role, role2 }) => (
<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 className="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div className="absolute top-0 w-full h-1 bg-[#00A3FF] scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></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">
<img src={img} alt={name} className="w-full h-full rounded-full object-cover bg-gray-800" />
</div>
<div className="relative z-10 w-full">
<h4 className="text-xl font-bold text-white mb-1">{name}</h4>
<span className="text-sm font-mono text-gray-500 mb-4 block">@{nickname.toLowerCase()}</span>
<div className="flex gap-2 justify-center mb-6">
<span className="px-3 py-1 rounded-md bg-[#00A3FF]/10 text-[#00A3FF] text-xs font-bold border border-[#00A3FF]/20 tracking-wider">FOUNDER</span>
<span className="px-3 py-1 rounded-md bg-blue-500/10 text-blue-300 text-xs font-bold border border-blue-500/20 tracking-wider">DEVELOPER</span>
</div>
<div className="flex gap-3 justify-center w-full">
{/* Obfuscated Member Mail */}
<ObfuscatedMail
email={email}
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 group/icon"
title="Email"
>
<Mail size={18} />
</ObfuscatedMail>
<a href={gh} 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>
<a href={website} 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="Website">
<Globe size={18} />
</a>
</div>
</div>
</motion.div>
);

41
src/data/content.js Normal file
View File

@@ -0,0 +1,41 @@
import { Github, Mail } from 'lucide-react';
export const NAV_LINKS = ['Home', 'Projects', 'Team'];
export const SOCIALS = {
github: "https://github.com/LiquidDevelopmentDE/",
email: "mailto:hello@liquid-dev.de"
};
export const TEAM_MEMBERS = [
{
name: "Felix",
nickname: "Flixcoo",
role: "FOUNDER",
role2: "DEVELOPER",
img: "https://github.com/flixcoo.png",
gh: "https://github.com/flixcoo",
email: "felix@liquid-dev.de",
website: "https://felixkirchner.de"
},
{
name: "Yannick",
nickname: "Gelbeinhalb",
role: "FOUNDER",
role2: "DEVELOPER",
img: "https://github.com/GelbEinhalb.png",
gh: "https://github.com/GelbEinhalb",
email: "yannick@liquid-dev.de",
website: "https://yannick-weigert.de"
},
{
name: "Mathis",
nickname: "Sneeex",
role: "FOUNDER",
role2: "DEVELOPER",
img: "https://github.com/mathiskir.png",
gh: "https://github.com/mathiskir",
email: "mathis@liquid-dev.de",
website: "https://mathiskirchner.de"
}
];

5
src/index.css Normal file
View File

@@ -0,0 +1,5 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html { scroll-behavior: smooth; }
body { margin: 0; background: #0e0e0e; }

5
src/main.jsx Normal file
View File

@@ -0,0 +1,5 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(<React.StrictMode><App /></React.StrictMode>)

48
src/sections/Hero.jsx Normal file
View File

@@ -0,0 +1,48 @@
import React from 'react';
import { motion } from 'framer-motion';
import { ArrowRight } from 'lucide-react';
import { BrandLogo } from '../components/BrandLogo';
import { Bubbles } from '../components/Bubbles';
import { ObfuscatedMail } from '../components/ObfuscatedMail';
import { SOCIALS } from '../data/content';
export const Hero = () => {
const rawEmail = SOCIALS.email.replace('mailto:', '');
return (
<section id="home" className="relative h-screen flex items-center justify-center pt-20 overflow-hidden">
<div className="absolute inset-0 opacity-10" style={{ backgroundImage: 'radial-gradient(#ffffff 1px, transparent 1px)', backgroundSize: '40px 40px' }}></div>
<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 }} 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 }}>
{/* Obfuscated Title Link */}
<ObfuscatedMail email={rawEmail} className="block cursor-pointer hover:opacity-80 transition-opacity duration-300">
<h1 className="text-4xl md:text-7xl font-extrabold tracking-tighter mb-6">
LIQUID <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#00A3FF] to-cyan-200">DEVELOPMENT</span>
</h1>
</ObfuscatedMail>
</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">German 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" 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} className="group-hover:translate-x-1 transition-transform text-[#00A3FF]"/>
</ObfuscatedMail>
</motion.div>
</div>
</section>
);
};

36
src/sections/Projects.jsx Normal file
View File

@@ -0,0 +1,36 @@
import React from 'react';
import { ArrowRight, Smartphone } from 'lucide-react';
import { FadeInWhenVisible } from '../utils/animations';
export const Projects = () => (
<section id="projects" className="py-32 relative z-10 bg-gradient-to-b from-[#0e0e0e] to-[#050505] overflow-hidden">
<div className="absolute right-0 top-1/4 w-1/2 h-1/2 bg-[#00A3FF]/10 blur-[120px] rounded-full pointer-events-none"></div>
<div className="max-w-7xl mx-auto px-6">
<div className="mb-20"><h2 className="text-4xl md:text-5xl font-bold mb-4">Projects</h2><div className="h-1 w-24 bg-[#00A3FF] rounded-full"></div></div>
<FadeInWhenVisible>
<div className="grid lg:grid-cols-2 gap-12 items-center bg-[#121212] rounded-3xl p-8 md:p-12 border border-white/10 hover:border-[#00A3FF]/30 transition-all duration-500 shadow-2xl">
<div>
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#00A3FF]/10 text-[#00A3FF] text-xs font-bold mb-6 border border-[#00A3FF]/20"><span className="animate-pulse w-2 h-2 rounded-full bg-[#00A3FF]"></span> IN DEVELOPMENT</div>
<h3 className="text-3xl md:text-4xl font-bold text-white mb-4">GameTracker App</h3>
<p className="text-gray-300 text-lg mb-6 leading-relaxed">An all-in-one app to track card- and board games, manage players and groups and get statistics about your played games.</p>
<div className="flex flex-wrap gap-2 mb-8">{['Flutter', 'iOS', 'Android', 'Statistics'].map(tag => (<span key={tag} className="px-3 py-1 bg-white/5 border border-white/10 rounded-md text-sm text-gray-400">{tag}</span>))}</div>
<a href="https://github.com/LiquidDevelopmentDE/game-tracker" target="_blank" rel="noreferrer" className="inline-flex items-center text-white font-semibold hover:text-[#00A3FF] transition-colors group">View Project Status <ArrowRight className="ml-2 group-hover:translate-x-1 transition-transform" size={20} /></a>
</div>
<div className="relative h-[460px] bg-gradient-to-br from-gray-900 to-black rounded-xl border border-white/10 flex items-center justify-center overflow-hidden group">
<div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
<div className="relative w-[180px] h-[370px] bg-gray-800 rounded-[2.5rem] border-[6px] border-gray-700 shadow-2xl flex flex-col overflow-hidden transform group-hover:scale-105 group-hover:rotate-[-2deg] transition-all duration-500">
<div className="h-6 w-24 bg-black absolute top-0 left-1/2 -translate-x-1/2 rounded-b-xl z-20"></div>
<div className="h-full bg-gray-900 flex flex-col pt-10 px-3">
<div className="h-5 w-24 bg-[#00A3FF]/20 rounded mb-5 self-center"></div>
<div className="grid grid-cols-2 gap-2 mb-3"><div className="h-20 bg-gray-800 rounded-lg border border-white/5"></div><div className="h-20 bg-gray-800 rounded-lg border border-white/5"></div></div>
<div className="h-28 bg-gray-800 rounded-lg border border-white/5 mb-3"></div>
<div className="flex-1 bg-gray-800/50 rounded-t-xl border-t border-white/5 mt-2"></div>
</div>
</div>
<div className="absolute bottom-6 right-6 bg-black/80 backdrop-blur-md border border-[#00A3FF]/50 p-3 rounded-lg flex items-center gap-3 shadow-lg transform group-hover:translate-y-2 transition-transform z-30"><div className="text-right"><div className="text-xs text-gray-400">Soon available on</div><div className="text-sm font-bold text-white">iOS & Android</div></div><Smartphone size={24} className="text-[#00A3FF]" /></div>
</div>
</div>
</FadeInWhenVisible>
</div>
</section>
);

19
src/sections/Team.jsx Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react';
import { FadeInWhenVisible } from '../utils/animations';
import { TeamMember } from '../components/TeamMember';
import { TEAM_MEMBERS } from '../data/content';
export const Team = () => (
<section id="team" className="py-24 relative z-10 bg-gradient-to-b from-[#050505] to-black">
<div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-16"><h2 className="text-3xl md:text-4xl font-bold mb-4">The Team</h2><p className="text-gray-400">Meet the creators.</p></div>
<div className="grid md:grid-cols-3 gap-8 justify-center max-w-5xl mx-auto">
{TEAM_MEMBERS.map((member, index) => (
<FadeInWhenVisible key={member.name} delay={0.1 * (index + 1)}>
<TeamMember {...member} />
</FadeInWhenVisible>
))}
</div>
</div>
</section>
);

24
src/utils/animations.jsx Normal file
View File

@@ -0,0 +1,24 @@
import React, { useRef } from 'react';
import { motion, useInView } from 'framer-motion';
export const fadeInUp = {
hidden: { opacity: 0, y: 30 },
visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } }
};
export const FadeInWhenVisible = ({ children, delay = 0 }) => {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: "-50px" });
return (
<div ref={ref}>
<motion.div
variants={fadeInUp}
initial="hidden"
animate={isInView ? "visible" : "hidden"}
transition={{ delay }}
>
{children}
</motion.div>
</div>
);
};

10
tailwind.config.js Normal file
View File

@@ -0,0 +1,10 @@
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

6
vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
})