update vc build & deploy

45 files changed, 1730 insertions, 0 deletions

diff --git a/.vercel/output/builds.json b/.vercel/output/builds.json
new file mode 100644
index 00000000..d2169e50
--- /dev/null
+++ b/.vercel/output/builds.json
@@ -0,0 +1,22 @@
+{
+  "//": "This file was generated by the `vercel build` command. It is not part of the Build Output API.",
+  "target": "preview",
+  "argv": [
+    "/opt/homebrew/Cellar/node/21.1.0/bin/node",
+    "/opt/homebrew/bin/vc",
+    "build"
+  ],
+  "builds": [
+    {
+      "require": "@vercel/static-build",
+      "requirePath": "/opt/homebrew/Cellar/vercel-cli/32.5.0/libexec/lib/node_modules/vercel/node_modules/@vercel/static-build/dist/index",
+      "apiVersion": 2,
+      "src": "package.json",
+      "use": "@vercel/static-build",
+      "config": {
+        "zeroConfig": true,
+        "outputDirectory": "."
+      }
+    }
+  ]
+}
diff --git a/.vercel/output/config.json b/.vercel/output/config.json
new file mode 100644
index 00000000..be2f3ad9
--- /dev/null
+++ b/.vercel/output/config.json
@@ -0,0 +1,28 @@
+{
+  "version": 3,
+  "routes": [
+    {
+      "handle": "filesystem"
+    },
+    {
+      "src": "^/ghrepos$",
+      "dest": "/pages/repo/github/repos.html",
+      "check": true
+    },
+    {
+      "src": "^/about$",
+      "dest": "/pages/info/about.html",
+      "check": true
+    },
+    {
+      "handle": "error"
+    },
+    {
+      "status": 404,
+      "src": "^(?!/api).*$",
+      "dest": "/404.html"
+    }
+  ],
+  "crons": [],
+  "flags": []
+}
diff --git a/.vercel/output/static/.babelrc b/.vercel/output/static/.babelrc
new file mode 100644
index 00000000..d11fde61
--- /dev/null
+++ b/.vercel/output/static/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@babel/preset-env",
+  ],
+}
diff --git a/.vercel/output/static/.browserslistrc b/.vercel/output/static/.browserslistrc
new file mode 100644
index 00000000..ec1a5744
--- /dev/null
+++ b/.vercel/output/static/.browserslistrc
@@ -0,0 +1,15 @@
+defaults
+defaults and fully supports es6-module
+maintained node versions
+supports serviceworkers
+
+last 1 chrome version
+last 1 firefox version
+last 1 safari version
+last 1 ie version
+last 1 opera version
+last 1 edge version
+
+> 0.5%
+last 2 versions
+not dead
\ No newline at end of file
diff --git a/.vercel/output/static/.gitignore b/.vercel/output/static/.gitignore
new file mode 100644
index 00000000..dc43a02d
--- /dev/null
+++ b/.vercel/output/static/.gitignore
@@ -0,0 +1,3 @@
+.DS_Store
+dest/**/**
+node_modules/**
\ No newline at end of file
diff --git a/.vercel/output/static/.htmltest.yml b/.vercel/output/static/.htmltest.yml
new file mode 100644
index 00000000..0d5d3143
--- /dev/null
+++ b/.vercel/output/static/.htmltest.yml
@@ -0,0 +1 @@
+DirectoryPath: "."
diff --git a/.vercel/output/static/404.html b/.vercel/output/static/404.html
new file mode 100644
index 00000000..813cc58f
--- /dev/null
+++ b/.vercel/output/static/404.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>

+<html lang="en">

+

+<head>

+	<meta charset="utf-8">

+	<meta http-equiv="X-UA-Compatible" content="IE=edge">

+	<meta name="viewport" content="width=device-width, initial-scale=1">

+	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

+

+	<title>404</title>

+

+	<!-- Google font -->

+	<link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">

+

+	<!-- Custom stlylesheet -->

+	<link type="text/css" rel="stylesheet" href="dest/css/404.css" />

+

+	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

+	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

+	<!--[if lt IE 9]>

+			<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

+			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

+		<![endif]-->

+

+</head>

+

+<body>

+

+	<div id="notfound">

+		<div class="notfound">

+			<div class="notfound-404">

+				<h1>404</h1>

+				<h2>Page not found</h2>

+			</div>

+			<a href="/about">About</a>

+			<a href="/">Home</a>

+			<a href="/ghrepos">Github Repos</a>

+		</div>

+	</div>

+

+</body><!-- This templates was made by Colorlib (https://colorlib.com) -->

+

+</html>

diff --git a/.vercel/output/static/fonts/Big500-8MLOM.ttf b/.vercel/output/static/fonts/Big500-8MLOM.ttf
new file mode 100644
index 00000000..35ec776d
--- /dev/null
+++ b/.vercel/output/static/fonts/Big500-8MLOM.ttf
diff --git a/.vercel/output/static/fonts/Hacked-KerX.ttf b/.vercel/output/static/fonts/Hacked-KerX.ttf
new file mode 100644
index 00000000..2917611c
--- /dev/null
+++ b/.vercel/output/static/fonts/Hacked-KerX.ttf
diff --git a/.vercel/output/static/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf b/.vercel/output/static/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf
new file mode 100644
index 00000000..fb81e183
--- /dev/null
+++ b/.vercel/output/static/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf
diff --git a/.vercel/output/static/fonts/Monoton.ttf b/.vercel/output/static/fonts/Monoton.ttf
new file mode 100644
index 00000000..0c329133
--- /dev/null
+++ b/.vercel/output/static/fonts/Monoton.ttf
diff --git a/.vercel/output/static/fonts/RockSalt-Regular.ttf b/.vercel/output/static/fonts/RockSalt-Regular.ttf
new file mode 100644
index 00000000..0f72fe6d
--- /dev/null
+++ b/.vercel/output/static/fonts/RockSalt-Regular.ttf
diff --git a/.vercel/output/static/fonts/SmoothElegantRegular-ZLv3.ttf b/.vercel/output/static/fonts/SmoothElegantRegular-ZLv3.ttf
new file mode 100644
index 00000000..f8f70d77
--- /dev/null
+++ b/.vercel/output/static/fonts/SmoothElegantRegular-ZLv3.ttf
diff --git a/.vercel/output/static/fonts/audiowide.ttf b/.vercel/output/static/fonts/audiowide.ttf
new file mode 100644
index 00000000..348817d5
--- /dev/null
+++ b/.vercel/output/static/fonts/audiowide.ttf
diff --git a/.vercel/output/static/images/backgroundNightCity.jpg b/.vercel/output/static/images/backgroundNightCity.jpg
new file mode 100644
index 00000000..05e081c4
--- /dev/null
+++ b/.vercel/output/static/images/backgroundNightCity.jpg
diff --git a/.vercel/output/static/images/backgroundNightCity.webp b/.vercel/output/static/images/backgroundNightCity.webp
new file mode 100644
index 00000000..621a826a
--- /dev/null
+++ b/.vercel/output/static/images/backgroundNightCity.webp
diff --git a/.vercel/output/static/images/cave.jpg b/.vercel/output/static/images/cave.jpg
new file mode 100644
index 00000000..957ef00a
--- /dev/null
+++ b/.vercel/output/static/images/cave.jpg
diff --git a/.vercel/output/static/images/heigh-grass.jpg b/.vercel/output/static/images/heigh-grass.jpg
new file mode 100644
index 00000000..93d834d0
--- /dev/null
+++ b/.vercel/output/static/images/heigh-grass.jpg
diff --git a/.vercel/output/static/images/heigh-grass.webp b/.vercel/output/static/images/heigh-grass.webp
new file mode 100644
index 00000000..13b88de5
--- /dev/null
+++ b/.vercel/output/static/images/heigh-grass.webp
diff --git a/.vercel/output/static/images/moonSkyRiver.jpg b/.vercel/output/static/images/moonSkyRiver.jpg
new file mode 100644
index 00000000..d2203e5d
--- /dev/null
+++ b/.vercel/output/static/images/moonSkyRiver.jpg
diff --git a/.vercel/output/static/images/moonSkyRiver.webp b/.vercel/output/static/images/moonSkyRiver.webp
new file mode 100644
index 00000000..2cb6bd25
--- /dev/null
+++ b/.vercel/output/static/images/moonSkyRiver.webp
diff --git a/.vercel/output/static/images/upSky.jpg b/.vercel/output/static/images/upSky.jpg
new file mode 100644
index 00000000..b97d931a
--- /dev/null
+++ b/.vercel/output/static/images/upSky.jpg
diff --git a/.vercel/output/static/images/upSky.webp b/.vercel/output/static/images/upSky.webp
new file mode 100644
index 00000000..a53ce2d3
--- /dev/null
+++ b/.vercel/output/static/images/upSky.webp
diff --git a/.vercel/output/static/index.html b/.vercel/output/static/index.html
new file mode 100644
index 00000000..218e4e5d
--- /dev/null
+++ b/.vercel/output/static/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta name="description" content="littleblack111's profile website">
+		<meta name="keywords" content="littleblack, littleblack111, profile">
+		<meta property="og:type" content="website">
+		<meta property="type" content="website">
+		<meta name="author" content="littleblack111">
+		<meta property="og:url" content="https://www.littleblack111.com">
+		<meta property="og:title" content="littleblack111">
+		<meta property="og:description" content="littleblack111's profile website">
+		<meta property="og:image" content="https://avatars.githubusercontent.com/u/97672521">
+		<meta property="url" content="https://www.littleblack111.com">
+		<meta property="title" content="littleblack111">
+		<title>littleblack111</title>
+		<link rel="icon" href="https://avatars.githubusercontent.com/u/97672521" type="image/png"/>
+		<link rel="stylesheet" href="/dest/css/style.css">
+		<link rel="stylesheet" href="/dest/css/index.css">
+	</head>
+	<body class="animate reveal">
+		<!-- headers -->
+		<div header page="Home"></div>
+
+		<!-- index page -->
+		<div class="wrapper">
+
+			<section class="indexPage">
+				<div class="window slowScroll animate zoomIn animate--fast">
+					<div class="windowWrap tilt" data-tilt-full-page-listening>
+						<div class="text">
+							<h2 class="description">Hello  ,  I    am</h2>
+							<object class="br"></object>
+							<h1 data-value="little black111" class="title animate bounce animation--delay-p3s hacktype">little black111</h1>
+							<object class="br"></object>
+							<h2 class="description">welcome to my<br>website !</h2>
+						</div>
+					</div>
+				</div>
+			</section>
+
+		</div>
+		<script src="/dest/js/index.js"></script>
+		<script src="/dest/js/tilt.js"></script>
+		<script src="/dest/js/tilt.conf.noglare.js"></script>
+		<script src="/dest/js/header.js"></script>
+		<script src="/dest/js/hacktype.js"></script>
+
+	</body>
+</html>
diff --git a/.vercel/output/static/launch.sh b/.vercel/output/static/launch.sh
new file mode 100755
index 00000000..ed6ea8cf
--- /dev/null
+++ b/.vercel/output/static/launch.sh
@@ -0,0 +1,48 @@
+function check() {
+	printf '\033[0;35mCode Checking Starts...\033[0m\n'
+	html5validator --also-check-css --also-check-svg --verbose | npx gnomon || printf '\033[0;31mCode Check Failed...\033[0m\n'
+	# sleep .5
+	echo
+	htmltest --conf ./.htmltest.yml | npx gnomon || printf '\033[0;31mCode Check Failed...\033[0m\n'
+	# sleep .5
+}
+
+function buildcss() {
+	printf '\033[0;35mCode CSS Build Starts...\033[0m\n'
+	yarn build:css || printf '\033[0;31mCode CSS Build Failed...\033[0m\n'
+}
+
+function buildjs() {
+	printf '\033[0;35mCode JavaScript Compile Starts...\033[0m\n'
+	yarn build:js || printf '\033[0;31mCode JavaScript Compile Failed...\033[0m\n'
+}
+
+function build() {
+	printf '\033[0;35mStart Building/Compiling...\033[0m\]'
+	yarn build || printf '\033[0;31mBuilding/Compiling Failed..\033[0m\n'
+}
+
+function watch() {
+	printf '\033[0;35mStart Watching.. \033[0m\n'
+	yarn watch || printf '\033[0;31mWatch Failed...\033[0m\n'
+}
+
+function start() {
+	printf '\033[0;32mNpx Server Starting...\033[0m\n'
+	exec npx serve -d -p 209 #| npx gnomon;
+}
+
+function main() {
+	check
+	build
+	start
+}
+
+if [ "$1" ]; then
+	$@
+	exit 0
+fi
+
+main
+
+
diff --git a/.vercel/output/static/pages/info/about.html b/.vercel/output/static/pages/info/about.html
new file mode 100644
index 00000000..e04c240b
--- /dev/null
+++ b/.vercel/output/static/pages/info/about.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>About Me</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link href="/dest/css/style.css" rel="stylesheet">
+	<link href="/dest/css/about.css" rel="stylesheet">
+	<link rel="icon" href="https://avatars.githubusercontent.com/u/97672521" type="image/png">
+</head>
+<body class="animate reveal">
+	<div class="background" id="bg">
+	<!-- headers -->
+	<div header page="About"></div>
+	<!-- main page -->
+	<section class="aboutPage">
+		<div class="container">
+			<div class="left">
+				<img src="https://avatars.githubusercontent.com/u/97672521" alt="Me" loading="lazy">
+			</div>
+			<div class="right">
+				<div class="main">
+						<strong class="name">littleblack111</strong>
+					<div class="intro">
+						<strong>Who am I</strong>
+						<p>I'm a senior programmer</p>
+					</div>
+					<div class="info">
+						<ul>What programming language do I do?
+							<li>Python(3)</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+	</div>
+	<script src="/dest/js/about.js"></script>
+	<script src="/dest/js/header.js"></script>
+	<script src="/dest/js/rbg.js"></script>
+</body>
+</html>
diff --git a/.vercel/output/static/pages/repo/github/repos.html b/.vercel/output/static/pages/repo/github/repos.html
new file mode 100644
index 00000000..bd0821a7
--- /dev/null
+++ b/.vercel/output/static/pages/repo/github/repos.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Github Projects</title>
+	<link rel="icon" href="https://avatars.githubusercontent.com/u/97672521" type="image/png">
+	<link rel="stylesheet" href="/dest/css/style.css">
+	<link rel="stylesheet" href="/dest/css/ghrepo.css">
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
+	<script src="/dest/js/getrepo.js" defer></script>
+</head>
+
+<body>
+	<div class="bgWrap animate reveal">
+	<!-- headers -->
+	<div header page="GhRepo"></div>
+
+	<!-- main Github Functions -->
+	<main class="container">
+		<section class="intro tilt" data-tilt-reverse="false" data-tilt-full-page-listening>
+			<div class="user-info animate animation--fast slideInTop"></div>
+		</section>
+
+		<hr>
+		<hr>
+		<hr>
+
+		<section class="repos">
+		<input type="text" class="filter-repos animate animate--slow slideInTop hide" placeholder="Search Projects"></input>
+			<ul class="repo-list animate slideInTop" id="repo-list"></ul>
+		</section>
+	</main>
+	</div>
+	<script src="/dest/js/tilt.js"></script>
+	<script src="/dest/js/tilt.conf.noglare.js"></script>
+	<script src="/dest/js/header.js"></script>
+</body>
+
+</html>
diff --git a/.vercel/output/static/postcss.config.js b/.vercel/output/static/postcss.config.js
new file mode 100644
index 00000000..24084af5
--- /dev/null
+++ b/.vercel/output/static/postcss.config.js
@@ -0,0 +1,31 @@
+const cssnano = require('cssnano')
+const postcssPresetEnv = require('postcss-preset-env')
+const postcssWillChange = require('postcss-will-change')
+const autoprefixer = require('autoprefixer')
+const postcssColorRgbaFallback = require('postcss-color-rgba-fallback')
+const postcssOpacity = require('postcss-opacity')
+const postcssPseudoelements = require('postcss-pseudoelements')
+const postcssVmin = require('postcss-vmin')
+const pixrem = require('pixrem')
+const doiuse = require('doiuse')
+const postcssFixes = require('postcss-fixes')
+const rucksackCss = require('rucksack-css')
+const postcssImport = require('postcss-import')
+const postcssNested = require('postcss-nested')
+
+module.exports = {
+    plugins: [
+		cssnano({ preset: 'default' }),
+		postcssPresetEnv(),
+		postcssWillChange(),
+		autoprefixer(),
+		postcssColorRgbaFallback(),
+		postcssPseudoelements(),
+		postcssVmin(),
+		doiuse(),
+		postcssFixes(),
+		rucksackCss(),
+		postcssImport(),
+		postcssNested(),
+    ],
+};
\ No newline at end of file
diff --git a/.vercel/output/static/src/css/404.css b/.vercel/output/static/src/css/404.css
new file mode 100644
index 00000000..0de41abb
--- /dev/null
+++ b/.vercel/output/static/src/css/404.css
@@ -0,0 +1,104 @@
+* {

+  -webkit-box-sizing: border-box;

+          box-sizing: border-box;

+}

+

+body {

+  padding: 0;

+  margin: 0;

+}

+

+#notfound {

+  position: relative;

+  height: 100vh;

+  background: #030005;

+}

+

+#notfound .notfound {

+  position: absolute;

+  left: 50%;

+  top: 50%;

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

+      -ms-transform: translate(-50%, -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%;

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

+      -ms-transform: translate(-50% , -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: -1px -1px 0px #8400ff, 1px 1px 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 2px 0px #8400ff;

+  letter-spacing: 13px;

+  margin: 0;

+}

+

+.notfound a {

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

+  display: inline-block;

+  text-transform: uppercase;

+  color: #ff005a;

+  text-decoration: none;

+  border: 2px solid;

+  background: transparent;

+  padding: 10px 40px;

+  font-size: 14px;

+  font-weight: 700;

+  -webkit-transition: 0.2s all;

+  transition: 0.2s all;

+}

+

+.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;

+  }

+}

diff --git a/.vercel/output/static/src/css/about.css b/.vercel/output/static/src/css/about.css
new file mode 100644
index 00000000..6b52e582
--- /dev/null
+++ b/.vercel/output/static/src/css/about.css
@@ -0,0 +1,68 @@
+/* .aboutPage { */
+/*    */
+/* } */
+
+body {
+	margin: 0;
+	padding: 0;
+}
+
+.container {
+	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; */
+}
+
+.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/.vercel/output/static/src/css/ghrepo.css b/.vercel/output/static/src/css/ghrepo.css
new file mode 100644
index 00000000..8726c6dd
--- /dev/null
+++ b/.vercel/output/static/src/css/ghrepo.css
@@ -0,0 +1,408 @@
+/* @media (prefers-color-scheme: light) { */
+/*     :root { */
+/*         --text: #151515; */
+/*         --accent: #1688f0; */
+/*         --bg-main: #fff; */
+/*         --bg-repo: #f0f0f0; */
+/*         --bg-user: #f5f5f5; */
+/*     } */
+/* } */
+
+/* @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);
+	}
+/* } */
+
+* {
+	box-sizing: border-box;
+	/* background-image: url(/images/backgroundNightCity.jpg); */
+	background: transparent;
+
+}
+
+
+
+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 {
+	/* '!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;
+}
+
+small {
+	width: 100%;
+	text-align: center;
+	display: block;
+	margin-bottom: 20px;
+}
+
+h2 {
+	width: 100%;
+	text-align: center;
+	color: var(--text);
+	margin: 0;
+}
+
+a {
+	background: transparent;
+	color: var(--accent);
+	text-decoration: none;
+	-webkit-transition: background 0.5s;
+	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: 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 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 {
+	border-radius: 5%;
+}
+
+.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 var(--text);
+	padding-bottom: 18px;
+	background: transparent;
+}
+
+.user-info *:hover {
+	transform: scale(1.1);
+}
+
+.user-info .usertitle {
+	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;
+	transition: all 0.5s
+}
+
+input:hover,
+.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: 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); */
+}
+
+.repos:hover {
+	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: 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); */
+}
+
+.repo-list li {
+	width: 100%;
+	min-height: 180px;
+	border-radius: 16px;
+	margin: 1em 0;
+	border: 1px solid var(--accent);
+	padding: 1em;
+	text-align: center;
+	background: transparent;
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
+	-webkit-transition: all 0.5s;
+	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;
+}
+
+.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);
+	border-radius: 10px;
+	transform: scale(1.05);
+	transition: background 0.5s, transform 1s, boarder 1.5s, 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;
+}
+
+
+.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);
+	transform: scale(1);
+	-webkit-transition: background 0.5s, transform 0.5s, border 0.5s, all 0.5s;
+	transition: background 0.5s, transform 0.5s, border 0.5, all 0.3s;
+}
+
+.link-btn:hover {
+	background: rgba(22, 136, 240, 0.5);
+	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;
+	-webkit-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;
+}
+
+.intro:hover,
+.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: 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;
+}
+
+.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/.vercel/output/static/src/css/index.css b/.vercel/output/static/src/css/index.css
new file mode 100644
index 00000000..f1e29f41
--- /dev/null
+++ b/.vercel/output/static/src/css/index.css
@@ -0,0 +1,137 @@
+/* :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 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;
+}
+
+.window:hover,
+.windowWrap:hover {
+	transform: scale(1.1);
+	-webkit-transition: all 0.3s;
+	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;
+	-webkit-transition: all 0.5s;
+	transition: all 0.5s
+}
+
+.title:hover {
+	transform: scale(1.1);
+	-webkit-transition: all 0.5s;
+	transition: all 0.5s
+}
+
+.window .windowWrap .text .br {
+	display: block;
+	height: 0;
+	width: 0;
+	margin-bottom: 5vh;
+}
diff --git a/.vercel/output/static/src/css/style.css b/.vercel/output/static/src/css/style.css
new file mode 100644
index 00000000..0240166a
--- /dev/null
+++ b/.vercel/output/static/src/css/style.css
@@ -0,0 +1,365 @@
+:root {
+	--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 ============================================== */
+
+@keyframes slideInTop {
+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);
+}
+}
+
+@keyframes zoomIn {
+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);
+}
+}
+
+@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 shake {
+	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;
+	}
+}
+/* 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;
+	animation-delay: 0.5s;
+}
+
+.animate.animation--delay-p3s {
+	-webkit-animation-duration: 0.3s;
+	animation-duration: 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 {
+	animation-name: slideInTop;
+	-webkit-transition-timing-function: ease-in;
+	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 {
+	-webkit-transition-timing-function: linear;
+	transition-timing-function: linear;
+	-webkit-animation-name: reveal;
+	animation-name: zoomIn;
+	animation-name: zoomIn;
+}
+
+.animate.zoomOut {
+	-webkit-transition-timing-function: linear;
+	transition-timing-function: linear;
+	-webkit-animation-name: zoomOut;
+	animation-name: zoomOut;
+}
+
+.animate.reveal {
+	-webkit-transition-timing-function: linear;
+	transition-timing-function: linear;
+	-webkit-animation-name: reveal;
+	animation-name: reveal;
+}
+
+.animate.shake {
+	-webkit-animation-name: shake;
+	animation-name: shake;
+}
+
+/* transition */
+* {
+	-webkit-transition: all 0.3s;
+	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: 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;
+}
+
+.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);
+	-webkit-transition: all 0.3s;
+	transition: all 0.3s;
+}
+
+.navBar a:hover::after {
+	transform: scaleX(1.1);
+}
+
+.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);
+	-webkit-transition: all 1s;
+	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);
+}
+
+.navBar:active,
+.navBar:hover,
+header:active,
+header:hover,
+#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;
+}
+
+a:hover {
+	font-weight: bold;
+	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;
+	-webkit-transition: all .5s;
+	transition: all .5s;
+	/* border-radius: 8px; */
+	/* color: #F4E8C1; */
+}
+
+/* TODO: Check dest if it compatible all browser */
\ No newline at end of file
diff --git a/.vercel/output/static/src/js/about.js b/.vercel/output/static/src/js/about.js
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/.vercel/output/static/src/js/about.js
diff --git a/.vercel/output/static/src/js/getrepo.js b/.vercel/output/static/src/js/getrepo.js
new file mode 100644
index 00000000..840c4560
--- /dev/null
+++ b/.vercel/output/static/src/js/getrepo.js
@@ -0,0 +1,180 @@
+const username = 'littleblack111';
+const hideForks = true;
+const repoList = document.querySelector('.repo-list');
+const reposSection = document.querySelector('.repos');
+const filterInput = document.querySelector('.filter-repos');
+
+// get information from github profile
+const getProfile = async () => {
+	const res = await fetch(
+		`https://api.github.com/users/${username}`,
+	);
+	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>
+	`;
+};
+
+// 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`,
+	);
+	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 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/>`
+
+		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.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 />`;
+		}
+
+		repoList.append(listItem);
+	}
+};
+
+// dynamic search
+filterInput.addEventListener('input', (e) => {
+	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 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>',
+};
+
diff --git a/.vercel/output/static/src/js/hacktype.js b/.vercel/output/static/src/js/hacktype.js
new file mode 100644
index 00000000..4ff0463a
--- /dev/null
+++ b/.vercel/output/static/src/js/hacktype.js
@@ -0,0 +1,50 @@
+const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+const numbers = "1234567890";
+const special = "!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~";
+
+let interval = null;
+
+function hackType() {
+const elements = document.querySelectorAll(".hacktype");
+const intervals = [];
+
+elements.forEach((element) => {
+	let iteration = 0;
+
+	const interval = 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(interval);
+	}
+
+	iteration += 1 / 5;
+	}, 20);
+
+	intervals.push(interval);
+});
+}
+
+hackType(); // Call hackType initially
+
+setInterval(() => {
+const elements = document.querySelectorAll(".hacktype");
+elements.forEach((element) => clearInterval(interval)); // Clear existing intervals
+hackType(); // Call hackType again
+}, 10000); // Repeat every 10 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
+}
+});
\ No newline at end of file
diff --git a/.vercel/output/static/src/js/header.js b/.vercel/output/static/src/js/header.js
new file mode 100644
index 00000000..fe13c4ed
--- /dev/null
+++ b/.vercel/output/static/src/js/header.js
@@ -0,0 +1,22 @@
+let header = document.querySelector('[header]');
+let newElement = document.createElement('div');
+let page = header.getAttribute('page');
+
+// console.log(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="/ghrepos" id="btnGhRepo" style="text-decoration: unset">Github Repos</a>
+			<a href="/about" id="btnAbout" style="text-decoration: unset">About</a>
+		</div>
+	</nav> 
+</header>
+`;
+
+header.appendChild(newElement);
+document.getElementById("btn"+page).setAttribute('class', 'active');
diff --git a/.vercel/output/static/src/js/index.js b/.vercel/output/static/src/js/index.js
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/.vercel/output/static/src/js/index.js
diff --git a/.vercel/output/static/src/js/rbg.js b/.vercel/output/static/src/js/rbg.js
new file mode 100644
index 00000000..fa6b11a6
--- /dev/null
+++ b/.vercel/output/static/src/js/rbg.js
@@ -0,0 +1,41 @@
+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;
+}
+
+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()}),
+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()}),
+linear-gradient(${Math.floor(
+	Math.random() * 180
+	)}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}),
+linear-gradient(${Math.floor(
+	Math.random() * 180
+	)}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
+}
+}
+
+setRandomGradient();
+
+// Execute setRandomGradient() every 1 minute
+setInterval(setRandomGradient, 60000);
diff --git a/.vercel/output/static/src/js/tilt.conf.js b/.vercel/output/static/src/js/tilt.conf.js
new file mode 100644
index 00000000..c4c890f3
--- /dev/null
+++ b/.vercel/output/static/src/js/tilt.conf.js
@@ -0,0 +1,6 @@
+VanillaTilt.init(document.querySelectorAll(".tilt"),{
+  glare: true,
+  reverse: true,
+  "max-glare": 0.1,
+  reset: false,
+})
diff --git a/.vercel/output/static/src/js/tilt.conf.noglare.js b/.vercel/output/static/src/js/tilt.conf.noglare.js
new file mode 100644
index 00000000..e725a66d
--- /dev/null
+++ b/.vercel/output/static/src/js/tilt.conf.noglare.js
@@ -0,0 +1,5 @@
+VanillaTilt.init(document.querySelectorAll(".tilt"),{
+  reverse: true,
+  glare: false,
+  reset: false,
+})
diff --git a/.vercel/output/static/src/js/tilt.js b/.vercel/output/static/src/js/tilt.js
new file mode 100644
index 00000000..49cbf370
--- /dev/null
+++ b/.vercel/output/static/src/js/tilt.js
@@ -0,0 +1 @@
+var VanillaTilt=function(){"use strict";var t=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},e=function(){function e(i){var s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(t(this,e),!(i instanceof Node))throw"Can't initialize VanillaTilt because "+i+" is not a Node.";this.width=null,this.height=null,this.clientWidth=null,this.clientHeight=null,this.left=null,this.top=null,this.gammazero=null,this.betazero=null,this.lastgammazero=null,this.lastbetazero=null,this.transitionTimeout=null,this.updateCall=null,this.event=null,this.updateBind=this.update.bind(this),this.resetBind=this.reset.bind(this),this.element=i,this.settings=this.extendSettings(s),this.reverse=this.settings.reverse?-1:1,this.resetToStart=e.isSettingTrue(this.settings["reset-to-start"]),this.glare=e.isSettingTrue(this.settings.glare),this.glarePrerender=e.isSettingTrue(this.settings["glare-prerender"]),this.fullPageListening=e.isSettingTrue(this.settings["full-page-listening"]),this.gyroscope=e.isSettingTrue(this.settings.gyroscope),this.gyroscopeSamples=this.settings.gyroscopeSamples,this.elementListener=this.getElementListener(),this.glare&&this.prepareGlare(),this.fullPageListening&&this.updateClientSize(),this.addEventListeners(),this.reset(),!1===this.resetToStart&&(this.settings.startX=0,this.settings.startY=0)}return e.isSettingTrue=function(t){return""===t||!0===t||1===t},e.prototype.getElementListener=function(){if(this.fullPageListening)return window.document;if("string"==typeof this.settings["mouse-event-element"]){var t=document.querySelector(this.settings["mouse-event-element"]);if(t)return t}return this.settings["mouse-event-element"]instanceof Node?this.settings["mouse-event-element"]:this.element},e.prototype.addEventListeners=function(){this.onMouseEnterBind=this.onMouseEnter.bind(this),this.onMouseMoveBind=this.onMouseMove.bind(this),this.onMouseLeaveBind=this.onMouseLeave.bind(this),this.onWindowResizeBind=this.onWindowResize.bind(this),this.onDeviceOrientationBind=this.onDeviceOrientation.bind(this),this.elementListener.addEventListener("mouseenter",this.onMouseEnterBind),this.elementListener.addEventListener("mouseleave",this.onMouseLeaveBind),this.elementListener.addEventListener("mousemove",this.onMouseMoveBind),(this.glare||this.fullPageListening)&&window.addEventListener("resize",this.onWindowResizeBind),this.gyroscope&&window.addEventListener("deviceorientation",this.onDeviceOrientationBind)},e.prototype.removeEventListeners=function(){this.elementListener.removeEventListener("mouseenter",this.onMouseEnterBind),this.elementListener.removeEventListener("mouseleave",this.onMouseLeaveBind),this.elementListener.removeEventListener("mousemove",this.onMouseMoveBind),this.gyroscope&&window.removeEventListener("deviceorientation",this.onDeviceOrientationBind),(this.glare||this.fullPageListening)&&window.removeEventListener("resize",this.onWindowResizeBind)},e.prototype.destroy=function(){clearTimeout(this.transitionTimeout),null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.element.style.willChange="",this.element.style.transition="",this.element.style.transform="",this.resetGlare(),this.removeEventListeners(),this.element.vanillaTilt=null,delete this.element.vanillaTilt,this.element=null},e.prototype.onDeviceOrientation=function(t){if(null!==t.gamma&&null!==t.beta){this.updateElementPosition(),this.gyroscopeSamples>0&&(this.lastgammazero=this.gammazero,this.lastbetazero=this.betazero,null===this.gammazero?(this.gammazero=t.gamma,this.betazero=t.beta):(this.gammazero=(t.gamma+this.lastgammazero)/2,this.betazero=(t.beta+this.lastbetazero)/2),this.gyroscopeSamples-=1);var e=this.settings.gyroscopeMaxAngleX-this.settings.gyroscopeMinAngleX,i=this.settings.gyroscopeMaxAngleY-this.settings.gyroscopeMinAngleY,s=e/this.width,n=i/this.height,a=(t.gamma-(this.settings.gyroscopeMinAngleX+this.gammazero))/s,l=(t.beta-(this.settings.gyroscopeMinAngleY+this.betazero))/n;null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event={clientX:a+this.left,clientY:l+this.top},this.updateCall=requestAnimationFrame(this.updateBind)}},e.prototype.onMouseEnter=function(){this.updateElementPosition(),this.element.style.willChange="transform",this.setTransition()},e.prototype.onMouseMove=function(t){null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event=t,this.updateCall=requestAnimationFrame(this.updateBind)},e.prototype.onMouseLeave=function(){this.setTransition(),this.settings.reset&&requestAnimationFrame(this.resetBind)},e.prototype.reset=function(){this.onMouseEnter(),this.fullPageListening?this.event={clientX:(this.settings.startX+this.settings.max)/(2*this.settings.max)*this.clientWidth,clientY:(this.settings.startY+this.settings.max)/(2*this.settings.max)*this.clientHeight}:this.event={clientX:this.left+(this.settings.startX+this.settings.max)/(2*this.settings.max)*this.width,clientY:this.top+(this.settings.startY+this.settings.max)/(2*this.settings.max)*this.height};var t=this.settings.scale;this.settings.scale=1,this.update(),this.settings.scale=t,this.resetGlare()},e.prototype.resetGlare=function(){this.glare&&(this.glareElement.style.transform="rotate(180deg) translate(-50%, -50%)",this.glareElement.style.opacity="0")},e.prototype.getValues=function(){var t=void 0,e=void 0;return this.fullPageListening?(t=this.event.clientX/this.clientWidth,e=this.event.clientY/this.clientHeight):(t=(this.event.clientX-this.left)/this.width,e=(this.event.clientY-this.top)/this.height),t=Math.min(Math.max(t,0),1),e=Math.min(Math.max(e,0),1),{tiltX:(this.reverse*(this.settings.max-t*this.settings.max*2)).toFixed(2),tiltY:(this.reverse*(e*this.settings.max*2-this.settings.max)).toFixed(2),percentageX:100*t,percentageY:100*e,angle:Math.atan2(this.event.clientX-(this.left+this.width/2),-(this.event.clientY-(this.top+this.height/2)))*(180/Math.PI)}},e.prototype.updateElementPosition=function(){var t=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=t.left,this.top=t.top},e.prototype.update=function(){var t=this.getValues();this.element.style.transform="perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.axis?0:t.tiltY)+"deg) rotateY("+("y"===this.settings.axis?0:t.tiltX)+"deg) scale3d("+this.settings.scale+", "+this.settings.scale+", "+this.settings.scale+")",this.glare&&(this.glareElement.style.transform="rotate("+t.angle+"deg) translate(-50%, -50%)",this.glareElement.style.opacity=""+t.percentageY*this.settings["max-glare"]/100),this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:t})),this.updateCall=null},e.prototype.prepareGlare=function(){if(!this.glarePrerender){var t=document.createElement("div");t.classList.add("js-tilt-glare");var e=document.createElement("div");e.classList.add("js-tilt-glare-inner"),t.appendChild(e),this.element.appendChild(t)}this.glareElementWrapper=this.element.querySelector(".js-tilt-glare"),this.glareElement=this.element.querySelector(".js-tilt-glare-inner"),this.glarePrerender||(Object.assign(this.glareElementWrapper.style,{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",overflow:"hidden","pointer-events":"none","border-radius":"inherit"}),Object.assign(this.glareElement.style,{position:"absolute",top:"50%",left:"50%","pointer-events":"none","background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",transform:"rotate(180deg) translate(-50%, -50%)","transform-origin":"0% 0%",opacity:"0"}),this.updateGlareSize())},e.prototype.updateGlareSize=function(){if(this.glare){var t=2*(this.element.offsetWidth>this.element.offsetHeight?this.element.offsetWidth:this.element.offsetHeight);Object.assign(this.glareElement.style,{width:t+"px",height:t+"px"})}},e.prototype.updateClientSize=function(){this.clientWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,this.clientHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},e.prototype.onWindowResize=function(){this.updateGlareSize(),this.updateClientSize()},e.prototype.setTransition=function(){var t=this;clearTimeout(this.transitionTimeout),this.element.style.transition=this.settings.speed+"ms "+this.settings.easing,this.glare&&(this.glareElement.style.transition="opacity "+this.settings.speed+"ms "+this.settings.easing),this.transitionTimeout=setTimeout(function(){t.element.style.transition="",t.glare&&(t.glareElement.style.transition="")},this.settings.speed)},e.prototype.extendSettings=function(t){var e={reverse:!1,max:15,startX:0,startY:0,perspective:1e3,easing:"cubic-bezier(.03,.98,.52,.99)",scale:1,speed:300,transition:!0,axis:null,glare:!1,"max-glare":1,"glare-prerender":!1,"full-page-listening":!1,"mouse-event-element":null,reset:!0,"reset-to-start":!0,gyroscope:!0,gyroscopeMinAngleX:-45,gyroscopeMaxAngleX:45,gyroscopeMinAngleY:-45,gyroscopeMaxAngleY:45,gyroscopeSamples:10},i={};for(var s in e)if(s in t)i[s]=t[s];else if(this.element.hasAttribute("data-tilt-"+s)){var n=this.element.getAttribute("data-tilt-"+s);try{i[s]=JSON.parse(n)}catch(t){i[s]=n}}else i[s]=e[s];return i},e.init=function(t,i){t instanceof Node&&(t=[t]),t instanceof NodeList&&(t=[].slice.call(t)),t instanceof Array&&t.forEach(function(t){"vanillaTilt"in t||(t.vanillaTilt=new e(t,i))})},e}();return"undefined"!=typeof document&&(window.VanillaTilt=e,e.init(document.querySelectorAll("[data-tilt]"))),e}();
diff --git a/.vercel/output/static/tmp/.htmltest/htmltest.log b/.vercel/output/static/tmp/.htmltest/htmltest.log
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/.vercel/output/static/tmp/.htmltest/htmltest.log
diff --git a/.vercel/output/static/tmp/.htmltest/refcache.json b/.vercel/output/static/tmp/.htmltest/refcache.json
new file mode 100644
index 00000000..3f2b0ec8
--- /dev/null
+++ b/.vercel/output/static/tmp/.htmltest/refcache.json
@@ -0,0 +1 @@
+{"https://avatars.githubusercontent.com/u/97672521":{"StatusCode":206,"LastSeen":"2023-10-05T19:03:42.583545+08:00"},"https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css":{"StatusCode":206,"LastSeen":"2023-10-03T16:37:13.229451+08:00"}}
diff --git a/.vercel/output/static/vercel.json b/.vercel/output/static/vercel.json
new file mode 100644
index 00000000..94b5edf4
--- /dev/null
+++ b/.vercel/output/static/vercel.json
@@ -0,0 +1,11 @@
+{
+	"rewrites": [
+	{
+		"source": "/ghrepos",
+		"destination": "/pages/repo/github/repos.html"
+	},
+	{
+		"source": "/about",
+		"destination": "/pages/info/about.html"
+	}]
+}
\ No newline at end of file