Initial commit

src/counter.ts

@@ -0,0 +1,9 @@
+export function setupCounter(element: HTMLButtonElement) {
+  let counter = 0
+  const setCounter = (count: number) => {
+    counter = count
+    element.innerHTML = `count is ${counter}`
+  }
+  element.addEventListener('click', () => setCounter(counter + 1))
+  setCounter(0)
+}

src/main.ts

@@ -0,0 +1,50 @@
+import "./style.css";
+import backwalkgeorge from "/backwalkgeorge.jpg";
+import georgetoilet from "/georgetoilet.png";
+import klinefloor from "/klinefloor.jpeg";
+import klinemirror from "/klinemirror.jpg";
+import klineoutside from "/klineoutside.jpeg";
+import klinetrain from "/klinetrain.jpeg";
+import sashaklineburrito from "/sashaklineburrito.jpeg";
+import sashaklinecar from "/sashaklinecar.jpeg";
+import sunsetkline from "/sunsetkline.png";
+
+let app = document.getElementById("app")!;
+
+let clearImages = () => {
+  let images = document.getElementsByTagName("img");
+  for (let image in images) {
+    images[image].remove();
+  }
+};
+let setImages = () => {
+  let images = [
+    backwalkgeorge,
+    georgetoilet,
+    klinefloor,
+    klinemirror,
+    klineoutside,
+    klinetrain,
+    sashaklineburrito,
+    sashaklinecar,
+    sunsetkline,
+  ];
+  for (let index in images) {
+    let img = document.createElement("img");
+    img.setAttribute("src", images[index]);
+    img.style.setProperty(
+      "left",
+      (Math.random() * window.innerWidth).toString() + "px",
+    );
+    img.style.setProperty(
+      "top",
+      (Math.random() * window.innerHeight).toString() + "px",
+    );
+    app.append(img);
+  }
+};
+
+window.addEventListener("resize", clearImages);
+window.addEventListener("resize", setImages);
+
+setImages();

src/style.css

@@ -0,0 +1,72 @@
+:root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+
+    color: var(--text-color);
+
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    --link-color: oklch(68% 0.1707 0);
+    --text-color: black;
+}
+
+body,
+html {
+    block-size: 100%;
+    margin: 0;
+    overflow: hidden;
+}
+
+#app {
+    inline-size: 100%;
+    block-size: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+h1 {
+    font-size: 1.5rem;
+    margin: 0;
+}
+
+p {
+    font-size: 1.5rem;
+    margin: 0;
+}
+
+a {
+    color: var(--link-color);
+    text-decoration: none;
+    transition: 0.2s text-shadow, 0.2s transform;
+    display: inline-block;
+
+    &:hover {
+        text-shadow: 0rem 0rem 1rem var(--link-color);
+        transform: rotateZ(-3deg);
+    }
+}
+
+img {
+    transform: translate(-50%, -50%);
+    position: absolute;
+    inline-size: 10%;
+    z-index: -1;
+    min-inline-size: 10rem;
+}
+
+.text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: white;
+    box-shadow: 0rem 0rem 2rem rgba(0, 0, 0, 0.2);
+    border-radius: 0.5rem;
+    padding: 0.8rem 0.8rem;
+    max-inline-size: 50%;
+}

src/typescript.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />