new image

6 files changed, 114 insertions, 33 deletions

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,
 })