3 files changed, 116 insertions, 33 deletions

diff --git a/src/css/about.css b/src/css/about.css
index 81769118..0cb28985 100644
--- a/src/css/about.css
+++ b/src/css/about.css
@@ -2,8 +2,60 @@
 /*    */
 /* } */
 
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+.left {
+    width: 50%;
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    margin: auto;
+    justify-content: center;
+    /* background-color: #f1f1f1; */
+}
+
+.left img {
+    max-width: 100%;
+    height: auto;
+}
+
+.right {
+    flex: 1;
+    padding: 20px;
+}
+
+.info {
+    margin-bottom: 20px;
+}
+
+.info h2 {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.info p {
+    font-size: 16px;
+    margin: 0;
+}
+
+
 .name {
   font-family: smooth;
   font-size: 5vw;
 
 }
+
+.background {
+    width: 100%;
+  height: 100vh;
+}
diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css
index 772cfe08..64903e87 100644
--- a/src/css/ghrepo.css
+++ b/src/css/ghrepo.css
@@ -38,7 +38,7 @@ main {
 }
 
 .bgWrap {
-      overflow: hidden;
+    overflow: hidden;
     top: 0;
     left: 0;
     margin: 0;
@@ -117,12 +117,6 @@ a {
     -webkit-transition: background 0.5s
 }
 
-a:hover {
-    /* color: var(--text); */
-    background: rgba(0, 0, 0, 0.1);
-    transition: background 0.5s
-}
-
 .github-img {
     width: 45px;
     margin-right: 8px;
@@ -181,6 +175,12 @@ ul {
     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);
@@ -239,7 +239,7 @@ input:active,
   transition: all 0.5s;
 }
 
-h3 {
+.repo-title {
     margin: 4px;
     width: 100%;
     text-align: center;
@@ -282,14 +282,19 @@ h3 {
 .repo-list li:hover {
     /* box-shadow: 0 3px 6px var(--accent), 0 3px 6px var(--accent); */
     background: rgba(0, 0, 0, 0.5);
-    transform: scale(1.1);
+    transform: scale(1.05);
     transition: background 0.5s, transform 1s, all 0.3s
 }
 
-.repo-list:hover .repo:not(:hover) {
+.repo-list:hover li:not(:hover) {
+    /* background: rgba(0, 0, 0, 0.3); */
     background: rgba(0, 0, 0, 0.3);
-    transition: all 1s
+    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); */
@@ -345,11 +350,15 @@ h3 {
     }
 
     .repo-list {
-        justify-content: space-between;
+        justify-content: space-around;
     }
 
     .repo-list li {
         width: 48%;
+        margin-right: 1.5%;
+        margin-left: 1.5%;
+        margin-top: 2%;
+        margin-bottom: 2%;
     }
 }
 
diff --git a/src/css/style.css b/src/css/style.css
index 2e14ee6c..3f9236bf 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -28,6 +28,11 @@
     font-family: rocksalt;
     src: url(/fonts/RockSalt-Regular.ttf);
 }
+
+@font-face {
+  font-family: audiowide;
+  src: url(/fonts/audiowide.ttf);
+}
 /* page setup ============================================= */
 
 * {
@@ -101,8 +106,16 @@ body::-webkit-scrollbar {
     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); }
+}
 /* animation: name duration timing-function delay iteration-count direction fill-mode; */
 
 
@@ -135,6 +148,8 @@ body::-webkit-scrollbar {
   animation-duration: 1s;
 }
 
+/* real utility classes */
+
 .animate.slideInTop {
   animation-name: slideInTop;
   animation-timing-function: ease-in;
@@ -159,14 +174,15 @@ body::-webkit-scrollbar {
   animation-name: reveal;
 }
 
+.animate.shake {
+  animation-name: shake
+}
+
 /* transition */
 * {
   transition: all 0.3s; 
 }
 
-*:hover {
-  transition: all 0.3s
-}
 
 .js-tilt-glare {
   border-radius: 18px;
@@ -176,7 +192,7 @@ body::-webkit-scrollbar {
 /* topbar styles ========================================== */
 
 header {
-    position:fixed;
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
@@ -203,8 +219,8 @@ header {
     color: #F4E8C1;
 }
 
-.navBar .left a {float: left;}
-.navBar .right a {float: right;}
+.navBar .hleft a {float: left;}
+.navBar .hright a {float: right;}
 
 .navBar a::after {
     content: '';
@@ -282,19 +298,25 @@ section {
   perspective: 10px;
 }
 
-.slowScroll
-  transform: translateZ(-10px) scale(2);
-}
-
-.fastScroll {
-  transform: translateZ(-5px) scale(1.5);
-}
-
-.slowScroll,
-.fastScroll {
-  position: absolute;
-  /* height: 100%; */
-  /* width: 100%; */
-  object-fit: cover;
-  z-index: -1;
+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; */
 }