all of this shit

assets/components/about-boxes/style.css

@@ -1,7 +1,7 @@
 .Aboutbox {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: stretch;
   justify-content: start;
   gap: 8px;
   width: 100%;
@@ -9,14 +9,17 @@
 
   border: 1px solid currentColor;
   padding: 8px;
-  background: var(--background) var(--tiles-diag-black);
+  background: var(--background) var(--tiles-last-black);
+  box-shadow: inset var(--inset) var(--inset) 0 var(--foreground);
 
   .AboutboxElement {
+    --height: 150px;
     width: 100%;
-    height: 200px;
+    height: var(--height);
     display: grid;
     box-sizing: border-box;
-    grid-template-columns: 1fr calc(200px - 2px);
+    grid-template-columns: 1fr calc(var(--height) - 2px);
+    box-shadow: var(--inset) var(--inset) 0 var(--foreground);
 
     border: 1px solid currentColor;
     background: var(--background);

assets/components/computer-boxes/style.css

@@ -0,0 +1,27 @@
+.Computerbox {
+  border: 1px solid currentColor;
+  padding: 8px;
+  background-color: var(--background);
+  box-shadow: var(--inset) var(--inset) 0 var(--foreground);
+
+  .ComputerboxDesc {
+    h2 {
+      font-family: var(--font-text-top);
+    }
+
+    h2, p {
+      margin: 0;
+    }
+
+    div:first-child {
+      text-align: start;
+    }
+    div:last-child {
+      text-align: end;
+    }
+  }
+
+  p {
+    margin: 0;
+  }
+}

assets/components/header/style.css

@@ -7,6 +7,8 @@
   padding: 8px;
   gap: 8px;
   font-size: 16px;
+  background: transparent var(--tiles-last-black);
+  box-shadow: inset var(--inset) var(--inset) 0 var(--foreground);
 
   .HeaderTop {
     display: grid;
@@ -16,6 +18,9 @@
     box-sizing: border-box;
     border: 1px solid currentColor;
     font-family: var(--font-text-top);
+    font-weight: bold;
+    background: var(--background);
+    box-shadow: var(--inset) var(--inset) 0 var(--foreground);
 
     .HeaderTopImage {
       width: 100%;
@@ -32,18 +37,22 @@
       align-items: center;
       justify-content: center;
       box-sizing: border-box;
-      background: linear-gradient(to right, white, transparent, transparent),
-        var(--tiles-diag-black);
 
       h1,
       p {
         margin: 0;
       }
 
+      p {
+        /* letter-spacing: 0.2em; */
+        line-height: 0.8em;
+      }
+
       h1 {
         font-weight: normal;
         font-size: 2.5em;
         line-height: 1em;
+        /* letter-spacing: 0.1em; */
       }
     }
   }
@@ -65,7 +74,8 @@
       border: 1px solid currentColor;
       color: currentColor;
       text-decoration: inherit;
-      background: transparent var(--tiles-diag-black);
+      background: var(--background);
+      box-shadow: var(--inset) var(--inset) 0 var(--foreground);
     }
   }
 }

assets/components/link-boxes/style.css

@@ -0,0 +1,19 @@
+.Linkbox {
+  border: 1px solid currentColor;
+  padding: 8px;
+  background-color: var(--background);
+  box-shadow: var(--inset) var(--inset) 0 var(--foreground);
+
+  h2 {
+    margin: 0;
+    font-family: var(--font-text-top);
+  }
+
+  p {
+    margin: 0.5em 0;
+  }
+
+  :last-child {
+    margin: 0;
+  }
+}

assets/components/service-boxes/style.css

@@ -0,0 +1,21 @@
+.Servicebox {
+  border: 1px solid currentColor;
+  padding: 8px;
+  background-color: var(--background);
+  box-shadow: var(--inset) var(--inset) 0 var(--foreground);
+
+  h2 {
+    font-family: var(--font-text-top);
+  }
+
+  h2, p {
+    margin: 0;
+  }
+
+  div:first-child {
+    text-align: start;
+  }
+  div:last-child {
+    text-align: end;
+  }
+}

assets/components/style.css

@@ -1,2 +1,5 @@
 @import url("./header/style.css");
 @import url("./about-boxes/style.css");
+@import url("./computer-boxes/style.css");
+@import url("./service-boxes/style.css");
+@import url("./link-boxes/style.css");

assets/style.css

@@ -4,13 +4,33 @@
 :root {
   --background: #fff;
   --red: #f00;
-  --grey: #ccc;
+  --grey: #888;
   --foreground: #000;
 
-  --tiles-diag-black: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGUlEQVQImWNgYGBwYEAAB0ZkDgMaxwErBwA4twHCVgI5sAAAAABJRU5ErkJggg==");
+  --inset: 2px;
-  --tiles-diag-white: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQImWP4//+/AwMU/P//34ERmcOAzIELoHAYGBgAAxcWrY397t4AAAAASUVORK5CYII=");
+
-  --tiles-last-black: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADElEQVQImWNgQAP/AQERAQD1y6SYAAAAAElFTkSuQmCC");
+  --image-filter: none;
-  --tiles-last-white: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWNgQAb/////DwAKCAP9R4CJSwAAAABJRU5ErkJggg==");
+
+  --tiles-diag-black: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAK0lEQVQIWy2KxwEAIBDCCPuvLKineVECcqugg+1OGGDKf2jumMLVQqX17A2jnQ4ME9JEhAAAAABJRU5ErkJggg==");
+  --tiles-diag-white: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAALUlEQVQIWzWLQQ4AIAyDiv7/yQ6nRk6UpFjKgDStXjm0m6rc8EbCBHQZR/5tA5ByF/hYTO80AAAAAElFTkSuQmCC");
+  --tiles-last-black: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADElEQVQImWNgQAP/AQERAQD1y6SYAAAAAElFTkSuQmCC");
+  --tiles-last-white: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWNgQAb/////DwAKCAP9R4CJSwAAAABJRU5ErkJggg==");
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #000;
+    --red: #0ff;
+    --grey: #888;
+    --foreground: #fff;
+
+    --image-filter: invert(1);
+
+    --tiles-diag-white: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAK0lEQVQIWy2KxwEAIBDCCPuvLKineVECcqugg+1OGGDKf2jumMLVQqX17A2jnQ4ME9JEhAAAAABJRU5ErkJggg==");
+    --tiles-diag-black: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAALUlEQVQIWzWLQQ4AIAyDiv7/yQ6nRk6UpFjKgDStXjm0m6rc8EbCBHQZR/5tA5ByF/hYTO80AAAAAElFTkSuQmCC");
+    --tiles-last-white: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADElEQVQImWNgQAP/AQERAQD1y6SYAAAAAElFTkSuQmCC");
+    --tiles-last-black: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWNgQAb/////DwAKCAP9R4CJSwAAAABJRU5ErkJggg==");
+  }
 }
 
 html {
@@ -20,11 +40,11 @@ html {
 
 body {
   margin: 0;
-  padding: 8px;
+  padding: 16px;
   box-sizing: border-box;
   min-height: 100%;
   width: 100%;
-  background: var(--background) var(--tiles-diag-black);
+  background: var(--background) var(--tiles-last-black);
   text-align: center;
   font-family: var(--font-text-legible);
 }
@@ -32,6 +52,7 @@ body {
 main {
   text-align: start;
   display: inline-block;
+  width: 100%;
   max-width: 768px;
   box-sizing: border-box;
   background-color: var(--background);
@@ -39,6 +60,7 @@ main {
   color: var(--foreground);
   min-height: 100%;
   padding: 8px;
+  box-shadow: 4px 4px 0 var(--foreground);
 }
 
 section {
@@ -46,5 +68,42 @@ section {
 }
 
 a {
-  color: black;
+  color: var(--foreground);
+}
+
+img[src^="/assets"],
+img[src^="/favicon.ico"] {
+  filter: var(--image-filter);
+}
+
+.tagline {
+  text-align: center;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid currentColor;
+  color: inherit;
+  background-color: transparent;
+}
+
+.boxThing {
+  padding: 1rem;
+  margin: 16px 8px;
+  border: 1px solid currentColor;
+  background: var(--background);
+  box-sizing: border-box;
+  box-shadow: var(--inset) var(--inset) 0 var(--foreground);
+
+  h1 {
+    margin-bottom: 0.5em;
+    font-family: var(--font-text-top);
+  }
+
+  :first-child {
+    margin-top: 0;
+  }
+  :last-child {
+    margin-bottom: 0;
+  }
 }

index.js

@@ -2,17 +2,76 @@ import express from "express";
 import { config } from "dotenv";
 import path from "path";
 
+const __dirname = import.meta.dirname;
+
 const app = express();
 
 app.set('view engine', 'ejs');
 app.use('/assets', express.static('assets'));
+app.set('views', path.join(__dirname, "views", "pages"));
+
+app.locals = {
+  visibility: [
+    "Backend",
+    "Personal",
+    "Friends-only",
+    "Login-only",
+    "Public"
+  ]
+}
 
 config();
 
-app.get('/', (req, res) => {
+app.use(async (req, res, next) => {
-  res.render(path.join("pages", "index.ejs"), {
+  const buttonsJson = await fetch("https://cdn.abtmtr.link/site_content/buttons.json")
+    .catch(() => res.status(500).send())
+    .then((res) => res.json());
+  app.locals.buttons = buttonsJson;
+  next();
+})
 
+app.get('/', async (req, res) => {
+  const statusesJson = await fetch("https://cdn.abtmtr.link/site_content/v13/statuses.json")
+    .catch(() => res.status(500).send())
+    .then((res) => res.json());
+
+  res.render('index', {
+    statuses: statusesJson
   });
+})
+
+app.get('/services', async (req, res) => {
+  const servicesJson = await fetch("https://cdn.abtmtr.link/site_content/v13/services.json")
+    .catch(() => res.status(500).send())
+    .then((res) => res.json());
+
+  res.render('services/index', { services: servicesJson });
+});
+
+app.get('/computers', async (req, res) => {
+  const computersJson = await fetch("https://cdn.abtmtr.link/site_content/v13/computers.json")
+    .catch(() => res.status(500).send())
+    .then((res) => res.json());
+
+  res.render('computers/index', { computers: computersJson });
+});
+
+app.get('/links', async (req, res) => {
+  const linksJson = await fetch("https://cdn.abtmtr.link/site_content/v13/links.json")
+    .catch(() => res.status(500).send())
+    .then((res) => res.json());
+
+  res.render('links/index', {
+    links: linksJson
+  });
+});
+
+app.get('/matkap', (req, res) => {
+  res.render('matkap/index');
+});
+
+app.get('/about', (req, res) => {
+  res.render('about/index');
 });
 
 app.get("/favicon.ico", (req, res) => {

views/components/about-boxes.ejs

@@ -1,30 +1,37 @@
 <div class="Aboutbox">
   <div class="AboutboxElement">
     <div class="AboutboxElementText">
-      <h1><a href="/computers/">COMPUTERS</a></h1>
+      <h1><a href="/matkap/">MATKAP ZONE</a></h1>
-      <p>beep boop</p>
+      <p>Matkap's corner of the web.</p>
     </div>
-    <img class="AboutboxElementImage" src="/assets/test.png" />
+    <img class="AboutboxElementImage" src="/assets/icons/matkap_zone.png" />
   </div>
   <div class="AboutboxElement">
     <div class="AboutboxElementText">
       <h1><a href="/services/">SERVICES</a></h1>
-      <p>fuck it, why not?</p>
+      <p>Stuff I host here on abtmtr.link.</p>
     </div>
-    <img class="AboutboxElementImage" src="/assets/test.png" />
+    <img class="AboutboxElementImage" src="/assets/icons/services.png" />
   </div>
   <div class="AboutboxElement">
     <div class="AboutboxElementText">
-      <h1><a href="/friends/">FRIENDS</a></h1>
+      <h1><a href="/computers/">COMPUTERS</a></h1>
-      <p>fellow Gaming Racists</p>
+      <p>Computers I own, use, and host stuff on.</p>
     </div>
-    <img class="AboutboxElementImage" src="/assets/test.png" />
+    <img class="AboutboxElementImage" src="/assets/icons/computers.png" />
+  </div>
+  <div class="AboutboxElement">
+    <div class="AboutboxElementText">
+      <h1><a href="/links/">LINKS</a></h1>
+      <p>Where I am on the Internet.</p>
+    </div>
+    <img class="AboutboxElementImage" src="/assets/icons/links.png" />
   </div>
   <div class="AboutboxElement">
     <div class="AboutboxElementText">
       <h1><a href="/about/">ABOUT</a></h1>
-      <p>why <i>are</i> you here?</p>
+      <p>Who I am.</p>
     </div>
-    <img class="AboutboxElementImage" src="/assets/test.png" />
+    <img class="AboutboxElementImage" src="/assets/icons/about.png" />
   </div>
 </div>

views/components/computer-boxes.ejs

@@ -0,0 +1,14 @@
+<div class="Computerbox" id="<%= id %>">
+  <div class="ComputerboxDesc">
+    <div>
+      <h2><%= name %></h2>
+      <p><%= whenGot.month %> <%= whenGot.year %></p>
+    </div>
+    <div>
+      <p><%= model %></p>
+      <p><%= description %></p>
+    </div>
+  </div>
+  <hr />
+  <p><%= subtitle %></p>
+</div>

views/components/footer.ejs

@@ -1,7 +1,13 @@
+<hr />
 <footer>
   <section>
     <p>abtmtr.link v13 &copy; MeowcaTheoRange 2024</p>
     <p>Licensed under the <a href="https://cdn.abtmtr.link/licenses/kkpl/license-v2.2.txt">Karkat Public License</a>.</p>
-    <p>Git repository: <a href="https://git.abtmtr.link/MeowcaTheoRange/abtmtr-v13">MeowcaTheoRange/abtmtr-v13</a></p>
+    <p>Git repository: <a href="https://git.abtmtr.link/MeowcaTheoRange/abtmtr-v13" target="_blank">MeowcaTheoRange/abtmtr-v13</a></p>
+  </section>
+  <section style="text-align: center;">
+    <% buttons.forEach((button) => { %>
+      <a href="<%= button.href %>"><img src="<%= button.img %>" title="<%= button.alt %>" alt="<%= button.alt %>" /></a>
+    <% }) %>
   </section>
 </footer>

views/components/header.ejs

@@ -8,8 +8,9 @@
   </div>
   <div class="HeaderLinks">
     <a class="HeaderLinksLink" href="/">Home</a>
-    <a class="HeaderLinksLink" href="/about/">About</a>
-    <a class="HeaderLinksLink" href="/computers/">Computers</a>
     <a class="HeaderLinksLink" href="/services/">Services</a>
+    <a class="HeaderLinksLink" href="/computers/">Computers</a>
+    <a class="HeaderLinksLink" href="/links/">Links</a>
+    <a class="HeaderLinksLink" href="/about/">About</a>
   </div>
 </div>

views/components/link-boxes.ejs

@@ -0,0 +1,5 @@
+<div class="Linkbox" id="<%= id %>">
+  <h2><%= title %></h2>
+  <p><a href="<%= link %>" target="_blank"><%= link %></a></p>
+  <p><%= subtitle %></p>
+</div>

views/components/service-boxes.ejs

@@ -0,0 +1,10 @@
+<div class="Servicebox" id="<%= id %>">
+  <div>
+    <h2><a href="https://<%= domain %>/"><%= domain %></a></h2>
+    <p><%= when.month %> <%= when.year %></p>
+  </div>
+  <div>
+    <p><%= software %></p>
+    <p><%= arr[visibility] %></p>
+  </div>
+</div>

views/pages/about/index.ejs

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>abtmtr.link</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="/assets/style.css" />
+</head>
+
+<body>
+  <main>
+    <%- include("../../components/header.ejs") %>
+    <p class="tagline">Who I am.</p>
+    <section>
+      <p>abtmtr.link is a website. that's for sure</p>
+    </section>
+    <%- include("../../components/footer.ejs") %>
+  </main>
+  <script src="/assets/script.js"></script>
+</body>
+
+</html>

views/pages/computers/index.ejs

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>abtmtr.link</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="/assets/style.css" />
+</head>
+
+<body>
+  <main>
+    <%- include("../../components/header.ejs") %>
+    <p class="tagline">Computers I own, use, and host stuff on.</p>
+    <div class="Aboutbox">
+      <% computers.forEach((computer) => { %>
+        <%- include("../../components/computer-boxes.ejs", computer) %>
+      <%  }) %>
+    </div>
+    <%- include("../../components/footer.ejs") %>
+  </main>
+  <script src="/assets/script.js"></script>
+</body>
+
+</html>

views/pages/index.ejs

@@ -12,9 +12,14 @@
 <body>
   <main>
     <%- include("../components/header.ejs") %>
-    <section>
+    <% statuses.forEach((status) => { %>
-      <p>abtmtr.link is a domain for a suite of services, from web search to live-streaming.</p>
+      <div class="boxThing">
-    </section>
+        <h1><%= status.title %></h1>
+        <p><%= status.description %></p>
+        <p><%= status.when.month %> <%= status.when.year %></p>
+      </div>
+    <% }) %>
+    <p class="tagline">abtmtr.link is a domain for all kinds of services, from web search to live-streaming.</p>
     <%- include("../components/about-boxes.ejs") %>
     <%- include("../components/footer.ejs") %>
   </main>

views/pages/links/index.ejs

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>abtmtr.link</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="/assets/style.css" />
+</head>
+
+<body>
+  <main>
+    <%- include("../../components/header.ejs") %>
+    <p class="tagline">Where I am on the Internet.</p>
+    <div class="Aboutbox">
+      <% links.forEach((link) => { %>
+        <%- include("../../components/link-boxes.ejs", link) %>
+      <%  }) %>
+    </div>
+    <%- include("../../components/footer.ejs") %>
+  </main>
+  <script src="/assets/script.js"></script>
+</body>
+
+</html>

views/pages/matkap/index.ejs

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>abtmtr.link</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="/assets/style.css" />
+</head>
+
+<body>
+  <main>
+    <div class="header">
+      <p>welcome to ...</p>
+      <p class="big"><span>T</span><span>H</span><span>E</span><span> </span><span>M</span><span>A</span><span>T</span><span>K</span><span>A</span><span>P</span><span> </span><span>Z</span><span>O</span><span>N</span><span>E</span><span>!</span><span>!</span><span>!</span></p>
+      <p style="text-align: right;"><small>a cool friend made this header tysm!!</small></p>
+    </div>
+    <p style="text-align: center;font-size: 12px;">this website is best viewed on a computer</p>
+    <h1>hey i'm mat what's up?</h1>
+    <p style="text-align: right;letter-spacing: 3px;margin-right: 38px">you can call me mat but some call me matkap</p>
+    <div class="box">
+      <p><b>ABOUT ME</b></p>
+      <ul>
+        <li>i think i am <b>very cool</b></li>
+        <li>i go by he/they <b>pronou</b>ns</li>
+        <li>im 17 (minor ! !!! !!!)</li>
+        <li>i tied my hair once and i never stopped doing it</li>
+        <li>my name is <b>mattias kopernicus</b> and i think it's pretentious as fuck</li>
+        <li>my favorite artists are <a href="https://brningbrainsoundindustries.bandcamp.com/">BRN1NG BRA1N SOUND INDUSTRIES</a> <a href="https://femtanyl.bandcamp.com/">femtanyl</a> and others</li>
+        <li>i watch some youtube. <a href="https://youtube.com/@kurtisconner">kurtis conner</a> and <a href="https://youtube.com/@Danny-Gonzalez">danny gonzalez</a> are cool</li>
+        <li><a href="https://twitter.com/mattkp134">follow me on twitter</a></li>
+        <li><a href="https://spectrum.avris.it/9Z96">my spectrum</a> and also <a href="https://cake.avris.it/bB5">have a slice of my cake!</a></li>
+      </ul>
+      <p>thanks for visiting!!!!!!!!</p>
+      <p><a href="https://users3.smartgb.com/g/g.php?a=s&i=this-is-fake-and-im-not-very-creative-give-me-a-break">sign my guestbook</a></p>
+    </div>
+    <p>this is my website! i sure hope you like it.</p>
+    <img src="/assets/matkap/me.jpg" style="width: calc(66% - 32px); height: 200px;" />
+    <center><p><b><i>this is me</i></b></p></center>
+    <h2>this site is a work in progress</h2>
+    <p>im not very good at this website stuff someone help me</p>
+    <script type="text/javascript" src="https://counter.websiteout.com/js/6/10/0/0"></script>
+  </main>
+  <script src="/assets/script.js"></script>
+  <style>
+    @keyframes flash {
+      0% {
+        color: var(--grey);
+      }
+      50% {
+        color: var(--background);
+      }
+      100% {
+        color: var(--grey);
+      }
+    }
+
+    .box {
+      float: left;
+      width: 33%;
+      border: 1px solid currentColor;
+      padding: 8px;
+      margin-right: 8px;
+
+      :first-child {
+        margin-top: 0;
+      }
+      :last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .header {
+      border: 1px solid currentColor;
+      padding: 8px;
+
+      p {
+        margin: 0;
+      }
+
+      .big {
+        font-size: 4em;
+        text-align: center;
+        font-weight: bold;
+        text-shadow: var(--foreground) 4px 0px 0px, var(--foreground) 3.87565px 0.989616px 0px, var(--foreground) 3.51033px 1.9177px 0px, var(--foreground) 2.92676px 2.72656px 0px, var(--foreground) 2.16121px 3.36588px 0px, var(--foreground) 1.26129px 3.79594px 0px, var(--foreground) 0.282949px 3.98998px 0px, var(--foreground) -0.712984px 3.93594px 0px, var(--foreground) -1.66459px 3.63719px 0px, var(--foreground) -2.51269px 3.11229px 0px, var(--foreground) -3.20457px 2.39389px 0px, var(--foreground) -3.69721px 1.52664px 0px, var(--foreground) -3.95997px 0.56448px 0px, var(--foreground) -3.97652px -0.432781px 0px, var(--foreground) -3.74583px -1.40313px 0px, var(--foreground) -3.28224px -2.28625px 0px, var(--foreground) -2.61457px -3.02721px 0px, var(--foreground) -1.78435px -3.57996px 0px, var(--foreground) -0.843183px -3.91012px 0px, var(--foreground) 0.150409px -3.99717px 0px, var(--foreground) 1.13465px -3.8357px 0px, var(--foreground) 2.04834px -3.43574px 0px, var(--foreground) 2.83468px -2.82216px 0px, var(--foreground) 3.44477px -2.03312px 0px, var(--foreground) 3.84068px -1.11766px 0px, var(--foreground) 3.9978px -0.132717px 0px;
+        color: var(--background);
+
+        :nth-child(3n - 2) {
+          animation: infinite flash 0.25s -0.33s alternate;
+        }
+        :nth-child(3n - 1) {
+          animation: infinite flash 0.25s -0.16s alternate;
+        }
+        :nth-child(3n) {
+          animation: infinite flash 0.25s alternate;
+        }
+      }
+    }
+
+    a {
+      color: var(--red);
+    }
+  </style>
+</body>
+
+</html>

views/pages/services/index.ejs

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>abtmtr.link</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="/assets/style.css" />
+</head>
+
+<body>
+  <main>
+    <%- include("../../components/header.ejs") %>
+    <p class="tagline">Stuff I host here on abtmtr.link.</p>
+    <div class="Aboutbox">
+      <% services.forEach((service) => { %>
+        <%- include("../../components/service-boxes.ejs", {...service, arr: visibility}) %>
+      <%  }) %>
+    </div>
+    <%- include("../../components/footer.ejs") %>
+  </main>
+  <script src="/assets/script.js"></script>
+</body>
+
+</html>