diff --git a/src/static/css/App.css b/src/static/css/App.css index 36078fc..7e27067 100644 --- a/src/static/css/App.css +++ b/src/static/css/App.css @@ -3,14 +3,10 @@ src: url("../fonts/NeonFuture.ttf") } -@font-face { - font-family: "starixo"; - src: url("../fonts/Starixo.otf") -} @font-face { - font-family: "independent"; - src: url("../fonts/INDEPENDENT.ttf") + font-family: "shuttlex"; + src: url("../fonts/SHUTTLE-X.ttf"); } @font-face { @@ -18,6 +14,7 @@ src: url("../fonts/SunsetClub.otf") } + @font-face { font-family: "robotoreg"; src: url("../fonts/RobotoCondensed-Regular.ttf") @@ -132,7 +129,7 @@ a { margin-bottom: 0px; margin-left: 0rem; background-color: #1a1a1a; - width: 100%; + width: 100vw; z-index: 99; position: fixed; top: 0; @@ -141,6 +138,16 @@ a { overflow: hidden; } +#homeIcon { + margin: auto; + display: block; + width: 5em; +} + +#homeName { + margin-top: .25em; +} + #name-container { display: inline; cursor: pointer; @@ -149,9 +156,10 @@ a { .name { display: inline; color: #a0a0a0a0; - background: url("../photos/sun.png") 0/5rem no-repeat; + background: url("../icons/neonfinal2.svg") 0/5rem no-repeat; background-size: contain; - padding-left: 5.5rem; + padding-left: 3.5rem; + margin-left: .5em; font-size: xx-large; } @@ -160,7 +168,7 @@ a { } .textGrad { - font-family: "sunset-club" !important; + font-family: "shuttlex" !important; } .navControl { @@ -202,8 +210,8 @@ a { } .langstats { - width: 350px; - height: 165px; + width: min(100%, 350px); + /* height: 165px; */ border: none; display: block; } @@ -305,7 +313,7 @@ a { #nametagContainer { display: flex; - width: 100vw; + width: 100%; position: absolute; left: 0; justify-content: center; @@ -344,6 +352,7 @@ a { } .onRight { + overflow: scroll; margin: auto; } @@ -595,8 +604,9 @@ a { } .chess { - width: 300px; + max-width: 300px; border: none; + overflow: scroll; /* transform: scale(.8); float: right; */ } @@ -727,7 +737,7 @@ a { } .bookshelf { - width: 360px; + max-width: 360px; padding: 10px; border: solid 2px #553; background-image: url("/static/photos/wood.jpg"); diff --git a/src/static/css/head.css b/src/static/css/head.css index a77ad06..df65e0d 100644 --- a/src/static/css/head.css +++ b/src/static/css/head.css @@ -1 +1 @@ -.line:not(:first-child){position:absolute;top:0;left:0}.line:nth-child(1){animation:clip 6000ms -600ms linear infinite,glitch1 2500ms -540ms linear infinite}@keyframes glitch1{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(3px);color:#4E9A26}98%{transform:translateX(-3px);color:#AC1212}99%{transform:translateX(-3px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(2){animation:clip 6000ms -1200ms linear infinite,glitch2 2500ms -210ms linear infinite}@keyframes glitch2{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(1px);color:#4E9A26}98%{transform:translateX(-2px);color:#AC1212}99%{transform:translateX(-1px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(3){animation:clip 6000ms -1800ms linear infinite,glitch3 2500ms -866ms linear infinite}@keyframes glitch3{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(2px);color:#4E9A26}98%{transform:translateX(0px);color:#AC1212}99%{transform:translateX(4px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(4){animation:clip 6000ms -2400ms linear infinite,glitch4 2500ms -60ms linear infinite}@keyframes glitch4{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-3px);color:#4E9A26}98%{transform:translateX(1px);color:#AC1212}99%{transform:translateX(1px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(5){animation:clip 6000ms -3000ms linear infinite,glitch5 2500ms -221ms linear infinite}@keyframes glitch5{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(0px);color:#4E9A26}98%{transform:translateX(-3px);color:#AC1212}99%{transform:translateX(-4px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(6){animation:clip 6000ms -3600ms linear infinite,glitch6 2500ms -716ms linear infinite}@keyframes glitch6{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(1px);color:#4E9A26}98%{transform:translateX(5px);color:#AC1212}99%{transform:translateX(-1px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(7){animation:clip 6000ms -4200ms linear infinite,glitch7 2500ms -157ms linear infinite}@keyframes glitch7{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-1px);color:#4E9A26}98%{transform:translateX(-3px);color:#AC1212}99%{transform:translateX(-2px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(8){animation:clip 6000ms -4800ms linear infinite,glitch8 2500ms -955ms linear infinite}@keyframes glitch8{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(1px);color:#4E9A26}98%{transform:translateX(1px);color:#AC1212}99%{transform:translateX(-4px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(9){animation:clip 6000ms -5400ms linear infinite,glitch9 2500ms -54ms linear infinite}@keyframes glitch9{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(0px);color:#4E9A26}98%{transform:translateX(-3px);color:#AC1212}99%{transform:translateX(-1px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(10){animation:clip 6000ms -6000ms linear infinite,glitch10 2500ms -857ms linear infinite}@keyframes glitch10{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(3px);color:#4E9A26}98%{transform:translateX(1px);color:#AC1212}99%{transform:translateX(2px);color:#fff}100%{transform:translateX(0)}}@keyframes clip{0%{clip-path:polygon(0 100%, 100% 100%, 100% 120%, 0 120%)}100%{clip-path:polygon(0 -20%, 100% -20%, 100% 0%, 0 0)}} +.line:not(:first-child){position:absolute;top:0;left:0}@keyframes glitch1{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(2px);color:#4E9A26}98%{transform:translateX(3px);color:#AC1212}99%{transform:translateX(5px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch2{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(3px);color:#4E9A26}98%{transform:translateX(2px);color:#AC1212}99%{transform:translateX(-4px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch3{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(4px);color:#4E9A26}98%{transform:translateX(4px);color:#AC1212}99%{transform:translateX(-3px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch4{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-1px);color:#4E9A26}98%{transform:translateX(-4px);color:#AC1212}99%{transform:translateX(1px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch5{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-2px);color:#4E9A26}98%{transform:translateX(2px);color:#AC1212}99%{transform:translateX(-1px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch6{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(0px);color:#4E9A26}98%{transform:translateX(0px);color:#AC1212}99%{transform:translateX(0px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch7{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(0px);color:#4E9A26}98%{transform:translateX(1px);color:#AC1212}99%{transform:translateX(4px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch8{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-4px);color:#4E9A26}98%{transform:translateX(2px);color:#AC1212}99%{transform:translateX(3px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch9{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(3px);color:#4E9A26}98%{transform:translateX(3px);color:#AC1212}99%{transform:translateX(3px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch10{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(5px);color:#4E9A26}98%{transform:translateX(4px);color:#AC1212}99%{transform:translateX(4px);color:#fff}100%{transform:translateX(0)}}@keyframes clip{0%{clip-path:polygon(0 100%, 100% 100%, 100% 120%, 0 120%)}100%{clip-path:polygon(0 -20%, 100% -20%, 100% 0%, 0 0)}} diff --git a/src/static/fonts/INDEPENDENT.ttf b/src/static/fonts/INDEPENDENT.ttf deleted file mode 100644 index 98356f3..0000000 Binary files a/src/static/fonts/INDEPENDENT.ttf and /dev/null differ diff --git a/src/static/fonts/SHUTTLE-X.ttf b/src/static/fonts/SHUTTLE-X.ttf new file mode 100644 index 0000000..5dc9344 Binary files /dev/null and b/src/static/fonts/SHUTTLE-X.ttf differ diff --git a/src/static/fonts/Starixo.otf b/src/static/fonts/Starixo.otf deleted file mode 100644 index 2b7f38e..0000000 Binary files a/src/static/fonts/Starixo.otf and /dev/null differ diff --git a/src/static/icons/neonfinal.svg b/src/static/icons/neonfinal.svg new file mode 100644 index 0000000..ade618b --- /dev/null +++ b/src/static/icons/neonfinal.svg @@ -0,0 +1,426 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/static/icons/neonfinal2.svg b/src/static/icons/neonfinal2.svg new file mode 100644 index 0000000..d3f5f9e --- /dev/null +++ b/src/static/icons/neonfinal2.svg @@ -0,0 +1,388 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/static/scss/head.scss b/src/static/scss/head.scss index b9abb8f..e814079 100644 --- a/src/static/scss/head.scss +++ b/src/static/scss/head.scss @@ -7,9 +7,9 @@ @for $i from 1 through 10 { &:nth-child(#{$i}) { - animation: - clip 6000ms $i * -600ms linear infinite, - glitch#{$i} 2500ms random(1000) * -1ms linear infinite; + // animation: + // clip 6000ms $i * -600ms linear infinite, + // glitch#{$i} 2500ms random(1000) * -1ms linear infinite; @keyframes glitch#{$i} { 0% { diff --git a/src/templates/header.html b/src/templates/header.html index dbdd3e6..f0018ec 100644 --- a/src/templates/header.html +++ b/src/templates/header.html @@ -11,7 +11,7 @@ @@ -20,7 +20,7 @@ @@ -84,11 +84,9 @@
- {% for i in range(9) %}
Andrew Simonson
- {% endfor %}
diff --git a/src/templates/home.html b/src/templates/home.html index d357bbd..61b4f3b 100644 --- a/src/templates/home.html +++ b/src/templates/home.html @@ -1,4 +1,14 @@ -{% block content %} +{% block content %} {% macro nameplate() %} +logo +

Andrew Simonson

+

Computer Science student at Rochester Institute of Technology

+
🦅 🦅 🦅 Raahhh wtf is homepage content, we don't do that here 🦅 🦅 🦅
+{% endmacro %} +
@@ -6,19 +16,10 @@
-
-

Andrew Simonson

-

- Computer Science student at Rochester Institute of Technology -

-
🦅 🦅 🦅 Raahhh wtf is homepage content, we don't do that here 🦅 🦅 🦅
-
+
{{ nameplate() }}
-

Andrew Simonson

-

- Computer Science student at Rochester Institute of Technology -

+ {{ nameplate() }}