umwd-components 0.1.201 → 0.1.204

package/.storybook/preview.js

@@ -7,7 +7,14 @@ import "@fontsource/material-icons";
 
 import { CssBaseline, ThemeProvider } from "@mui/material";
 import { withThemeFromJSXProvider } from "@storybook/addon-themes";
-import { lightTheme, darkTheme } from "../src/styles/themes.js";
+import {
+  AMHdarkTheme,
+  AMHlightTheme,
+  APdarkTheme,
+  APlightTheme,
+  OREFSdarkTheme,
+  OREFSlightTheme,
+} from "../src/styles/themes.js";
 
 import "../src/styles/globals.css";
 
@@ -27,10 +34,14 @@ const preview = {
 export const decorators = [
   withThemeFromJSXProvider({
     themes: {
-      light: lightTheme,
-      dark: darkTheme,
+      amhlight: AMHlightTheme,
+      amhdark: AMHdarkTheme,
+      aplight: APlightTheme,
+      apdark: APdarkTheme,
+      orefslight: OREFSlightTheme,
+      orefsdark: OREFSdarkTheme,
     },
-    defaultTheme: "light",
+    defaultTheme: "apdark",
     Provider: ThemeProvider,
     GlobalStyles: CssBaseline,
   }),

package/dist/cjs/components/FluidBackground.js

@@ -22,7 +22,6 @@ function FluidBackground() {
   const [minSize, setMinSize] = React.useState(0);
   const [maxSize, setMaxSize] = React.useState(0);
   const theme = material.useTheme();
-  const darkMode = Boolean(theme.palette.mode === "dark");
   let transitionInterval = null;
   const handleMove = (x, y) => {
     setObjectX(x);
@@ -138,7 +137,7 @@ function FluidBackground() {
       display: "Block",
       width: "100%",
       height: "100%",
-      background: darkMode ? "#2d2d2d" : "#fafafa",
+      background: theme.palette.mode === "dark" ? "#2d2d2d" : "#fafafa",
       zIndex: -1
     }
   }), /*#__PURE__*/React.createElement("svg", {
@@ -250,7 +249,7 @@ function FluidBackground() {
   }, "SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.")))), /*#__PURE__*/React.createElement("rect", {
     width: "100%",
     height: "100%",
-    fill: darkMode ? "#222" : "#fff",
+    fill: theme.palette.mode === "dark" ? "#222" : "#fff",
     mask: "url(#mask)"
   })));
 }

package/dist/cjs/components/FluidBackgroundV2.js

@@ -0,0 +1,181 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var material = require('@mui/material');
+
+function FluidBackground() {
+  const [objectX, setObjectX] = React.useState(0);
+  const [objectY, setObjectY] = React.useState(0);
+  const [ObjectSize, setObjectSize] = React.useState(300);
+  const theme = material.useTheme();
+  const handleMove = (x, y) => {
+    setObjectX(x);
+    setObjectY(y);
+  };
+
+  // setting up all the initial values
+  React.useEffect(() => {
+    setObjectX(window.innerWidth / 2);
+    setObjectY(window.innerHeight / 2);
+    setObjectSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 1.3);
+  }, []);
+  React.useEffect(() => {
+    const handleMoveEvent = e => {
+      const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
+      const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
+      handleMove(x, y);
+    };
+    window.addEventListener("touchmove", handleMoveEvent);
+    window.addEventListener("mousemove", handleMoveEvent);
+    return () => {
+      window.removeEventListener("touchmove", handleMoveEvent);
+      window.removeEventListener("mousemove", handleMoveEvent);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100vw",
+      height: "100vh",
+      zIndex: -1,
+      pointerEvents: "none",
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "background",
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      display: "Block",
+      width: "100%",
+      height: "100%",
+      background: theme.palette.background.paper,
+      zIndex: -1
+    }
+  }), /*#__PURE__*/React.createElement("svg", {
+    id: "object",
+    width: "".concat(ObjectSize, "px"),
+    height: "".concat(ObjectSize, "px"),
+    style: {
+      position: "absolute",
+      top: "".concat(objectY, "px"),
+      left: "".concat(objectX, "px"),
+      transform: "translate(-50%, -50%)"
+    }
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("mask", {
+    id: "radial-gradient-mask"
+  }, /*#__PURE__*/React.createElement("radialGradient", {
+    id: "gradient",
+    cx: "50%",
+    cy: "50%",
+    r: "50%",
+    fx: "50%",
+    fy: "50%"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: "0%",
+    stopColor: "white"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "100%",
+    stopColor: "black"
+  })), /*#__PURE__*/React.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "url(#gradient)"
+  }))), /*#__PURE__*/React.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: theme.palette.primary.main,
+    mask: "url(#radial-gradient-mask)",
+    style: {
+      filter: "opacity(.5)"
+    }
+  })), /*#__PURE__*/React.createElement("svg", {
+    id: "foreground",
+    style: {
+      position: "absolute"
+    },
+    preserveAspectRatio: "xMidYMid slice",
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 7680 4320 "
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("mask", {
+    id: "mask"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("text", {
+    transform: "translate(-1000 200) rotate(-15)",
+    style: {
+      fill: "#000",
+      fontFamily: "Merriweather-Bold, Merriweather",
+      fontSize: "360px",
+      fontWeight: 700,
+      letterSpacing: ".055em"
+    }
+  }, /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "0"
+  }, "JELLE PAULUS IS A TALENTED WEB DEVELOPER AND", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "432"
+  }, "DESIGNER WITH A PASSION FOR CREATING VISUALLY", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "864"
+  }, "STUNNING AND USER-FRIENDLY WEBSITES. WITH A", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "1296"
+  }, "KEEN EYE FOR DETAIL AND A FOCUS ON CREATING", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "1728"
+  }, "CLEAN, FUNCTIONAL DESIGNS, JELLE HAS A", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "2160"
+  }, "REPUTATION FOR DELIVERING HIGH-QUALITY WORK", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "2592"
+  }, "THAT EXCEEDS HIS CLIENTS' EXPECTATIONS. HE HAS A", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "3024"
+  }, "DEEP UNDERSTANDING OF THE LATEST WEB", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "3456"
+  }, "DEVELOPMENT TECHNOLOGIES, AND IS ABLE TO", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "3888"
+  }, "SEAMLESSLY INTEGRATE FUNCTIONALITY AND", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "4320"
+  }, "AESTHETICS TO CREATE WEBSITES THAT ARE BOTH", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "4752"
+  }, "FUNCTIONAL AND VISUALLY APPEALING. WHETHER", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "5184"
+  }, "YOU'RE LOOKING TO ESTABLISH AN ONLINE PRESENCE", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "5616"
+  }, "OR REVAMP AN EXISTING WEBSITE, JELLE HAS THE", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "6048"
+  }, "SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.")))), /*#__PURE__*/React.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: theme.palette.background.default,
+    mask: "url(#mask)"
+  })));
+}
+
+exports.default = FluidBackground;

package/dist/cjs/index.js

@@ -18,7 +18,7 @@ var BulletList = require('./components/BulletList.js');
 var WhatsAppClickToChatButton = require('./components/WhatsAppClickToChatButton.js');
 var ScrollLink = require('./components/ScrollLink.js');
 var ScrollNavbar = require('./components/ScrollNavbar.js');
-var FluidBackground = require('./components/FluidBackground.js');
+var FluidBackgroundV2 = require('./components/FluidBackgroundV2.js');
 
 
 
@@ -34,4 +34,4 @@ exports.BulletList = BulletList.default;
 exports.WhatsAppClickToChatButton = WhatsAppClickToChatButton.default;
 exports.ScrollLink = ScrollLink.default;
 exports.ScrollNavbar = ScrollNavbar.default;
-exports.FluidBackground = FluidBackground.default;
+exports.FluidBackground = FluidBackgroundV2.default;

package/dist/esm/components/FluidBackground.js

@@ -18,7 +18,6 @@ function FluidBackground() {
   const [minSize, setMinSize] = useState(0);
   const [maxSize, setMaxSize] = useState(0);
   const theme = useTheme();
-  const darkMode = Boolean(theme.palette.mode === "dark");
   let transitionInterval = null;
   const handleMove = (x, y) => {
     setObjectX(x);
@@ -134,7 +133,7 @@ function FluidBackground() {
       display: "Block",
       width: "100%",
       height: "100%",
-      background: darkMode ? "#2d2d2d" : "#fafafa",
+      background: theme.palette.mode === "dark" ? "#2d2d2d" : "#fafafa",
       zIndex: -1
     }
   }), /*#__PURE__*/React__default.createElement("svg", {
@@ -246,7 +245,7 @@ function FluidBackground() {
   }, "SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.")))), /*#__PURE__*/React__default.createElement("rect", {
     width: "100%",
     height: "100%",
-    fill: darkMode ? "#222" : "#fff",
+    fill: theme.palette.mode === "dark" ? "#222" : "#fff",
     mask: "url(#mask)"
   })));
 }

package/dist/esm/components/FluidBackgroundV2.js

@@ -0,0 +1,177 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React__default, { useState, useEffect } from 'react';
+import { useTheme } from '@mui/material';
+
+function FluidBackground() {
+  const [objectX, setObjectX] = useState(0);
+  const [objectY, setObjectY] = useState(0);
+  const [ObjectSize, setObjectSize] = useState(300);
+  const theme = useTheme();
+  const handleMove = (x, y) => {
+    setObjectX(x);
+    setObjectY(y);
+  };
+
+  // setting up all the initial values
+  useEffect(() => {
+    setObjectX(window.innerWidth / 2);
+    setObjectY(window.innerHeight / 2);
+    setObjectSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 1.3);
+  }, []);
+  useEffect(() => {
+    const handleMoveEvent = e => {
+      const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
+      const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
+      handleMove(x, y);
+    };
+    window.addEventListener("touchmove", handleMoveEvent);
+    window.addEventListener("mousemove", handleMoveEvent);
+    return () => {
+      window.removeEventListener("touchmove", handleMoveEvent);
+      window.removeEventListener("mousemove", handleMoveEvent);
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100vw",
+      height: "100vh",
+      zIndex: -1,
+      pointerEvents: "none",
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    id: "background",
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      display: "Block",
+      width: "100%",
+      height: "100%",
+      background: theme.palette.background.paper,
+      zIndex: -1
+    }
+  }), /*#__PURE__*/React__default.createElement("svg", {
+    id: "object",
+    width: "".concat(ObjectSize, "px"),
+    height: "".concat(ObjectSize, "px"),
+    style: {
+      position: "absolute",
+      top: "".concat(objectY, "px"),
+      left: "".concat(objectX, "px"),
+      transform: "translate(-50%, -50%)"
+    }
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("mask", {
+    id: "radial-gradient-mask"
+  }, /*#__PURE__*/React__default.createElement("radialGradient", {
+    id: "gradient",
+    cx: "50%",
+    cy: "50%",
+    r: "50%",
+    fx: "50%",
+    fy: "50%"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    offset: "0%",
+    stopColor: "white"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "100%",
+    stopColor: "black"
+  })), /*#__PURE__*/React__default.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "url(#gradient)"
+  }))), /*#__PURE__*/React__default.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: theme.palette.primary.main,
+    mask: "url(#radial-gradient-mask)",
+    style: {
+      filter: "opacity(.5)"
+    }
+  })), /*#__PURE__*/React__default.createElement("svg", {
+    id: "foreground",
+    style: {
+      position: "absolute"
+    },
+    preserveAspectRatio: "xMidYMid slice",
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 7680 4320 "
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("text", {
+    transform: "translate(-1000 200) rotate(-15)",
+    style: {
+      fill: "#000",
+      fontFamily: "Merriweather-Bold, Merriweather",
+      fontSize: "360px",
+      fontWeight: 700,
+      letterSpacing: ".055em"
+    }
+  }, /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "0"
+  }, "JELLE PAULUS IS A TALENTED WEB DEVELOPER AND", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "432"
+  }, "DESIGNER WITH A PASSION FOR CREATING VISUALLY", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "864"
+  }, "STUNNING AND USER-FRIENDLY WEBSITES. WITH A", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "1296"
+  }, "KEEN EYE FOR DETAIL AND A FOCUS ON CREATING", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "1728"
+  }, "CLEAN, FUNCTIONAL DESIGNS, JELLE HAS A", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "2160"
+  }, "REPUTATION FOR DELIVERING HIGH-QUALITY WORK", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "2592"
+  }, "THAT EXCEEDS HIS CLIENTS' EXPECTATIONS. HE HAS A", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "3024"
+  }, "DEEP UNDERSTANDING OF THE LATEST WEB", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "3456"
+  }, "DEVELOPMENT TECHNOLOGIES, AND IS ABLE TO", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "3888"
+  }, "SEAMLESSLY INTEGRATE FUNCTIONALITY AND", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "4320"
+  }, "AESTHETICS TO CREATE WEBSITES THAT ARE BOTH", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "4752"
+  }, "FUNCTIONAL AND VISUALLY APPEALING. WHETHER", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "5184"
+  }, "YOU'RE LOOKING TO ESTABLISH AN ONLINE PRESENCE", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "5616"
+  }, "OR REVAMP AN EXISTING WEBSITE, JELLE HAS THE", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "6048"
+  }, "SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.")))), /*#__PURE__*/React__default.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: theme.palette.background.default,
+    mask: "url(#mask)"
+  })));
+}
+
+export { FluidBackground as default };

package/dist/esm/index.js

@@ -16,4 +16,4 @@ export { default as BulletList } from './components/BulletList.js';
 export { default as WhatsAppClickToChatButton } from './components/WhatsAppClickToChatButton.js';
 export { default as ScrollLink } from './components/ScrollLink.js';
 export { default as ScrollNavbar } from './components/ScrollNavbar.js';
-export { default as FluidBackground } from './components/FluidBackground.js';
+export { default as FluidBackground } from './components/FluidBackgroundV2.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.201",
+  "version": "0.1.204",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/FluidBackground.tsx

@@ -13,7 +13,7 @@ function FluidBackground() {
   const [minSize, setMinSize] = useState(0);
   const [maxSize, setMaxSize] = useState(0);
   const theme = useTheme();
-  const darkMode = Boolean(theme.palette.mode === "dark");
+
   let transitionInterval: NodeJS.Timeout | null = null;
 
   const handleMove = (x: number, y: number) => {
@@ -127,6 +127,8 @@ function FluidBackground() {
     };
   }, [minSize, maxSize]);
 
+  console.log(theme.palette.mode);
+
   return (
     <div
       style={{
@@ -149,7 +151,7 @@ function FluidBackground() {
           display: "Block",
           width: "100%",
           height: "100%",
-          background: darkMode ? "#2d2d2d" : "#fafafa",
+          background: theme.palette.background.paper,
           zIndex: -1,
         }}
       />
@@ -263,7 +265,7 @@ function FluidBackground() {
         <rect
           width={"100%"}
           height={"100%"}
-          fill={darkMode ? "#222" : "#fff"}
+          fill={theme.palette.background.default}
           mask="url(#mask)"
         ></rect>
       </svg>

package/src/components/FluidBackgroundV2.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useTheme } from "@mui/material";
+
+function FluidBackground() {
+  const [objectX, setObjectX] = useState(0);
+  const [objectY, setObjectY] = useState(0);
+
+  const [ObjectSize, setObjectSize] = useState(300);
+
+  const theme = useTheme();
+
+  const handleMove = (x: number, y: number) => {
+    setObjectX(x);
+    setObjectY(y);
+  };
+
+  // setting up all the initial values
+  useEffect(() => {
+    setObjectX(window.innerWidth / 2);
+    setObjectY(window.innerHeight / 2);
+
+    setObjectSize(
+      Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 1.3
+    );
+  }, []);
+
+  useEffect(() => {
+    const handleMoveEvent = (e: TouchEvent | MouseEvent) => {
+      const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
+      const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
+      handleMove(x, y);
+    };
+
+    window.addEventListener("touchmove", handleMoveEvent);
+    window.addEventListener("mousemove", handleMoveEvent);
+
+    return () => {
+      window.removeEventListener("touchmove", handleMoveEvent);
+      window.removeEventListener("mousemove", handleMoveEvent);
+    };
+  }, []);
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        height: "100vh",
+        zIndex: -1,
+        pointerEvents: "none",
+        isolation: "isolate",
+      }}
+    >
+      <div
+        id="background"
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          display: "Block",
+          width: "100%",
+          height: "100%",
+          background: theme.palette.background.paper,
+          zIndex: -1,
+        }}
+      />
+      <svg
+        id="object"
+        width={`${ObjectSize}px`}
+        height={`${ObjectSize}px`}
+        style={{
+          position: "absolute",
+          top: `${objectY}px`,
+          left: `${objectX}px`,
+          transform: "translate(-50%, -50%)",
+        }}
+      >
+        <defs>
+          <mask id="radial-gradient-mask">
+            <radialGradient
+              id="gradient"
+              cx="50%"
+              cy="50%"
+              r="50%"
+              fx="50%"
+              fy="50%"
+            >
+              <stop offset="0%" stopColor="white" />
+              <stop offset="100%" stopColor="black" />
+            </radialGradient>
+            <rect width="100%" height="100%" fill="url(#gradient)" />
+          </mask>
+        </defs>
+        <rect
+          width="100%"
+          height="100%"
+          fill={theme.palette.primary.main}
+          mask="url(#radial-gradient-mask)"
+          style={{ filter: `opacity(.5)` }}
+        />
+      </svg>
+
+      <svg
+        id="foreground"
+        style={{
+          position: "absolute",
+        }}
+        preserveAspectRatio="xMidYMid slice"
+        width="100%"
+        height="100%"
+        viewBox="0 0 7680 4320 "
+      >
+        <defs>
+          <mask id="mask">
+            <rect width={"100%"} height={"100%"} fill="white" />
+            <text
+              transform="translate(-1000 200) rotate(-15)"
+              style={{
+                fill: "#000",
+                fontFamily: "Merriweather-Bold, Merriweather",
+                fontSize: "360px",
+                fontWeight: 700,
+                letterSpacing: ".055em",
+              }}
+            >
+              <tspan x="0" y="0">
+                JELLE PAULUS IS A TALENTED WEB DEVELOPER AND{" "}
+              </tspan>
+              <tspan x="0" y="432">
+                DESIGNER WITH A PASSION FOR CREATING VISUALLY{" "}
+              </tspan>
+              <tspan x="0" y="864">
+                STUNNING AND USER-FRIENDLY WEBSITES. WITH A{" "}
+              </tspan>
+              <tspan x="0" y="1296">
+                KEEN EYE FOR DETAIL AND A FOCUS ON CREATING{" "}
+              </tspan>
+              <tspan x="0" y="1728">
+                CLEAN, FUNCTIONAL DESIGNS, JELLE HAS A{" "}
+              </tspan>
+              <tspan x="0" y="2160">
+                REPUTATION FOR DELIVERING HIGH-QUALITY WORK{" "}
+              </tspan>
+              <tspan x="0" y="2592">
+                THAT EXCEEDS HIS CLIENTS&apos; EXPECTATIONS. HE HAS A{" "}
+              </tspan>
+              <tspan x="0" y="3024">
+                DEEP UNDERSTANDING OF THE LATEST WEB{" "}
+              </tspan>
+              <tspan x="0" y="3456">
+                DEVELOPMENT TECHNOLOGIES, AND IS ABLE TO{" "}
+              </tspan>
+              <tspan x="0" y="3888">
+                SEAMLESSLY INTEGRATE FUNCTIONALITY AND{" "}
+              </tspan>
+              <tspan x="0" y="4320">
+                AESTHETICS TO CREATE WEBSITES THAT ARE BOTH{" "}
+              </tspan>
+              <tspan x="0" y="4752">
+                FUNCTIONAL AND VISUALLY APPEALING. WHETHER{" "}
+              </tspan>
+              <tspan x="0" y="5184">
+                YOU&apos;RE LOOKING TO ESTABLISH AN ONLINE PRESENCE{" "}
+              </tspan>
+              <tspan x="0" y="5616">
+                OR REVAMP AN EXISTING WEBSITE, JELLE HAS THE{" "}
+              </tspan>
+              <tspan x="0" y="6048">
+                SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.
+              </tspan>
+            </text>
+          </mask>
+        </defs>
+        <rect
+          width={"100%"}
+          height={"100%"}
+          fill={theme.palette.background.default}
+          mask="url(#mask)"
+        ></rect>
+      </svg>
+    </div>
+  );
+}
+
+export default FluidBackground;

package/src/index.js

@@ -10,4 +10,4 @@ export { default as BulletList } from "./components/BulletList";
 export { default as WhatsAppClickToChatButton } from "./components/WhatsAppClickToChatButton.tsx";
 export { default as ScrollLink } from "./components/ScrollLink.tsx";
 export { default as ScrollNavbar } from "./components/ScrollNavbar.tsx";
-export { default as FluidBackground } from "./components/FluidBackground.tsx";
+export { default as FluidBackground } from "./components/FluidBackgroundV2.tsx";

package/src/stories/FluidBackground.stories.js

@@ -1,4 +1,4 @@
-import FluidBackground from "../components/FluidBackground.tsx";
+import FluidBackground from "../components/FluidBackgroundV2.tsx";
 import React from "react";
 
 export default {

package/src/styles/themes.js

@@ -14,7 +14,7 @@ const montserrat = Montserrat({
   display: "swap",
 });
 
-export const darkTheme = createTheme({
+const AMHdarkTheme = createTheme({
   palette: {
     mode: "dark",
     primary: {
@@ -103,7 +103,7 @@ export const darkTheme = createTheme({
   },
 }); // Dark theme
 
-export const lightTheme = createTheme({
+const AMHlightTheme = createTheme({
   palette: {
     mode: "light",
     primary: {
@@ -197,3 +197,403 @@ export const lightTheme = createTheme({
     },
   },
 }); // Light theme
+
+const APdarkTheme = createTheme({
+  palette: {
+    type: "dark",
+    primary: {
+      main: "#429294",
+      contrastText: "#000000",
+      light: "#67a7a9",
+      dark: "#2e6667",
+    },
+    secondary: {
+      main: "#ce3a31",
+      light: "#d7615a",
+      dark: "#902822",
+      contrastText: "#ffffff",
+    },
+    background: {
+      default: "#222",
+      paper: "#434343",
+    },
+    text: {
+      secondary: "rgba(255,255,255,0.7)",
+      primary: "#ffffff",
+      disabled: "rgba(255,255,255,0.5)",
+      hint: "rgba(255,255,255,0.5)",
+    },
+    divider: "rgba(255,255,255,0.9)",
+  },
+  typography: {
+    h1: {
+      fontFamily: "EB Garamond",
+      fontWeight: 400,
+    },
+    h2: {
+      fontFamily: "EB garamond",
+      fontWeight: 400,
+    },
+    h3: {
+      fontFamily: "EB Garamond",
+      fontWeight: 400,
+    },
+    h4: {
+      fontFamily: "EB Garamond",
+    },
+    h5: {
+      fontFamily: "EB Garamond",
+    },
+    h6: {
+      fontFamily: "EB Garamond",
+    },
+  },
+  props: {
+    MuiButton: {
+      size: "small",
+    },
+    MuiButtonGroup: {
+      size: "small",
+    },
+    MuiCheckbox: {
+      size: "small",
+    },
+    MuiFab: {
+      size: "small",
+    },
+    MuiFormControl: {
+      margin: "dense",
+      size: "small",
+    },
+    MuiFormHelperText: {
+      margin: "dense",
+    },
+    MuiIconButton: {
+      size: "small",
+    },
+    MuiInputBase: {
+      margin: "dense",
+    },
+    MuiInputLabel: {
+      margin: "dense",
+    },
+    MuiRadio: {
+      size: "small",
+    },
+    MuiSwitch: {
+      size: "small",
+    },
+    MuiTextField: {
+      margin: "dense",
+      size: "small",
+    },
+    MuiList: {
+      dense: true,
+    },
+    MuiMenuItem: {
+      dense: true,
+    },
+    MuiTable: {
+      size: "small",
+    },
+    MuiTooltip: {
+      arrow: true,
+    },
+  },
+}); // Dark theme
+
+const APlightTheme = createTheme({
+  palette: {
+    type: "light",
+    primary: {
+      main: "#ce3a31",
+      light: "#d7615a",
+      dark: "#902822",
+      contrastText: "#ffffff",
+    },
+    secondary: {
+      main: "#429294",
+      contrastText: "#000000",
+      light: "#67a7a9",
+      dark: "#2e6667",
+    },
+    background: {
+      default: "#fafafa",
+      paper: "#ffffff",
+    },
+    text: {
+      primary: "rgba(0,0,0,0.87)",
+      secondary: "rgba(0,0,0,0.54)",
+      disabled: "rgba(0,0,0,0.38)",
+      hint: "rgba(0,0,0,0.38)",
+    },
+  },
+  typography: {
+    h1: {
+      fontFamily: "EB Garamond",
+      fontWeight: 400,
+    },
+    h2: {
+      fontFamily: "EB garamond",
+      fontWeight: 400,
+    },
+    h3: {
+      fontFamily: "EB Garamond",
+      fontWeight: 400,
+    },
+    h4: {
+      fontFamily: "EB Garamond",
+    },
+    h5: {
+      fontFamily: "EB Garamond",
+    },
+    h6: {
+      fontFamily: "EB Garamond",
+    },
+  },
+  props: {
+    MuiButton: {
+      size: "small",
+    },
+    MuiButtonGroup: {
+      size: "small",
+    },
+    MuiCheckbox: {
+      size: "small",
+    },
+    MuiFab: {
+      size: "small",
+    },
+    MuiFormControl: {
+      margin: "dense",
+      size: "small",
+    },
+    MuiFormHelperText: {
+      margin: "dense",
+    },
+    MuiIconButton: {
+      size: "small",
+    },
+    MuiInputBase: {
+      margin: "dense",
+    },
+    MuiInputLabel: {
+      margin: "dense",
+    },
+    MuiRadio: {
+      size: "small",
+    },
+    MuiSwitch: {
+      size: "small",
+    },
+    MuiTextField: {
+      margin: "dense",
+      size: "small",
+    },
+    MuiList: {
+      dense: true,
+    },
+    MuiMenuItem: {
+      dense: true,
+    },
+    MuiTable: {
+      size: "small",
+    },
+    MuiTooltip: {
+      arrow: true,
+    },
+  },
+});
+
+const OREFSdarkTheme = createTheme({
+  palette: {
+    mode: "dark",
+    primary: {
+      main: "#335e53",
+      light: "#457f70",
+      dark: "#213d36",
+    },
+    secondary: {
+      main: "#DD1805",
+      light: "#fa4736",
+      dark: "#b71404",
+    },
+    background: {
+      paper: "#000606",
+      default: "#000D06",
+    },
+    text: {
+      primary: "#fff",
+      secondary: "rgba(255, 255, 255, 0.7)",
+      disabled: "rgba(255, 255, 255, 0.5)",
+      hint: "rgba(255, 255, 255, 0.5)",
+    },
+  },
+  typography: {
+    fontFamily: roboto.style.fontFamily,
+    fontSize: 14,
+    h1: {
+      fontFamily: montserrat.style.fontFamily,
+    },
+    h2: {
+      fontFamily: montserrat.style.fontFamily,
+    },
+    h3: {
+      fontFamily: montserrat.style.fontFamily,
+    },
+    h4: {
+      fontFamily: montserrat.style.fontFamily,
+    },
+    h5: {
+      fontFamily: montserrat.style.fontFamily,
+    },
+    h6: {
+      fontFamily: montserrat.style.fontFamily,
+    },
+    subtitle1: {
+      fontFamily: roboto.style.fontFamily,
+      fontSize: "1.2rem",
+      lineHeight: 1.6,
+    },
+    subtitle2: {
+      fontFamily: roboto.style.fontFamily,
+    },
+    body1: {
+      fontFamily: roboto.style.fontFamily,
+      fontSize: "1.1rem",
+      lineHeight: 1.4,
+    },
+    body2: {
+      fontFamily: roboto.style.fontFamily,
+      fontSize: "1rem",
+    },
+    button: {
+      fontFamily: roboto.style.fontFamily,
+    },
+    caption: {
+      fontFamily: roboto.style.fontFamily,
+    },
+    overline: {
+      fontFamily: roboto.style.fontFamily,
+    },
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        "*::-webkit-scrollbar": {
+          width: "0.8em",
+        },
+        "*::-webkit-scrollbar-track": {
+          backgroundColor: "#000606",
+        },
+        "*::-webkit-scrollbar-thumb": {
+          backgroundColor: "#DD1805",
+        },
+      },
+    },
+  },
+}); // Dark theme
+
+const OREFSlightTheme = createTheme({
+  palette: {
+    mode: "light",
+    primary: {
+      main: "#335e53",
+      light: "#457f70",
+      dark: "#213d36",
+    },
+    secondary: {
+      main: "#DD1805",
+      light: "#fa4736",
+      dark: "#b71404",
+    },
+    background: {
+      paper: "#a5c5ba",
+      default: "#d0dcd8",
+    },
+    text: {
+      primary: "rgba(0, 0, 0, 0.87)",
+      secondary: "rgba(0, 0, 0, 0.54)",
+      disabled: "rgba(0, 0, 0, 0.38)",
+      hint: "rgba(0, 0, 0, 0.38)",
+    },
+  },
+  typography: {
+    h1: {
+      fontFamily: "Montserrat",
+      fontSize: "84px",
+    },
+    h2: {
+      fontFamily: "Montserrat",
+      fontSize: "53px",
+    },
+    h3: {
+      fontFamily: "Montserrat",
+      fontSize: "42px",
+    },
+    h4: {
+      fontFamily: "Montserrat",
+      fontSize: "30px",
+    },
+    h5: {
+      fontFamily: "Montserrat",
+      fontSize: "21px",
+    },
+    h6: {
+      fontFamily: "Montserrat",
+      fontSize: "17px",
+    },
+    fontFamily: "Roboto",
+    fontSize: 14,
+    subtitle1: {
+      fontFamily: "Roboto",
+      fontSize: "1.2rem",
+      lineHeight: 1.6,
+    },
+    subtitle2: {
+      fontFamily: "Roboto",
+    },
+    body1: {
+      fontFamily: "Roboto",
+      fontSize: "1.1rem",
+      lineHeight: 1.4,
+    },
+    body2: {
+      fontFamily: "Roboto",
+      fontSize: "1rem",
+    },
+    button: {
+      fontFamily: "Roboto",
+    },
+    caption: {
+      fontFamily: "Roboto",
+    },
+    overline: {
+      fontFamily: "Roboto",
+    },
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        "*::-webkit-scrollbar": {
+          width: "0.8em",
+        },
+        "*::-webkit-scrollbar-track": {
+          backgroundColor: "#a5c5ba",
+        },
+        "*::-webkit-scrollbar-thumb": {
+          backgroundColor: "#DD1805",
+        },
+      },
+    },
+  },
+}); // Light theme
+
+export {
+  AMHdarkTheme,
+  AMHlightTheme,
+  APdarkTheme,
+  APlightTheme,
+  OREFSdarkTheme,
+  OREFSlightTheme,
+};