Add random shape positions and fun movements

amy-random-shapes
Amy 1 year ago
parent da19ce8f01
commit b0d23c51d4
  1. 2
      components/ShapesBackground.module.css
  2. 23
      components/ShapesBackground.tsx
  3. 20
      pages/get-involved.tsx
  4. 22
      pages/index.tsx

@ -17,6 +17,8 @@
position: absolute;
filter: var(--blue);
opacity: 20%;
transition: 0.5s;
}
.homeDots {

@ -30,16 +30,19 @@ export function ShapesBackground({ getConfig }: Props) {
);
}
export type ShapeType =
| "asterisk"
| "circle"
| "cross"
| "dots"
| "hash"
| "plus"
| "ring"
| "triangle"
| "waves";
export const shapeTypes = [
"asterisk",
"circle",
"cross",
"dots",
"hash",
"plus",
"ring",
"triangle",
"waves",
] as const;
export type ShapeType = typeof shapeTypes[number];
export type ShapesConfig = {
[key in ShapeType]?: CSSProperties[];

@ -3,6 +3,11 @@ import React from "react";
import { ConnectWithUs } from "@/components/ConnectWithUs";
import { EmailSignup } from "@/components/EmailSignup";
import { Image } from "@/components/Image";
import {
GetShapesConfig,
ShapesConfig,
shapeTypes,
} from "@/components/ShapesBackground";
import Content from "../content/get-involved.mdx";
@ -33,3 +38,18 @@ export default function GetInvolved() {
</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 { Image } from "@/components/Image";
import { NewsCard } from "@/components/NewsCard";
import { GetShapesConfig } from "@/components/ShapesBackground";
import {
GetShapesConfig,
ShapesConfig,
shapeTypes,
} from "@/components/ShapesBackground";
import { SocialLinks } from "@/components/SocialLinks";
import AltTab, {
@ -95,8 +99,16 @@ Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
};
Home.getShapesConfig = (() => {
return {
triangle: [{ left: "2rem" }, { bottom: "2rem" }],
dots: [{ top: "100px", right: "50vw" }],
};
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;

Loading…
Cancel
Save