new image

12 files changed, 148 insertions, 45 deletions

diff --git a/.gitignore b/.gitignore
index 43e52ccd..556e0028 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 .DS_Store
 .tmp/**
+.vercel
diff --git a/images/cave.jpg b/images/cave.jpg
new file mode 100644
index 00000000..957ef00a
--- /dev/null
+++ b/images/cave.jpg
diff --git a/index.html b/index.html
index 886cba46..c1a6c990 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,9 @@
     <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 name="author" content="littleblack111">
         <title>littleblack111</title>
         <link rel="stylesheet" href="/src/css/style.css">
         <link rel="stylesheet" href="/src/css/index.css">
diff --git a/launch.sh b/launch.sh
index 9b02a8ea..d14f143a 100755
--- a/launch.sh
+++ b/launch.sh
@@ -1,9 +1,27 @@
-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
-printf '\033[0;32mNpx Server Starting...\033[0m\n'
-
-exec npx serve -d -p 209 #| npx gnomon;
+function selfcheck() {
+  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 start() {
+  printf '\033[0;32mNpx Server Starting...\033[0m\n'
+  exec npx serve -d -p 209 #| npx gnomon;
+}
+
+function main() {
+  selfcheck
+  start
+}
+
+if [ "$1" ]; then
+  $@
+  exit 0
+fi
+
+main
+
+
diff --git a/pages/info/about.html b/pages/info/about.html
index 89d0c75b..3278eb09 100644
--- a/pages/info/about.html
+++ b/pages/info/about.html
@@ -15,7 +15,7 @@
       <!-- main page -->
       <section class="aboutPage">
         <div class="pp">
-          <img src="/images/self.jpg" alt="Me">
+          <img src="/images/self.jpg" alt="Me" loading="lazy">
         </div>
         <div class="name">
           <strong>littleblack111</strong>
diff --git a/pages/repo/github/repos.html b/pages/repo/github/repos.html
index 575f0cf4..b4d239b8 100644
--- a/pages/repo/github/repos.html
+++ b/pages/repo/github/repos.html
@@ -21,7 +21,6 @@
 
     <!-- main Github Functions -->
     <main class="container tilt">
-        <h1>All Of My Projects</h1>
         <section class="intro">
             <div class="user-info animate animation--fast slideInTop"></div>
         </section>
@@ -32,7 +31,8 @@
 
         <section class="repos">
             <input type="text" class="filter-repos animate animate--slow slideInTop hide" placeholder="Search Projects" />
-            <ul class="repo-list animate slideInTop tilt"></ul>
+            <div class="loader"></div>
+            <ul class="repo-list animate slideInTop tilt", id="repo-list"></ul>
         </section>
     </main>
     <script src="/src/js/tilt.js" />
diff --git a/src/css/about.css b/src/css/about.css
index 580d5f40..81769118 100644
--- a/src/css/about.css
+++ b/src/css/about.css
@@ -5,5 +5,5 @@
 .name {
   font-family: smooth;
   font-size: 5vw;
-  
+
 }
diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css
index 87a2da6a..7f47c825 100644
--- a/src/css/ghrepo.css
+++ b/src/css/ghrepo.css
@@ -1,22 +1,22 @@
-@media (prefers-color-scheme: light) {
-    :root {
-        --text: #151515;
-        --accent: #1688f0;
-        --bg-main: #fff;
-        --bg-repo: #f0f0f0;
-        --bg-user: #f5f5f5;
+/* @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;
     }
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --text: #e5e5e5;
-        --accent: #1688f0;
-        --bg-main: #000;
-        --bg-repo: #0f0f1a;
-        --bg-user: #0a0a0f;
-    }
-}
+/* } */
 
 * {
     box-sizing: border-box;
@@ -95,10 +95,15 @@ img {
     box-shadow: 0 0 10mm rgba(0,0,0,.7);
 }
 
+img:hover {
+  transform: scale(1.1);
+}
+
 a {
     background: transparent;
     color: var(--accent);
     text-decoration: none;
+    -webkit-transition: background 0.5s
 }
 
 a:hover {
@@ -161,6 +166,10 @@ ul {
     background: transparent;
 }
 
+.user-info *:hover {
+    transform: scale(1.1);
+}
+
 .filter-repos,
 input {
     background: rgba(10, 10, 15, 0.3);
@@ -173,11 +182,29 @@ input {
     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: background 0.5s
+  /* 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);
+}
+
+input:active,
+.filter-repos:active {
+  background: rgba(244, 232, 193, 0.5);
 }
 
 .repos {
@@ -197,6 +224,13 @@ input {
     /* 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;
+}
+
 h3 {
     margin: 4px;
     width: 100%;
@@ -225,6 +259,7 @@ h3 {
     background: transparent;
     -webkit-backdrop-filter: blur(20px);
     backdrop-filter: blur(20px);
+    -webkit-transition: all 0.5s
     /* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
     /* background: rgba(128, 128, 128, 0.1); */
 }
@@ -236,9 +271,14 @@ h3 {
 .repo-list li:hover {
     /* box-shadow: 0 3px 6px var(--accent), 0 3px 6px var(--accent); */
     background: rgba(0, 0, 0, 0.5);
-    transition: background 0.5s
+    transform: scale(1.1);
+    transition: background 0.5s, transform 1s, all 0.3s
 }
 
+.repo-list:hover .repo:not(:hover) {
+    background: rgba(0, 0, 0, 0.3);
+    transition: all 1s
+}
 .link-btn {
     padding: 10px 20px;
     /* background: var(--bg-main); */
@@ -247,13 +287,14 @@ h3 {
     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.3s, border 0.5s;
+    transition: background 0.5s, transform 0.5s, border 0.5s, all 0.5s;
 }
 
 .repo-list p {
@@ -262,13 +303,20 @@ h3 {
     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); */
-
 }
 
 @media (min-width: 700px) {
diff --git a/src/css/index.css b/src/css/index.css
index a305a2e4..a7fb6205 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -44,6 +44,12 @@
     text-align: center;
 }
 
+.window:hover,
+.placeholder:hover {
+  transform: scale(1.1);
+  transition: all 0.3s
+}
+
 .window .placeholder .text {
     position: relative;
     width: 100%;
@@ -60,6 +66,12 @@
 
 .title {
   text-shadow: 15px 15px 15px black;
+  transition: all 0.5s
+}
+
+.title:hover {
+  transform: scale(1.1);
+  transition: all 0.5s
 }
 
 .window .placeholder .text .br {
diff --git a/src/css/style.css b/src/css/style.css
index a4e608fb..d9bf3c56 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -97,6 +97,10 @@ body {
 }
 
 /* transition */
+* {
+  transition: all 0.3s; 
+}
+
 *:hover {
   transition: all 0.3s
 }
@@ -117,7 +121,7 @@ header {
     align-items:center;
     /* background: color(0, 0, 0, .1); */
     z-index: 1000;
-    background-color: #331E38;
+    background: rgba(128, 128, 128, 0.2)
 }
 
 .navBar a {
@@ -144,19 +148,21 @@ header {
     bottom: 0;
     width: 100%;
     height: 1mm;
-    background: #F4E8C1;
+    background: rgba(128, 128, 128, 0.2);
     border-radius: 1mm;
     transform: scaleX(0);
-    transition: transform 0.3s;
+    transition: all 0.3s;
 }
 
 .navBar a:hover::after {
-    transform: scaleX(1);
+    transform: scaleX(1.1);
 }
 
 .navBar a:hover {
   background: rgba(255, 255, 255, 0.2);
-  transition: background 1s
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
+  transition: all 1s
 }
 
 .navBar a.active::after {
@@ -171,6 +177,19 @@ header {
     transform: scaleX(1);
 }
 
+.navBar:active,
+.navBar:hover,
+header:active,
+header:hover,
+#navBarHeader:hover,
+#navBarHeader:active
+{
+  transform: scale(1.005);
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
+  transition: all 0.5s
+}
+
 /* other ================================================== */
 
 .contents {
diff --git a/src/js/getrepo.js b/src/js/getrepo.js
index 4c92b9c3..36c11df6 100644
--- a/src/js/getrepo.js
+++ b/src/js/getrepo.js
@@ -28,10 +28,12 @@ const displayProfile = (profile) => {
     const userInfo = document.querySelector('.user-info');
     userInfo.innerHTML = `
         <figure>
-            <img alt="user avatar" src=${profile.avatar_url} />
+            <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=${profile.blog}><strong>${profile.name}</strong></a></h2> -->
+            <h2><a href=/><strong>${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}
diff --git a/src/js/tilt.conf.js b/src/js/tilt.conf.js
index d0ef14ad..e98c8d70 100644
--- a/src/js/tilt.conf.js
+++ b/src/js/tilt.conf.js
@@ -1,5 +1,5 @@
 VanillaTilt.init(document.querySelectorAll(".tilt"),{
   glare: true,
-  reverse: true,
-  "max-glare": 0.5,
+  // reverse: true,
+  "max-glare": 0.1,
 })