Change rem to vh/vw and clean up shapesBySize

components/ShapesBackground.tsx

@@ -175,16 +175,8 @@ const shapesSizes: ShapeSize = {
 };
 
 const shapesBySize = {
-  big: Object.entries(shapesSizes)
-    .map((shape) => shape[0])
-    .filter(
-      (shape) => shapesSizes[shape as ShapeType]["size"] == "big"
-    ) as ShapeType[],
-  small: Object.entries(shapesSizes)
-    .map((shape) => shape[0])
-    .filter(
-      (shape) => shapesSizes[shape as ShapeType]["size"] == "small"
-    ) as ShapeType[],
+  big: shapeTypes.filter((shape) => shapesSizes[shape]["size"] == "big"),
+  small: shapeTypes.filter((shape) => shapesSizes[shape]["size"] == "small"),
 };
 
 // Used to generate random shapes in the margins
@@ -217,9 +209,17 @@ export const defaultGetShapesConfig = ((pageWidth, pageHeight) => {
       const opacity = getRandomOpacity(colour);
 
       defaultConfig[shape]?.push({
-        top: `${((y + verticalOffset) / 16).toFixed(5)}rem`,
-        left: x == 0 ? `${(horizontalOffset / 16).toFixed(5)}rem` : "unset",
-        right: x == 1 ? `${(horizontalOffset / 16).toFixed(5)}rem` : "unset",
+        top: `${(((y + verticalOffset) / window.innerHeight) * 100).toFixed(
+          5
+        )}vh`,
+        left:
+          x == 0
+            ? `${((horizontalOffset / window.innerWidth) * 100).toFixed(5)}vw`
+            : "unset",
+        right:
+          x == 1
+            ? `${((horizontalOffset / window.innerWidth) * 100).toFixed(5)}vw`
+            : "unset",
         width: `${(shapeWidth / 16).toFixed(5)}rem`,
         height: `${(shapeHeight / 16).toFixed(5)}rem`,
         transform: `rotate(${angle}deg)`,