all of this shit

This commit is contained in:
MeowcaTheoRange 2024-08-21 01:05:24 -05:00
parent 70fe2956b4
commit 54b255aa17
29 changed files with 491 additions and 33 deletions

View file

@ -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);

View file

@ -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;
}
}

View file

@ -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);
}
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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");

Binary file not shown.

Before

Width:  |  Height:  |  Size: 422 KiB

BIN
assets/icons/about.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
assets/icons/computers.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
assets/icons/friends.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7 KiB

BIN
assets/icons/links.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
assets/icons/projects.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
assets/icons/services.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
assets/matkap/me.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 KiB

View file

@ -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==");
--tiles-diag-white: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQImWP4//+/AwMU/P//34ERmcOAzIELoHAYGBgAAxcWrY397t4AAAAASUVORK5CYII=");
--tiles-last-black: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADElEQVQImWNgQAP/AQERAQD1y6SYAAAAAElFTkSuQmCC");
--tiles-last-white: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWNgQAb/////DwAKCAP9R4CJSwAAAABJRU5ErkJggg==");
--inset: 2px;
--image-filter: none;
--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;
}
}

View file

@ -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) => {
res.render(path.join("pages", "index.ejs"), {
app.use(async (req, res, next) => {
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) => {

View file

@ -1,30 +1,37 @@
<div class="Aboutbox">
<div class="AboutboxElement">
<div class="AboutboxElementText">
<h1><a href="/computers/">COMPUTERS</a></h1>
<p>beep boop</p>
<h1><a href="/matkap/">MATKAP ZONE</a></h1>
<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>
<p>fellow Gaming Racists</p>
<h1><a href="/computers/">COMPUTERS</a></h1>
<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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -12,9 +12,14 @@
<body>
<main>
<%- include("../components/header.ejs") %>
<section>
<p>abtmtr.link is a domain for a suite of services, from web search to live-streaming.</p>
</section>
<% statuses.forEach((status) => { %>
<div class="boxThing">
<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>

View file

@ -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>

View file

@ -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>

View file

@ -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>