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