Add random shape positions and fun movements
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
da19ce8f01
commit
b0d23c51d4
|
@ -17,6 +17,8 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
filter: var(--blue);
|
filter: var(--blue);
|
||||||
opacity: 20%;
|
opacity: 20%;
|
||||||
|
|
||||||
|
transition: 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.homeDots {
|
.homeDots {
|
||||||
|
|
|
@ -30,16 +30,19 @@ export function ShapesBackground({ getConfig }: Props) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export type ShapeType =
|
export const shapeTypes = [
|
||||||
| "asterisk"
|
"asterisk",
|
||||||
| "circle"
|
"circle",
|
||||||
| "cross"
|
"cross",
|
||||||
| "dots"
|
"dots",
|
||||||
| "hash"
|
"hash",
|
||||||
| "plus"
|
"plus",
|
||||||
| "ring"
|
"ring",
|
||||||
| "triangle"
|
"triangle",
|
||||||
| "waves";
|
"waves",
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export type ShapeType = typeof shapeTypes[number];
|
||||||
|
|
||||||
export type ShapesConfig = {
|
export type ShapesConfig = {
|
||||||
[key in ShapeType]?: CSSProperties[];
|
[key in ShapeType]?: CSSProperties[];
|
||||||
|
|
|
@ -3,6 +3,11 @@ import React from "react";
|
||||||
import { ConnectWithUs } from "@/components/ConnectWithUs";
|
import { ConnectWithUs } from "@/components/ConnectWithUs";
|
||||||
import { EmailSignup } from "@/components/EmailSignup";
|
import { EmailSignup } from "@/components/EmailSignup";
|
||||||
import { Image } from "@/components/Image";
|
import { Image } from "@/components/Image";
|
||||||
|
import {
|
||||||
|
GetShapesConfig,
|
||||||
|
ShapesConfig,
|
||||||
|
shapeTypes,
|
||||||
|
} from "@/components/ShapesBackground";
|
||||||
|
|
||||||
import Content from "../content/get-involved.mdx";
|
import Content from "../content/get-involved.mdx";
|
||||||
|
|
||||||
|
@ -33,3 +38,18 @@ export default function GetInvolved() {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
GetInvolved.getShapesConfig = (() => {
|
||||||
|
const config: ShapesConfig = {};
|
||||||
|
|
||||||
|
shapeTypes.forEach((shape) => {
|
||||||
|
const [top, left] = [
|
||||||
|
Math.trunc(Math.random() * (window.innerWidth <= 500 ? 50 : 90)),
|
||||||
|
Math.trunc(Math.random() * 100),
|
||||||
|
];
|
||||||
|
|
||||||
|
config[shape] = [{ top: `${top}vh`, left: `${left}vw` }];
|
||||||
|
});
|
||||||
|
|
||||||
|
return config;
|
||||||
|
}) as GetShapesConfig;
|
||||||
|
|
|
@ -6,7 +6,11 @@ import { EmailSignup } from "@/components/EmailSignup";
|
||||||
import { EventDescriptionCard } from "@/components/EventDescriptionCard";
|
import { EventDescriptionCard } from "@/components/EventDescriptionCard";
|
||||||
import { Image } from "@/components/Image";
|
import { Image } from "@/components/Image";
|
||||||
import { NewsCard } from "@/components/NewsCard";
|
import { NewsCard } from "@/components/NewsCard";
|
||||||
import { GetShapesConfig } from "@/components/ShapesBackground";
|
import {
|
||||||
|
GetShapesConfig,
|
||||||
|
ShapesConfig,
|
||||||
|
shapeTypes,
|
||||||
|
} from "@/components/ShapesBackground";
|
||||||
import { SocialLinks } from "@/components/SocialLinks";
|
import { SocialLinks } from "@/components/SocialLinks";
|
||||||
|
|
||||||
import AltTab, {
|
import AltTab, {
|
||||||
|
@ -95,8 +99,16 @@ Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
|
||||||
};
|
};
|
||||||
|
|
||||||
Home.getShapesConfig = (() => {
|
Home.getShapesConfig = (() => {
|
||||||
return {
|
const config: ShapesConfig = {};
|
||||||
triangle: [{ left: "2rem" }, { bottom: "2rem" }],
|
|
||||||
dots: [{ top: "100px", right: "50vw" }],
|
shapeTypes.forEach((shape) => {
|
||||||
};
|
const [top, left] = [
|
||||||
|
Math.trunc(Math.random() * (window.innerWidth <= 500 ? 50 : 90)),
|
||||||
|
Math.trunc(Math.random() * 100),
|
||||||
|
];
|
||||||
|
|
||||||
|
config[shape] = [{ top: `${top}vh`, left: `${left}vw` }];
|
||||||
|
});
|
||||||
|
|
||||||
|
return config;
|
||||||
}) as GetShapesConfig;
|
}) as GetShapesConfig;
|
||||||
|
|
Loading…
Reference in New Issue