updates

5 files changed, 1115 insertions, 5 deletions

diff --git a/dest/css/404.css b/dest/css/404.css
index c677f0a6..8bf0c088 100644
--- a/dest/css/404.css
+++ b/dest/css/404.css
@@ -1 +1,112 @@
-*{box-sizing:border-box}body{margin:0;padding:0}#notfound{background:#030005;height:100vh;position:relative}#notfound .notfound{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.notfound{line-height:1.4;max-width:767px;text-align:center;width:100%}.notfound .notfound-404{height:180px;margin-bottom:20px;position:relative;z-index:-1}.notfound .notfound-404 h1{color:#030005;font-size:224px;font-weight:900;left:50%;letter-spacing:-20px;margin-bottom:0;margin-left:-12px;margin-top:0;text-shadow:-2px -2px 0 #8400ff,2px 2px 0 #ff005a;top:50%;transform:translate(-50%,-50%)}.notfound .notfound-404 h1,.notfound .notfound-404 h2{font-family:Montserrat,sans-serif;position:absolute;text-transform:uppercase}.notfound .notfound-404 h2{color:#fff;font-size:42px;font-weight:700;left:0;letter-spacing:13px;margin:0;right:0;text-shadow:0 .5px 0 #ff005a,0 2px 0 #8400ff;top:110px}.notfound a{background:transparent;border:2px solid;color:#ff005a;display:inline-block;font-family:Montserrat,sans-serif;font-size:14px;font-weight:700;padding:10px 40px;-webkit-text-decoration:none;text-decoration:none;text-transform:uppercase;transition:all .2s}.notfound a:hover{color:#8400ff}@media only screen and (max-width:767px){.notfound .notfound-404 h2{font-size:24px}}@media only screen and (max-width:480px){.notfound .notfound-404 h1{font-size:182px}}
\ No newline at end of file
+* {

+	box-sizing: border-box;

+}

+

+body {

+	padding: 0;

+	margin: 0;

+	transition: transform 0.5s;

+}

+

+.using-mouse .using-mouse body:hover {

+	transform: scale(1.1);

+	transition: transform 0.5s;

+}

+

+#notfound {

+	position: relative;

+	height: 100vh;

+	background: #030005;

+}

+

+#notfound .notfound {

+	position: absolute;

+	left: 50%;

+	top: 50%;

+	transform: translate(-50%, -50%);

+}

+

+.notfound {

+	max-width: 767px;

+	width: 100%;

+	line-height: 1.4;

+	text-align: center;

+}

+

+.notfound .notfound-404 {

+	position: relative;

+	height: 180px;

+	margin-bottom: 20px;

+	z-index: -1;

+}

+

+.notfound .notfound-404 h1 {

+	font-family: 'Montserrat', sans-serif;

+	position: absolute;

+	left: 50%;

+	top: 50%;

+	transform: translate(-50% , -50%);

+	font-size: 224px;

+	font-weight: 900;

+	margin-top: 0px;

+	margin-bottom: 0px;

+	margin-left: -12px;

+	color: #030005;

+	text-transform: uppercase;

+	text-shadow: -2px -2px 0px #8400ff, 2px 2px 0px #ff005a;

+	letter-spacing: -20px;

+}

+

+.notfound .notfound-404 h2 {

+	font-family: 'Montserrat', sans-serif;

+	position: absolute;

+	left: 0;

+	right: 0;

+	top: 110px;

+	font-size: 42px;

+	font-weight: 700;

+	color: #fff;

+	text-transform: uppercase;

+	text-shadow: 0px .5px 0px #ff005a, 0px 2px 0px #8400ff;

+	letter-spacing: 13px;

+	margin: 0;

+}

+

+.notfound a {

+	font-family: 'Montserrat', sans-serif;

+	display: inline-block;

+	text-transform: uppercase;

+	color: #ff005a;

+	-webkit-text-decoration: none;

+	text-decoration: none;

+	border: 2px solid;

+	background: transparent;

+	padding: 10px 40px;

+	font-size: 14px;

+	font-weight: 700;

+	transition: 0.2s all;

+}

+

+.using-mouse .using-mouse .notfound a:hover {

+	color: #8400ff;

+	transform: scale(1.01);

+	box-shadow: 0 0 25mm #8400ff;

+	transition: transform 0.5s;

+}

+

+.using-mouse .using-mouse .notfound:hover:has(a:hover) a:not(:hover) {

+	transform: scale(0.99);

+	transition: transition 0.5s;

+}

+

+@media only screen and (max-width: 767px) {

+	.notfound .notfound-404 h2 {

+		font-size: 24px;

+	}

+}

+

+@media only screen and (max-width: 480px) {

+	.notfound .notfound-404 h1 {

+		font-size: 182px;

+	}

+}

diff --git a/dest/css/about.css b/dest/css/about.css
index df88c7d7..0f8a159a 100644
--- a/dest/css/about.css
+++ b/dest/css/about.css
@@ -1 +1,55 @@
-body{margin:0;padding:0}.container{height:100vh}.container,.left{align-items:center;display:flex;justify-content:center}.left{margin:4em 0 0;overflow:hidden;top:50%;transform:translateY(-50%)}.left img{max-width:100%}.right{display:flex;height:100%;margin-top:10em}.main{margin:auto}.main h2{font-size:24px;margin-bottom:10px}.main p{font-size:16px;margin:0}.info{height:80%}.name{font-family:smooth;font-size:10vw}.background{height:100vh;width:100%}
\ No newline at end of file
+/* .aboutPage { */
+/*    */
+/* } */
+body {
+	margin: 0;
+	padding: 0;
+}
+.container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100vh;
+}
+.left {
+	top: 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%;
+}
+.right {
+	/* flex: 1; */
+display: flex;
+height: 100%;
+margin-top: 10em;
+}
+.main {
+margin: auto;
+}
+.main h2 {
+	font-size: 24px;
+	margin-bottom: 10px;
+}
+.main p {
+	font-size: 16px;
+	margin: 0;
+}
+.info {
+height: 80%;
+}
+.name {
+font-family: smooth;
+font-size: 10vw;
+}
+.background {
+	width: 100%;
+height: 100vh;
+}
diff --git a/dest/css/ghrepo.css b/dest/css/ghrepo.css
index 74b26850..28315d87 100644
--- a/dest/css/ghrepo.css
+++ b/dest/css/ghrepo.css
@@ -1 +1,380 @@
-html{--text:#e5e5e5;--accent:#1688f0;--bg-main:#000;--bg-repo:#0f0f1a;--bg-user:#0a0a0f;--purple:#7b1fa2;--violet:#673ab7;--pink:#f48fb1;--light-yellow:#ffc;--pale-yellow:#ff9;--lemon-yellow:#fffacd}*{background:transparent;box-sizing:border-box}body{font-family:Open Sans,sans-serif;margin:(3em) 0 0}main{margin-top:3em}.bgWrap{background-color:#303c64;background-image:url(/images/heigh-grass.jpg),url(/images/heigh-grass.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;color:#f4e8c1;font-size:16px;height:100%;left:0;margin:0;overflow:hidden;padding:0;top:0;width:100%;z-index:-1}.bgWrap,.container{align-items:center;display:flex;justify-content:center}.container{flex-direction:row;flex-wrap:wrap;max-width:1280px;position:center;width:90%}.container small,h1{background:transparent}.hide{display:none!important}h1{color:#1688f0;color:var(--accent);margin-bottom:4px}small{display:block;margin-bottom:20px}h2,small{text-align:center;width:100%}h2{color:#e5e5e5;color:var(--text);margin:0}a{background:transparent;color:#1688f0;color:var(--accent);-webkit-text-decoration:none;text-decoration:none;transition:background .5s}.github-img{margin-right:8px;width:45px}ul{list-style:none;padding:0}.user-info,.user-info *{background:transparent}.user-info{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:16px;color:#e5e5e5;color:var(--text);display:flex;flex-wrap:wrap;font-size:18px;justify-content:center;padding:2em}.user-info figure{background:transparent;max-width:250px;width:90%}.user-info img{border:2px solid #1688f0;border:2px solid var(--accent);border-radius:100%;box-shadow:0 0 6px #1688f0,0 0 6px #1688f0;box-shadow:0 0 6px var(--accent),0 0 6px var(--accent);box-shadow:0 0 10mm rgba(0,0,0,.7);height:auto;max-width:100%}.user-info img:hover{border-radius:5%}.user-info img:hover{box-shadow:0 0 100mm rgba(255,238,16,.7);transform:scale(1.1)}.user-info div{align-items:center;display:flex;flex-wrap:wrap;padding-left:5%;text-align:center;width:100%}.user-info div p{background:transparent;border-bottom:1px solid #e5e5e5;border-bottom:1px solid var(--text);margin:0;padding:0 0 18px;width:100%}.user-info :hover{transform:scale(1.1)}.user-info .usertitle{font-family:audiowide;font-size:2vw;text-transform:uppercase}.filter-repos,input{background:#0a0a0f;background:rgba(10,10,15,.3);border:2px solid #1688f0;border:2px solid var(--accent);border-radius:20px;box-shadow:0 0 10mm rgba(0,0,0,.7);margin-bottom:1em;margin-top:1em;min-width:300px;padding:1em;text-align:center;transition:all .5s;width:50%}.filter-repos:hover,input:hover{-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 .5s}.filter-repos:active,input:active{background:#f4e8c1;background:hsla(46,70%,86%,.3);box-shadow:0 0 10mm rgba(0,0,0,.7)}.repos{background:grey;background:hsla(0,0%,50%,.2);border-radius:16px;display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:4em;margin-top:0;padding:2em}.repos:hover{background:#000;background:rgba(0,0,0,.3);box-shadow:0 0 10mm rgba(0,0,0,.7);box-shadow:0 0 20mm hsla(0,0%,50%,.7);transform:scale(1.01);transition:all .5s}.repo-title{color:#1688f0;color:var(--accent);font-weight:700;margin:4px;text-align:center;width:100%}.repo-list{align-items:flex-start;display:flex;flex-wrap:wrap;justify-content:center;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory}.repo-list,.repo-list li{background:transparent;width:100%}.repo-list li{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid #1688f0;border:1px solid var(--accent);border-radius:16px;margin:1em 0;min-height:180px;padding:1em;scroll-snap-align:center;text-align:center;transition:all .5s}.repo-list h3,span{background:transparent}.repo:hover{background:#000;background:rgba(0,0,0,.5);border-radius:10px;box-shadow:0 0 50mm rgba(255,238,16,.7);transform:scale(1.05);transition:background .5s,transform 1s,boarder 1.5s,all .3s}.repo-list:hover:has(li:hover) li:not(:hover){-webkit-animation-duration:.5s;animation-duration:.5s;background:#000;background:rgba(0,0,0,.3);transform:scale(.95);transition:background .5s,transform 1s,all .3s}.link-btn{background:grey;background:hsla(0,0%,50%,.1);border:2px solid #1688f0;border:2px solid var(--accent);border-radius:30px;color:#e5e5e5;color:var(--text);padding:10px 20px;transform:scale(1);transition:background .5s,transform .5s,border .5,all .3s}.link-btn:hover{background:#1688f0;background:rgba(22,136,240,.5);border:2px solid #e5e5e5;border:2px solid var(--text);border-radius:16px;box-shadow:0 0 50mm rgba(0,156,255,.7);transform:scale(1.1);transition:background .5s,transform .5s,border .5s,all .5s;-webkit-transition:background .5s,transform .5s,border .5s,all .5s}.repo-list p{background:transparent;margin:.5em 0;padding:0 .5em}.intro:hover,.user-info:hover{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:scale(1.1);transition:all .5s}.user-info{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:grey;background:hsla(0,0%,50%,.2)}.repo{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 10mm rgba(0,0,0,.7);overflow:auto;overflow-x:hidden}.rdescription{-webkit-box-orient:vertical;-webkit-line-clamp:3;display:-webkit-box;overflow:hidden}.rdescription:hover{-webkit-line-clamp:unset}@media (min-width:700px){.user-info div{background:transparent;text-align:left;width:45%}.user-info div p{margin:10px}.repo-list{justify-content:space-around}.repo-list li{margin:2% 1.5%;width:48%}}@media (min-width:1200px){.repo-list li{width:30%}}
\ No newline at end of file
+/* @media (prefers-color-scheme: light) { */
+/*     :root { */
+/*         --text: #151515; */
+/*         --accent: #1688f0; */
+/*         --bg-main: #fff; */
+/*         --bg-repo: #f0f0f0; */
+/*         --bg-user: #f5f5f5; */
+/*     } */
+/* } */
+/* @media (prefers-color-scheme: dark) { */
+html {
+	--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;
+	transition: transform 0.5s;
+}
+body {
+	margin: 0;
+	margin-top: (3em);
+	font-family: 'Open Sans', sans-serif;
+}
+main {
+	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), url(/images/heigh-grass.webp);
+	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;
+}
+.container small, h1 {
+background: transparent;
+}
+.hide {
+	display: none !important;
+}
+.hide {
+	/* '!important' is to make sure that when we add the class using JS, it takes precendence */
+}
+h1 {
+	color: #1688f0;
+	color: var(--accent);
+	margin-bottom: 4px;
+}
+small {
+	width: 100%;
+	text-align: center;
+	display: block;
+	margin-bottom: 20px;
+}
+h2 {
+	width: 100%;
+	text-align: center;
+	color: #e5e5e5;
+	color: var(--text);
+	margin: 0;
+}
+a {
+	background: transparent;
+	color: #1688f0;
+	color: var(--accent);
+	-webkit-text-decoration: none;
+	text-decoration: none;
+	transition: background 0.5s
+}
+.github-img {
+	width: 45px;
+	margin-right: 8px;
+}
+ul {
+	list-style: none;
+	padding: 0;
+}
+.user-info * {
+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: #e5e5e5;
+	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;
+}
+.user-info img {
+	border: 2px solid #1688f0;
+	border: 2px solid var(--accent);
+	box-shadow: 0 0px 6px #1688f0, 0 0px 6px #1688f0;
+	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%;
+}
+.using-mouse .using-mouse .user-info img:hover {
+	border-radius: 5%;
+}
+.using-mouse .using-mouse .user-info img:hover {
+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%;
+}
+.user-info div p {
+	width: 100%;
+	margin: 0;
+	padding: 0;
+	border-bottom: 1px solid #e5e5e5;
+	border-bottom: 1px solid var(--text);
+	padding-bottom: 18px;
+	background: transparent;
+}
+.using-mouse .using-mouse .user-info *:hover {
+	transform: scale(1.1);
+}
+.user-info .usertitle {
+	font-family: audiowide;
+	text-transform: uppercase;
+	font-size: 2vw;
+}
+.filter-repos,
+input {
+	background: #0a0a0f;
+	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 #1688f0;
+	border: 2px solid var(--accent);
+	box-shadow: 0 0 10mm rgba(0,0,0,.7);
+	text-align: center;
+	transition: all 0.5s
+}
+.using-mouse .using-mouse input:hover,
+.using-mouse .using-mouse .filter-repos:hover {
+	/* background: rgba(10, 10, 15, 0.5); */
+	transition: all 0.5s;
+	-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: #f4e8c1;
+	background: rgba(244, 232, 193, 0.3);
+}
+.repos {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	background: #808080;
+	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); */
+}
+.using-mouse .using-mouse .repos:hover {
+	background: #000000;
+	background: rgba(0, 0, 0, 0.3);
+	box-shadow: 0 0 10mm rgba(0,0,0,.7);
+	transform: scale(1.01);
+	box-shadow: 0 0 20mm rgba(128,128,128,.7);
+	transition: all 0.5s;
+}
+.repo-title {
+	margin: 4px;
+	width: 100%;
+	font-weight: bold;
+	text-align: center;
+	color: #1688f0;
+	color: var(--accent);
+}
+.repo-list {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: flex-start;
+	background: transparent;
+	-ms-scroll-snap-type: y mandatory;
+	    scroll-snap-type: y mandatory;
+	/* background: rgba(128, 128, 128, 0.2); */
+}
+.repo-list li {
+	width: 100%;
+	min-height: 180px;
+	border-radius: 16px;
+	margin: 1em 0;
+	border: 1px solid #1688f0;
+	border: 1px solid var(--accent);
+	padding: 1em;
+	text-align: center;
+	background: transparent;
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
+	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;
+}
+.using-mouse .using-mouse .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: #000000;
+	background: rgba(0, 0, 0, 0.5);
+	border-radius: 10px;
+	transform: scale(1.05);
+	transition: background 0.5s, transform 1s, boarder 1.5s, all 0.3s
+}
+.using-mouse .using-mouse .repo-list:hover:has(li:hover) li:not(:hover) {
+	/* background: rgba(0, 0, 0, 0.3); */
+	background: #000000;
+	background: rgba(0, 0, 0, 0.3);
+	transform: scale(0.95);
+	-webkit-animation-duration: 0.5s;
+	        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: #808080;
+	background: rgba(128, 128, 128, 0.1);
+	border-radius: 30px;
+	border: 2px solid #1688f0;
+	border: 2px solid var(--accent);
+	color: #e5e5e5;
+	color: var(--text);
+	transition: background 0.5s, transform 0.5s, border 0.5, all 0.3s;
+}
+.using-mouse .using-mouse .link-btn:hover {
+	background: #1688f0;
+	background: rgba(22, 136, 240, 0.5);
+	border: 2px solid #e5e5e5;
+	border: 2px solid var(--text);
+	border-radius: 16px;
+	transform: scale(1.1);
+	box-shadow: 0 0 50mm rgba(0, 156, 255,.7);
+	transition: background 0.5s, transform 0.5s, border 0.5s, all 0.5s;
+}
+.repo-list p {
+	padding: 0em 0.5em;
+	margin: 0.5em 0;
+	background: transparent;
+}
+.using-mouse .using-mouse .intro:hover,
+.using-mouse .using-mouse .user-info:hover {
+	-webkit-backdrop-filter: blur(8px);
+	backdrop-filter: blur(8px);
+	transform: scale(1.1);
+	transition: all 0.5s;
+}
+.user-info {
+	/* background: transparent; */
+	background: #808080;
+	background: rgba(128, 128, 128, 0.2);
+	-webkit-backdrop-filter: blur(2px);
+	backdrop-filter: blur(2px);
+	/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
+}
+.repo {
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
+	box-shadow: 0 0 10mm rgba(0,0,0,.7);
+	overflow: auto;
+	overflow-x: hidden;
+}
+.rdescription {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	overflow: hidden;
+}
+.using-mouse .using-mouse .rdescription:hover {
+	-webkit-line-clamp: unset;
+}
+@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%;
+	}
+}
+@media (min-width: 1200px) {
+	.repo-list li {
+		width: 30%;
+	}
+}
+/* TODO: Make all webkit-transition do with normal transition as well */
diff --git a/dest/css/index.css b/dest/css/index.css
index 2f6abe69..9e10a113 100644
--- a/dest/css/index.css
+++ b/dest/css/index.css
@@ -1 +1,122 @@
-.wrapper{-ms-overflow-style:none;height:100vh;left:0;overflow-x:hidden;scrollbar-width:none;top:0;width:100%;z-index:-6}.wrapper::-webkit-scrollbar{display:none}.indexPage{background-color:#143555;background-image:url(/images/backgroundNightCity.jpg),url(/images/backgroundNightCity.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;color:#f4e8c1;height:100%;left:0;margin:0;overflow:hidden;padding:0;top:0;width:100%;z-index:-10}.window{background:transparent;height:70%;left:10%;top:15%;width:80%;z-index:999}.window,.window .windowWrap{align-items:center;display:flex;justify-content:center;position:relative}.window .windowWrap{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #fff;border:1px solid hsla(0,0%,100%,.15);border-radius:1em;box-shadow:0 0 10mm #000;height:100%;text-align:center;width:100%;z-index:11}.window:hover,.windowWrap:hover{transform:scale(1.1);transition:all .3s}.window .windowWrap .text{position:relative;text-align:center;text-shadow:10px 10px 10px #000;width:100%}.window .windowWrap .text .title{font-family:monoton;font-size:7vw;text-transform:uppercase}.description{font-family:rocksalt;font-size:1.75vw}.title{text-shadow:15px 15px 15px #000;transition:all .5s}.title:hover{transform:scale(1.1);transition:all .5s}.window .windowWrap .text .br{display:block;height:0;margin-bottom:5vh;width:0}
\ No newline at end of file
+/* :root { */
+/*   --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;
+}
+.wrapper::-webkit-scrollbar {
+	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) ,url(/images/backgroundNightCity.webp);
+	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; */
+}
+/* .window:after { */
+/*   content: ""; */
+/*   height: 70px; */
+/*   width: 1px;   */
+/*   position: absolute;   */
+/*   left: -1px; */
+/*   top: 65%; */
+/*   transition: top, opacity; */
+/*   transition-duration: 600ms; */
+/*   transition-timing-function: ease; */
+/*   background: linear-gradient( */
+/*     transparent, */
+/*     var(--primary-color), */
+/*     transparent */
+/*   ); */
+/*   opacity: 0; */
+/* } */
+/* .window:hover:after { */
+/*   top: 25%; */
+/*   opacity: 1; */
+/* } */
+.window .windowWrap {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	border: 1px solid #ffffff;
+	border: 1px solid rgba(255,255,255, .15);
+	border-radius: 1em;
+	-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;
+}
+.using-mouse .window:hover,
+.using-mouse .windowWrap:hover {
+	transform: scale(1.1);
+	transition: all 0.3s;
+}
+.window .windowWrap .text {
+	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
+}
+.description {
+	/* z-index: -1; */
+	/* transform: translateZ(30px); */
+	font-family: rocksalt;
+	font-size: 1.75vw;
+}
+.title {
+	text-shadow: 15px 15px 15px black;
+	transition: all 0.5s
+}
+.using-mouse .title:hover {
+	transform: scale(1.1);
+	transition: all 0.5s
+}
+.window .windowWrap .text .br {
+	display: block;
+	height: 0;
+	width: 0;
+	margin-bottom: 5vh;
+}
diff --git a/dest/css/style.css b/dest/css/style.css
index 4063ed79..0776c4dd 100644
--- a/dest/css/style.css
+++ b/dest/css/style.css
@@ -1 +1,446 @@
-html{--topBarHeight:10%}@font-face{font-family:hacked;src:url(/fonts/Hacked-KerX.ttf)}@font-face{font-family:smooth;src:url(/fonts/SmoothElegantRegular-ZLv3.ttf)}@font-face{font-family:liga;src:url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf)}@font-face{font-family:big;src:url(/fonts/Big500-8MLOM.ttf)}@font-face{font-family:monoton;src:url(/fonts/Monoton.ttf)}@font-face{font-family:rocksalt;src:url(/fonts/RockSalt-Regular.ttf)}@font-face{font-family:audiowide;src:url(/fonts/audiowide.ttf)}*{box-sizing:border-box;font-family:liga;margin:0;padding:0;text-shadow:0 0 1px #000}body{left:0;top:0;transition:background 1s ease-in-out}body::-webkit-scrollbar{display:none}@-webkit-keyframes slideInTop{0%{transform:translateY(-300px)}to{transform:translateY(0)}}@keyframes slideInTop{0%{transform:translateY(-300px)}to{transform:translateY(0)}}@-webkit-keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(30px)}80%{transform:translateY(-15px)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(30px)}80%{transform:translateY(-15px)}}@-webkit-keyframes zoomIn{0%{transform:scale(.01)}85%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes zoomIn{0%{transform:scale(.01)}85%{transform:scale(1.1)}to{transform:scale(1)}}@-webkit-keyframes zoomOut{0%{transform:scale(1)}to{transform:scale(.01)}}@keyframes zoomOut{0%{transform:scale(1)}to{transform:scale(.01)}}@-webkit-keyframes reveal{0%{-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);-webkit-filter:blur(32px);-moz-filter:blur(32px);-o-filter:blur(32px);-ms-filter:blur(32px);filter:blur(32px);transform:scale(2)}}@keyframes reveal{0%{-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);-webkit-filter:blur(32px);-moz-filter:blur(32px);-o-filter:blur(32px);-ms-filter:blur(32px);filter:blur(32px);transform:scale(2)}}@-webkit-keyframes shake{0%{transform:rotate(0deg)}25%{transform:rotate(.5deg)}50%{transform:rotate(0eg)}75%{transform:rotate(-.5deg)}to{transform:rotate(0deg)}}@keyframes shake{0%{transform:rotate(0deg)}25%{transform:rotate(.5deg)}50%{transform:rotate(0eg)}75%{transform:rotate(-.5deg)}to{transform:rotate(0deg)}}@-webkit-keyframes background-pan{0%{background-position:0}to{background-position:-200%}}@keyframes background-pan{0%{background-position:0}to{background-position:-200%}}.animate{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animate.animate--infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animate.animation--delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animate.animation--delay-p5s{-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-duration:.5s;animation-duration:.5s}.animate.animation--delay-p3s{-webkit-animation-delay:.3s;animation-delay:.3s}.animate.animation--delay-p3s,.animate.animation--fast{-webkit-animation-duration:.3s;animation-duration:.3s}.animate.animation--slow{-webkit-animation-duration:1s;animation-duration:1s}.animate.slideInTop{-webkit-animation-name:slideInTop;animation-name:slideInTop;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;transition-timing-function:ease-in}.animate.bounce{-webkit-animation-name:bounce;animation-name:bounce}.animate.zoomIn{-webkit-animation-name:reveal;animation-name:zoomIn}.animate.zoomIn,.animate.zoomOut{transition-timing-function:linear}.animate.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}.animate.reveal{-webkit-animation-name:reveal;animation-name:reveal;transition-timing-function:linear}.animate.shake{-webkit-animation-name:shake;animation-name:shake}*{transition:all .3s}.js-tilt-glare{border-radius:18px;overflow:hidden}header{align-items:center;background:grey;background:hsla(0,0%,50%,.2);height:3em;justify-content:space-between;left:0;position:fixed;top:0;width:100%;z-index:1000}.navBar a{border-radius:8px;color:#f4e8c1;font-size:5mm;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-transform:capitalize}.navBar .hleft a{float:left}.navBar .hright a{float:right}.navBar a:after{background:grey;background:hsla(0,0%,50%,.2);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(0);transition:all .3s;width:100%}.navBar a:hover:after{transform:scaleX(1.1)}.navBar a:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all 1s}.navBar a.active:after{background:grey;background:hsla(0,0%,50%,.9);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(1);width:100%}#navBarHeader:active,#navBarHeader:hover,.navBar:active,.navBar:hover,header:active,header:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:scale(1.005);transition:all .5s}#navBarHeader,.navBar,header{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}.contents{height:100%;margin:0;padding:0;width:100%}section{position:relative}.wrapper{height:100vh;overflow-x:hidden;overflow-y:auto;perspective:10px}a:hover{cursor:pointer;font-size:5mm;font-weight:700;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-decoration-thickness:3px;text-transform:capitalize;text-underline-offset:1px;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition:all .5s}
\ No newline at end of file
+html {
+	--topBarHeight: 10%;
+}
+
+@font-face {
+	font-family: hacked;
+	src: url(/fonts/Hacked-KerX.ttf);
+}
+
+@font-face {
+	font-family: smooth;
+	src: url(/fonts/SmoothElegantRegular-ZLv3.ttf);
+}
+
+@font-face {
+	font-family: liga;
+	src: url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf);
+}
+
+@font-face {
+	font-family: big;
+	src: url(/fonts/Big500-8MLOM.ttf);
+}
+
+@font-face {
+	font-family: monoton;
+	src: url(/fonts/Monoton.ttf);
+}
+
+@font-face {
+	font-family: rocksalt;
+	src: url(/fonts/RockSalt-Regular.ttf);
+}
+
+@font-face {
+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;
+}
+
+body {
+	top: 0;
+	left: 0;
+	transition: background 1s ease-in-out;
+}
+
+body::-webkit-scrollbar {
+display: none;
+}
+
+/* animation ============================================== */
+
+@-webkit-keyframes slideInTop {
+from {
+	transform: translateY(-300px);
+}
+to {
+	transform: translateY(0);
+}
+}
+
+@keyframes slideInTop {
+from {
+	transform: translateY(-300px);
+}
+to {
+	transform: translateY(0);
+}
+}
+
+@-webkit-keyframes bounce {
+0%, 20%, 50%, 80%, 100% {
+	transform: translateY(0px);
+}
+40% {
+	transform: translateY(30px);
+}
+80% {
+	transform: translateY(-15px);
+}
+}
+
+@keyframes bounce {
+0%, 20%, 50%, 80%, 100% {
+	transform: translateY(0px);
+}
+40% {
+	transform: translateY(30px);
+}
+80% {
+	transform: translateY(-15px);
+}
+}
+
+@-webkit-keyframes zoomIn {
+0% {
+	transform: scale(0.01);
+}
+85% {
+	transform: scale(1.1);
+}
+100% {
+	transform: scale(1);
+}
+}
+
+@keyframes zoomIn {
+0% {
+	transform: scale(0.01);
+}
+85% {
+	transform: scale(1.1);
+}
+100% {
+	transform: scale(1);
+}
+}
+
+@-webkit-keyframes zoomOut {
+0% {
+	transform: scale(1);
+}
+100% {
+	transform: scale(0.01);
+}
+}
+
+@keyframes zoomOut {
+0% {
+	transform: scale(1);
+}
+100% {
+	transform: scale(0.01);
+}
+}
+
+@-webkit-keyframes reveal {
+0% {
+	-webkit-filter: blur(32px);
+	-moz-filter: blur(32px);
+	-o-filter: blur(32px);
+	-ms-filter: blur(32px);
+	filter: blur(32px);
+	-webkit-backdrop-filter: blur(32px);
+	backdrop-filter: blur(32px);
+	transform: scale(2);
+}
+
+}
+
+@keyframes reveal {
+0% {
+	-webkit-filter: blur(32px);
+	-moz-filter: blur(32px);
+	-o-filter: blur(32px);
+	-ms-filter: blur(32px);
+	filter: blur(32px);
+	-webkit-backdrop-filter: blur(32px);
+	backdrop-filter: blur(32px);
+	transform: scale(2);
+}
+
+}
+
+@-webkit-keyframes shake {
+	0% { transform: rotate(0deg); }
+	25% { transform: rotate(.5deg); }
+	50% { transform: rotate(0eg); }
+	75% { transform: rotate(-.5deg); }
+	100% { transform: rotate(0deg); }
+}
+
+@keyframes shake {
+	0% { transform: rotate(0deg); }
+	25% { transform: rotate(.5deg); }
+	50% { transform: rotate(0eg); }
+	75% { transform: rotate(-.5deg); }
+	100% { transform: rotate(0deg); }
+}
+
+@-webkit-keyframes background-pan {
+	from {
+		background-position: 0% center;
+	}
+	to {
+		background-position: -200% center;
+	}
+}
+
+@keyframes background-pan {
+	from {
+		background-position: 0% center;
+	}
+	to {
+		background-position: -200% center;
+	}
+}
+
+/* animation: name duration timing-function delay iteration-count direction fill-mode; */
+
+/* animate class */
+
+.animate {
+	-webkit-animation-duration: 0.5s;
+	animation-duration: 0.5s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+}
+
+.animate.animate--infinite {
+	-webkit-animation-iteration-count: infinite;
+	animation-iteration-count: infinite;
+}
+
+.animate.animation--delay-1s {
+	-webkit-animation-delay: 1s;
+	animation-delay: 1s;
+}
+
+.animate.animation--delay-p5s {
+	-webkit-animation-duration: 0.5s;
+	animation-duration: 0.5s;
+	-webkit-animation-delay: 0.5s;
+	        animation-delay: 0.5s;
+}
+
+.animate.animation--delay-p3s {
+	-webkit-animation-duration: 0.3s;
+	animation-duration: 0.3s;
+	-webkit-animation-delay: 0.3s;
+	        animation-delay: 0.3s;
+}
+
+.animate.animation--fast {
+	-webkit-animation-duration: 0.3s;
+	animation-duration: 0.3s;
+}
+
+.animate.animation--slow {
+	-webkit-animation-duration: 1s;
+	animation-duration: 1s;
+}
+
+/* real utility classes */
+
+.animate.slideInTop {
+	-webkit-animation-name: slideInTop;
+	        animation-name: slideInTop;
+	transition-timing-function: ease-in;
+	-webkit-animation-timing-function: ease-in;
+	animation-timing-function: ease-in;
+}
+
+.animate.bounce {
+	-webkit-animation-name: bounce;
+	animation-name: bounce;
+}
+
+.animate.zoomIn {
+	transition-timing-function: linear;
+	-webkit-animation-name: reveal;
+	animation-name: zoomIn;
+	-webkit-animation-name: zoomIn;
+	        animation-name: zoomIn;
+}
+
+.animate.zoomOut {
+	transition-timing-function: linear;
+	-webkit-animation-name: zoomOut;
+	animation-name: zoomOut;
+}
+
+.animate.reveal {
+	transition-timing-function: linear;
+	-webkit-animation-name: reveal;
+	animation-name: reveal;
+}
+
+.animate.shake {
+	-webkit-animation-name: shake;
+	animation-name: shake;
+}
+
+/* transition */
+
+* {
+	transition: all 0.3s; 
+}
+
+.js-tilt-glare {
+	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: #808080;
+	background: rgba(128, 128, 128, 0.2)
+}
+
+.navBar a {
+	position: relative;
+	height: 100%;
+	font-size: 5mm;
+	text-transform: capitalize;
+	text-align: center;
+	-webkit-text-decoration: none;
+	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: #808080;
+	background: rgba(128, 128, 128, 0.2);
+	border-radius: 1mm;
+	transform: scaleX(0);
+	transition: all 0.3s;
+}
+
+.using-mouse .using-mouse .navBar a:hover:after {
+	transform: scaleX(1.1);
+}
+
+.using-mouse .using-mouse .navBar a:hover {
+	/* background: rgba(255, 255, 255, 0.2); */
+	/* outline: ridge rgba(128, 128, 128, .6); */
+	-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: #808080;
+	background: rgba(128, 128, 128, .9);
+	border-radius: 1mm;
+	transform: scaleX(1);
+}
+
+.navBar:active,
+.using-mouse .using-mouse .navBar:hover,
+header:active,
+.using-mouse .using-mouse header:hover,
+.using-mouse .using-mouse #navBarHeader:hover,
+#navBarHeader:active
+{
+	transform: scale(1.005);
+	-webkit-backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
+	transition: all 0.5s
+}
+
+.navBar,
+header,
+#navBarHeader {
+	-webkit-backdrop-filter: blur(2.5px);
+	backdrop-filter: blur(2.5px);
+}
+
+/* other ================================================== */
+
+.contents {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+}
+
+section {
+	position: relative;
+}
+
+.wrapper {
+height: 100vh;
+overflow-y: auto;
+overflow-x: hidden;
+perspective: 10px;
+}
+
+.using-mouse .using-mouse a:hover {
+	font-weight: bold;
+	-webkit-text-decoration: underline;
+	text-decoration: underline;
+	text-decoration-thickness: 3px;
+	-webkit-text-decoration-line: underline;
+	text-decoration-line: underline;
+	cursor: pointer;
+	transition-timing-function: cubic-bezier(.4,0,.2,1);
+	transition-duration: .15s;
+	text-underline-offset: 1px;
+	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;
+	font-weight: bold;
+	transition: all .5s;
+	/* border-radius: 8px; */
+	/* color: #F4E8C1; */
+}
+
+/* TODO: Check dest if it compatible all browser */
\ No newline at end of file