add icons

improve styling
improve landing bg
add astro-icon dep

web/package.json

@@ -13,6 +13,7 @@
     "@astrojs/tailwind": "^3.1.3",
     "@unom/style": "^0.2.14",
     "astro": "^2.5.0",
+    "astro-icon": "^0.8.1",
     "autoprefixer": "^10.4.14",
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",

web/src/components/Card.astro

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types";
 import { VariantProps, cva } from "class-variance-authority";
 
 const card = cva(
-    "rounded-card transition-colors bg-neutral-accent ring-2 ring-main/10",
+    "rounded-card transition-colors bg-neutral-accent ring-2 ring-main/10 flex-1",
     {
         variants: {
             interactable: {

web/src/components/Cards/CardFeature.astro

@@ -1,18 +1,24 @@
 ---
 import Card from "../Card.astro";
+import { Icon } from "astro-icon";
+
 export interface Props {
     title: string;
+    iconName: string;
     description: string;
 }
 
-const { title, description } = Astro.props;
+const { title, description, iconName } = Astro.props;
 ---
 
 <Card>
-    <h4>
+    <div class="text-main w-12 mb-4">
+        <Icon name={iconName} />
+    </div>
+    <h4 class="text-lg font-bold">
         {title}
     </h4>
-    <p>
+    <p class="text-secondary">
         {description}
     </p>
 </Card>

web/src/components/Heading.astro

@@ -0,0 +1,52 @@
+---
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import { VariantProps, cva } from "class-variance-authority";
+
+const heading = cva("max-w-3xl m-[var(--section-heading-margin)]", {
+    variants: {
+        main: {
+            true: "font-bold",
+            false: "font-semibold",
+        },
+        padding: {
+            true: "py-4",
+            false: "p-0",
+        },
+    },
+});
+
+export interface Props
+    extends HTMLAttributes<"h1" | "h2">,
+        VariantProps<typeof heading> {
+    subtitle?: string;
+}
+
+const { main = false, padding = true, subtitle } = Astro.props;
+
+const titleClass = cn(
+    heading({ main, padding }),
+    subtitle ? "mb-[calc(var(--section_heading-margin-bottom)_/_2)]" : ""
+);
+---
+
+<div class="z-0 relative">
+    {
+        main ? (
+            <h1 class={titleClass}>
+                <slot />
+            </h1>
+        ) : (
+            <h2 class={titleClass}>
+                <slot />
+            </h2>
+        )
+    }
+    {
+        subtitle && (
+            <h3 class="font-normal m-[var(--section-heading-margin)] max-w-3xl">
+                {subtitle}
+            </h3>
+        )
+    }
+</div>

web/src/icons/Extensible.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <polygon points="455.76 263.72 455.76 291.15 455.76 318.59 455.76 346.02 455.76 373.45 483.19 373.45 483.19 346.02 483.19 318.59 483.19 291.15 483.19 263.72 455.76 263.72"/>
+  <rect x="428.32" y="373.45" width="27.43" height="27.43"/>
+  <rect x="428.32" y="236.28" width="27.43" height="27.43"/>
+  <polygon points="373.45 400.89 346.02 400.89 346.02 428.32 373.45 428.32 400.89 428.32 428.32 428.32 428.32 400.89 400.89 400.89 373.45 400.89"/>
+  <polygon points="400.89 236.28 428.32 236.28 428.32 208.85 400.89 208.85 373.45 208.85 346.02 208.85 346.02 236.28 373.45 236.28 400.89 236.28"/>
+  <rect x="318.59" y="373.45" width="27.43" height="27.43"/>
+  <rect x="318.59" y="236.28" width="27.43" height="27.43"/>
+  <polygon points="318.59 318.59 318.59 291.15 318.59 263.72 291.15 263.72 291.15 291.15 291.15 318.59 291.15 346.02 291.15 373.45 318.59 373.45 318.59 346.02 318.59 318.59"/>
+  <polygon points="291.15 126.55 318.59 126.55 318.59 153.98 346.02 153.98 346.02 181.41 373.45 181.41 373.45 153.98 373.45 126.55 346.02 126.55 346.02 99.11 318.59 99.11 318.59 71.68 291.15 71.68 263.72 71.68 263.72 44.24 236.28 44.24 208.85 44.24 181.41 44.24 181.41 71.68 181.41 99.11 208.85 99.11 208.85 71.68 236.28 71.68 236.28 99.11 263.72 99.11 263.72 126.55 236.28 126.55 236.28 153.98 208.85 153.98 208.85 181.41 208.85 208.85 181.41 208.85 153.98 208.85 153.98 236.28 181.41 236.28 208.85 236.28 208.85 263.72 236.28 263.72 263.72 263.72 263.72 236.28 236.28 236.28 236.28 208.85 236.28 181.41 263.72 181.41 263.72 153.98 291.15 153.98 291.15 126.55"/>
+  <polygon points="236.28 346.02 208.85 346.02 208.85 373.45 208.85 400.89 181.41 400.89 153.98 400.89 126.55 400.89 126.55 428.32 153.98 428.32 181.41 428.32 208.85 428.32 236.28 428.32 236.28 400.89 263.72 400.89 263.72 373.45 236.28 373.45 236.28 346.02"/>
+  <rect x="181.41" y="318.59" width="27.43" height="27.43"/>
+  <rect x="153.98" y="291.15" width="27.43" height="27.43"/>
+  <rect x="126.55" y="263.72" width="27.43" height="27.43"/>
+  <rect x="99.11" y="236.28" width="27.43" height="27.43"/>
+  <polygon points="71.68 428.32 44.24 428.32 44.24 400.89 16.81 400.89 16.81 428.32 16.81 455.76 44.24 455.76 71.68 455.76 99.11 455.76 126.55 455.76 126.55 428.32 99.11 428.32 71.68 428.32"/>
+  <polygon points="99.11 291.15 99.11 263.72 71.68 263.72 71.68 291.15 71.68 318.59 99.11 318.59 99.11 291.15"/>
+  <polygon points="71.68 373.45 71.68 346.02 71.68 318.59 44.24 318.59 44.24 346.02 44.24 373.45 44.24 400.89 71.68 400.89 71.68 373.45"/>
+</svg>

web/src/icons/Fast.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <polygon points="66.99 184.64 93.14 184.64 119.28 184.64 145.42 184.64 171.57 184.64 197.71 184.64 223.86 184.64 250 184.64 276.14 184.64 302.29 184.64 302.29 158.5 302.29 132.35 302.29 106.21 328.43 106.21 328.43 80.07 302.29 80.07 302.29 53.92 276.14 53.92 276.14 27.78 250 27.78 223.86 27.78 223.86 53.92 223.86 80.07 223.86 106.21 197.71 106.21 171.57 106.21 145.42 106.21 119.28 106.21 93.14 106.21 66.99 106.21 40.85 106.21 40.85 132.35 14.71 132.35 14.71 158.5 14.71 184.64 40.85 184.64 66.99 184.64"/>
+  <polygon points="459.15 236.93 459.15 210.78 433.01 210.78 433.01 184.64 406.86 184.64 406.86 158.5 380.72 158.5 380.72 132.35 354.58 132.35 328.43 132.35 328.43 158.5 328.43 184.64 328.43 210.78 302.29 210.78 276.14 210.78 250 210.78 223.86 210.78 197.71 210.78 171.57 210.78 145.42 210.78 119.28 210.78 93.14 210.78 93.14 236.93 66.99 236.93 66.99 263.07 93.14 263.07 93.14 289.22 119.28 289.22 145.42 289.22 171.57 289.22 197.71 289.22 223.86 289.22 250 289.22 276.14 289.22 302.29 289.22 328.43 289.22 328.43 315.36 328.43 341.5 328.43 367.65 354.58 367.65 380.72 367.65 380.72 341.5 406.86 341.5 406.86 315.36 433.01 315.36 433.01 289.22 459.15 289.22 459.15 263.07 485.29 263.07 485.29 236.93 459.15 236.93"/>
+  <polygon points="302.29 367.65 302.29 341.5 302.29 315.36 276.14 315.36 250 315.36 223.86 315.36 197.71 315.36 171.57 315.36 145.42 315.36 119.28 315.36 93.14 315.36 66.99 315.36 40.85 315.36 14.71 315.36 14.71 341.5 14.71 367.65 40.85 367.65 40.85 393.79 66.99 393.79 93.14 393.79 119.28 393.79 145.42 393.79 171.57 393.79 197.71 393.79 223.86 393.79 223.86 419.93 223.86 446.08 223.86 472.22 250 472.22 276.14 472.22 276.14 446.08 302.29 446.08 302.29 419.93 328.43 419.93 328.43 393.79 302.29 393.79 302.29 367.65"/>
+</svg>

web/src/icons/Open.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <g>
+    <rect x="261.76" y="155.3" width="23.53" height="23.53"/>
+    <rect x="214.71" y="155.3" width="23.53" height="23.53"/>
+    <polygon points="379.41 178.83 379.41 155.3 355.88 155.3 355.88 131.78 332.35 131.78 308.82 131.78 285.29 131.78 285.29 155.3 308.82 155.3 332.35 155.3 332.35 178.83 355.88 178.83 355.88 202.36 379.41 202.36 379.41 225.89 355.88 225.89 355.88 249.42 332.35 249.42 332.35 272.94 308.82 272.94 308.82 296.47 285.29 296.47 285.29 320 261.76 320 261.76 343.53 238.24 343.53 238.24 320 214.71 320 214.71 296.47 191.18 296.47 191.18 272.94 167.65 272.94 167.65 249.42 144.12 249.42 144.12 225.89 120.6 225.89 120.6 202.36 144.12 202.36 144.12 178.83 167.65 178.83 167.65 155.3 191.18 155.3 214.71 155.3 214.71 131.78 191.18 131.78 167.65 131.78 144.12 131.78 144.12 155.3 120.6 155.3 120.6 178.83 97.07 178.83 97.07 202.36 97.07 225.89 97.07 249.42 120.6 249.42 120.6 272.94 144.12 272.94 144.12 296.47 167.65 296.47 167.65 320 191.18 320 191.18 343.53 214.71 343.53 214.71 367.06 238.24 367.06 238.24 390.58 261.76 390.58 261.76 367.06 285.29 367.06 285.29 343.53 308.82 343.53 308.82 320 332.35 320 332.35 296.47 355.88 296.47 355.88 272.94 379.41 272.94 379.41 249.42 402.93 249.42 402.93 225.89 402.93 202.36 402.93 178.83 379.41 178.83"/>
+    <rect x="238.24" y="178.83" width="23.53" height="23.53"/>
+  </g>
+  <g>
+    <polygon points="461.26 108.83 437.73 108.83 437.73 132.36 437.73 155.89 461.26 155.89 461.26 132.36 461.26 108.83"/>
+    <rect x="414.2" y="85.3" width="23.53" height="23.53"/>
+    <rect x="390.68" y="61.78" width="23.53" height="23.53"/>
+    <polygon points="367.15 38.25 343.62 38.25 343.62 61.78 367.15 61.78 390.68 61.78 390.68 38.25 367.15 38.25"/>
+    <polygon points="320.09 14.72 296.56 14.72 273.04 14.72 250.49 14.72 249.51 14.72 226.96 14.72 203.44 14.72 179.91 14.72 156.38 14.72 156.38 38.25 179.91 38.25 203.44 38.25 226.96 38.25 250.49 38.25 250.49 38.25 273.04 38.25 296.56 38.25 320.09 38.25 343.62 38.25 343.62 14.72 320.09 14.72"/>
+    <polygon points="296.56 461.75 273.04 461.75 250.49 461.75 249.51 461.75 226.96 461.75 203.44 461.75 179.91 461.75 156.38 461.75 156.38 485.28 179.91 485.28 203.44 485.28 226.96 485.28 250.49 485.28 250.49 485.28 273.04 485.28 296.56 485.28 320.09 485.28 343.62 485.28 343.62 461.75 320.09 461.75 296.56 461.75"/>
+    <polygon points="343.62 438.22 343.62 461.75 367.15 461.75 390.68 461.75 390.68 438.22 367.15 438.22 343.62 438.22"/>
+    <rect x="390.68" y="414.7" width="23.53" height="23.53"/>
+    <rect x="414.2" y="391.17" width="23.53" height="23.53"/>
+    <polygon points="437.73 367.64 437.73 391.17 461.26 391.17 461.26 367.64 461.26 344.11 437.73 344.11 437.73 367.64"/>
+    <polygon points="484.79 250 484.79 226.47 484.79 202.94 484.79 179.42 484.79 155.89 461.26 155.89 461.26 179.42 461.26 202.94 461.26 226.47 461.26 250 461.26 250 461.26 273.53 461.26 297.06 461.26 320.58 461.26 344.11 484.79 344.11 484.79 320.58 484.79 297.06 484.79 273.53 484.79 250 484.79 250"/>
+    <polygon points="38.74 297.06 38.74 273.53 38.74 250 15.21 250 15.21 273.53 15.21 297.06 15.21 320.58 15.21 344.11 38.74 344.11 38.74 320.58 38.74 297.06"/>
+    <polygon points="62.27 344.11 38.74 344.11 38.74 367.64 38.74 391.17 62.27 391.17 62.27 367.64 62.27 344.11"/>
+    <rect x="62.27" y="391.17" width="23.53" height="23.53"/>
+    <rect x="85.8" y="414.7" width="23.53" height="23.53"/>
+    <polygon points="132.85 438.22 109.32 438.22 109.32 461.75 132.85 461.75 156.38 461.75 156.38 438.22 132.85 438.22"/>
+    <polygon points="109.32 38.25 109.32 61.78 132.85 61.78 156.38 61.78 156.38 38.25 132.85 38.25 109.32 38.25"/>
+    <rect x="85.8" y="61.78" width="23.53" height="23.53"/>
+    <rect x="62.27" y="85.3" width="23.53" height="23.53"/>
+    <polygon points="38.74 132.36 38.74 155.89 62.27 155.89 62.27 132.36 62.27 108.83 38.74 108.83 38.74 132.36"/>
+    <polygon points="15.21 179.42 15.21 202.94 15.21 226.47 15.21 250 38.74 250 38.74 226.47 38.74 202.94 38.74 179.42 38.74 155.89 15.21 155.89 15.21 179.42"/>
+  </g>
+</svg>

web/src/sections/Features.astro

@@ -1,26 +1,45 @@
 ---
 import CardFeature from "@/components/Cards/CardFeature.astro";
+import Heading from "@/components/Heading.astro";
 type Feature = {
     title: string;
+    iconName: string;
     description: string;
 };
 
 const features: Array<Feature> = [
     {
         title: "Fast",
+        iconName: "Fast",
         description:
             "Thanks to rust with multithreading and skia we're really fast!",
     },
+    {
+        title: "Extensible",
+        iconName: "Extensible",
+        description:
+            "Modular structured and thanks to our dual language approach you even decide in which language you want to extend!",
+    },
+    {
+        title: "Community driven & Free",
+        iconName: "Open",
+        description:
+            "The project is MIT licensed and we're open to new ideas for further development. Also since this product is not profit driven we won't screw you over!",
+    },
 ];
 ---
 
-<div class="flex flex-row">
+<div>
-    {
+    <Heading>Core Features & Values</Heading>
-        features.map((feature) => (
+    <div class="flex flex-row gap-card">
-            <CardFeature
+        {
-                title={feature.title}
+            features.map((feature) => (
-                description={feature.description}
+                <CardFeature
-            />
+                    iconName={feature.iconName}
-        ))
+                    title={feature.title}
-    }
+                    description={feature.description}
+                />
+            ))
+        }
+    </div>
 </div>

web/src/sections/Introduction.astro

@@ -1,5 +1,9 @@
+---
+import Heading from "@/components/Heading.astro";
+---
+
 <div class="flex flex-col gap-4">
-    <h2>The next generation motion design tool</h2>
+    <Heading>The Next Generation Open Motion Design Tool</Heading>
     <p>
         We believe tools for expressing yourself should be accessible to
         everybody. Not constrained to proprietary operating systems or monthly

web/src/sections/Landing.astro

@@ -4,22 +4,21 @@ import Button from "@/components/Button.astro";
 
 <div class="h-[80vh] relative">
     <div
+        style="filter:blur(50px);"
         class="z-0 absolute top-0 flex items-center w-full h-full justify-center object-center object-contain"
         id="landing-bg-container"
     >
-        <canvas
+        <canvas width="1920" height="1080" class="w-[800px]" id="landing-bg"
-            width="1920"
+        ></canvas>
-            height="1080"
-            style="filter:blur(100px)"
-            class="w-[800px]"
-            id="landing-bg"></canvas>
     </div>
     <div
         class="z-10 relative w-full h-full flex items-center flex-col justify-center"
     >
         <div class="flex flex-col justify-center items-center gap-2">
-            <h1 class="text-5xl text-center font-black">tempblade Creator</h1>
+            <h1 class="text-5xl dark:text-neutral text-center font-black">
-            <h2 class="text-center text-xl font-normal">
+                tempblade Creator
+            </h1>
+            <h2 class="text-center dark:text-neutral text-xl font-normal">
                 Rust Based Open Source Motion Design Editor & Toolkit
             </h2>
             <Button>Explore now!</Button>

web/src/sections/bg-voronoi.ts

@@ -0,0 +1,95 @@
+interface Point {
+  x: number;
+  y: number;
+  color: string;
+}
+
+interface VoronoiCell {
+  site: Point;
+  vertices: Point[];
+}
+
+function generateVoronoiPattern(
+  canvas: HTMLCanvasElement,
+  points: Array<Point>
+) {
+  const ctx = canvas.getContext("2d");
+
+  if (ctx) {
+    // Draw Voronoi regions
+    for (let x = 0; x < canvas.width; x++) {
+      for (let y = 0; y < canvas.height; y++) {
+        let closestPointIndex = 0;
+        let closestDistance = distance(x, y, points[0].x, points[0].y);
+
+        for (let i = 1; i < points.length; i++) {
+          const dist = distance(x, y, points[i].x, points[i].y);
+          if (dist < closestDistance) {
+            closestDistance = dist;
+            closestPointIndex = i;
+          }
+        }
+
+        const { x: px, y: py, color } = points[closestPointIndex];
+        ctx.fillStyle = color;
+        ctx.fillRect(x, y, 1, 1);
+      }
+    }
+  }
+}
+
+function distance(x1: number, y1: number, x2: number, y2: number) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+// Get canvas element and generate Voronoi pattern
+const canvas = document.getElementById("landing-bg") as HTMLCanvasElement;
+
+
+const initialPoints: Array<Point> = [{
+  x: 200,
+  y: 200,
+  color: "#8AFFAD",
+},
+{
+  x: 800,
+  y: 500,
+  color: "#326CCC",
+},
+{
+  x: 1100,
+  y: 300,
+  color: "#95B2F5",
+},
+{
+  x: 1200,
+  y: 600,
+  color: "#32C3E3",
+},
+{
+  x: 300,
+  y: 900,
+  color: "purple",
+},]
+
+
+const draw = (time: number) => {
+  const radius = 200;
+
+  const angle = time % 360;
+
+  const radian = angle * (Math.PI / 180);
+
+  const x = Math.cos(radian) * radius;
+  const y = Math.sin(radian) * radius;
+
+  const points = initialPoints.map((p) => ({ ...p, x: p.x + x, y: p.y + y }));
+
+  generateVoronoiPattern(canvas, points);
+
+  //requestAnimationFrame(draw);
+}
+
+requestAnimationFrame(draw);

web/src/sections/bg.ts

@@ -1,75 +1,126 @@
 interface Point {
-  x: number;
+    x: number;
-  y: number;
+    y: number;
-  color: string;
+    color: string;
+    radius: number;
 }
 
-interface VoronoiCell {
-  site: Point;
-  vertices: Point[];
-}
-
-function generateVoronoiPattern(
-  canvas: HTMLCanvasElement,
-  points: Array<Point>
-) {
-  const ctx = canvas.getContext("2d");
-
-  if (ctx) {
-    // Draw Voronoi regions
-    for (let x = 0; x < canvas.width; x++) {
-      for (let y = 0; y < canvas.height; y++) {
-        let closestPointIndex = 0;
-        let closestDistance = distance(x, y, points[0].x, points[0].y);
-
-        for (let i = 1; i < points.length; i++) {
-          const dist = distance(x, y, points[i].x, points[i].y);
-          if (dist < closestDistance) {
-            closestDistance = dist;
-            closestPointIndex = i;
-          }
-        }
-
-        const { x: px, y: py, color } = points[closestPointIndex];
-        ctx.fillStyle = color;
-        ctx.fillRect(x, y, 1, 1);
-      }
-    }
-  }
-}
-
-function distance(x1: number, y1: number, x2: number, y2: number) {
-  const dx = x2 - x1;
-  const dy = y2 - y1;
-  return Math.sqrt(dx * dx + dy * dy);
-}
-
-// Get canvas element and generate Voronoi pattern
 const canvas = document.getElementById("landing-bg") as HTMLCanvasElement;
-generateVoronoiPattern(canvas, [
+
-  {
+const initialPoints: Array<Point> = [{
-    x: 200,
+    x: 500,
-    y: 200,
+    y: 400,
     color: "#8AFFAD",
-  },
+    radius: Math.random() * 200
-  {
+},
-    x: 800,
+{
+    x: 900,
     y: 500,
     color: "#326CCC",
-  },
+    radius: Math.random() * 200
-  {
+},
-    x: 1100,
+{
-    y: 300,
+    x: 1600,
+    y: 400,
     color: "#95B2F5",
-  },
+    radius: Math.random() * 200
-  {
+},
+{
     x: 1200,
     y: 600,
     color: "#32C3E3",
-  },
+    radius: Math.random() * 200
-  {
+
-    x: 300,
+},
-    y: 900,
+{
+    x: 600,
+    y: 500,
+    color: "#8AFFAD",
+    radius: Math.random() * 200
+
+},
+{
+    x: 900,
+    y: 300,
     color: "purple",
-  },
+    radius: Math.random() * 200
-]);
+
+},
+]
+
+export class GradientBackground {
+    context: CanvasRenderingContext2D;
+
+    constructor(context: CanvasRenderingContext2D) {
+        this.context = context;
+        this.draw = this.draw.bind(this);
+
+    }
+
+    draw(time: number) {
+        const { width, height } = this.context.canvas;
+
+        this.context.clearRect(0, 0, width, height * 2);
+
+
+        this.context.save();
+
+        this.context.translate(width * 0.5, height * 0.5);
+
+
+        const angle = (time * 0.01) % 360;
+        const radian = angle * (Math.PI / 180);
+
+        this.context.rotate(radian);
+
+        this.context.translate(width * -0.5, height * -0.5);
+
+
+        initialPoints.forEach((point, index) => {
+            const { color, radius } = point;
+
+
+            // Calculate the position/angle on a circle by the time
+            const angle = time * 0.05 + index * 10 % 360;
+
+            // Convert the angle to radian
+            const radian = angle * (Math.PI / 180);
+
+            // Calculate the offset based on the radius
+            const offsetX = Math.cos(radian) * radius;
+            const offsetY = Math.sin(radian) * radius;
+
+            // Calculate the position based on offset and initial position
+            const x = offsetX + point.x;
+            const y = offsetY + point.y;
+
+            // Create the gradient
+            const gradient = this.context.createRadialGradient(x, y, 0, x, y, 700);
+
+            gradient.addColorStop(0, color);
+            gradient.addColorStop(1, "rgba(0,0,0,0)");
+
+            this.context.fillStyle = gradient;
+            this.context.globalCompositeOperation = "lighten";
+
+
+            // Draw a rect with the gradient
+            this.context.fillRect(0, 0, width, height);
+
+
+        })
+
+        this.context.restore();
+
+        return requestAnimationFrame(this.draw);
+    }
+}
+
+const ctx = canvas.getContext("2d");
+
+if (ctx) {
+    const bg = new GradientBackground(ctx);
+
+    requestAnimationFrame(bg.draw);
+}
+

web/src/styles/global.css

@@ -5,6 +5,7 @@
 
 :root {
   --color-main: 0 0% 0%;
+  --color-main: 0 0% 10%;
   --color-primary: 0 0% 0%;
   --color-neutral: 0 0% 100%;
   --color-neutral-accent: 0 0% 93%;
@@ -17,12 +18,15 @@
 
   --spacing-main: 20px;
 
+  --gap-card: 1rem;
+
   --max-width-section: 100%;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --color-main: 0 0% 100%;
+    --color-secondary: 0 0% 80%;
     --color-primary: 0 0% 0%;
     --color-neutral: 264 100% 6%;
     --color-neutral-accent: 271 100% 10%;
@@ -76,5 +80,9 @@ h4 {
 }
 
 p {
-  @apply max-w-[600px];
+  @apply max-w-[600px] text-secondary;
 }
+
+[astro-icon] {
+  fill: currentColor;
+}

web/yarn.lock

@@ -613,6 +613,11 @@
     deepmerge "^4.2.2"
     escalade "^3.1.1"
 
+"@trysound/sax@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
+  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
+
 "@types/babel__core@^7.1.19":
   version "7.20.1"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.1.tgz#916ecea274b0c776fec721e333e55762d3a9614b"
@@ -808,6 +813,15 @@ array-iterate@^2.0.0:
   resolved "https://registry.yarnpkg.com/array-iterate/-/array-iterate-2.0.1.tgz#6efd43f8295b3fee06251d3d62ead4bd9805dd24"
   integrity sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==
 
+astro-icon@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/astro-icon/-/astro-icon-0.8.1.tgz#2259640cea3818326957dfba66ae17aa43f1d3cb"
+  integrity sha512-APk+fbFnoyGdIVSPFrdrOW9YBK96/1fYuVe7ULTGW92+z00RKB8GfLJiUvzNVXUAX2rZJCFmruGVF4rrhcTYsg==
+  dependencies:
+    node-fetch "^3.1.0"
+    resolve-pkg "^2.0.0"
+    svgo "^2.8.0"
+
 astro@^2.5.0:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/astro/-/astro-2.6.4.tgz#37880a65cca438971643fd6473e7fe8ae2578f11"
@@ -917,6 +931,11 @@ bl@^5.0.0:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
+boolbase@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
+
 boxen@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-6.2.1.tgz#b098a2278b2cd2845deef2dff2efc38d329b434d"
@@ -1135,6 +1154,11 @@ commander@^4.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 common-ancestor-path@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/common-ancestor-path/-/common-ancestor-path-1.0.1.tgz#4f7d2d1394d91b7abdf51871c62f71eadb0182a7"
@@ -1173,16 +1197,52 @@ css-color-converter@^2.0.0:
     color-name "^1.1.4"
     css-unit-converter "^1.1.2"
 
+css-select@^4.1.3:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
+  integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.0.1"
+    domhandler "^4.3.1"
+    domutils "^2.8.0"
+    nth-check "^2.0.1"
+
+css-tree@^1.1.2, css-tree@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
 css-unit-converter@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
   integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
 
+css-what@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+csso@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
+  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
+  dependencies:
+    css-tree "^1.1.2"
+
+data-uri-to-buffer@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz#d8feb2b2881e6a4f58c2e08acfd0e2834e26222e"
+  integrity sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==
+
 debug@^4.0.0, debug@^4.1.0, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
@@ -1262,6 +1322,36 @@ dlv@^1.1.3:
   resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
   integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
 
+dom-serializer@^1.0.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
+  integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
+domelementtype@^2.0.1, domelementtype@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domhandler@^4.2.0, domhandler@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
+  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domutils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
 dset@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/dset/-/dset-3.1.2.tgz#89c436ca6450398396dc6538ea00abc0c54cd45a"
@@ -1295,6 +1385,11 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
+entities@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
 es-module-lexer@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.3.0.tgz#6be9c9e0b4543a60cd166ff6f8b4e9dae0b0c16f"
@@ -1433,6 +1528,14 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fetch-blob@^3.1.2, fetch-blob@^3.1.4:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-3.2.0.tgz#f09b8d4bbd45adc6f0c20b7e787e793e309dcce9"
+  integrity sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==
+  dependencies:
+    node-domexception "^1.0.0"
+    web-streams-polyfill "^3.0.3"
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -1464,6 +1567,13 @@ find-yarn-workspace-root2@1.2.16:
     micromatch "^4.0.2"
     pkg-dir "^4.2.0"
 
+formdata-polyfill@^4.0.10:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz#24807c31c9d402e002ab3d8c720144ceb8848423"
+  integrity sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==
+  dependencies:
+    fetch-blob "^3.1.2"
+
 fraction.js@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
@@ -2080,6 +2190,11 @@ mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0:
   dependencies:
     "@types/mdast" "^3.0.0"
 
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -2436,6 +2551,20 @@ nlcst-to-string@^3.0.0:
   dependencies:
     "@types/nlcst" "^1.0.0"
 
+node-domexception@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5"
+  integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==
+
+node-fetch@^3.1.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.3.1.tgz#b3eea7b54b3a48020e46f4f88b9c5a7430d20b2e"
+  integrity sha512-cRVc/kyto/7E5shrWca1Wsea4y6tL9iYJE5FBCius3JQfb/4P4I295PfhgbJQBLTx6lATE4z+wK0rPM4VS2uow==
+  dependencies:
+    data-uri-to-buffer "^4.0.0"
+    fetch-blob "^3.1.4"
+    formdata-polyfill "^4.0.10"
+
 node-releases@^2.0.12:
   version "2.0.12"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.12.tgz#35627cc224a23bfb06fb3380f2b3afaaa7eb1039"
@@ -2465,6 +2594,13 @@ npm-run-path@^5.1.0:
   dependencies:
     path-key "^4.0.0"
 
+nth-check@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
 object-assign@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -2847,6 +2983,18 @@ remark-smartypants@^2.0.0:
     retext-smartypants "^5.1.0"
     unist-util-visit "^4.1.0"
 
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+resolve-pkg@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pkg/-/resolve-pkg-2.0.0.tgz#ac06991418a7623edc119084edc98b0e6bf05a41"
+  integrity sha512-+1lzwXehGCXSeryaISr6WujZzowloigEofRB+dj75y9RRa/obVcYgbHJd53tdYw8pvZj8GojXaaENws8Ktw/hQ==
+  dependencies:
+    resolve-from "^5.0.0"
+
 resolve@^1.1.7, resolve@^1.17.0, resolve@^1.22.2:
   version "1.22.2"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
@@ -3020,6 +3168,11 @@ source-map-js@^1.0.2:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
 space-separated-tokens@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f"
@@ -3030,6 +3183,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
+stable@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
+  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
+
 stdin-discarder@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/stdin-discarder/-/stdin-discarder-0.1.0.tgz#22b3e400393a8e28ebf53f9958f3880622efde21"
@@ -3160,6 +3318,19 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svgo@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
+  integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
+  dependencies:
+    "@trysound/sax" "0.2.0"
+    commander "^7.2.0"
+    css-select "^4.1.3"
+    css-tree "^1.1.3"
+    csso "^4.2.0"
+    picocolors "^1.0.0"
+    stable "^0.1.8"
+
 synckit@^0.8.4:
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.5.tgz#b7f4358f9bb559437f9f167eb6bc46b3c9818fa3"
@@ -3515,6 +3686,11 @@ web-namespaces@^2.0.0:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-2.0.1.tgz#1010ff7c650eccb2592cebeeaf9a1b253fd40692"
   integrity sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==
 
+web-streams-polyfill@^3.0.3:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz#71c2718c52b45fd49dbeee88634b3a60ceab42a6"
+  integrity sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==
+
 which-pm-runs@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.1.0.tgz#35ccf7b1a0fce87bd8b92a478c9d045785d3bf35"