updated parrlax effect and added hacktype to ghrepo title

Re-designed home page background to show random blob

11 files changed, 461 insertions, 304 deletions

diff --git a/dest/css/ghrepo.css b/dest/css/ghrepo.css
index 129948be..8cce4dab 100644
--- a/dest/css/ghrepo.css
+++ b/dest/css/ghrepo.css
@@ -1 +1 @@
-html{--text:#e5e5e5;--accent:#1688f0;--bg-main:#000;--bg-repo:#0f0f1a;--bg-user:#0a0a0f;--purple:#7b1fa2;--violet:#673ab7;--pink:#f48fb1;--light-yellow:#ffc;--pale-yellow:#ff9;--lemon-yellow:#fffacd}*{background:transparent;box-sizing:border-box}body{font-family:Open Sans,sans-serif;margin:(3em) 0 0}main{margin-top:3em}.bgWrap{background-color:#303c64;background-image:url(/images/heigh-grass.jpg),url(/images/heigh-grass.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;color:#f4e8c1;font-size:16px;height:100%;left:0;margin:0;overflow:hidden;padding:0;top:0;width:100%;z-index:-1}.bgWrap,.container{align-items:center;display:flex;justify-content:center}.container{flex-direction:row;flex-wrap:wrap;max-width:1280px;position:center;width:90%}.container small,h1{background:transparent}.hide{display:none!important}h1{color:var(--accent);margin-bottom:4px}small{display:block;margin-bottom:20px}h2,small{text-align:center;width:100%}h2{color:var(--text);margin:0}a{background:transparent;color:var(--accent);text-decoration:none;-webkit-transition:background .5s;transition:background .5s}.github-img{margin-right:8px;width:45px}ul{list-style:none;padding:0}.user-info,.user-info *{background:transparent}.user-info{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:16px;color:var(--text);display:flex;flex-wrap:wrap;font-size:18px;justify-content:center;padding:2em}.user-info figure{background:transparent;max-width:250px;width:90%}.user-info img{border:2px solid var(--accent);border-radius:100%;box-shadow:0 0 6px var(--accent),0 0 6px var(--accent);box-shadow:0 0 10mm rgba(0,0,0,.7);height:auto;max-width:100%;transition:all .3s}.user-info img:hover{border-radius:5%;transition:all .3s}.user-info img:hover{box-shadow:0 0 100mm rgba(255,238,16,.7);transform:scale(1.1)}.user-info div{align-items:center;display:flex;flex-wrap:wrap;padding-left:5%;text-align:center;width:100%}.user-info div p{background:transparent;border-bottom:1px solid var(--text);margin:0;padding:0 0 18px;width:100%}.user-info :hover{transform:scale(1.1);transition:transform .3s}.user-info .usertitle{font-family:audiowide;font-size:2vw;text-transform:uppercase}.filter-repos,input{background:#0a0a0f;background:rgba(10,10,15,.3);border:2px solid var(--accent);border-radius:20px;box-shadow:0 0 10mm rgba(0,0,0,.7);margin-bottom:1em;margin-top:1em;min-width:300px;padding:1em;text-align:center;-webkit-transition:all .5s;transition:all .5s;width:50%}.filter-repos:hover,input:hover{-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 .5s}.filter-repos:active,input:active{background:#f4e8c1;background:hsla(46,70%,86%,.3);box-shadow:0 0 10mm rgba(0,0,0,.7)}.repos{background:grey;background:hsla(0,0%,50%,.2);border-radius:16px;display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:4em;margin-top:0;padding:2em}.repos:hover{background:#000;background:rgba(0,0,0,.3);box-shadow:0 0 10mm rgba(0,0,0,.7);box-shadow:0 0 20mm hsla(0,0%,50%,.7);transform:scale(1.01);transition:all .5s}.repo-title{color:var(--accent);font-weight:700;margin:4px;text-align:center;width:100%}.repo-list{align-items:flex-start;display:flex;flex-wrap:wrap;justify-content:center;scroll-snap-type:y mandatory}.repo-list,.repo-list li{background:transparent;width:100%}.repo-list li{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--accent);border-radius:16px;margin:1em 0;min-height:180px;padding:1em;scroll-snap-align:center;text-align:center;-webkit-transition:all .5s;transition:all .5s}.repo-list h3,span{background:transparent}.repo:hover{background:#000;background:rgba(0,0,0,.5);border-radius:10px;box-shadow:0 0 50mm rgba(255,238,16,.7);transform:scale(1.05);transition:background .5s,transform 1s,boarder 1.5s,all .3s}.repo-list:hover:has(li:hover) li:not(:hover){animation-duration:.5s;background:#000;background:rgba(0,0,0,.3);transform:scale(.95);transition:background .5s,transform 1s,all .3s}.link-btn{background:grey;background:hsla(0,0%,50%,.1);border:2px solid var(--accent);border-radius:30px;color:var(--text);padding:10px 20px;-webkit-transition:background .5s,transform .5s,border .5s,all .5s;transition:background .5s,transform .5s,border .5,all .3s}.link-btn:hover{background:#1688f0;background:rgba(22,136,240,.5);border:2px solid var(--text);border-radius:16px;box-shadow:0 0 50mm rgba(0,156,255,.7);transform:scale(1.1);-webkit-transition:background .5s,transform .5s,border .5s,all .5s;transition:background .5s,transform .5s,border .5s,all .5s}.repo-list p{background:transparent;margin:.5em 0;padding:0 .5em}.intro:hover,.user-info:hover{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:scale(1.1);transition:all .5s}.user-info{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:grey;background:hsla(0,0%,50%,.2)}.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{-webkit-box-orient:vertical;-webkit-line-clamp:3;display:-webkit-box;overflow:hidden}.rdescription:hover{-webkit-line-clamp:unset}@media (min-width:700px){.user-info div{background:transparent;text-align:left;width:45%}.user-info div p{margin:10px}.repo-list{justify-content:space-around}.repo-list li{margin:2% 1.5%;width:48%}}@media (min-width:1200px){.repo-list li{width:30%}}
\ No newline at end of file
+html{--text:#e5e5e5;--accent:#1688f0;--bg-main:#000;--bg-repo:#0f0f1a;--bg-user:#0a0a0f;--purple:#7b1fa2;--violet:#673ab7;--pink:#f48fb1;--light-yellow:#ffc;--pale-yellow:#ff9;--lemon-yellow:#fffacd}*{background:transparent;box-sizing:border-box}div,p,span{transition:all .3s}body{font-family:Open Sans,sans-serif;margin:(3em) 0 0}main{margin-top:3em}.bgWrap{background-color:#303c64;background-image:url(/images/heigh-grass.jpg),url(/images/heigh-grass.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;color:#f4e8c1;font-size:16px;height:100%;left:0;margin:0;overflow:hidden;padding:0;top:0;width:100%;z-index:-1}.bgWrap,.container{align-items:center;display:flex;justify-content:center}.container{flex-direction:row;flex-wrap:wrap;max-width:1280px;position:center;width:90%}.container small,h1{background:transparent}.hide{display:none!important}h1{color:var(--accent);margin-bottom:4px}small{display:block;margin-bottom:20px}h2,small{text-align:center;width:100%}h2{color:var(--text);margin:0}a{background:transparent;color:var(--accent);text-decoration:none;-webkit-transition:background .5s;transition:background .5s}.github-img{margin-right:8px;width:45px}ul{list-style:none;padding:0}.user-info,.user-info *{background:transparent}.user-info{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:16px;color:var(--text);display:flex;flex-wrap:wrap;font-size:18px;justify-content:center;padding:2em}.user-info figure{background:transparent;max-width:250px;width:90%}.user-info img{border:2px solid var(--accent);border-radius:100%;box-shadow:0 0 6px var(--accent),0 0 6px var(--accent);box-shadow:0 0 10mm rgba(0,0,0,.7);height:auto;max-width:100%;transition:all .3s}.user-info img:hover{border-radius:5%;transition:all .3s}.user-info img:hover{box-shadow:0 0 100mm rgba(255,238,16,.7);transform:scale(1.1)}.user-info div{align-items:center;display:flex;flex-wrap:wrap;padding-left:5%;text-align:center;width:100%}.user-info div p{background:transparent;border-bottom:1px solid var(--text);margin:0;padding:0 0 18px;width:100%}.user-info :hover{transform:scale(1.1);transition:transform .3s}.user-info .usertitle{font-family:audiowide;font-size:2vw;text-transform:uppercase}.filter-repos,input{background:#0a0a0f;background:rgba(10,10,15,.3);border:2px solid var(--accent);border-radius:20px;box-shadow:0 0 10mm rgba(0,0,0,.7);margin-bottom:1em;margin-top:1em;min-width:300px;padding:1em;text-align:center;-webkit-transition:all .5s;transition:all .5s;width:50%}.filter-repos:hover,input:hover{-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 .5s}.filter-repos:active,input:active{background:#f4e8c1;background:hsla(46,70%,86%,.3);box-shadow:0 0 10mm rgba(0,0,0,.7)}.repos{background:grey;background:hsla(0,0%,50%,.2);border-radius:16px;display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:4em;margin-top:0;padding:2em;transition:all .3s}.repos:hover{background:#000;background:rgba(0,0,0,.3);transition:all .5s}.repo-title{color:var(--accent);font-weight:700;margin:4px;text-align:center;width:100%}.repo-list{align-items:flex-start;display:flex;flex-wrap:wrap;justify-content:center;scroll-snap-type:y mandatory}.repo-list,.repo-list li{background:transparent;width:100%}.repo-list li{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--accent);border-radius:16px;margin:1em 0;min-height:180px;padding:1em;scroll-snap-align:center;text-align:center;-webkit-transition:all .5s;transition:all .5s}.repo-list h3,span{background:transparent}.repo:hover{background:#000;background:rgba(0,0,0,.5);border-radius:10px;box-shadow:0 0 50mm rgba(255,238,16,.7);transform:scale(1.05);transition:background .5s,transform 1s,boarder 1.5s,all .3s}.repo-list:hover:has(li:hover) li:not(:hover){animation-duration:.5s;background:#000;background:rgba(0,0,0,.3);transform:scale(.95);transition:background .5s,transform 1s,all .3s}.link-btn{background:grey;background:hsla(0,0%,50%,.1);border:2px solid var(--accent);border-radius:30px;color:var(--text);padding:10px 20px;-webkit-transition:background .5s,transform .5s,border .5s,all .5s;transition:background .5s,transform .5s,border .5,all .3s}.link-btn:hover{background:#1688f0;background:rgba(22,136,240,.5);border:2px solid var(--text);border-radius:16px;box-shadow:0 0 50mm rgba(0,156,255,.7);transform:scale(1.1);-webkit-transition:background .5s,transform .5s,border .5s,all .5s;transition:background .5s,transform .5s,border .5s,all .5s}.repo-list p{background:transparent;margin:.5em 0;padding:0 .5em}.intro:hover,.user-info:hover{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:scale(1.1);transition:all .5s}.intro{perspective:1000px;transform-style:preserve-3d}.user-info{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:grey;background:hsla(0,0%,50%,.2)}.floattext{transform:translateZ(200px)}.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;transition:all .3s}.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{background:transparent;text-align:left;width:45%}.user-info div p{margin:10px}.repo-list{justify-content:space-around}.repo-list li{margin:2% 1.5%;width:48%}}@media (min-width:1200px){.repo-list li{width:30%}}
\ No newline at end of file
diff --git a/dest/css/index.css b/dest/css/index.css
index 82c3443c..4f4c9993 100644
--- a/dest/css/index.css
+++ b/dest/css/index.css
@@ -1 +1 @@
-.wrapper{-ms-overflow-style:none;height:100vh;left:0;overflow-x:hidden;scrollbar-width:none;top:0;width:100%;z-index:-6}.wrapper::-webkit-scrollbar{display:none}.indexPage{background-color:#143555;background-image:url(/images/backgroundNightCity.jpg),url(/images/backgroundNightCity.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;color:#f4e8c1;height:100%;left:0;margin:0;overflow:hidden;padding:0;top:0;width:100%;z-index:-10}.window{background:transparent;height:70%;left:10%;top:15%;width:80%;z-index:999}.window,.window .windowWrap{align-items:center;display:flex;justify-content:center;position:relative}.window .windowWrap{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #fff;border:1px solid hsla(0,0%,100%,.15);border-radius:1em;box-shadow:0 0 10mm #000;height:100%;text-align:center;width:100%;z-index:11}.window:hover,.windowWrap:hover{transform:scale(1.1);-webkit-transition:all .3s;transition:all .3s}.window .windowWrap .text{position:relative;text-align:center;text-shadow:10px 10px 10px #000;width:100%}.window .windowWrap .text .title{font-family:monoton;font-size:7vw;text-transform:uppercase}.description{font-family:rocksalt;font-size:1.75vw}.title{text-shadow:15px 15px 15px #000;-webkit-transition:all .5s;transition:all .5s}.title:hover{transform:scale(1.1);-webkit-transition:all .5s;transition:all .5s}.window .windowWrap .text .br{display:block;height:0;margin-bottom:5vh;width:0}
\ No newline at end of file
+.wrapper{height:100vh;left:0;overflow-x:hidden;top:0;width:100%;-ms-overflow-style:none;scrollbar-width:none;z-index:-6}.wrapper::-webkit-scrollbar{display:none}.indexPage{background-color:#05010d;background-position:50%;background-repeat:no-repeat;background-size:cover;color:#f4e8c1;height:100%;left:0;margin:0;overflow:hidden;padding:0;top:0;width:100%;z-index:-10}.window{background:transparent;height:70%;left:10%;top:15%;width:80%;z-index:999}.window,.window .windowWrap{align-items:center;display:flex;justify-content:center;position:relative}.window .windowWrap{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #fff;border-radius:1em;box-shadow:0 0 10mm #000;height:100%;text-align:center;width:100%;z-index:11}.window .windowWrap .text{position:relative;text-align:center;width:100%}.window .windowWrap .text .title{font-family:monoton;font-size:7vw;text-transform:uppercase}.description{font-family:rocksalt;font-size:1.75vw}.title{text-shadow:15px 15px 15px #000;-webkit-transition:all .5s;transition:all .5s}.title:hover{transform:scale(1.1);-webkit-transition:all .5s;transition:all .5s}.window .windowWrap .text .br{display:block;height:0;margin-bottom:5vh;width:0}.text{text-shadow:0 1px 0 #e9e6e6,0 2px 0 #e9e6e6,0 3px 0 #e9e6e6,0 4px 0 #e9e6e6,0 5px 0 #e9e6e6,0 6px 0 #e9e6e6,0 7px 0 #e9e6e6,0 8px 0 #e9e6e6,0 9px 0 #e9e6e6,0 10px 0 #e9e6e6,0 30px 10px rgba(0,0,0,.7);transform:translateZ(200px)}.tilt,.windowWrap{perspective:1000px;transform-style:preserve-3d}
\ No newline at end of file
diff --git a/dest/css/style.css b/dest/css/style.css
index e21ba531..74d0f51e 100644
--- a/dest/css/style.css
+++ b/dest/css/style.css
@@ -1 +1 @@
-html{--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)}*{box-sizing:border-box;font-family:liga;margin:0;padding:0;text-shadow:0 0 1px #000}body{left:0;top:0;transition:background 1s ease-in-out}body::-webkit-scrollbar{display:none}@keyframes slideInTop{0%{transform:translateY(-300px)}to{transform:translateY(0)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(30px)}80%{transform:translateY(-15px)}}@keyframes zoomIn{0%{transform:scale(.01)}85%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes zoomOut{0%{transform:scale(1)}to{transform:scale(.01)}}@keyframes reveal{0%{-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);-webkit-filter:blur(32px);-moz-filter:blur(32px);-o-filter:blur(32px);-ms-filter:blur(32px);filter:blur(32px);transform:scale(2)}}@keyframes shake{0%{transform:rotate(0deg)}25%{transform:rotate(.5deg)}50%{transform:rotate(0eg)}75%{transform:rotate(-.5deg)}to{transform:rotate(0deg)}}@keyframes background-pan{0%{background-position:0}to{background-position:-200%}}.animate{-webkit-animation-duration:.5s;animation-duration:.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{animation-delay:.5s;-webkit-animation-duration:.5s;animation-duration:.5s}.animate.animation--delay-p3s{animation-delay:.3s}.animate.animation--delay-p3s,.animate.animation--fast{-webkit-animation-duration:.3s;animation-duration:.3s}.animate.animation--slow{-webkit-animation-duration:1s;animation-duration:1s}.animate.slideInTop{animation-name:slideInTop;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}.animate.bounce{-webkit-animation-name:bounce;animation-name:bounce}.animate.zoomIn{-webkit-animation-name:reveal;animation-name:zoomIn}.animate.zoomIn,.animate.zoomOut{-webkit-transition-timing-function:linear;transition-timing-function:linear}.animate.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}.animate.reveal{-webkit-animation-name:reveal;animation-name:reveal;-webkit-transition-timing-function:linear;transition-timing-function:linear}.animate.shake{-webkit-animation-name:shake;animation-name:shake}*{-webkit-transition:all .3s;transition:all .3s}.js-tilt-glare{border-radius:18px;overflow:hidden}header{align-items:center;background:grey;background:hsla(0,0%,50%,.2);height:3em;justify-content:space-between;left:0;position:fixed;top:0;width:100%;z-index:1000}.navBar a{border-radius:8px;color:#f4e8c1;font-size:5mm;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;text-decoration:none;text-transform:capitalize}.navBar .hleft a{float:left}.navBar .hright a{float:right}.navBar a:after{background:grey;background:hsla(0,0%,50%,.2);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(0);-webkit-transition:all .3s;transition:all .3s;width:100%}.navBar a:hover:after{transform:scaleX(1.1)}.navBar a:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-transition:all 1s;transition:all 1s}.navBar a.active:after{background:grey;background:hsla(0,0%,50%,.9);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(1);width:100%}#navBarHeader:active,#navBarHeader:hover,.navBar:active,.navBar:hover,header:active,header:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:scale(1.005);transition:all .5s}#navBarHeader,.navBar,header{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}.contents{height:100%;margin:0;padding:0;width:100%}section{position:relative}.wrapper{height:100vh;overflow-x:hidden;overflow-y:auto;perspective:10px}a:hover{cursor:pointer;font-size:5mm;font-weight:700;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;text-decoration:underline;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-decoration-thickness:3px;text-transform:capitalize;text-underline-offset:1px;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition:all .5s;transition:all .5s}
\ No newline at end of file
+html{--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)}*{box-sizing:border-box;font-family:liga;margin:0;padding:0;text-shadow:0 0 1px #000}body{left:0;top:0;transition:background 1s ease-in-out}body::-webkit-scrollbar{display:none}@keyframes slideInTop{0%{transform:translateY(-300px)}to{transform:translateY(0)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(30px)}80%{transform:translateY(-15px)}}@keyframes zoomIn{0%{transform:scale(.01)}85%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes zoomOut{0%{transform:scale(1)}to{transform:scale(.01)}}@keyframes reveal{0%{-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);-webkit-filter:blur(32px);-moz-filter:blur(32px);-o-filter:blur(32px);-ms-filter:blur(32px);filter:blur(32px);transform:scale(2)}}@keyframes shake{0%{transform:rotate(0deg)}25%{transform:rotate(.5deg)}50%{transform:rotate(0eg)}75%{transform:rotate(-.5deg)}to{transform:rotate(0deg)}}@keyframes background-pan{0%{background-position:0}to{background-position:-200%}}@keyframes fadeIn{0%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;scale:.8}to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;scale:1}}@keyframes fadeOut{to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;scale:.8}}.animate{-webkit-animation-duration:.5s;animation-duration:.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{animation-delay:.5s;-webkit-animation-duration:.5s;animation-duration:.5s}.animate.animation--delay-p3s{animation-delay:.3s}.animate.animation--delay-p3s,.animate.animation--fast{-webkit-animation-duration:.3s;animation-duration:.3s}.animate.animation--slow{-webkit-animation-duration:1s;animation-duration:1s}.animate.slideInTop{animation-name:slideInTop;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}.animate.bounce{-webkit-animation-name:bounce;animation-name:bounce}.animate.zoomIn{-webkit-animation-name:reveal;animation-name:zoomIn}.animate.zoomIn,.animate.zoomOut{-webkit-transition-timing-function:linear;transition-timing-function:linear}.animate.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}.animate.reveal{animation-duration:50ms;-webkit-animation-name:reveal;animation-name:reveal;-webkit-transition-timing-function:linear;transition-timing-function:linear}.animate.shake{-webkit-animation-name:shake;animation-name:shake}.js-tilt-glare{border-radius:18px;overflow:hidden}header{align-items:center;background:#000;background:rgba(0,0,0,.2);height:3em;justify-content:space-between;left:0;position:fixed;top:0;transition:all .3s;width:100%;z-index:1000}.navBar a{border-radius:8px;color:#f4e8c1;font-size:5mm;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;text-decoration:none;text-transform:capitalize}.navBar .hleft a{float:left}.navBar .hright a{float:right}.navBar a:after{background:grey;background:hsla(0,0%,50%,.2);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(0);-webkit-transition:all .3s;transition:all .3s;width:100%}.navBar a:hover:after{transform:scaleX(1.1)}.navBar a:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-transition:all 1s;transition:all 1s}.navBar a.active:after{background:grey;background:hsla(0,0%,50%,.9);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(1);width:100%}#navBarHeader:active,#navBarHeader:hover,.navBar:active,.navBar:hover,header:active,header:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:scale(1.005);transition:all .5s}#navBarHeader,.navBar,header{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);transition:all .5s}.contents{height:100%;margin:0;padding:0;width:100%}section{position:relative}.wrapper{height:100vh;overflow-x:hidden;overflow-y:auto;perspective:10px}a:hover{cursor:pointer;font-size:5mm;font-weight:700;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;text-decoration:underline;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-decoration-thickness:3px;text-transform:capitalize;text-underline-offset:1px;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition:all .5s;transition:all .5s}.blob{animation-fill-mode:forwards;background-color:#fff;background:-webkit-gradient(linear,left top,right top,from(#0ff),to(#9370db));background:linear-gradient(90deg,#0ff,#9370db);border-radius:50%;filter:blur(7vmax);-webkit-filter:blur(7vmax);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";height:15vmax;left:50%;min-height:75%;min-width:75%;opacity:.8;position:absolute;top:50%;translate:-50% -50%;width:20vmax;z-index:0}
\ No newline at end of file
diff --git a/dest/js/getrepo.js b/dest/js/getrepo.js
index 2231756d..968a2743 100644
--- a/dest/js/getrepo.js
+++ b/dest/js/getrepo.js
@@ -43,7 +43,7 @@ getProfile();
 // display infomation from github profile
 var displayProfile = function displayProfile(profile) {
   var userInfo = document.querySelector('.user-info');
-  userInfo.innerHTML = "\n\t\t<figure>\n\t\t\t<a href=".concat(profile.html_url, "><img alt=\"user avatar\" src=").concat(profile.avatar_url, "></a>\n\t\t</figure>\n\t\t<div>\n\t\t\t<!-- <h2><a href=").concat(profile.blog, "><strong>").concat(profile.name, "</strong></a></h2> -->\n\t\t\t<h2><a href=/><strong class=\"usertitle\">").concat(profile.name, "</strong></a></h2>\n\t\t\t<!-- <h2><a href=").concat(profile.html_url, "><strong>").concat(profile.name, "</strong></a></h2> -->\n\t\t\t<p>").concat(profile.bio, "</p>\n\t\t\t<p>\n\t\t\t<strong>Mail:</strong> ").concat(profile.email, "\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t<strong>Location:</strong> ").concat(profile.location, "\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t<strong>@").concat(profile.login, " </strong>\n\t\t\t\tRepos: ").concat(profile.public_repos, "\n\t\t\t\tGists: ").concat(profile.public_gists, "\n\t\t\t</p>\n\t\t</div>\n\t");
+  userInfo.innerHTML = "\n\t\t<figure class=\"floattext\">\n\t\t\t<a href=".concat(profile.html_url, "><img alt=\"user avatar\" src=").concat(profile.avatar_url, "></a>\n\t\t</figure>\n\t\t<div class=\"floattext\">\n\t\t\t<!-- <h2><a href=").concat(profile.blog, "><strong>").concat(profile.name, "</strong></a></h2> -->\n\t\t\t<h2><a href=/><strong data-value=\"").concat(profile.name, "\" class=\"usertitle hacktype\">").concat(profile.name, "</strong></a></h2>\n\t\t\t<!-- <h2><a href=").concat(profile.html_url, "><strong>").concat(profile.name, "</strong></a></h2> -->\n\t\t\t<p>").concat(profile.bio, "</p>\n\t\t\t<p>\n\t\t\t<strong>Mail:</strong> ").concat(profile.email, "\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t<strong>Location:</strong> ").concat(profile.location, "\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t<strong>@").concat(profile.login, " </strong>\n\t\t\t\tRepos: ").concat(profile.public_repos, "\n\t\t\t\tGists: ").concat(profile.public_gists, "\n\t\t\t</p>\n\t\t</div>\n\t");
 };
 
 // get list of user's public repos
diff --git a/index.html b/index.html
index 28f3d3c8..c437fb5d 100644
--- a/index.html
+++ b/index.html
@@ -32,18 +32,19 @@
 						<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>
+							<div data-value="little black111" class="title animate bounce animation--delay-p3s hacktype">little black111</div>
 							<object class="br"></object>
 							<h2 class="description">welcome to my<br>website !</h2>
 						</div>
 					</div>
 				</div>
 			</section>
-
+        <div class="blob" style="opacity: 0"></div>
 		</div>
 		<script src="/dest/js/index.js"></script>
 		<script defer src="/dest/js/tilt.js"></script>
 		<script defer src="/dest/js/tilt.conf.noglare.js"></script>
+        <script defer src="/dest/js/randomblob.js"></script>
 		<script src="/dest/js/header.js"></script>
 		<script src="/dest/js/hacktype.js"></script>
 
diff --git a/pages/repo/github/repos.html b/pages/repo/github/repos.html
index 65672484..3d1aa2a8 100644
--- a/pages/repo/github/repos.html
+++ b/pages/repo/github/repos.html
@@ -1,42 +1,50 @@
 <!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>
+    <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>
-	<!-- headers -->
-	<div header page="GhRepo"></div>
-	<div class="bgWrap animate reveal">
+    <body>
+        <!-- headers -->
+        <div header page="GhRepo"></div>
+        <div class="bgWrap animate reveal">
 
-	<!-- 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>
+            <!-- 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>
+                <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 defer src="/dest/js/tilt.js"></script>
-	<script defer src="/dest/js/tilt.conf.noglare.js"></script>
-	<script src="/dest/js/header.js"></script>
-</body>
+                <section class="repos">
+                    <input type="text"
+                        class="filter-repos animate animate--slow slideInTop hide"
+                        placeholder="Search Projects" />
+                    <ul class="repo-list animate slideInTop"
+                        id="repo-list"></ul>
+                </section>
+            </main>
+        </div>
+        <script defer src="/dest/js/tilt.js"></script>
+        <script defer 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/src/css/ghrepo.css b/src/css/ghrepo.css
index a620fad9..5d51517b 100644
--- a/src/css/ghrepo.css
+++ b/src/css/ghrepo.css
@@ -30,6 +30,9 @@
 	background: transparent;
 }
 
+span,p,div {
+    transition: all .3s;
+}
 
 
 body {
@@ -244,13 +247,14 @@ input:active,
 	/* border: 0.1px solid var(--accent); */
 	margin-bottom: 4em;
 	/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
+    transition: all 0.3s;
 }
 
 .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);
+	/* 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;
 }
 
@@ -286,7 +290,7 @@ input:active,
 	backdrop-filter: blur(20px);
 	-webkit-transition: all 0.5s;
 	transition: all 0.5s;
-	scroll-snap-align: center
+	scroll-snap-align: center;
 	/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
 	/* background: rgba(128, 128, 128, 0.1); */
 }
@@ -349,6 +353,11 @@ input:active,
 	transition: all 0.5s;
 }
 
+.intro {
+    transform-style: preserve-3d;
+    perspective: 1000px;
+}
+
 .user-info {
 	/* background: transparent; */
 	background: rgba(128, 128, 128, 0.2);
@@ -357,12 +366,17 @@ input:active,
 	/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
 }
 
+.floattext {
+    transform: translateZ(200px);
+}
+
 .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;
+    transition: all 0.3s
 }
 
 .rdescription {
diff --git a/src/css/index.css b/src/css/index.css
index f1e29f41..7f417533 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -2,50 +2,49 @@
 /*   --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) ,url(/images/backgroundNightCity.webp);
-	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) ,url(/images/backgroundNightCity.webp); */
+    background-color: #05010d;
+    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;
 }
 
 /* .window:after { */
@@ -72,66 +71,87 @@
 /* } */
 
 .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;
+    /* transform-style: preserve-3d; */
+    position: relative;
+    /* transform: perspective(1000px); */
+    width: 100%;
+    height: 100%;
+    border: 1px solid rgba(255,255,255,1);
+    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;
-}
+    transform: scale(1.1);
+    -webkit-transition: transform 0.3s;
+    transition: transform 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;
 }
 
 .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;
-	-webkit-transition: all 0.5s;
-	transition: all 0.5s
+    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
+    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;
+    display: block;
+    height: 0;
+    width: 0;
+    margin-bottom: 5vh;
+}
+
+.text {
+    transform: translateZ(200px);
+    text-shadow: 0 1px 0 #e9e6e6, 
+    0 2px 0 #e9e6e6, 
+    0 3px 0 #e9e6e6, 
+    0 4px 0 #e9e6e6, 
+    0 5px 0 #e9e6e6, 
+    0 6px 0 #e9e6e6, 
+    0 7px 0 #e9e6e6, 
+    0 8px 0 #e9e6e6, 
+    0 9px 0 #e9e6e6, 
+    0 10px 0 #e9e6e6, 
+    0 30px 10px rgba(0,0,0,.7);
 }
+.windowWrap, .tilt {
+    transform-style: preserve-3d;
+    perspective: 1000px;
+}
\ No newline at end of file
diff --git a/src/css/style.css b/src/css/style.css
index 0240166a..7a75bc53 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,32 +1,32 @@
 :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 {
@@ -36,18 +36,18 @@ 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 {
@@ -58,242 +58,266 @@ display: none;
 
 @keyframes slideInTop {
 from {
-	transform: translateY(-300px);
+    transform: translateY(-300px);
 }
 to {
-	transform: translateY(0);
+    transform: translateY(0);
 }
 }
 
 @keyframes bounce {
 0%, 20%, 50%, 80%, 100% {
-	transform: translateY(0px);
+    transform: translateY(0px);
 }
 40% {
-	transform: translateY(30px);
+    transform: translateY(30px);
 }
 80% {
-	transform: translateY(-15px);
+    transform: translateY(-15px);
 }
 }
 
 @keyframes zoomIn {
 0% {
-	transform: scale(0.01);
+    transform: scale(0.01);
 }
 85% {
-	transform: scale(1.1);
+    transform: scale(1.1);
 }
 100% {
-	transform: scale(1);
+    transform: scale(1);
 }
 }
 
 @keyframes zoomOut {
 0% {
-	transform: scale(1);
+    transform: scale(1);
 }
 100% {
-	transform: scale(0.01);
+    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);
+    -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); }
+    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;
+    }
 }
+
+@keyframes fadeIn {
+    from {
+        scale: 0.8;
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+
+    }
+    to {
+        opacity: 0;
+        scale: 0.8
+    }
+}
+
 /* 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;
+    -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;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
 }
 
 .animate.animation--delay-1s {
-	-webkit-animation-delay: 1s;
-	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;
+    -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;
+    -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;
+    -webkit-animation-duration: 0.3s;
+    animation-duration: 0.3s;
 }
 
 .animate.animation--slow {
-	-webkit-animation-duration: 1s;
-	animation-duration: 1s;
+    -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;
+    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;
+    -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;
+    -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;
+    -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;
+    animation-duration: 50ms;
+    -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;
+    -webkit-animation-name: shake;
+    animation-name: shake;
 }
 
 /* transition */
-* {
-	-webkit-transition: all 0.3s;
-	transition: all 0.3s; 
-}
+/* * {
+    -webkit-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(0, 0, 0, 0.2);
+    transition: all 0.3s;
 }
 
 .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);
-	-webkit-transition: all 0.3s;
-	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);
+    -webkit-transition: all 0.3s;
+    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); */
-	-webkit-backdrop-filter: blur(10px);
-	backdrop-filter: blur(10px);
-	-webkit-transition: all 1s;
-	transition: all 1s
+    /* 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);
+    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,
@@ -303,30 +327,31 @@ header:hover,
 #navBarHeader:hover,
 #navBarHeader:active
 {
-	transform: scale(1.005);
-	-webkit-backdrop-filter: blur(10px);
-	backdrop-filter: blur(10px);
-	transition: all 0.5s
+    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);
+    -webkit-backdrop-filter: blur(2.5px);
+    backdrop-filter: blur(2.5px);
+    transition: all 0.5s
 }
 
 /* other ================================================== */
 
 .contents {
-	margin: 0;
-	padding: 0;
-	width: 100%;
-	height: 100%;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
 }
 
 section {
-	position: relative;
+    position: relative;
 }
 
 .wrapper {
@@ -337,29 +362,49 @@ 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
+    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; */
+}
+
+.blob {
+    min-height: 75%;
+    min-width: 75%;
+    /* aspect-ratio: 1; */
+    background-color: #fff;
+    background: -webkit-gradient(linear, left top, right top, from(#00FFFF), to(mediumpurple));
+    background: linear-gradient(90deg,#0ff,#9370db);
+    border-radius: 50%;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+    filter: blur(7vmax);
+    -webkit-filter: blur(7vmax);
+    height: 15vmax;
+    left: 50%;
+    opacity: .8;
+    position: absolute;
+    top: 50%;
+    translate: -50% -50%;
+    width: 20vmax;
+    z-index: 0;
+    animation-fill-mode: forwards;
+}
\ No newline at end of file
diff --git a/src/js/getrepo.js b/src/js/getrepo.js
index 840c4560..b0f5c25d 100644
--- a/src/js/getrepo.js
+++ b/src/js/getrepo.js
@@ -18,12 +18,12 @@ getProfile();
 const displayProfile = (profile) => {
 	const userInfo = document.querySelector('.user-info');
 	userInfo.innerHTML = `
-		<figure>
+		<figure class="floattext">
 			<a href=${profile.html_url}><img alt="user avatar" src=${profile.avatar_url}></a>
 		</figure>
-		<div>
+		<div class="floattext">
 			<!-- <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=/><strong data-value="${profile.name}" class="usertitle hacktype">${profile.name}</strong></a></h2>
 			<!-- <h2><a href=${profile.html_url}><strong>${profile.name}</strong></a></h2> -->
 			<p>${profile.bio}</p>
 			<p>
diff --git a/src/js/randomblob.js b/src/js/randomblob.js
new file mode 100644
index 00000000..59be98ef
--- /dev/null
+++ b/src/js/randomblob.js
@@ -0,0 +1,69 @@
+var blob = document.querySelector('.blob')
+let isFirstTime = true;
+
+function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function setRandomBlob() {
+    blob.style.width = getRandomInt(50, 100) + '%';
+    blob.style.height = getRandomInt(50, 100) + '%';
+    blob.style.rotate = getRandomInt(0, 360) + 'deg';
+}
+
+function randomPosition(element) {
+    var x = getRandomInt(0, window.innerWidth);
+    var y = getRandomInt(0, window.innerHeight);
+    element.style.position = 'absolute';
+    element.style.left = x + 'px';
+    element.style.top = y + 'px';
+}
+
+
+function main() {
+    if (!isFirstTime) {
+        let fadeOutAnimation = blob.animate([
+            // keyframes
+            { opacity: .40 }, 
+            { opacity: 0 }
+        ], { 
+            // timing options
+            duration: 3000,
+            iterations: 1,
+            fill: 'forwards'
+        });
+        fadeOutAnimation.onfinish = () => {
+            setRandomBlob();
+            randomPosition(blob);
+            blob.animate([
+                // keyframes
+                { opacity: 0 }, 
+                { opacity: .40 }
+            ], { 
+                // timing options
+                duration: 3000,
+                iterations: 1,
+                fill: 'forwards'
+            });
+        };
+    } else {
+        setRandomBlob();
+        randomPosition(blob);
+        blob.animate([
+            // keyframes
+            { opacity: 0 }, 
+            { opacity: .40 }
+        ], { 
+            // timing options
+            duration: 3000,
+            iterations: 1,
+            fill: 'forwards'
+        });
+        isFirstTime = false;
+    }
+    setTimeout(main, getRandomInt(7500, 30000));
+}
+
+main();
\ No newline at end of file