From 4678bace668202ade480fca2c412401f3bed4bc9 Mon Sep 17 00:00:00 2001
From: Solomon Laing <solomonlaing@protonmail.com>
Date: Thu, 10 Apr 2025 22:38:11 +0930
Subject: [PATCH] animations on the way :D

---
 assets/globe-solid.svg          |   1 +
 assets/square-github-brands.svg |   1 +
 assets/square-gitlab-brands.svg |   1 +
 index.html                      | 209 ++++++++++++++++++++++++++++----
 main.js                         |  35 +++++-
 style.css                       | 132 ++++++++++++++++++++
 6 files changed, 352 insertions(+), 27 deletions(-)
 create mode 100644 assets/globe-solid.svg
 create mode 100644 assets/square-github-brands.svg
 create mode 100644 assets/square-gitlab-brands.svg

diff --git a/assets/globe-solid.svg b/assets/globe-solid.svg
new file mode 100644
index 0000000..2c3f18b
--- /dev/null
+++ b/assets/globe-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M352 256c0 22.2-1.2 43.6-3.3 64l-185.3 0c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64l185.3 0c2.2 20.4 3.3 41.8 3.3 64zm28.8-64l123.1 0c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64l-123.1 0c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32l-116.7 0c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0l-176.6 0c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0L18.6 160C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192l123.1 0c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64L8.1 320C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6l176.6 0c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352l116.7 0zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6l116.7 0z"/></svg>
\ No newline at end of file
diff --git a/assets/square-github-brands.svg b/assets/square-github-brands.svg
new file mode 100644
index 0000000..4550a44
--- /dev/null
+++ b/assets/square-github-brands.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM265.8 407.7c0-1.8 0-6 .1-11.6c.1-11.4 .1-28.8 .1-43.7c0-15.6-5.2-25.5-11.3-30.7c37-4.1 76-9.2 76-73.1c0-18.2-6.5-27.3-17.1-39c1.7-4.3 7.4-22-1.7-45c-13.9-4.3-45.7 17.9-45.7 17.9c-13.2-3.7-27.5-5.6-41.6-5.6s-28.4 1.9-41.6 5.6c0 0-31.8-22.2-45.7-17.9c-9.1 22.9-3.5 40.6-1.7 45c-10.6 11.7-15.6 20.8-15.6 39c0 63.6 37.3 69 74.3 73.1c-4.8 4.3-9.1 11.7-10.6 22.3c-9.5 4.3-33.8 11.7-48.3-13.9c-9.1-15.8-25.5-17.1-25.5-17.1c-16.2-.2-1.1 10.2-1.1 10.2c10.8 5 18.4 24.2 18.4 24.2c9.7 29.7 56.1 19.7 56.1 19.7c0 9 .1 21.7 .1 30.6c0 4.8 .1 8.6 .1 10c0 4.3-3 9.5-11.5 8C106 393.6 59.8 330.8 59.8 257.4c0-91.8 70.2-161.5 162-161.5s166.2 69.7 166.2 161.5c.1 73.4-44.7 136.3-110.7 158.3c-8.4 1.5-11.5-3.7-11.5-8zm-90.5-54.8c-.2-1.5 1.1-2.8 3-3.2c1.9-.2 3.7 .6 3.9 1.9c.3 1.3-1 2.6-3 3c-1.9 .4-3.7-.4-3.9-1.7zm-9.1 3.2c-2.2 .2-3.7-.9-3.7-2.4c0-1.3 1.5-2.4 3.5-2.4c1.9-.2 3.7 .9 3.7 2.4c0 1.3-1.5 2.4-3.5 2.4zm-14.3-2.2c-1.9-.4-3.2-1.9-2.8-3.2s2.4-1.9 4.1-1.5c2 .6 3.3 2.1 2.8 3.4c-.4 1.3-2.4 1.9-4.1 1.3zm-12.5-7.3c-1.5-1.3-1.9-3.2-.9-4.1c.9-1.1 2.8-.9 4.3 .6c1.3 1.3 1.8 3.3 .9 4.1c-.9 1.1-2.8 .9-4.3-.6zm-8.5-10c-1.1-1.5-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3c1.1 1.5 1.1 3.3 0 4.1c-.9 .6-2.6 0-3.7-1.5zm-6.3-8.8c-1.1-1.3-1.3-2.8-.4-3.5c.9-.9 2.4-.4 3.5 .6c1.1 1.3 1.3 2.8 .4 3.5c-.9 .9-2.4 .4-3.5-.6zm-6-6.4c-1.3-.6-1.9-1.7-1.5-2.6c.4-.6 1.5-.9 2.8-.4c1.3 .7 1.9 1.8 1.5 2.6c-.4 .9-1.7 1.1-2.8 .4z"/></svg>
\ No newline at end of file
diff --git a/assets/square-gitlab-brands.svg b/assets/square-gitlab-brands.svg
new file mode 100644
index 0000000..1aa6876
--- /dev/null
+++ b/assets/square-gitlab-brands.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96zm337.5 12.5l44.6 116.4 .4 1.2c5.6 16.8 7.2 35.2 2.3 52.5c-5 17.2-15.4 32.4-29.8 43.3l-.2 .1-68.4 51.2-54.1 40.9c-.5 .2-1.1 .5-1.7 .8c-2 1-4.4 2-6.7 2c-3 0-6.8-1.8-8.3-2.8l-54.2-40.9L93.5 322.3l-.4-.3-.2-.1c-14.3-10.8-24.8-26-29.7-43.3s-4.2-35.7 2.2-52.5l.5-1.2 44.7-116.4c.9-2.3 2.5-4.3 4.5-5.6c1.6-1 3.4-1.6 5.2-1.8c1.3-.7 2.1-.4 3.4 .1c.6 .2 1.2 .5 2 .7c1 .4 1.6 .9 2.4 1.5c.6 .4 1.2 1 2.1 1.5c1.2 1.4 2.2 3 2.7 4.8l29.2 92.2H285l30.2-92.2c.5-1.8 1.4-3.4 2.6-4.8s2.8-2.4 4.5-3.1c1.7-.6 3.6-.9 5.4-.7s3.6 .8 5.2 1.8c2 1.3 3.7 3.3 4.6 5.6z"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 83dcf97..99e609b 100644
--- a/index.html
+++ b/index.html
@@ -4,49 +4,206 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title></title>
-    <link href="css/style.css" rel="stylesheet">
+    <title>SolomonLai.ng</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
+        rel="stylesheet" />
+    <link href="style.css" rel="stylesheet">
 </head>
 
 <body>
-    <header>
-        <h1>I am Solomon Laing</h1>
+    <header class="title">
+        <div class="container">
+            <h1>I am <br /> Solomon Laing</h1>
+        </div>
     </header>
     <main>
-        <section>
-            <div class="container">
-                <div class="row">
-                    <div class="col">
-                        <p>Trained in Engineering and IT I spend my time building and maintaining software for
-                            various companies and organisations. Solving problems is my passion and I strive to get
-                            things
-                            done, and do them well.</p>
-                    </div>
-                    <div class="col"></div>
+        <section class="accent1 region">
+            <div class="container row">
+                <div class="col">
+                    <p class="animate-me">Trained in Engineering and IT I spend my time building and maintaining
+                        software for
+                        various companies and organisations. Solving problems is my passion and I strive to get
+                        things
+                        done, and do them well.</p>
+                </div>
+                <div class="col">
+                    <p class="animate-me">
+                        I have a penchant for Linux (or GNU/Linux if you prefer) and besides maintaining a
+                        collection of personalisations through scripts and software customisations, I also manage a
+                        homelab on which I self host many of the services that I use daily.</p>
                 </div>
             </div>
         </section>
-        <div class="container">
-            <div class="row">
-                <p>My Presence</p>
+        <section class="accent2 region">
+            <div class="container row cards">
+                <div class="card">
+                    <a href="https://www.linkedin.com/in/inkletblot/" target="_blank">
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+                            <path fill="currentColor" stroke="currentColor"
+                                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" />
+                        </svg>
+                    </a>
+                </div>
+                <div class="card">
+                    <a href="https://gitlab.inkletblot.com/" target="_blank">
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+                            <path fill="currentColor" stroke="currentColor"
+                                d="M0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96zm337.5 12.5l44.6 116.4 .4 1.2c5.6 16.8 7.2 35.2 2.3 52.5c-5 17.2-15.4 32.4-29.8 43.3l-.2 .1-68.4 51.2-54.1 40.9c-.5 .2-1.1 .5-1.7 .8c-2 1-4.4 2-6.7 2c-3 0-6.8-1.8-8.3-2.8l-54.2-40.9L93.5 322.3l-.4-.3-.2-.1c-14.3-10.8-24.8-26-29.7-43.3s-4.2-35.7 2.2-52.5l.5-1.2 44.7-116.4c.9-2.3 2.5-4.3 4.5-5.6c1.6-1 3.4-1.6 5.2-1.8c1.3-.7 2.1-.4 3.4 .1c.6 .2 1.2 .5 2 .7c1 .4 1.6 .9 2.4 1.5c.6 .4 1.2 1 2.1 1.5c1.2 1.4 2.2 3 2.7 4.8l29.2 92.2H285l30.2-92.2c.5-1.8 1.4-3.4 2.6-4.8s2.8-2.4 4.5-3.1c1.7-.6 3.6-.9 5.4-.7s3.6 .8 5.2 1.8c2 1.3 3.7 3.3 4.6 5.6z" />
+                        </svg>
+                    </a>
+                </div>
+                <div class="card">
+                    <a href="https://github.com/inkletblot/" target="_blank">
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+                            <path fill="currentColor" stroke="currentColor"
+                                d="M448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM265.8 407.7c0-1.8 0-6 .1-11.6c.1-11.4 .1-28.8 .1-43.7c0-15.6-5.2-25.5-11.3-30.7c37-4.1 76-9.2 76-73.1c0-18.2-6.5-27.3-17.1-39c1.7-4.3 7.4-22-1.7-45c-13.9-4.3-45.7 17.9-45.7 17.9c-13.2-3.7-27.5-5.6-41.6-5.6s-28.4 1.9-41.6 5.6c0 0-31.8-22.2-45.7-17.9c-9.1 22.9-3.5 40.6-1.7 45c-10.6 11.7-15.6 20.8-15.6 39c0 63.6 37.3 69 74.3 73.1c-4.8 4.3-9.1 11.7-10.6 22.3c-9.5 4.3-33.8 11.7-48.3-13.9c-9.1-15.8-25.5-17.1-25.5-17.1c-16.2-.2-1.1 10.2-1.1 10.2c10.8 5 18.4 24.2 18.4 24.2c9.7 29.7 56.1 19.7 56.1 19.7c0 9 .1 21.7 .1 30.6c0 4.8 .1 8.6 .1 10c0 4.3-3 9.5-11.5 8C106 393.6 59.8 330.8 59.8 257.4c0-91.8 70.2-161.5 162-161.5s166.2 69.7 166.2 161.5c.1 73.4-44.7 136.3-110.7 158.3c-8.4 1.5-11.5-3.7-11.5-8zm-90.5-54.8c-.2-1.5 1.1-2.8 3-3.2c1.9-.2 3.7 .6 3.9 1.9c.3 1.3-1 2.6-3 3c-1.9 .4-3.7-.4-3.9-1.7zm-9.1 3.2c-2.2 .2-3.7-.9-3.7-2.4c0-1.3 1.5-2.4 3.5-2.4c1.9-.2 3.7 .9 3.7 2.4c0 1.3-1.5 2.4-3.5 2.4zm-14.3-2.2c-1.9-.4-3.2-1.9-2.8-3.2s2.4-1.9 4.1-1.5c2 .6 3.3 2.1 2.8 3.4c-.4 1.3-2.4 1.9-4.1 1.3zm-12.5-7.3c-1.5-1.3-1.9-3.2-.9-4.1c.9-1.1 2.8-.9 4.3 .6c1.3 1.3 1.8 3.3 .9 4.1c-.9 1.1-2.8 .9-4.3-.6zm-8.5-10c-1.1-1.5-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3c1.1 1.5 1.1 3.3 0 4.1c-.9 .6-2.6 0-3.7-1.5zm-6.3-8.8c-1.1-1.3-1.3-2.8-.4-3.5c.9-.9 2.4-.4 3.5 .6c1.1 1.3 1.3 2.8 .4 3.5c-.9 .9-2.4 .4-3.5-.6zm-6-6.4c-1.3-.6-1.9-1.7-1.5-2.6c.4-.6 1.5-.9 2.8-.4c1.3 .7 1.9 1.8 1.5 2.6c-.4 .9-1.7 1.1-2.8 .4z" />
+                        </svg>
+                    </a>
+                </div>
+                <div class="card">
+                    <a href="https://inkletblot.com/" target="_blank">
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+                            <path fill="currentColor" stroke="currentColor"
+                                d="M352 256c0 22.2-1.2 43.6-3.3 64l-185.3 0c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64l185.3 0c2.2 20.4 3.3 41.8 3.3 64zm28.8-64l123.1 0c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64l-123.1 0c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32l-116.7 0c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0l-176.6 0c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0L18.6 160C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192l123.1 0c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64L8.1 320C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6l176.6 0c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352l116.7 0zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6l116.7 0z" />
+                        </svg>
+                    </a>
+                </div>
             </div>
-            <div class="row">
+        </section>
+        <section class="accent3 region">
+            <div class="container row">
                 <div class="col">
-                    <div class="card">
-                        <img src="assets/linkedin-brands.svg" alt="LinkedIn logo" />
+                    <div class="row">
+                        <h2>Contact</h2>
+                    </div>
+                    <div class="row">
+                        <p class="contact">+61 478 586 308</p>
+                    </div>
+                    <div class="row">
+                        <p class="contact">solomon.laing@taptu.com.au</p>
+                    </div>
+                    <div class="row">
+                        <p class="contact">@inkletblot pretty much everywhere</p>
                     </div>
                 </div>
-                <div class="col"></div>
+                <div class="col">
+                    <div class="stagger-visualizer"></div>
+                </div>
             </div>
-        </div>
-        <section>
         </section>
     </main>
-    <footer>
-        <p>Thank you for your time.</p>
+    <footer class="foot">
+        <div class="container row">
+            <p>Thank you for your time.</p>
+        </div>
     </footer>
 
-    <script src="main.js"> </script>
+    <!-- <h2> -->
+    <!--     <span>H</span> -->
+    <!--     <span>E</span> -->
+    <!--     <span>L</span> -->
+    <!--     <span>L</span> -->
+    <!--     <span>O</span> -->
+    <!--     <span>&nbsp;</span> -->
+    <!--     <span>W</span> -->
+    <!--     <span>O</span> -->
+    <!--     <span>R</span> -->
+    <!--     <span>L</span> -->
+    <!--     <span>D</span> -->
+    <!-- </h2> -->
+
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.0.0/lib/anime.iife.min.js"></script>
+
+    <script>
+        const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
+        const fragment = document.createDocumentFragment();
+        const grid = [17, 17];
+        const col = grid[0];
+        const row = grid[1];
+        const numberOfElements = col * row;
+
+        for (let i = 0; i < numberOfElements; i++) {
+            let div = document.createElement('div');
+            div.className = 'part';
+            fragment.appendChild(div);
+        }
+
+        staggerVisualizerEl.appendChild(fragment);
+
+        const staggersAnimation = anime.createTimeline({
+            targets: '.stagger-visualizer .part',
+            easing: 'easeInOutSine',
+            delay: anime.stagger(50),
+            loop: true,
+            autoplay: false
+        });
+
+        staggersAnimation
+            .add({
+                translateX: [
+                    {value: anime.stagger('-.1rem', {grid: grid, from: 'center', axis: 'x'})},
+                    {value: anime.stagger('.1rem', {grid: grid, from: 'center', axis: 'x'})}
+                ],
+                translateY: [
+                    {value: anime.stagger('-.1rem', {grid: grid, from: 'center', axis: 'y'})},
+                    {value: anime.stagger('.1rem', {grid: grid, from: 'center', axis: 'y'})}
+                ],
+                duration: 1000,
+                scale: .5,
+                delay: anime.stagger(100, {grid: grid, from: 'center'})
+            });
+
+        staggersAnimation
+            .add({
+                translateX: () => anime.random(-10, 10),
+                translateY: () => anime.random(-10, 10),
+                delay: anime.stagger(8, {from: 'last'})
+            });
+
+        staggersAnimation
+            .add({
+                translateX: anime.stagger('.25rem', {grid: grid, from: 'center', axis: 'x'}),
+                translateY: anime.stagger('.25rem', {grid: grid, from: 'center', axis: 'y'}),
+                rotate: 0,
+                scaleX: 2.5,
+                scaleY: .25,
+                delay: anime.stagger(4, {from: 'center'})
+            });
+
+        staggersAnimation
+            .add({
+                rotate: anime.stagger([90, 0], {grid: grid, from: 'center'}),
+                delay: anime.stagger(50, {grid: grid, from: 'center'})
+            });
+
+        staggersAnimation
+            .add({
+                translateX: 0,
+                translateY: 0,
+                scale: .5,
+                scaleX: 1,
+                rotate: 180,
+                duration: 1000,
+                delay: anime.stagger(100, {grid: grid, from: 'center'})
+            });
+
+        staggersAnimation
+            .add({
+                scaleY: 1,
+                scale: 1,
+                delay: anime.stagger(20, {grid: grid, from: 'center'})
+            });
+
+        staggersAnimation.play()
+    </script>
+
+    <script src="main.js"></script>
 </body>
 
 </html>
diff --git a/main.js b/main.js
index bb59153..81b5dcf 100644
--- a/main.js
+++ b/main.js
@@ -1,2 +1,35 @@
 /* documentation here: https://animejs.com/documentation/getting-started/installation */
-import { animate } from 'https://cdn.jsdelivr.net/npm/animejs@4.0.0/+esm';
+const { animate, utils, createSpring } = anime;
+
+// @ts-check
+
+const $cards = utils.$('.card')
+
+animate($cards, {
+    // Property keyframes
+    y: [
+        { to: '-2.75rem', ease: 'outExpo', duration: 600 },
+        { to: 0, ease: 'outBounce', duration: 800, delay: 100 }
+    ],
+    // Property specific parameters
+    rotate: {
+        from: '-1turn',
+        delay: 0
+    },
+    delay: (_, i) => i * 50, // Function based value
+    ease: 'inOutCirc',
+});
+
+/**
+    @param {*} card
+*/
+const hovorLogo = (card) => {
+    animate(card, {
+        scale: [
+            { to: 1.1, ease: 'inOut(2)', duration: 50 },
+            { to: 1, ease: createSpring({ stiffness: 300 }) }
+        ],
+    })
+}
+
+$cards.forEach((card) => card.addEventListener('mouseenter', () => hovorLogo(card)))
diff --git a/style.css b/style.css
index e69de29..3a056d6 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,132 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    font-family: Roboto, sans-serif;
+    color: #d7d6d4;
+    background: #1a1617;
+}
+
+p,
+h1,
+h2,
+h3,
+h4 {
+    margin: 0;
+}
+
+img {
+    max-width: 100%;
+}
+
+.accent1 {
+    color: #d7d6d4;
+    background: #6B5C4A;
+}
+
+.accent2 {
+    color: #d7d6d4;
+    background: #564945;
+}
+
+.accent3 {
+    color: #d7d6d4;
+    background: #262527;
+}
+
+.container {
+    width: 80%;
+    max-width: 800px;
+    margin: 0 auto;
+    position: relative;
+}
+
+.title,
+.region {
+    padding: 2rem 0;
+}
+
+.foot {
+    padding-top: 2rem;
+}
+
+.row {
+    display: block;
+    text-align: justify;
+}
+
+.col:not(:first-child) {
+    padding-top: .5rem;
+}
+
+.cards {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.card {
+    display: block;
+    flex: 1;
+
+    >img {
+        max-width: 100px !important;
+    }
+}
+
+h2 {
+    span {
+        display: inline-block;
+    }
+}
+
+a,
+a:hover,
+a:active,
+a:link,
+a:focus,
+a:visited {
+    color: #d7d6d4;
+}
+
+@media (min-width:600px) {
+    .row {
+        display: flex;
+        gap: 3rem;
+    }
+
+    .col {
+        flex: 1;
+        padding-top: 0 !important;
+    }
+
+    .cards {
+        gap: unset;
+        justify-content: space-between;
+    }
+
+    .card {
+        max-width: 115px;
+    }
+}
+
+.stagger-visualizer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    width: 17rem;
+    height: 17rem;
+}
+
+.stagger-visualizer div {
+    /*position: absolute;*/
+    width: 1rem;
+    height: 1rem;
+    border: 1px solid #FFF;
+    background-color: #FFF;
+}