diff --git a/src/App.jsx b/src/App.jsx index 83df37f..0d4916d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,18 +1,19 @@ 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'; +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 ( -
- - - - -
- ); + return ( +
+ + + + +
+ ); } diff --git a/src/components/BrandLogo.jsx b/src/components/BrandLogo.jsx index e91598d..6d98ff0 100644 --- a/src/components/BrandLogo.jsx +++ b/src/components/BrandLogo.jsx @@ -1,10 +1,10 @@ import React from "react"; -export const BrandLogo = ({ className = "w-12 h-12" }) => ( - Liquid Development logo +export const BrandLogo = ({className = "w-12 h-12"}) => ( + Liquid Development logo ); \ No newline at end of file diff --git a/src/components/Bubbles.jsx b/src/components/Bubbles.jsx index ecb5b67..d6b7e53 100644 --- a/src/components/Bubbles.jsx +++ b/src/components/Bubbles.jsx @@ -1,15 +1,26 @@ import React from 'react'; -import { motion } from 'framer-motion'; +import {motion} from 'framer-motion'; export const Bubbles = () => ( -
- {Array.from({ length: 15 }).map((_, i) => ( - - ))} -
+
+ {Array.from({length: 15}).map((_, i) => ( + + ))} +
); diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index db9edbb..30880a1 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,39 +1,45 @@ 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'; +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:', ''); + // Extract email address from "mailto:..." string if necessary + const rawEmail = SOCIALS.email.replace('mailto:', ''); - return ( - + ); }; diff --git a/src/components/ObfuscatedMail.jsx b/src/components/ObfuscatedMail.jsx index 016bf95..ca25565 100644 --- a/src/components/ObfuscatedMail.jsx +++ b/src/components/ObfuscatedMail.jsx @@ -1,19 +1,19 @@ import React from 'react'; -export const ObfuscatedMail = ({ email, className, children, title }) => { - const handleClick = (e) => { - e.preventDefault(); - window.location.href = `mailto:${email}`; - }; +export const ObfuscatedMail = ({email, className, children, title}) => { + const handleClick = (e) => { + e.preventDefault(); + window.location.href = `mailto:${email}`; + }; - return ( - - ); + return ( + + ); }; diff --git a/src/index.css b/src/index.css index 6f3c729..3cd1c0a 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,11 @@ @tailwind base; @tailwind components; @tailwind utilities; -html { scroll-behavior: smooth; } -body { margin: 0; background: #0e0e0e; } +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + background: #0e0e0e; +} diff --git a/src/main.jsx b/src/main.jsx index aa9fccf..bf964aa 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -2,4 +2,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() + +ReactDOM.createRoot(document.getElementById('root')).render() diff --git a/src/sections/Hero.jsx b/src/sections/Hero.jsx index 5d948f8..d52f506 100644 --- a/src/sections/Hero.jsx +++ b/src/sections/Hero.jsx @@ -1,47 +1,72 @@ 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'; +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:', ''); + const rawEmail = SOCIALS.email.replace('mailto:', ''); - return ( -
-
- -
- - - - - -

- - LIQUID DEVELOPMENT - -

- + return ( +
+
+
+ +
+ + + - Open-source software development team - - - - Explore Work - - - {/* Obfuscated Text Button */} - - Contact Team - - -
-
- ); + +

+ + LIQUID + + DEVELOPMENT + + +

+ + + Open-source + software development team + + + + + Explore Work + + + {/* Obfuscated Text Button */} + + Contact Team + + + +
+
+ ); }; diff --git a/src/sections/Projects.jsx b/src/sections/Projects.jsx index 8151b88..39d2405 100644 --- a/src/sections/Projects.jsx +++ b/src/sections/Projects.jsx @@ -1,36 +1,87 @@ import React from 'react'; -import { ArrowRight, Smartphone } from 'lucide-react'; -import { FadeInWhenVisible } from '../utils/animations'; +import {ArrowRight, Smartphone} from 'lucide-react'; +import {FadeInWhenVisible} from '../utils/animations'; export const Projects = () => ( -
-
-
-

Projects

- -
-
-
IN DEVELOPMENT
-

GameTracker App

-

An all-in-one app to track card- and board games, manage players and groups and get statistics about your played games.

-
{['Flutter', 'iOS', 'Android', 'Statistics'].map(tag => ({tag}))}
- View Project Repository -
-
-
-
-
-
-
-
-
-
+
+
+
+

Projects

+
+
+ +
+
+
+ + IN DEVELOPMENT +
+

GameTracker App

+

+ An all-in-one app to track card- and + board games, manage players and groups and get statistics about your played games. +

+
+ {['Flutter', 'iOS', 'Android', 'Statistics'].map(tag => ( + + {tag} + + ))} +
+ + View Project Repository + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Soon available on
+
iOS & Android
+
+
+
-
-
Soon available on
iOS & Android
-
+
- -
-
+ ); diff --git a/src/sections/Team.jsx b/src/sections/Team.jsx index 3dc5678..17e5e04 100644 --- a/src/sections/Team.jsx +++ b/src/sections/Team.jsx @@ -1,19 +1,26 @@ import React from 'react'; -import { FadeInWhenVisible } from '../utils/animations'; -import { TeamMember } from '../components/TeamMember'; -import { TEAM_MEMBERS } from '../data/content'; +import {FadeInWhenVisible} from '../utils/animations'; +import {TeamMember} from '../components/TeamMember'; +import {TEAM_MEMBERS} from '../data/content'; export const Team = () => ( -
-
-

The Team

Meet the creators.

-
- {TEAM_MEMBERS.map((member, index) => ( - - - - ))} -
-
-
+
+
+
+

+ The Team +

+

Meet the creators. +

+
+
+ {TEAM_MEMBERS.map((member, index) => ( + + + + ))} +
+
+
); diff --git a/src/utils/animations.jsx b/src/utils/animations.jsx index 9a1db2b..76a2305 100644 --- a/src/utils/animations.jsx +++ b/src/utils/animations.jsx @@ -1,24 +1,24 @@ -import React, { useRef } from 'react'; -import { motion, useInView } from 'framer-motion'; +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 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 ( -
- - {children} - -
- ); +export const FadeInWhenVisible = ({children, delay = 0}) => { + const ref = useRef(null); + const isInView = useInView(ref, {once: true, margin: "-50px"}); + return ( +
+ + {children} + +
+ ); };