ManyCore-Visualiser
diff --git a/‎public/favicon.png
12.5 KB b/‎public/favicon.png
12.5 KB
diff --git a/‎public/favicon.svg
-9 b/‎public/favicon.svg
-9
diff --git a/‎public/render.png
344 KB b/‎public/render.png
344 KB
diff --git a/‎src/components/Hero.astro
+38-6 b/‎src/components/Hero.astro
+38-6
diff --git a/‎src/layouts/Layout.astro
+11-1 b/‎src/layouts/Layout.astro
+11-1
diff --git a/‎src/pages/index.astro
+2-1 b/‎src/pages/index.astro
+2-1
@@ -3,32 +3,64 @@ import Link from "./Hero/Link.astro";
 ---
 
 <div
-  class="w-full h-[80svh] relative flex items-center justify-center bg-zinc-900 overflow-clip"
+  class="w-full h-[90svh] xl:h-[80svh] relative flex items-center justify-center bg-zinc-900 overflow-clip"
 >
   <div
     class="absolute top-0 left-0 bottom-0 right-0 bg-gradient-to-b from-indigo-700 via-sky-600 to-indigo-700 bg-cool"
   >
   </div>
 
-  <h1 class="relative text-5xl font-extrabold text-white">
-    Visualise <span id="typer">Thing</span> in a few clicks
+  <h1
+    class="relative text-xl md:text-2xl lg:text-3xl xl:text-5xl 2xl:text-7xl font-extrabold text-white"
+  >
+    Visualise <span
+      id="typer"
+      class="bg-gradient-to-b from-lime-300 to-amber-300 bg-clip-text text-transparent"
+    ></span> in a few clicks
   </h1>
 </div>
 <div
-  class="w-full bg-white justify-center items-center flex flex-row py-2 text-zinc-700 shadow-md divide-x-2"
+  class="w-full bg-white justify-center items-center flex flex-row h-[10svh] py-2 text-zinc-700 shadow-md divide-x-2"
 >
   <Link link="#info" content="Info" />
   <Link link="#download" content="Download" />
   <Link link="#manual" content="Manual" />
 </div>
 
+<script>
+  const typer = document.getElementById("typer");
+
+  const words = ["Task Mapping", "Temperature", "Routing Load", "Frequency"];
+  let wordIndex = 0;
+  let i = 0;
+
+  const doType = () => {
+    const word = words[wordIndex];
+
+    i += 1;
+    const display = word.slice(0, i);
+
+    if (typer) {
+      typer.textContent = display;
+    }
+
+    if (i === word.length) {
+      i = 0;
+      wordIndex = (wordIndex + 1) % words.length;
+    }
+
+    setTimeout(doType, i === 0 ? 1500 : 100);
+  };
+
+  doType();
+</script>
+
 <style>
   .bg-cool {
-    mask-image: url(mask.svg);
+    mask-image: url(https://manycore.barillari.me/mask.svg);
     mask-position: center;
     mask-size: cover;
 
-    /* background-position: 0% 20%; */
     background-size: 100% 300%;
     animation: move 5s ease infinite;
   }
 
@@ -13,11 +13,21 @@ const { title, description } = Astro.props;
     <meta charset="UTF-8" />
     <meta name="description" content={description} />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
   </head>
   <body>
     <slot />
+    <footer
+      class="flex w-full py-4 text-center border-t-2 border-zinc-300 mt-10"
+    >
+      <span class="mx-auto"
+        >&copy; 2024 <a
+          href="https://barillari.me"
+          class="underline text-indigo-700">Giuseppe Barillari</a
+        ></span
+      >
+    </footer>
   </body>
 </html>
@@ -7,7 +7,7 @@ import Layout from "../layouts/Layout.astro";
 <Layout title="ManyCore Visualiser" description="">
   <main>
     <Hero />
-    <section id="info" class="grid grid-cols-[50%_40%] px-5">
+    <section id="info" class="grid grid-cols-[60%_40%] px-5">
       <div>
         <h2 class="text-5xl font-bold">What is ManyCore Visualiser?</h2>
         <p class="text-lg text-justify pt-4">
@@ -20,6 +20,7 @@ import Layout from "../layouts/Layout.astro";
           it in a publication.
         </p>
       </div>
+        <img src="/render.png" class="object-contain w-3/4 self-center mx-auto"/>
     </section>
     <section
       id="download"