feat: render responsive low-poly hero landscape

src/components/scenes/Scenes.module.css

@@ -0,0 +1,39 @@
+.heroScene,
+.aboutScene {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background: var(--bg-page);
+  pointer-events: none;
+}
+
+.heroScene {
+  z-index: 0;
+}
+
+.heroScene::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 50% 42%, var(--bg-page) 0 14%, transparent 44%),
+    linear-gradient(to bottom, transparent 68%, var(--bg-page) 100%);
+  opacity: 0.42;
+}
+
+.heroScene canvas,
+.aboutScene canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.aboutScene {
+  z-index: 0;
+}
+
+@media (max-width: 640px) {
+  .heroScene::after {
+    opacity: 0.62;
+  }
+}