all space -> tab

8 files changed, 784 insertions, 784 deletions

diff --git a/src/css/about.css b/src/css/about.css
index 6f9d9bb6..6b52e582 100644
--- a/src/css/about.css
+++ b/src/css/about.css
@@ -3,66 +3,66 @@
 /* } */
 
 body {
-    margin: 0;
-    padding: 0;
+	margin: 0;
+	padding: 0;
 }
 
 .container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100vh;
 }
 
 .left {
-    top: 50%;
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-    display: flex;
-    overflow: hidden;
-    align-items: center;
-  margin: 0;
-    justify-content: center;
-    margin-top: 4em;
-    /* background-color: #f1f1f1; */
+	top: 50%;
+-ms-transform: translateY(-50%);
+transform: translateY(-50%);
+	display: flex;
+	overflow: hidden;
+	align-items: center;
+margin: 0;
+	justify-content: center;
+	margin-top: 4em;
+	/* background-color: #f1f1f1; */
 }
 
 .left img {
-    max-width: 100%;
+	max-width: 100%;
 }
 
 .right {
-    /* flex: 1; */
-  display: flex;
-  height: 100%;
-  margin-top: 10em;
+	/* flex: 1; */
+display: flex;
+height: 100%;
+margin-top: 10em;
 }
 
 .main {
-  margin: auto;
+margin: auto;
 }
 
 .main h2 {
-    font-size: 24px;
-    margin-bottom: 10px;
+	font-size: 24px;
+	margin-bottom: 10px;
 }
 
 .main p {
-    font-size: 16px;
-    margin: 0;
+	font-size: 16px;
+	margin: 0;
 }
 
 .info {
-  height: 80%;
+height: 80%;
 }
 
 
 .name {
-  font-family: smooth;
-  font-size: 10vw;
+font-family: smooth;
+font-size: 10vw;
 }
 
 .background {
-    width: 100%;
-  height: 100vh;
+	width: 100%;
+height: 100vh;
 }
diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css
index 101caf9a..e631ddac 100644
--- a/src/css/ghrepo.css
+++ b/src/css/ghrepo.css
@@ -10,414 +10,414 @@
 
 /* @media (prefers-color-scheme: dark) { */
 :root {
-    --text: #e5e5e5;
-    --accent: #1688f0;
-    --bg-main: #000;
-    --bg-repo: #0f0f1a;
-    --bg-user: #0a0a0f;
-    --purple: rgb(123, 31, 162);
-    --violet: rgb(103, 58, 183);
-    --pink: rgb(244, 143, 177);
-    --light-yellow: rgb(255, 255, 204);
-    --pale-yellow: rgb(255, 255, 153);
-    --lemon-yellow: rgb(255, 250, 205);
-    }
+	--text: #e5e5e5;
+	--accent: #1688f0;
+	--bg-main: #000;
+	--bg-repo: #0f0f1a;
+	--bg-user: #0a0a0f;
+	--purple: rgb(123, 31, 162);
+	--violet: rgb(103, 58, 183);
+	--pink: rgb(244, 143, 177);
+	--light-yellow: rgb(255, 255, 204);
+	--pale-yellow: rgb(255, 255, 153);
+	--lemon-yellow: rgb(255, 250, 205);
+	}
 /* } */
 
 * {
-    box-sizing: border-box;
-    /* background-image: url(/images/backgroundNightCity.jpg); */
-    background: transparent;
+	box-sizing: border-box;
+	/* background-image: url(/images/backgroundNightCity.jpg); */
+	background: transparent;
 
 }
 
 
 
 body {
-    margin: 0;
-    margin-top: (3em);
-    font-family: 'Open Sans', sans-serif;
+	margin: 0;
+	margin-top: (3em);
+	font-family: 'Open Sans', sans-serif;
 }
 
 main {
-  margin-top: 3em
+margin-top: 3em
 }
 
 .bgWrap {
-    overflow: hidden;
-    top: 0;
-    left: 0;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(48, 60, 100);
-    background-image: url(/images/heigh-grass.jpg);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    color: #F4E8C1;
-    z-index: -1;
-    font-size: 16px;
+	overflow: hidden;
+	top: 0;
+	left: 0;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgb(48, 60, 100);
+	background-image: url(/images/heigh-grass.jpg);
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	align-items: center;
+	display: flex;
+	justify-content: center;
+	color: #F4E8C1;
+	z-index: -1;
+	font-size: 16px;
 }
 
 .container {
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    width: 90%;
-    max-width: 1280px;
-    /* background: transparent; */
-    position: center;
+	display: flex;
+	justify-content: center;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	width: 90%;
+	max-width: 1280px;
+	/* background: transparent; */
+	position: center;
 }
 
 .container small, h1 {
-  background: transparent;
+background: transparent;
 }
 
 .hide {
-    /* '!important' is to make sure that when we add the class using JS, it takes precendence */
-    display: none !important;
+	/* '!important' is to make sure that when we add the class using JS, it takes precendence */
+	display: none !important;
 }
 
 h1 {
-    color: var(--accent);
-    margin-bottom: 4px;
+	color: var(--accent);
+	margin-bottom: 4px;
 }
 
 small {
-    width: 100%;
-    text-align: center;
-    display: block;
-    margin-bottom: 20px;
+	width: 100%;
+	text-align: center;
+	display: block;
+	margin-bottom: 20px;
 }
 
 h2 {
-    width: 100%;
-    text-align: center;
-    color: var(--text);
-    margin: 0;
+	width: 100%;
+	text-align: center;
+	color: var(--text);
+	margin: 0;
 }
 
 a {
-    background: transparent;
-    color: var(--accent);
-    text-decoration: none;
-    -webkit-transition: background 0.5s
+	background: transparent;
+	color: var(--accent);
+	text-decoration: none;
+	-webkit-transition: background 0.5s
 }
 
 .github-img {
-    width: 45px;
-    margin-right: 8px;
+	width: 45px;
+	margin-right: 8px;
 }
 
 ul {
-    list-style: none;
-    padding: 0;
+	list-style: none;
+	padding: 0;
 }
 
 .user-info * {
-  background: transparent;
+background: transparent;
 }
 
 .user-info {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    /* background-image: url(/images/backgroundNightCity.jpg); */
-    background: transparent;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    color: var(--text);
-    font-size: 18px;
-    padding: 2em;
-    border-radius: 16px;
-    /* border: 0.1px solid var(--accent); */
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	/* background-image: url(/images/backgroundNightCity.jpg); */
+	background: transparent;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	color: var(--text);
+	font-size: 18px;
+	padding: 2em;
+	border-radius: 16px;
+	/* border: 0.1px solid var(--accent); */
 }
 
 .user-info figure {
-    width: 90%;
-    max-width: 250px;
-    background: transparent;
+	width: 90%;
+	max-width: 250px;
+	background: transparent;
 }
 
 .user-info img {
-    border: 2px solid var(--accent);
-    box-shadow: 0 0px 6px var(--accent), 0 0px 6px var(--accent);
-    max-width: 100%;
-    height: auto;
-    box-shadow: 0 0 10mm rgba(0,0,0,.7);
-    border-radius: 100%;
+	border: 2px solid var(--accent);
+	box-shadow: 0 0px 6px var(--accent), 0 0px 6px var(--accent);
+	max-width: 100%;
+	height: auto;
+	box-shadow: 0 0 10mm rgba(0,0,0,.7);
+	border-radius: 100%;
 }
 
 .user-info img:hover {
-  transform: scale(1.1);
-  box-shadow: 0 0 100mm rgba(255, 238, 16,.7);
+transform: scale(1.1);
+box-shadow: 0 0 100mm rgba(255, 238, 16,.7);
 }
 
 .user-info div {
-    display: flex;
-    text-align: center;
-    flex-wrap: wrap;
-    align-items: center;
-    width: 100%;
-    padding-left: 5%;
+	display: flex;
+	text-align: center;
+	flex-wrap: wrap;
+	align-items: center;
+	width: 100%;
+	padding-left: 5%;
 }
 
 .user-info div p {
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    border-bottom: 1px solid var(--text);
-    padding-bottom: 18px;
-    background: transparent;
+	width: 100%;
+	margin: 0;
+	padding: 0;
+	border-bottom: 1px solid var(--text);
+	padding-bottom: 18px;
+	background: transparent;
 }
 
 .user-info *:hover {
-    transform: scale(1.1);
+	transform: scale(1.1);
 }
 
 .user-info .usertitle {
-  font-family: audiowide;
-  text-transform: uppercase;
-  font-size: 2vw;
+font-family: audiowide;
+text-transform: uppercase;
+font-size: 2vw;
 }
 
 .filter-repos,
 input {
-    background: rgba(10, 10, 15, 0.3);
-    width: 50%;
-    border-radius: 20px;
-    min-width: 300px;
-    margin-top: 1em;
-    padding: 1em;
-    margin-bottom: 1em;
-    border: 2px solid var(--accent);
-    box-shadow: 0 0 10mm rgba(0,0,0,.7);
-    text-align: center;
-    -webkit-transition: all 0.5s
+	background: rgba(10, 10, 15, 0.3);
+	width: 50%;
+	border-radius: 20px;
+	min-width: 300px;
+	margin-top: 1em;
+	padding: 1em;
+	margin-bottom: 1em;
+	border: 2px solid var(--accent);
+	box-shadow: 0 0 10mm rgba(0,0,0,.7);
+	text-align: center;
+	-webkit-transition: all 0.5s
 }
 
 input:hover,
 .filter-repos:hover {
-  /* background: rgba(10, 10, 15, 0.5); */
-  transition: all 0.5s;
-  -moz-filter: blur(5px);
-  -o-filter: blur(5px);
-  -ms-filter: blur(5px);
-   -webkit-backdrop-filter: blur(5px);
-  backdrop-filter: blur(5px);
-  box-shadow: 0 0 50mm rgba(0,0,0,.7);
-  transform: scale(1.1);
-  transition: all 0.5s;
+/* background: rgba(10, 10, 15, 0.5); */
+transition: all 0.5s;
+-moz-filter: blur(5px);
+-o-filter: blur(5px);
+-ms-filter: blur(5px);
+-webkit-backdrop-filter: blur(5px);
+backdrop-filter: blur(5px);
+box-shadow: 0 0 50mm rgba(0,0,0,.7);
+transform: scale(1.1);
+transition: all 0.5s;
 }
 
 input:active,
 .filter-repos:active {
-  /* background: #F4E8C1; */
-  box-shadow: 0 0 10mm rgba(0,0,0,.7);
-  background: rgba(244, 232, 193, 0.3);
+/* background: #F4E8C1; */
+box-shadow: 0 0 10mm rgba(0,0,0,.7);
+background: rgba(244, 232, 193, 0.3);
 }
 
 .repos {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    background: rgba(128, 128, 128, 0.2);
-    margin-top: 0;
-    padding: 2em;
-    /* border-bottom-left-radius: 20px; */
-    /* border-bottom-right-radius: 20px; */
-    border-radius: 16px;
-    /* border: 0.1px solid var(--accent); */
-    margin-bottom: 4em;
-    /* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	background: rgba(128, 128, 128, 0.2);
+	margin-top: 0;
+	padding: 2em;
+	/* border-bottom-left-radius: 20px; */
+	/* border-bottom-right-radius: 20px; */
+	border-radius: 16px;
+	/* border: 0.1px solid var(--accent); */
+	margin-bottom: 4em;
+	/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
 }
 
 .repos:hover {
-  background: rgba(0, 0, 0, 0.3);
-  transform: scale(1.01);
-  box-shadow: 0 0 20mm rgba(128,128,128,.7);
-  transition: all 0.5s;
+background: rgba(0, 0, 0, 0.3);
+transform: scale(1.01);
+box-shadow: 0 0 20mm rgba(128,128,128,.7);
+transition: all 0.5s;
 }
 
 .repo-title {
-    margin: 4px;
-    width: 100%;
-    text-align: center;
-    color: var(--accent);
+	margin: 4px;
+	width: 100%;
+	text-align: center;
+	color: var(--accent);
 }
 
 .repo-list {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: flex-start;
-    background: transparent;
-    scroll-snap-type: y mandatory;
-    /* background: rgba(128, 128, 128, 0.2); */
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: flex-start;
+	background: transparent;
+	scroll-snap-type: y mandatory;
+	/* background: rgba(128, 128, 128, 0.2); */
 }
 
 .repo-list li {
-    width: 100%;
-    min-height: 180px;
-    border-radius: 10px;
-    margin: 1em 0;
-    border: 1px solid var(--accent);
-    padding: 1em;
-    text-align: center;
-    background: transparent;
-    -moz-filter: blur(20px);
-    -o-filter: blur(20px);
-    -ms-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    backdrop-filter: blur(20px);
-    -webkit-transition: all 0.5s;
-    scroll-snap-align: center
-    /* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
-    /* background: rgba(128, 128, 128, 0.1); */
+	width: 100%;
+	min-height: 180px;
+	border-radius: 10px;
+	margin: 1em 0;
+	border: 1px solid var(--accent);
+	padding: 1em;
+	text-align: center;
+	background: transparent;
+	-moz-filter: blur(20px);
+	-o-filter: blur(20px);
+	-ms-filter: blur(20px);
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
+	-webkit-transition: all 0.5s;
+	scroll-snap-align: center
+	/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
+	/* background: rgba(128, 128, 128, 0.1); */
 }
 
 .repo-list h3, span{
-  background: transparent;
+background: transparent;
 }
 
 .repo:hover {
-    /* box-shadow: 0 3px 6px var(--accent), 0 3px 6px var(--accent); */
-    box-shadow: 0 0 50mm rgba(255, 238, 16,.7);
-    background: rgba(0, 0, 0, 0.5);
-    transform: scale(1.05);
-    transition: background 0.5s, transform 1s, all 0.3s
+	/* box-shadow: 0 3px 6px var(--accent), 0 3px 6px var(--accent); */
+	box-shadow: 0 0 50mm rgba(255, 238, 16,.7);
+	background: rgba(0, 0, 0, 0.5);
+	transform: scale(1.05);
+	transition: background 0.5s, transform 1s, all 0.3s
 }
 
 .repo-list:hover:has(li:hover) li:not(:hover) {
-    /* background: rgba(0, 0, 0, 0.3); */
-    background: rgba(0, 0, 0, 0.3);
-    transform: scale(0.95);
-    animation-duration: 0.5s;
-    transition: background 0.5s, transform 1s, all 0.3s
+	/* background: rgba(0, 0, 0, 0.3); */
+	background: rgba(0, 0, 0, 0.3);
+	transform: scale(0.95);
+	animation-duration: 0.5s;
+	transition: background 0.5s, transform 1s, all 0.3s
 }
 
 
 .link-btn {
-    padding: 10px 20px;
-    /* background: var(--bg-main); */
-    /* background: rgba(0, 0, 0, 0.5); */
-    background: rgba(128, 128, 128, 0.1);
-    border-radius: 30px;
-    border: 2px solid var(--accent);
-    color: var(--text);
-    -webkit-transition: background 0.5s, transform 0.5s, border 0.5s, all 0.5s;
+	padding: 10px 20px;
+	/* background: var(--bg-main); */
+	/* background: rgba(0, 0, 0, 0.5); */
+	background: rgba(128, 128, 128, 0.1);
+	border-radius: 30px;
+	border: 2px solid var(--accent);
+	color: var(--text);
+	-webkit-transition: background 0.5s, transform 0.5s, border 0.5s, all 0.5s;
 }
 
 .link-btn:hover {
-    background: rgba(22, 136, 240, 0.5);
-    border: 2px solid var(--text);
-    transform: scale(1.1);
-    transition: background 0.5s, transform 0.5s, border 0.5s, all 0.5s;
-    box-shadow: 0 0 50mm rgba(0, 156, 255,.7);
+	background: rgba(22, 136, 240, 0.5);
+	border: 2px solid var(--text);
+	transform: scale(1.1);
+	transition: background 0.5s, transform 0.5s, border 0.5s, all 0.5s;
+	box-shadow: 0 0 50mm rgba(0, 156, 255,.7);
 }
 
 .repo-list p {
-    padding: 0em 0.5em;
-    margin: 0.5em 0;
-    background: transparent;
+	padding: 0em 0.5em;
+	margin: 0.5em 0;
+	background: transparent;
 }
 
 .intro:hover,
 .user-info:hover {
-  -moz-filter: blur(8px);
-  -o-filter: blur(8px);
-  -ms-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
-  transform: scale(1.1);
-  transition: all 0.5s;
+-moz-filter: blur(8px);
+-o-filter: blur(8px);
+-ms-filter: blur(8px);
+-webkit-backdrop-filter: blur(8px);
+backdrop-filter: blur(8px);
+transform: scale(1.1);
+transition: all 0.5s;
 }
 
 .user-info {
-  /* background: transparent; */
-  background: rgba(128, 128, 128, 0.2);
-  -moz-filter: blur(2px);
-  -o-filter: blur(2px);
-  -ms-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
-  backdrop-filter: blur(2px);
-  /* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
+/* background: transparent; */
+background: rgba(128, 128, 128, 0.2);
+-moz-filter: blur(2px);
+-o-filter: blur(2px);
+-ms-filter: blur(2px);
+-webkit-backdrop-filter: blur(2px);
+backdrop-filter: blur(2px);
+/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
 }
 
 .repo {
-    -moz-filter: blur(20px);
-    -o-filter: blur(20px);
-    -ms-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    backdrop-filter: blur(20px);
-    box-shadow: 0 0 10mm rgba(0,0,0,.7);
-    overflow: auto;
-    overflow-x: hidden;
-    resize: both;
+	-moz-filter: blur(20px);
+	-o-filter: blur(20px);
+	-ms-filter: blur(20px);
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
+	box-shadow: 0 0 10mm rgba(0,0,0,.7);
+	overflow: auto;
+	overflow-x: hidden;
+	resize: both;
 }
 
 .rdescription {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  overflow: hidden
+display: -webkit-box;
+-webkit-box-orient: vertical;
+-webkit-line-clamp: 3;
+overflow: hidden
 }
 
 .rdescription:hover {
-  -webkit-line-clamp: unset;
+-webkit-line-clamp: unset;
 }
 
 .rdescriptiontext:hover {
-  /* animation: background-pan 3s linear infinite; */
-  /* background: linear-gradient( */
-  /*   to right, */
-  /*   var(--purple), */
-  /*   var(--violet), */
-  /*   var(--pink), */
-  /*   var(--purple) */
-  /* ); */
-  /* background-size: 200%; */
-  /* -webkit-background-clip: text; */
-  /* -webkit-text-fill-color: transparent; */
+/* animation: background-pan 3s linear infinite; */
+/* background: linear-gradient( */
+/*   to right, */
+/*   var(--purple), */
+/*   var(--violet), */
+/*   var(--pink), */
+/*   var(--purple) */
+/* ); */
+/* background-size: 200%; */
+/* -webkit-background-clip: text; */
+/* -webkit-text-fill-color: transparent; */
 }
 
 
 @media (min-width: 700px) {
-    .user-info div {
-        width: 45%;
-        text-align: left;
-        /* background: rgba(10, 10, 15, 0.1); */
-        background: transparent;
-    }
-
-    .user-info div p {
-        margin: 10px;
-    }
-
-    .repo-list {
-        justify-content: space-around;
-    }
-
-    .repo-list li {
-        width: 48%;
-        margin-right: 1.5%;
-        margin-left: 1.5%;
-        margin-top: 2%;
-        margin-bottom: 2%;
-    }
+	.user-info div {
+		width: 45%;
+		text-align: left;
+		/* background: rgba(10, 10, 15, 0.1); */
+		background: transparent;
+	}
+
+	.user-info div p {
+		margin: 10px;
+	}
+
+	.repo-list {
+		justify-content: space-around;
+	}
+
+	.repo-list li {
+		width: 48%;
+		margin-right: 1.5%;
+		margin-left: 1.5%;
+		margin-top: 2%;
+		margin-bottom: 2%;
+	}
 }
 
 @media (min-width: 1200px) {
-    .repo-list li {
-        width: 30%;
-    }
+	.repo-list li {
+		width: 30%;
+	}
 }
diff --git a/src/css/index.css b/src/css/index.css
index 44d00c38..44458590 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -2,50 +2,50 @@
 /*   --primary-color: mediumslateblue; */
 /* } */
 .wrapper {
-    height: 100vh;
-    width: 100%;
-    top: 0;
-    left: 0;
-    overflow-x: hidden;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    z-index: -6;
+	height: 100vh;
+	width: 100%;
+	top: 0;
+	left: 0;
+	overflow-x: hidden;
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+	z-index: -6;
 }
 .wrapper::-webkit-scrollbar {
-  display: none;
+display: none;
 }
 
 /* main info window ======================================= */
 .indexPage {
-    overflow: hidden;
-    top: 0;
-    left: 0;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(20, 53, 85);
-    background-image: url(/images/backgroundNightCity.jpg);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    color: #F4E8C1;
-    z-index: -10;
+	overflow: hidden;
+	top: 0;
+	left: 0;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgb(20, 53, 85);
+	background-image: url(/images/backgroundNightCity.jpg);
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	color: #F4E8C1;
+	z-index: -10;
 }
 
 .window {
-    position: relative;
-    top: 15%;
-    left: 10%;
-    height: 70%;
-    width: 80%;
-    background: transparent;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 999;
-    /* transform-style: preserve-3d; */
-    /* perspective: 1000px; */
+	position: relative;
+	top: 15%;
+	left: 10%;
+	height: 70%;
+	width: 80%;
+	background: transparent;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 999;
+	/* transform-style: preserve-3d; */
+	/* perspective: 1000px; */
 }
 
 /* .window:after { */
@@ -72,66 +72,66 @@
 /* } */
 
 .window .windowWrap {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border: 1px solid rgba(255,255,255, .15);
-    border-radius: 1em;
-    -moz-filter: blur(16px);
-    -o-filter: blur(16px);
-    -ms-filter: blur(16px);
-     -webkit-backdrop-filter: blur(16px);
-    backdrop-filter: blur(16px);
-    box-shadow: 0 0 10mm rgba(0,0,0,1);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    z-index: 11;
+	position: relative;
+	width: 100%;
+	height: 100%;
+	border: 1px solid rgba(255,255,255, .15);
+	border-radius: 1em;
+	-moz-filter: blur(16px);
+	-o-filter: blur(16px);
+	-ms-filter: blur(16px);
+	-webkit-backdrop-filter: blur(16px);
+	backdrop-filter: blur(16px);
+	box-shadow: 0 0 10mm rgba(0,0,0,1);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	z-index: 11;
 }
 
 .window:hover,
 .windowWrap:hover {
-  transform: scale(1.1);
-  transition: all 0.3s
+	transform: scale(1.1);
+	transition: all 0.3s
 }
 
 .window .windowWrap .text {
-    position: relative;
-    width: 100%;
-    text-align: center;
-    text-shadow: 10px 10px 10px black;
+	position: relative;
+	width: 100%;
+	text-align: center;
+	text-shadow: 10px 10px 10px black;
 }
 
 .window .windowWrap .text .title {
-    /* z-index: -1; */
-    /* transform: translateZ(30px); */
-    font-family: monoton;
-    font-size: 7vw;
-    text-transform: uppercase
+	/* z-index: -1; */
+	/* transform: translateZ(30px); */
+	font-family: monoton;
+	font-size: 7vw;
+	text-transform: uppercase
 }
 
 .description {
-    /* z-index: -1; */
-    /* transform: translateZ(30px); */
-    font-family: rocksalt;
-    font-size: 1.75vw;
+	/* z-index: -1; */
+	/* transform: translateZ(30px); */
+	font-family: rocksalt;
+	font-size: 1.75vw;
 }
 
 
 .title {
-  text-shadow: 15px 15px 15px black;
-  transition: all 0.5s
+	text-shadow: 15px 15px 15px black;
+	transition: all 0.5s
 }
 
 .title:hover {
-  transform: scale(1.1);
-  transition: all 0.5s
+	transform: scale(1.1);
+	transition: all 0.5s
 }
 
 .window .windowWrap .text .br {
-    display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: 5vh;
+	display: block;
+	height: 0;
+	width: 0;
+	margin-bottom: 5vh;
 }
diff --git a/src/css/style.css b/src/css/style.css
index 411c3ec3..397fb468 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,276 +1,276 @@
 :root {
-    --topBarHeight: 10%;
+	--topBarHeight: 10%;
 }
 
 @font-face {
-    font-family: hacked;
-    src: url(/fonts/Hacked-KerX.ttf);
+	font-family: hacked;
+	src: url(/fonts/Hacked-KerX.ttf);
 }
 @font-face {
-    font-family: smooth;
-    src: url(/fonts/SmoothElegantRegular-ZLv3.ttf);
+	font-family: smooth;
+	src: url(/fonts/SmoothElegantRegular-ZLv3.ttf);
 }
 @font-face {
-    font-family: liga;
-    src: url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf);
+	font-family: liga;
+	src: url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf);
 }
 @font-face {
-    font-family: big;
-    src: url(/fonts/Big500-8MLOM.ttf);
+	font-family: big;
+	src: url(/fonts/Big500-8MLOM.ttf);
 }
- 
+
 @font-face {
-    font-family: monoton;
-    src: url(/fonts/Monoton.ttf);
+	font-family: monoton;
+	src: url(/fonts/Monoton.ttf);
 }
 
 @font-face {
-    font-family: rocksalt;
-    src: url(/fonts/RockSalt-Regular.ttf);
+	font-family: rocksalt;
+	src: url(/fonts/RockSalt-Regular.ttf);
 }
 
 @font-face {
-  font-family: audiowide;
-  src: url(/fonts/audiowide.ttf);
+font-family: audiowide;
+src: url(/fonts/audiowide.ttf);
 }
 /* page setup ============================================= */
 
 * {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    font-family: liga;
-    text-shadow: 0px 0px 1px black;
-    transition: all 0.3s;
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+	font-family: liga;
+	text-shadow: 0px 0px 1px black;
+	transition: all 0.3s;
 }
 
 body {
-    top: 0;
-    left: 0;
-    transition: background 1s ease-in-out;
+	top: 0;
+	left: 0;
+	transition: background 1s ease-in-out;
 }
 
 body::-webkit-scrollbar {
-  display: none;
+display: none;
 }
 
 /* animation ============================================== */
 
 @keyframes slideInTop {
-  from {
-    transform: translateY(-300px);
-  }
-  to {
-    transform: translateY(0);
-  }
+from {
+	transform: translateY(-300px);
+}
+to {
+	transform: translateY(0);
+}
 }
 
 @keyframes bounce {
-  0%, 20%, 50%, 80%, 100% {
-    transform: translateY(0px);
-  }
-  40% {
-    transform: translateY(30px);
-  }
-  80% {
-    transform: translateY(-15px);
-  }
+0%, 20%, 50%, 80%, 100% {
+	transform: translateY(0px);
+}
+40% {
+	transform: translateY(30px);
+}
+80% {
+	transform: translateY(-15px);
+}
 }
 
 @keyframes zoomIn {
-  0% {
-    transform: scale(0.01);
-  }
-  85% {
-    transform: scale(1.1);
-  }
-  100% {
-    transform: scale(1);
-  }
+0% {
+	transform: scale(0.01);
+}
+85% {
+	transform: scale(1.1);
+}
+100% {
+	transform: scale(1);
+}
 }
 
 @keyframes zoomOut {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0.01);
-  }
+0% {
+	transform: scale(1);
+}
+100% {
+	transform: scale(0.01);
+}
 }
 
 @keyframes reveal {
-  0% {
-    -webkit-filter: blur(32px);
-    -moz-filter: blur(32px);
-    -o-filter: blur(32px);
-    -ms-filter: blur(32px);
-    -webkit-backdrop-filter: blur(32px);
-    backdrop-filter: blur(32px);
-    transform: scale(2);
-  }
+0% {
+	-webkit-filter: blur(32px);
+	-moz-filter: blur(32px);
+	-o-filter: blur(32px);
+	-ms-filter: blur(32px);
+	-webkit-backdrop-filter: blur(32px);
+	backdrop-filter: blur(32px);
+	transform: scale(2);
+}
 
 }
 
 @keyframes shake {
-  0% { transform: rotate(0deg); }
-  25% { transform: rotate(.5deg); }
-  50% { transform: rotate(0eg); }
-  75% { transform: rotate(-.5deg); }
-  100% { transform: rotate(0deg); }
+0% { transform: rotate(0deg); }
+25% { transform: rotate(.5deg); }
+50% { transform: rotate(0eg); }
+75% { transform: rotate(-.5deg); }
+100% { transform: rotate(0deg); }
 }
 
 @keyframes background-pan {
-  from {
-    background-position: 0% center;
-  }
-  to {
-    background-position: -200% center;
-  }
+from {
+	background-position: 0% center;
+}
+to {
+	background-position: -200% center;
+}
 }
 /* animation: name duration timing-function delay iteration-count direction fill-mode; */
 
 
 /* animate class */
 .animate {
-  animation-duration: 0.5s;
-  animation-fill-mode: both;
+animation-duration: 0.5s;
+animation-fill-mode: both;
 }
 
 .animate.animate--infinite {
-  animation-iteration-count: infinite;
+animation-iteration-count: infinite;
 }
 
 .animate.animation--delay-1s {
-  animation-delay: 1s;
+animation-delay: 1s;
 }
 .animate.animation--delay-p5s {
-  animation-delay: 0.5s;
+animation-delay: 0.5s;
 }
 
 .animate.animation--delay-p3s {
-  animation-delay: 0.3s;
+animation-delay: 0.3s;
 }
 
 .animate.animation--fast {
-  animation-duration: 0.3s;
+animation-duration: 0.3s;
 }
 
 .animate.animation--slow {
-  animation-duration: 1s;
+animation-duration: 1s;
 }
 
 /* real utility classes */
 
 .animate.slideInTop {
-  animation-name: slideInTop;
-  animation-timing-function: ease-in;
+animation-name: slideInTop;
+animation-timing-function: ease-in;
 }
 
 .animate.bounce {
-  animation-name: bounce;
+animation-name: bounce;
 }
 
 .animate.zoomIn {
-  transition-timing-function: linear;
-  animation-name: zoomIn;
+transition-timing-function: linear;
+animation-name: zoomIn;
 }
 
 .animate.zoomOut {
-  transition-timing-function: linear;
-  animation-name: zoomOut;
+transition-timing-function: linear;
+animation-name: zoomOut;
 }
 
 .animate.reveal {
-  transition-timing-function: linear;
-  animation-name: reveal;
+transition-timing-function: linear;
+animation-name: reveal;
 }
 
 .animate.shake {
-  animation-name: shake
+animation-name: shake
 }
 
 /* transition */
 * {
-  transition: all 0.3s; 
+transition: all 0.3s; 
 }
 
 
 .js-tilt-glare {
-  border-radius: 18px;
-  overflow: hidden;
+border-radius: 18px;
+overflow: hidden;
 }
 
 /* topbar styles ========================================== */
 
 header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 3em;
-    justify-content: space-between;
-    align-items:center;
-    /* background: color(0, 0, 0, .1); */
-    z-index: 1000;
-    background: rgba(128, 128, 128, 0.2)
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 3em;
+	justify-content: space-between;
+	align-items:center;
+	/* background: color(0, 0, 0, .1); */
+	z-index: 1000;
+	background: rgba(128, 128, 128, 0.2)
 }
 
 .navBar a {
-    position: relative;
-    height: 100%;
-    font-size: 5mm;
-    text-transform: capitalize;
-    text-align: center;
-    text-decoration: none;
-    margin-left: 5mm;
-    margin-right: 5mm;
-    padding-top: 3mm;
-    padding-bottom: 3mm;
-    border-radius: 8px;
-    color: #F4E8C1;
+	position: relative;
+	height: 100%;
+	font-size: 5mm;
+	text-transform: capitalize;
+	text-align: center;
+	text-decoration: none;
+	margin-left: 5mm;
+	margin-right: 5mm;
+	padding-top: 3mm;
+	padding-bottom: 3mm;
+	border-radius: 8px;
+	color: #F4E8C1;
 }
 
 .navBar .hleft a {float: left;}
 .navBar .hright a {float: right;}
 
 .navBar a::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 1mm;
-    background: rgba(128, 128, 128, 0.2);
-    border-radius: 1mm;
-    transform: scaleX(0);
-    transition: all 0.3s;
+	content: '';
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	height: 1mm;
+	background: rgba(128, 128, 128, 0.2);
+	border-radius: 1mm;
+	transform: scaleX(0);
+	transition: all 0.3s;
 }
 
 .navBar a:hover::after {
-    transform: scaleX(1.1);
+	transform: scaleX(1.1);
 }
 
 .navBar a:hover {
-  /* background: rgba(255, 255, 255, 0.2); */
-  /* outline: ridge rgba(128, 128, 128, .6); */
-  -moz-filter: blur(10px);
-  -o-filter: blur(10px);
-  -ms-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-  transition: all 1s
+/* background: rgba(255, 255, 255, 0.2); */
+/* outline: ridge rgba(128, 128, 128, .6); */
+-moz-filter: blur(10px);
+-o-filter: blur(10px);
+-ms-filter: blur(10px);
+-webkit-backdrop-filter: blur(10px);
+backdrop-filter: blur(10px);
+transition: all 1s
 }
 
 .navBar a.active::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 1mm;
-    background: rgba(128, 128, 128, .9);
-    border-radius: 1mm;
-    transform: scaleX(1);
+	content: '';
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	height: 1mm;
+	background: rgba(128, 128, 128, .9);
+	border-radius: 1mm;
+	transform: scaleX(1);
 }
 
 .navBar:active,
@@ -280,64 +280,64 @@ header:hover,
 #navBarHeader:hover,
 #navBarHeader:active
 {
-  transform: scale(1.005);
-  -moz-filter: blur(10px);
-  -o-filter: blur(10px);
-  -ms-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
+transform: scale(1.005);
+-moz-filter: blur(10px);
+-o-filter: blur(10px);
+-ms-filter: blur(10px);
+-webkit-backdrop-filter: blur(10px);
+backdrop-filter: blur(10px);
 transition: all 0.5s
 }
 
 .navBar,
 header,
 #navBarHeader {
-  -moz-filter: blur(2.5px);
-  -o-filter: blur(2.5px);
-  -ms-filter: blur(2.5px);
-  -webkit-backdrop-filter: blur(2.5px);
-  backdrop-filter: blur(2.5px);
+-moz-filter: blur(2.5px);
+-o-filter: blur(2.5px);
+-ms-filter: blur(2.5px);
+-webkit-backdrop-filter: blur(2.5px);
+backdrop-filter: blur(2.5px);
 }
 
 /* other ================================================== */
 
 .contents {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
 }
 
 section {
-    position: relative;
+	position: relative;
 }
 
 .wrapper {
-  height: 100vh;
-  overflow-y: auto;
-  overflow-x: hidden;
-  perspective: 10px;
+height: 100vh;
+overflow-y: auto;
+overflow-x: hidden;
+perspective: 10px;
 }
 
 a:hover {
-    font-weight: bold;
-    text-decoration: underline;
-    text-decoration-thickness: 3px;
-    -webkit-text-decoration-line: underline;
-    cursor: pointer;
-    transition-timing-function: cubic-bezier(.4,0,.2,1);
-    transition-duration: .15s;
-    text-underline-offset: 1px;
-    transition: all .5s;
-    position: relative;
-    height: 100%;
-    font-size: 5mm;
-    text-transform: capitalize;
-    text-align: center;
-    margin-left: 5mm;
-    margin-right: 5mm;
-    padding-top: 3mm;
-    padding-bottom: 3mm;
-    /* border-radius: 8px; */
-    /* color: #F4E8C1; */
+	font-weight: bold;
+	text-decoration: underline;
+	text-decoration-thickness: 3px;
+	-webkit-text-decoration-line: underline;
+	cursor: pointer;
+	transition-timing-function: cubic-bezier(.4,0,.2,1);
+	transition-duration: .15s;
+	text-underline-offset: 1px;
+	transition: all .5s;
+	position: relative;
+	height: 100%;
+	font-size: 5mm;
+	text-transform: capitalize;
+	text-align: center;
+	margin-left: 5mm;
+	margin-right: 5mm;
+	padding-top: 3mm;
+	padding-bottom: 3mm;
+	/* border-radius: 8px; */
+	/* color: #F4E8C1; */
 }
diff --git a/src/js/getrepo.js b/src/js/getrepo.js
index 2912427c..d34104a2 100644
--- a/src/js/getrepo.js
+++ b/src/js/getrepo.js
@@ -8,190 +8,190 @@ const filterInput = document.querySelector('.filter-repos');
 
 // get information from github profile
 const getProfile = async () => {
-    const res = await fetch(
-        `https://api.github.com/users/${username}`,
-        {
-            headers: {
-                Accept: 'application/vnd.github+json',
-                Authorization: //'token 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'
-                  `Basic ${btoa(`${clientId}:${clientSecret}`)}`
-            }
-        }
-    );
-    const profile = await res.json();
-    displayProfile(profile);
+	const res = await fetch(
+		`https://api.github.com/users/${username}`,
+		{
+			headers: {
+				Accept: 'application/vnd.github+json',
+				Authorization: //'token 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'
+				`Basic ${btoa(`${clientId}:${clientSecret}`)}`
+			}
+		}
+	);
+	const profile = await res.json();
+	displayProfile(profile);
 };
 getProfile();
 
 // display infomation from github profile
 const displayProfile = (profile) => {
-    const userInfo = document.querySelector('.user-info');
-    userInfo.innerHTML = `
-        <figure>
-            <a href=${profile.html_url}><img alt="user avatar" src=${profile.avatar_url}></a>
-        </figure>
-        <div>
-            <!-- <h2><a href=${profile.blog}><strong>${profile.name}</strong></a></h2> -->
-            <h2><a href=/><strong class="usertitle">${profile.name}</strong></a></h2>
-            <!-- <h2><a href=${profile.html_url}><strong>${profile.name}</strong></a></h2> -->
-            <p>${profile.bio}</p>
-            <p>
-              <strong>Mail:</strong> ${profile.email}
-            </p>
-            <p>
-                <strong>Location:</strong> ${profile.location}
-            </p>
-            <p>
-                <strong>@${profile.login} </strong>
-                Repos: ${profile.public_repos}
-                Gists: ${profile.public_gists}
-            </p>
-        </div>
-    `;
+	const userInfo = document.querySelector('.user-info');
+	userInfo.innerHTML = `
+		<figure>
+			<a href=${profile.html_url}><img alt="user avatar" src=${profile.avatar_url}></a>
+		</figure>
+		<div>
+			<!-- <h2><a href=${profile.blog}><strong>${profile.name}</strong></a></h2> -->
+			<h2><a href=/><strong class="usertitle">${profile.name}</strong></a></h2>
+			<!-- <h2><a href=${profile.html_url}><strong>${profile.name}</strong></a></h2> -->
+			<p>${profile.bio}</p>
+			<p>
+			<strong>Mail:</strong> ${profile.email}
+			</p>
+			<p>
+				<strong>Location:</strong> ${profile.location}
+			</p>
+			<p>
+				<strong>@${profile.login} </strong>
+				Repos: ${profile.public_repos}
+				Gists: ${profile.public_gists}
+			</p>
+		</div>
+	`;
 };
 
 // get list of user's public repos
 const getRepos = async () => {
-    let repos = [];
-    let res;
-    res = await fetch(
-        `https://api.github.com/users/${username}/repos?&sort=pushed`,
-        {
-            headers: {
-                Accept: 'application/vnd.github+json',
-                Authorization:
-                  `Basic ${btoa(`${clientId}:${clientSecret}`)}`
-                    // 'token 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'
-            }
-        }
-    );
-    let data = await res.json();
-    repos = repos.concat(data);
-    repos.sort((a, b) => b.forks_count - a.forks_count);
-    repos.sort((a, b) => b.stargazers_count - a.stargazers_count);
-    displayRepos(repos);
+	let repos = [];
+	let res;
+	res = await fetch(
+		`https://api.github.com/users/${username}/repos?&sort=pushed`,
+		{
+			headers: {
+				Accept: 'application/vnd.github+json',
+				Authorization:
+				`Basic ${btoa(`${clientId}:${clientSecret}`)}`
+					// 'token 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'
+			}
+		}
+	);
+	let data = await res.json();
+	repos = repos.concat(data);
+	repos.sort((a, b) => b.forks_count - a.forks_count);
+	repos.sort((a, b) => b.stargazers_count - a.stargazers_count);
+	displayRepos(repos);
 };
 getRepos();
 
 // display list of all user's public repos
 const displayRepos = (repos) => {
-    const userHome = `https://github.com/${username}`
-    filterInput.classList.remove('hide');
-    for (const repo of repos) {
-        if (repo.fork && hideForks) {
-            continue;
-        }
+	const userHome = `https://github.com/${username}`
+	filterInput.classList.remove('hide');
+	for (const repo of repos) {
+		if (repo.fork && hideForks) {
+			continue;
+		}
 
-        const langUrl = `${userHome}?tab=repositories&q=&language=${repo.language}`
-        const starsUrl = `${userHome}/${repo.name}/stargazers`
-        const forksUrl = `${userHome}/${repo.name}/network/members`
+		const langUrl = `${userHome}?tab=repositories&q=&language=${repo.language}`
+		const starsUrl = `${userHome}/${repo.name}/stargazers`
+		const forksUrl = `${userHome}/${repo.name}/network/members`
 
-        let listItem = document.createElement('li');
-        listItem.classList.add('repo');
-        listItem.innerHTML = `
-            <h2 class="repo-title">${repo.name}</h2>
-            <span class="rdescription">${repo.description ? `<span class="rdescriptiontext">${repo.description}</span>` : ''}<br/><br/>`
+		let listItem = document.createElement('li');
+		listItem.classList.add('repo');
+		listItem.innerHTML = `
+			<h2 class="repo-title">${repo.name}</h2>
+			<span class="rdescription">${repo.description ? `<span class="rdescriptiontext">${repo.description}</span>` : ''}<br/><br/>`
 
-        if (repo.stargazers_count > 0) {
-            listItem.innerHTML += `<a href="${starsUrl}">
-            <span>⭐ ${repo.stargazers_count}</span></a>`
-        }
+		if (repo.stargazers_count > 0) {
+			listItem.innerHTML += `<a href="${starsUrl}">
+			<span>⭐ ${repo.stargazers_count}</span></a>`
+		}
 
-        if (repo.language) {
-            listItem.innerHTML += `<a href="${langUrl}">
-            <span>${devicons[repo.language]}</span></a>`
-        }
+		if (repo.language) {
+			listItem.innerHTML += `<a href="${langUrl}">
+			<span>${devicons[repo.language]}</span></a>`
+		}
 
-        if (repo.forks_count > 0) {
-            listItem.innerHTML += `<a href="${starsUrl}">
-            <span>${devicons["Git"]} ${repo.forks_count}</span></a>`
-        }
+		if (repo.forks_count > 0) {
+			listItem.innerHTML += `<a href="${starsUrl}">
+			<span>${devicons["Git"]} ${repo.forks_count}</span></a>`
+		}
 
-        if (repo.homepage && repo.homepage !== "") {
-            listItem.innerHTML += `<br /> <br />
-            <a class="link-btn" href=${repo.html_url}>Code ${devicons["Github"]}</a>
-            <a class="link-btn" href=${repo.homepage}>Live ${devicons["Chrome"]}</a> <br />`;
-        } else {
-            listItem.innerHTML += `<br /> <br />
-            <a class="link-btn" href=${repo.html_url}>View Project ${devicons["Github"]}</a><br />`;
-        }
+		if (repo.homepage && repo.homepage !== "") {
+			listItem.innerHTML += `<br /> <br />
+			<a class="link-btn" href=${repo.html_url}>Code ${devicons["Github"]}</a>
+			<a class="link-btn" href=${repo.homepage}>Live ${devicons["Chrome"]}</a> <br />`;
+		} else {
+			listItem.innerHTML += `<br /> <br />
+			<a class="link-btn" href=${repo.html_url}>View Project ${devicons["Github"]}</a><br />`;
+		}
 
-        repoList.append(listItem);
-    }
+		repoList.append(listItem);
+	}
 };
 
 // dynamic search
 filterInput.addEventListener('input', (e) => {
-    const search = e.target.value;
-    const repos = document.querySelectorAll('.repo');
-    const searchLowerText = search.toLowerCase();
+	const search = e.target.value;
+	const repos = document.querySelectorAll('.repo');
+	const searchLowerText = search.toLowerCase();
 
-    for (const repo of repos) {
-        const lowerText = repo.innerText.toLowerCase();
-        if (lowerText.includes(searchLowerText)) {
-            repo.classList.remove('hide');
-        } else {
-            repo.classList.add('hide');
-        }
-    }
+	for (const repo of repos) {
+		const lowerText = repo.innerText.toLowerCase();
+		if (lowerText.includes(searchLowerText)) {
+			repo.classList.remove('hide');
+		} else {
+			repo.classList.add('hide');
+		}
+	}
 });
 
 // for programming language icons
 const devicons = {
-    Git: '<i class="devicon-git-plain" style="color: #555"></i>',
-    Github: '<i class="devicon-github-plain" style="color: #1688f0"></i>',
-    Chrome: '<i class="devicon-chrome-plain" style="color: #1688f0"></i>',
-    Assembly: '<i class="devicon-labview-plain colored"></i> Assembly',
-    'C#': '<i class="devicon-csharp-plain colored"></i> C#',
-    'C++': '<i class="devicon-cplusplus-plain colored"></i> C++',
-    C: '<i class="devicon-c-plain colored"></i> C',
-    Clojure: '<i class="devicon-clojure-plain colored"></i> C',
-    CoffeeScript:
-        '<i class="devicon-coffeescript-plain colored"></i> CoffeeScript',
-    Crystal: '<i class="devicon-crystal-plain colored"></i> Crystal',
-    CSS: '<i class="devicon-css3-plain colored"></i> CSS',
-    Dart: '<i class="devicon-dart-plain colored"></i> Dart',
-    Dockerfile: '<i class="devicon-docker-plain colored"></i> Docker',
-    Elixir: '<i class="devicon-elixir-plain colored"></i> Elixir',
-    Elm: '<i class="devicon-elm-plain colored"></i> Elm',
-    Erlang: '<i class="devicon-erlang-plain colored"></i> Erlang',
-    'F#': '<i class="devicon-fsharp-plain colored"></i> F#',
-    Go: '<i class="devicon-go-plain colored"></i> Go',
-    Groovy: '<i class="devicon-groovy-plain colored"></i> Groovy',
-    HTML: '<i class="devicon-html5-plain colored"></i> HTML',
-    Haskell: '<i class="devicon-haskell-plain colored"></i> Haskell',
-    Java: '<i class="devicon-java-plain colored" style="color: #ffca2c"></i> Java',
-    JavaScript: '<i class="devicon-javascript-plain colored"></i> JavaScript',
-    Julia: '<i class="devicon-julia-plain colored"></i> Julia',
-    'Jupyter Notebook': '<i class="devicon-jupyter-plain colored"></i> Jupyter',
-    Kotlin: '<i class="devicon-kotlin-plain colored" style="color: #796bdc"></i> Kotlin',
-    Latex: '<i class="devicon-latex-plain colored"></i> Latex',
-    Lua: '<i class="devicon-lua-plain-wordmark colored" style="color: #0000d0"></i> Lua',
-    Matlab: '<i class="devicon-matlab-plain colored"></i> Matlab',
-    Nim: '<i class="devicon-nixos-plain colored" style="color: #FFC200"></i> Nim',
-    Nix: '<i class="devicon-nixos-plain colored"></i> Nix',
-    ObjectiveC: '<i class="devicon-objectivec-plain colored"></i> ObjectiveC',
-    OCaml: '<i class="devicon-ocaml-plain colored"></i> OCaml',
-    Perl: '<i class="devicon-perl-plain colored"></i> Perl',
-    PHP: '<i class="devicon-php-plain colored"></i> PHP',
-    PLSQL: '<i class="devicon-sqlite-plain colored"></i> PLSQL',
-    Processing:
-        '<i class="devicon-processing-plain colored" style="color: #0096D8"></i> Processing',
-    Python: '<i class="devicon-python-plain colored" style="color: #3472a6"></i> Python',
-    R: '<i class="devicon-r-plain colored"></i> R',
-    Ruby: '<i class="devicon-ruby-plain colored"></i> Ruby',
-    Rust: '<i class="devicon-rust-plain colored" style="color: #DEA584"></i> Rust',
-    Sass: '<i class="devicon-sass-original colored"></i> Sass',
-    Scala: '<i class="devicon-scala-plain colored"></i> Scala',
-    Shell: '<i class="devicon-bash-plain colored" style="color: #89E051"></i> Shell',
-    Solidity: '<i class="devicon-solidity-plain colored"></i> Solidity',
-    Stylus: '<i class="devicon-stylus-plain colored"></i> Stylus',
-    Svelte: '<i class="devicon-svelte-plain colored"></i> Svelte',
-    Swift: '<i class="devicon-swift-plain colored"></i> Swift',
-    Terraform: '<i class="devicon-terraform-plain colored"></i> Terraform',
-    TypeScript: '<i class="devicon-typescript-plain colored"></i> TypeScript',
-    'Vim Script': '<i class="devicon-vim-plain colored"></i> Vim Script',
-    Vue: '<i class="devicon-vuejs-plain colored"></i> Vue',
-    Mail: '<i class="nf nf-cod-mail"></i>',
+	Git: '<i class="devicon-git-plain" style="color: #555"></i>',
+	Github: '<i class="devicon-github-plain" style="color: #1688f0"></i>',
+	Chrome: '<i class="devicon-chrome-plain" style="color: #1688f0"></i>',
+	Assembly: '<i class="devicon-labview-plain colored"></i> Assembly',
+	'C#': '<i class="devicon-csharp-plain colored"></i> C#',
+	'C++': '<i class="devicon-cplusplus-plain colored"></i> C++',
+	C: '<i class="devicon-c-plain colored"></i> C',
+	Clojure: '<i class="devicon-clojure-plain colored"></i> C',
+	CoffeeScript:
+		'<i class="devicon-coffeescript-plain colored"></i> CoffeeScript',
+	Crystal: '<i class="devicon-crystal-plain colored"></i> Crystal',
+	CSS: '<i class="devicon-css3-plain colored"></i> CSS',
+	Dart: '<i class="devicon-dart-plain colored"></i> Dart',
+	Dockerfile: '<i class="devicon-docker-plain colored"></i> Docker',
+	Elixir: '<i class="devicon-elixir-plain colored"></i> Elixir',
+	Elm: '<i class="devicon-elm-plain colored"></i> Elm',
+	Erlang: '<i class="devicon-erlang-plain colored"></i> Erlang',
+	'F#': '<i class="devicon-fsharp-plain colored"></i> F#',
+	Go: '<i class="devicon-go-plain colored"></i> Go',
+	Groovy: '<i class="devicon-groovy-plain colored"></i> Groovy',
+	HTML: '<i class="devicon-html5-plain colored"></i> HTML',
+	Haskell: '<i class="devicon-haskell-plain colored"></i> Haskell',
+	Java: '<i class="devicon-java-plain colored" style="color: #ffca2c"></i> Java',
+	JavaScript: '<i class="devicon-javascript-plain colored"></i> JavaScript',
+	Julia: '<i class="devicon-julia-plain colored"></i> Julia',
+	'Jupyter Notebook': '<i class="devicon-jupyter-plain colored"></i> Jupyter',
+	Kotlin: '<i class="devicon-kotlin-plain colored" style="color: #796bdc"></i> Kotlin',
+	Latex: '<i class="devicon-latex-plain colored"></i> Latex',
+	Lua: '<i class="devicon-lua-plain-wordmark colored" style="color: #0000d0"></i> Lua',
+	Matlab: '<i class="devicon-matlab-plain colored"></i> Matlab',
+	Nim: '<i class="devicon-nixos-plain colored" style="color: #FFC200"></i> Nim',
+	Nix: '<i class="devicon-nixos-plain colored"></i> Nix',
+	ObjectiveC: '<i class="devicon-objectivec-plain colored"></i> ObjectiveC',
+	OCaml: '<i class="devicon-ocaml-plain colored"></i> OCaml',
+	Perl: '<i class="devicon-perl-plain colored"></i> Perl',
+	PHP: '<i class="devicon-php-plain colored"></i> PHP',
+	PLSQL: '<i class="devicon-sqlite-plain colored"></i> PLSQL',
+	Processing:
+		'<i class="devicon-processing-plain colored" style="color: #0096D8"></i> Processing',
+	Python: '<i class="devicon-python-plain colored" style="color: #3472a6"></i> Python',
+	R: '<i class="devicon-r-plain colored"></i> R',
+	Ruby: '<i class="devicon-ruby-plain colored"></i> Ruby',
+	Rust: '<i class="devicon-rust-plain colored" style="color: #DEA584"></i> Rust',
+	Sass: '<i class="devicon-sass-original colored"></i> Sass',
+	Scala: '<i class="devicon-scala-plain colored"></i> Scala',
+	Shell: '<i class="devicon-bash-plain colored" style="color: #89E051"></i> Shell',
+	Solidity: '<i class="devicon-solidity-plain colored"></i> Solidity',
+	Stylus: '<i class="devicon-stylus-plain colored"></i> Stylus',
+	Svelte: '<i class="devicon-svelte-plain colored"></i> Svelte',
+	Swift: '<i class="devicon-swift-plain colored"></i> Swift',
+	Terraform: '<i class="devicon-terraform-plain colored"></i> Terraform',
+	TypeScript: '<i class="devicon-typescript-plain colored"></i> TypeScript',
+	'Vim Script': '<i class="devicon-vim-plain colored"></i> Vim Script',
+	Vue: '<i class="devicon-vuejs-plain colored"></i> Vue',
+	Mail: '<i class="nf nf-cod-mail"></i>',
 };
 
diff --git a/src/js/hacktype.js b/src/js/hacktype.js
index b5542377..eb5595c0 100644
--- a/src/js/hacktype.js
+++ b/src/js/hacktype.js
@@ -5,46 +5,46 @@ const special = "!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~";
 let interval = null;
 
 function hackType() {
-  const elements = document.querySelectorAll(".hacktype");
-  let intervals = [];
-
-  elements.forEach((element) => {
-    let iteration = 0;
-
-    intervals.push(
-      setInterval(() => {
-        element.innerText = element.innerText
-          .split("")
-          .map((letter, index) => {
-            if (index < iteration) {
-              return element.dataset.value[index];
-            }
-
-            return letters[Math.floor(Math.random() * 26)];
-          })
-          .join("");
-
-        if (iteration >= element.dataset.value.length) {
-          clearInterval(intervals.shift());
-        }
-
-        iteration += 1 / 5;
-      }, 20)
-    );
-  });
+const elements = document.querySelectorAll(".hacktype");
+let intervals = [];
+
+elements.forEach((element) => {
+	let iteration = 0;
+
+	intervals.push(
+	setInterval(() => {
+		element.innerText = element.innerText
+		.split("")
+		.map((letter, index) => {
+			if (index < iteration) {
+			return element.dataset.value[index];
+			}
+
+			return letters[Math.floor(Math.random() * 26)];
+		})
+		.join("");
+
+		if (iteration >= element.dataset.value.length) {
+		clearInterval(intervals.shift());
+		}
+
+		iteration += 1 / 5;
+	}, 20)
+	);
+});
 }
 
 hackType(); // Call hackType initially
 
 setInterval(() => {
-  const intervals = document.querySelectorAll(".hacktype-interval");
-  intervals.forEach((interval) => clearInterval(interval)); // Clear existing intervals
-  hackType(); // Call hackType again
+const intervals = document.querySelectorAll(".hacktype-interval");
+intervals.forEach((interval) => clearInterval(interval)); // Clear existing intervals
+hackType(); // Call hackType again
 }, 10000); // Repeat every 5 seconds
 
 // Check if the document becomes visible again
 document.addEventListener("visibilitychange", () => {
-  if (!document.hidden) {
-    hackType(); // Call hackType when the user comes back from being away
-  }
+if (!document.hidden) {
+	hackType(); // Call hackType when the user comes back from being away
+}
 });
diff --git a/src/js/header.js b/src/js/header.js
index f8e53d5a..6189bc1c 100644
--- a/src/js/header.js
+++ b/src/js/header.js
@@ -6,15 +6,15 @@ let page = header.getAttribute('page');
 newElement.innerHTML = `
 <!-- header -->
 <header id="navBarHeader">
-    <nav class="navBar">
-        <div class="hleft">
-            <a id="btnHome" style="text-decoration: unset" href="/">Home<span></span></span></a>
-        </div>
-        <div class="hright">
-            <a href="/pages/repo/github/repos.html" id="btnGhRepo" style="text-decoration: unset">Github Repos</a>
-            <a href="/pages/info/about.html" id="btnAbout" style="text-decoration: unset">About</a>
-        </div>
-    </nav> 
+	<nav class="navBar">
+		<div class="hleft">
+			<a id="btnHome" style="text-decoration: unset" href="/">Home<span></span></span></a>
+		</div>
+		<div class="hright">
+			<a href="/pages/repo/github/repos.html" id="btnGhRepo" style="text-decoration: unset">Github Repos</a>
+			<a href="/pages/info/about.html" id="btnAbout" style="text-decoration: unset">About</a>
+		</div>
+	</nav> 
 </header>
 `;
 
diff --git a/src/js/rbg.js b/src/js/rbg.js
index 40f0dadd..fa6b11a6 100644
--- a/src/js/rbg.js
+++ b/src/js/rbg.js
@@ -1,38 +1,38 @@
 document.body.style.transition = "background 1s ease-in-out";
 
 function getRandomColor() {
-  const letters = "0123456789ABCDEF";
-  let color = "#";
-  for (let i = 0; i < 6; i++) {
-    color += letters[Math.floor(Math.random() * 16)];
-  }
-  return color;
+const letters = "0123456789ABCDEF";
+let color = "#";
+for (let i = 0; i < 6; i++) {
+	color += letters[Math.floor(Math.random() * 16)];
+}
+return color;
 }
 
 function setRandomGradient() {
-  const rand3 = Math.floor(Math.random() * 3) + 1;
-  if (rand3 === 1) {
-    document.body.style.background = `linear-gradient(${Math.floor(
-      Math.random() * 180
-    )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
-  } else if (rand3 === 2) {
-    document.body.style.background = `linear-gradient(${Math.floor(
-      Math.random() * 180
-    )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}),
+const rand3 = Math.floor(Math.random() * 3) + 1;
+if (rand3 === 1) {
+	document.body.style.background = `linear-gradient(${Math.floor(
+	Math.random() * 180
+	)}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
+} else if (rand3 === 2) {
+	document.body.style.background = `linear-gradient(${Math.floor(
+	Math.random() * 180
+	)}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}),
 linear-gradient(${Math.floor(
-      Math.random() * 180
-    )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
-  } else {
-    document.body.style.background = `linear-gradient(${Math.floor(
-      Math.random() * 180
-    )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}),
+	Math.random() * 180
+	)}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
+} else {
+	document.body.style.background = `linear-gradient(${Math.floor(
+	Math.random() * 180
+	)}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}),
 linear-gradient(${Math.floor(
-      Math.random() * 180
-    )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}),
+	Math.random() * 180
+	)}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}),
 linear-gradient(${Math.floor(
-      Math.random() * 180
-    )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
-  }
+	Math.random() * 180
+	)}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
+}
 }
 
 setRandomGradient();