diff options
| -rw-r--r-- | dest/css/ghrepo.css | 1 | ||||
| -rw-r--r-- | index.html | 52 | ||||
| -rwxr-xr-x | launch.sh | 2 | ||||
| -rw-r--r-- | package.json | 8 | ||||
| -rw-r--r-- | pages/info/about.html | 42 | ||||
| -rw-r--r-- | public/css/404.css (renamed from dest/css/404.css) | 0 | ||||
| -rw-r--r-- | public/css/about.css (renamed from dest/css/about.css) | 0 | ||||
| -rw-r--r-- | public/css/ghrepo.css | 1 | ||||
| -rw-r--r-- | public/css/index.css (renamed from dest/css/index.css) | 0 | ||||
| -rw-r--r-- | public/css/style.css (renamed from dest/css/style.css) | 2 | ||||
| -rw-r--r-- | public/fonts/Big500-8MLOM.ttf (renamed from fonts/Big500-8MLOM.ttf) | bin | 12696 -> 12696 bytes | |||
| -rw-r--r-- | public/fonts/Hacked-KerX.ttf (renamed from fonts/Hacked-KerX.ttf) | bin | 26664 -> 26664 bytes | |||
| -rw-r--r-- | public/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf (renamed from fonts/LigaJetBrainsMonoNerdFont-Regular.ttf) | bin | 1036344 -> 1036344 bytes | |||
| -rw-r--r-- | public/fonts/Monoton.ttf (renamed from fonts/Monoton.ttf) | bin | 49908 -> 49908 bytes | |||
| -rw-r--r-- | public/fonts/RockSalt-Regular.ttf (renamed from fonts/RockSalt-Regular.ttf) | bin | 119328 -> 119328 bytes | |||
| -rw-r--r-- | public/fonts/SmoothElegantRegular-ZLv3.ttf (renamed from fonts/SmoothElegantRegular-ZLv3.ttf) | bin | 11708 -> 11708 bytes | |||
| -rw-r--r-- | public/fonts/audiowide.ttf (renamed from fonts/audiowide.ttf) | bin | 47676 -> 47676 bytes | |||
| -rw-r--r-- | public/index.html | 52 | ||||
| -rw-r--r-- | public/js/2dtilt.js | 16 | ||||
| -rw-r--r-- | public/js/about.js (renamed from dest/js/about.js) | 0 | ||||
| -rw-r--r-- | public/js/dynamicBlob.js | 28 | ||||
| -rw-r--r-- | public/js/getrepo.js (renamed from dest/js/getrepo.js) | 0 | ||||
| -rw-r--r-- | public/js/hacktype.js (renamed from dest/js/hacktype.js) | 0 | ||||
| -rw-r--r-- | public/js/header.js (renamed from dest/js/header.js) | 0 | ||||
| -rw-r--r-- | public/js/index.js (renamed from dest/js/index.js) | 0 | ||||
| -rw-r--r-- | public/js/mouseblob.js | 23 | ||||
| -rw-r--r-- | public/js/randomblob.js | 73 | ||||
| -rw-r--r-- | public/js/rbg.js (renamed from dest/js/rbg.js) | 0 | ||||
| -rw-r--r-- | public/js/tilt.conf.js (renamed from dest/js/tilt.conf.js) | 0 | ||||
| -rw-r--r-- | public/js/tilt.conf.noglare.js (renamed from dest/js/tilt.conf.noglare.js) | 0 | ||||
| -rw-r--r-- | public/js/tilt.js (renamed from dest/js/tilt.js) | 0 | ||||
| -rw-r--r-- | public/pages/info/about.html | 42 | ||||
| -rw-r--r-- | public/pages/repo/github/repos.html (renamed from pages/repo/github/repos.html) | 20 | ||||
| -rw-r--r-- | src/css/about.css | 24 | ||||
| -rw-r--r-- | src/css/ghrepo.css | 4 | ||||
| -rw-r--r-- | src/css/style.css | 5 | ||||
| -rw-r--r-- | src/js/dynamicBlob.js | 4 |
37 files changed, 273 insertions, 126 deletions
diff --git a/dest/css/ghrepo.css b/dest/css/ghrepo.css deleted file mode 100644 index 396136d8..00000000 --- a/dest/css/ghrepo.css +++ /dev/null @@ -1 +0,0 @@ -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}a,div,p,span{transition:transform .3s,scale .3s}body{font-family:Open Sans,sans-serif;margin:(3em) 0 0}main{margin-top:3em}.bgWrap{background-color:#05010d;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{animation-duration:.5s!important;animation-fill-mode:forwards!important;animation-name:fadeOut!important;position:absolute;transition:all .5s}.unHide{animation-duration:.5s!important;animation-fill-mode:forwards!important;animation-name:fadeIn!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:all .5s;transition:all .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:transform .3s,border-radius .5s}.user-info img:hover{border-radius:5%;transition:transform .3s,border-radius .5s}.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:#fff;background:hsla(0,0%,100%,.01);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(50px);backdrop-filter:blur(50px);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{border-radius:16px;display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:4em;margin-top:0;padding:2em;transition:transform .3s,background-color .5s}.repos:hover{transition:transform .5s,background-color .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(200px);backdrop-filter:blur(200px);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{-webkit-backdrop-filter:blur(125px);backdrop-filter:blur(125px);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>*{animation-fill-mode:forwards;animation-name:scroll;animation-timing-function:linear;animation-timeline:view()}.repo-list:hover:has(li:hover) li:not(:hover,.hide){animation-duration:.5s;-webkit-backdrop-filter:blur(80px);backdrop-filter:blur(80px);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(125px);backdrop-filter:blur(125px);transform:scale(1.1)}.intro{border-radius:16px;perspective:1000px;transform-style:preserve-3d}.user-info{-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);border:2px solid #fff}.floattext{transform:translateZ(200px)}.repo{-webkit-backdrop-filter:blur(200px);backdrop-filter:blur(200px);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/index.html b/index.html deleted file mode 100644 index 8217f219..00000000 --- a/index.html +++ /dev/null @@ -1,52 +0,0 @@ -<!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> - - <!-- 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> - <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 data-force-form="random" id="blob" 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="/src/js/dynamicBlob.js"></script> - <script src="/dest/js/header.js"></script> - <script src="/dest/js/hacktype.js"></script> - - </body> -</html> @@ -29,7 +29,9 @@ function watch() { function start() { printf '\033[0;32mNpx Server Starting...\033[0m\n' + pushd public exec npx serve -d -p 209 #| npx gnomon; + popd } function main() { diff --git a/package.json b/package.json index eac53832..e3867b85 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,10 @@ "description": "", "main": "index.js", "scripts": { - "build:css": "postcss src/css/* --dir dest/css", - "watch:css": "postcss src/css/* --dir dest/css --watch", - "build:js": "babel src/js/* --out-dir dest/js", - "watch:js": "babel src/js/* --out-dir dest/js --watch", + "build:css": "postcss src/css/* --dir public/css", + "watch:css": "postcss src/css/* --dir public/css --watch", + "build:js": "babel src/js/* --out-dir public/js", + "watch:js": "babel src/js/* --out-dir public/js --watch", "build": "yarn build:css & yarn build:js", "watch": "yarn watch:css & yarn watch:js", "dev": "./launch.sh", diff --git a/pages/info/about.html b/pages/info/about.html deleted file mode 100644 index e04c240b..00000000 --- a/pages/info/about.html +++ /dev/null @@ -1,42 +0,0 @@ -<!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"> -</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> -</body> -</html> diff --git a/dest/css/404.css b/public/css/404.css index 157201ca..157201ca 100644 --- a/dest/css/404.css +++ b/public/css/404.css diff --git a/dest/css/about.css b/public/css/about.css index a8c1bcd3..a8c1bcd3 100644 --- a/dest/css/about.css +++ b/public/css/about.css diff --git a/public/css/ghrepo.css b/public/css/ghrepo.css new file mode 100644 index 00000000..6aae86d0 --- /dev/null +++ b/public/css/ghrepo.css @@ -0,0 +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}a,div,p,span{transition:transform .3s,scale .3s}body{font-family:Open Sans,sans-serif;margin:(3em) 0 0}main{margin-top:3em}.bgWrap{background-color:#05010d;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{animation-duration:.5s!important;animation-fill-mode:forwards!important;animation-name:fadeOut!important;position:absolute;transition:all .5s}.unHide{animation-duration:.5s!important;animation-fill-mode:forwards!important;animation-name:fadeIn!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:all .5s;transition:all .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:transform .3s,border-radius .5s}.user-info img:hover{border-radius:5%;transition:transform .3s,border-radius .5s}.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:#fff;background:hsla(0,0%,100%,.01);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(50px);backdrop-filter:blur(50px);box-shadow:0 0 50mm rgba(0,0,0,.7);transform:scale(1.1);transition:all .5s}.filter-repos:active,input:active{-webkit-backdrop-filter:blur(200px);backdrop-filter:blur(200px);box-shadow:0 0 10mm rgba(0,0,0,.7)}.repos{border-radius:16px;display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:4em;margin-top:0;padding:2em;transition:transform .3s,background-color .5s}.repos:hover{transition:transform .5s,background-color .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(200px);backdrop-filter:blur(200px);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{-webkit-backdrop-filter:blur(125px);backdrop-filter:blur(125px);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>*{animation-fill-mode:forwards;animation-name:scroll;animation-timing-function:linear;animation-timeline:view()}.repo-list:hover:has(li:hover) li:not(:hover,.hide){animation-duration:.5s;-webkit-backdrop-filter:blur(80px);backdrop-filter:blur(80px);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(125px);backdrop-filter:blur(125px);transform:scale(1.1)}.intro{border-radius:16px;perspective:1000px;transform-style:preserve-3d}.user-info{-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);border:2px solid #fff}.floattext{transform:translateZ(200px)}.repo{-webkit-backdrop-filter:blur(200px);backdrop-filter:blur(200px);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/public/css/index.css index a10ab412..a10ab412 100644 --- a/dest/css/index.css +++ b/public/css/index.css diff --git a/dest/css/style.css b/public/css/style.css index 932bc312..647d4fea 100644 --- a/dest/css/style.css +++ b/public/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;-webkit-font-smoothing:antialiased;font-smooth:antialiased}@media (pointer:coarse),(pointer:none){*{transition:all .3s}}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}}@keyframes scroll{0%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";opacity:.8;scale:.75}to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;scale:1}}.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}@keyframes rotate{0%{rotate:0deg}50%{scale:1 1.25}to{rotate:1turn}}.sblob{animation:rotate 20s infinite;aspect-ratio:1;background-color:#fff;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:-1}
\ 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;-webkit-font-smoothing:antialiased;font-smooth:antialiased}@media (pointer:coarse),(pointer:none){*{transition:all .3s}}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}}@keyframes scroll{0%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";opacity:.8;scale:.75}to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;scale:1}}.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}@keyframes rotate{0%{rotate:0deg}50%{scale:1 1.25}to{rotate:1turn}}.sep{height:5vh;width:5vh}.sblob{animation:rotate 20s infinite;aspect-ratio:1;background-color:#fff;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:-1}
\ No newline at end of file diff --git a/fonts/Big500-8MLOM.ttf b/public/fonts/Big500-8MLOM.ttf Binary files differindex 35ec776d..35ec776d 100644 --- a/fonts/Big500-8MLOM.ttf +++ b/public/fonts/Big500-8MLOM.ttf diff --git a/fonts/Hacked-KerX.ttf b/public/fonts/Hacked-KerX.ttf Binary files differindex 2917611c..2917611c 100644 --- a/fonts/Hacked-KerX.ttf +++ b/public/fonts/Hacked-KerX.ttf diff --git a/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf b/public/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf Binary files differindex fb81e183..fb81e183 100644 --- a/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf +++ b/public/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf diff --git a/fonts/Monoton.ttf b/public/fonts/Monoton.ttf Binary files differindex 0c329133..0c329133 100644 --- a/fonts/Monoton.ttf +++ b/public/fonts/Monoton.ttf diff --git a/fonts/RockSalt-Regular.ttf b/public/fonts/RockSalt-Regular.ttf Binary files differindex 0f72fe6d..0f72fe6d 100644 --- a/fonts/RockSalt-Regular.ttf +++ b/public/fonts/RockSalt-Regular.ttf diff --git a/fonts/SmoothElegantRegular-ZLv3.ttf b/public/fonts/SmoothElegantRegular-ZLv3.ttf Binary files differindex f8f70d77..f8f70d77 100644 --- a/fonts/SmoothElegantRegular-ZLv3.ttf +++ b/public/fonts/SmoothElegantRegular-ZLv3.ttf diff --git a/fonts/audiowide.ttf b/public/fonts/audiowide.ttf Binary files differindex 348817d5..348817d5 100644 --- a/fonts/audiowide.ttf +++ b/public/fonts/audiowide.ttf diff --git a/public/index.html b/public/index.html new file mode 100644 index 00000000..08f8744f --- /dev/null +++ b/public/index.html @@ -0,0 +1,52 @@ +<!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="/css/style.css"> + <link rel="stylesheet" href="/css/index.css"> + </head> + <body class="animate reveal"> + <!-- headers --> + <div header page="Home"></div> + + <!-- 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> + <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 data-force-form="random" id="blob" class="blob" style="opacity: 0"></div> + </div> + <script src="/js/index.js"></script> + <script defer src="/js/tilt.js"></script> + <script defer src="/js/tilt.conf.noglare.js"></script> + <script defer src="/js/dynamicBlob.js"></script> + <script src="/js/header.js"></script> + <script src="/js/hacktype.js"></script> + + </body> +</html> diff --git a/public/js/2dtilt.js b/public/js/2dtilt.js new file mode 100644 index 00000000..f298e399 --- /dev/null +++ b/public/js/2dtilt.js @@ -0,0 +1,16 @@ +"use strict"; + +var tilt = document.querySelector('#sdtilt'); +tilt.addEventListener('mousemove', function (e) { + var rect = tilt.getBoundingClientRect(); + var x = e.clientX - rect.left; + var y = e.clientY - rect.top; + var xc = rect.width / 2; + var yc = rect.height / 2; + var dx = x - xc; + var dy = y - yc; + tilt.style.transform = 'rotateX(' + -dy / 5 + 'deg) rotateY(' + dx / 5 + 'deg)'; +}); +tilt.addEventListener('mouseleave', function (e) { + tilt.style.transform = ''; +});
\ No newline at end of file diff --git a/dest/js/about.js b/public/js/about.js index 9a390c31..9a390c31 100644 --- a/dest/js/about.js +++ b/public/js/about.js diff --git a/public/js/dynamicBlob.js b/public/js/dynamicBlob.js new file mode 100644 index 00000000..fc493043 --- /dev/null +++ b/public/js/dynamicBlob.js @@ -0,0 +1,28 @@ +"use strict"; + +var blob = document.querySelector('#blob'); +var blobData = blob.dataset.forceForm; +function loadScript(src) { + var script = document.createElement('script'); + script.src = src; + document.body.appendChild(script); +} +var blobItem; +if (blobData) { + blobItem = blobData; +} else { + // check if user's on mobile + if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) || window.orientation > 1) { + // do randomBlob since user is on mobile(mouseBlob is buggy on mobile so ya) + blobItem = "random"; + } else { + blobItem = "mouse"; + } +} +if (blobItem == "mouse") { + loadScript('/js/mouseblob.js'); +} else if (blobItem == "random") { + loadScript('/js/randomblob.js'); +} else { + throw new Error("Unknown blob type"); +}
\ No newline at end of file diff --git a/dest/js/getrepo.js b/public/js/getrepo.js index d35c9b87..d35c9b87 100644 --- a/dest/js/getrepo.js +++ b/public/js/getrepo.js diff --git a/dest/js/hacktype.js b/public/js/hacktype.js index c05f8907..c05f8907 100644 --- a/dest/js/hacktype.js +++ b/public/js/hacktype.js diff --git a/dest/js/header.js b/public/js/header.js index b6e00990..b6e00990 100644 --- a/dest/js/header.js +++ b/public/js/header.js diff --git a/dest/js/index.js b/public/js/index.js index 9a390c31..9a390c31 100644 --- a/dest/js/index.js +++ b/public/js/index.js diff --git a/public/js/mouseblob.js b/public/js/mouseblob.js new file mode 100644 index 00000000..22929436 --- /dev/null +++ b/public/js/mouseblob.js @@ -0,0 +1,23 @@ +"use strict"; + +// const blob = document.querySelector('.sblob'); + +// window.onpointermove = event => { +// const { clientX, clientY } = event; +// blob.animate({ +// left: `${clientX}px`, +// top: `${clientY}px` +// }, { duration: 1000, fill: "forwards" }); +// } + +window.onpointermove = function (event) { + var pageX = event.pageX, + pageY = event.pageY; + blob.animate({ + left: "".concat(pageX, "px"), + top: "".concat(pageY, "px") + }, { + duration: 1000, + fill: "forwards" + }); +};
\ No newline at end of file diff --git a/public/js/randomblob.js b/public/js/randomblob.js new file mode 100644 index 00000000..0ed548ea --- /dev/null +++ b/public/js/randomblob.js @@ -0,0 +1,73 @@ +"use strict"; + +var 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) { + var fadeOutAnimation = blob.animate([ + // keyframes + { + opacity: .40 + }, { + opacity: 0, + scale: .8 + }], { + // timing options + duration: 3000, + iterations: 1, + fill: 'forwards' + }); + fadeOutAnimation.onfinish = function () { + setRandomBlob(); + randomPosition(blob); + blob.animate([ + // keyframes + { + opacity: 0, + scale: .8 + }, { + opacity: .40, + scale: 1 + }], { + // 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 diff --git a/dest/js/rbg.js b/public/js/rbg.js index 70b803ab..70b803ab 100644 --- a/dest/js/rbg.js +++ b/public/js/rbg.js diff --git a/dest/js/tilt.conf.js b/public/js/tilt.conf.js index f7835262..f7835262 100644 --- a/dest/js/tilt.conf.js +++ b/public/js/tilt.conf.js diff --git a/dest/js/tilt.conf.noglare.js b/public/js/tilt.conf.noglare.js index 111d30cf..111d30cf 100644 --- a/dest/js/tilt.conf.noglare.js +++ b/public/js/tilt.conf.noglare.js diff --git a/dest/js/tilt.js b/public/js/tilt.js index 2d7af8a9..2d7af8a9 100644 --- a/dest/js/tilt.js +++ b/public/js/tilt.js diff --git a/public/pages/info/about.html b/public/pages/info/about.html new file mode 100644 index 00000000..8f89f328 --- /dev/null +++ b/public/pages/info/about.html @@ -0,0 +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="/css/style.css" rel="stylesheet"> + <link href="/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="/js/about.js"></script> + <script src="/js/header.js"></script> + <script src="/js/rbg.js"></script> +</body> +</html> diff --git a/pages/repo/github/repos.html b/public/pages/repo/github/repos.html index 2103c581..15cf1102 100644 --- a/pages/repo/github/repos.html +++ b/public/pages/repo/github/repos.html @@ -8,10 +8,10 @@ <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="/css/style.css"> + <link rel="stylesheet" href="/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> + <script src="/js/getrepo.js" defer></script> </head> <body> @@ -26,9 +26,7 @@ class="user-info animate animation--fast slideInTop"></div> </section> - <hr> - <hr> - <hr> + <div class="sep"></div> <section class="repos"> <input type="text" @@ -40,11 +38,11 @@ </main> <div id="blob" class="sblob"></div> </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> - <script src="/dest/js/dynamicBlob.js"></script> + <script defer src="/js/tilt.js"></script> + <script defer src="/js/tilt.conf.noglare.js"></script> + <script src="/js/header.js"></script> + <script src="/js/hacktype.js"></script> + <script src="/js/dynamicBlob.js"></script> </body> </html> diff --git a/src/css/about.css b/src/css/about.css index 6b52e582..82dfb28a 100644 --- a/src/css/about.css +++ b/src/css/about.css @@ -16,12 +16,12 @@ body { .left { top: 50%; --ms-transform: translateY(-50%); -transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); display: flex; overflow: hidden; align-items: center; -margin: 0; + margin: 0; justify-content: center; margin-top: 4em; /* background-color: #f1f1f1; */ @@ -33,13 +33,13 @@ margin: 0; .right { /* flex: 1; */ -display: flex; -height: 100%; -margin-top: 10em; + display: flex; + height: 100%; + margin-top: 10em; } .main { -margin: auto; + margin: auto; } .main h2 { @@ -53,16 +53,16 @@ margin: auto; } .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 ecfe2744..541846c2 100644 --- a/src/css/ghrepo.css +++ b/src/css/ghrepo.css @@ -243,7 +243,9 @@ 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: rgba(244, 232, 193, 0.3); */ + -webkit-backdrop-filter: blur(200px); + backdrop-filter: blur(200px); } .repos { diff --git a/src/css/style.css b/src/css/style.css index b398872a..2a05f9f2 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -442,6 +442,11 @@ a:hover { } } +.sep { + width: 5vh; + height: 5vh; +} + .sblob { background-color: white; height: 15vmax; diff --git a/src/js/dynamicBlob.js b/src/js/dynamicBlob.js index 0c7f7bd2..067b4de7 100644 --- a/src/js/dynamicBlob.js +++ b/src/js/dynamicBlob.js @@ -26,9 +26,9 @@ if (blobData) { } if (blobItem == "mouse") { - loadScript('/dest/js/mouseblob.js') + loadScript('/js/mouseblob.js') } else if (blobItem == "random") { - loadScript('/dest/js/randomblob.js') + loadScript('/js/randomblob.js') } else { throw new Error("Unknown blob type") }
\ No newline at end of file |