refactor

src/carousel.ts

@@ -0,0 +1,26 @@
+import clients from './clients.json';
+
+export const generateCarouselClients = () => {
+    const carouselInner = document.getElementById('carouselInner');
+    for(let i=0; i<clients.length;i++){
+        const carouselItem = document.createElement('div');
+        carouselItem.className = 'carousel-item text-white text-center';
+        if(i === 0 && carouselItem){
+            carouselItem.classList.add('active');
+        }
+        const img = document.createElement('img');
+        img.className = 'd-block img-fluid mx-auto pb-4';
+        img.src = `./${clients[i].img}`;
+        const name = document.createElement('p');
+        name.className = 'pt-4 mt-4';
+        name.innerHTML = clients[i].name;
+        const description = document.createElement('p');
+        description.innerHTML = clients[i].description;
+        carouselItem.appendChild(img);
+        carouselItem.appendChild(name);
+        carouselItem.appendChild(description);
+        if(carouselInner){
+            carouselInner.appendChild(carouselItem);
+        }
+    } 
+}

src/clients.json

@@ -0,0 +1,7 @@
+[
+    {
+        "name":"Datenmax",
+        "description": "The most advanced and practical dental SaaS accounting and managment platform",
+        "img": "datenmax.png"
+    }
+]

src/main.ts

@@ -1,6 +1,6 @@
+import './styles/theme.scss'
 import 'bootstrap';
-import 'bootstrap/scss/bootstrap.scss';
-import './style.scss'
+import {generateCarouselClients} from './carousel';
 
 const app = document.querySelector<HTMLDivElement>('#app');
 if(app){
@@ -9,4 +9,5 @@ if(app){
   if(dateFooter){
     dateFooter.innerHTML = today.getFullYear().toString();
   }
+  generateCarouselClients();
 }

src/style.scss → src/styles/animations.scss

@@ -1,31 +1,5 @@
-@import './variables.scss';
-@import './animations.scss';
-
-// Bootstrap overwrite
-.navbar-toggler {
-  background-color: white;
-}
-a {
-  text-decoration: none;
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items:center;
-  justify-content: center;
-  justify-items: center;
-}
-
-
-// Custom style
-
-body {
-  font-family: 'Space Grotesk', sans-serif !important;
-  background-color: $bg;
-}
-
 
+// Glitch animation
 .wrapper {
   color: white;
   font-size: 1.5rem;
@@ -54,14 +28,33 @@ body {
 .stack span:nth-child(odd) { --glitch-translate: 8px; }
 .stack span:nth-child(even) { --glitch-translate: -8px; }
 
-.social-media-list {
-  list-style: none;
+@keyframes stack {
+  0% {
+    opacity: 0;
+    transform: translateX(-50%);
+    text-shadow: -2px 3px 0 red, 2px -3px 0 rgb(69, 69, 69);
+  };
+  60% {
+    opacity: 0.5;
+    transform: translateX(50%);
+  }
+  80% {
+    transform: none;
+    opacity: 1;
+    text-shadow: 2px -3px 0 red, -2px 3px 0 rgb(69, 69, 69);
+  }
+  100% {
+    text-shadow: none;
+  }
+}
+
+@keyframes glitch {
+  0% {
+    text-shadow: -2px 3px 0 red, 2px -3px 0 rgb(69, 69, 69);
+    transform: translate(var(--glitch-translate));
+  }
+  2% {
+    text-shadow: 2px -3px 0 red, -2px 3px 0 rgb(69, 69, 69);
+  }
+  4%, 100% {  text-shadow: none; transform: none; }
 }
-
-.logo {
-  width: 38px;
-}
-
-.tsparticles {
-  opacity: 0.5;
-}

src/styles/theme.scss

@@ -0,0 +1,18 @@
+@import './variables.scss';
+@import 'bootstrap/scss/bootstrap.scss';
+@import './animations.scss';
+
+body {
+  font-family: 'Space Grotesk', sans-serif !important;
+}
+
+// Needed for some reason for header navlink to overwrite :hover state
+a{
+  &:hover {
+    color: darkgray !important;
+  }
+}
+
+ul {
+  list-style: none !important;
+}

src/styles/variables.scss

@@ -0,0 +1,6 @@
+$body-bg: #0f0f0f;
+$body-color: white;
+
+$link-color: white;
+$link-decoration: none;
+$link-hover-color: darkgray;