mirror of
https://github.com/asimonson1125/asimonson1125.github.io.git
synced 2026-02-25 05:09:49 -06:00
animate header name
This commit is contained in:
505
src/static/css/App.css
Normal file
505
src/static/css/App.css
Normal file
@@ -0,0 +1,505 @@
|
||||
@import "~react-image-gallery/styles/css/image-gallery.css";
|
||||
|
||||
@font-face {
|
||||
font-family: "neon-future";
|
||||
src: url("../fonts/Neon\ Future.ttf")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "starixo";
|
||||
src: url("../fonts/Starixo.otf")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "independent";
|
||||
src: url("../fonts/INDEPENDENT.ttf")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "sunset-club";
|
||||
src: url("../fonts/SunsetClub.otf")
|
||||
}
|
||||
|
||||
html, body {
|
||||
background-color: #1b1f27;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-image: url('../../assets/plexus.jpg');
|
||||
/*url('https://i.pinimg.com/originals/d6/c3/ac/d6c3ac09021dbc0cda8ee27837d2c795.png')*/
|
||||
background-attachment: fixed;
|
||||
background-size: 100% auto;
|
||||
background-clip: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "Roboto Condensed", sans-serif;
|
||||
}
|
||||
|
||||
#menu {
|
||||
height: 2rem;
|
||||
display: none;
|
||||
filter: brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(1%) hue-rotate(151deg) brightness(95%) contrast(86%);
|
||||
float: right;
|
||||
margin-right: 1rem;
|
||||
margin-top: .25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
color: #ecebeb;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
h3, h4 {
|
||||
color: #a8a8a8;
|
||||
}
|
||||
|
||||
p, li {
|
||||
color: rgb(212, 212, 212);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #a0a0a0a0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
display: inline-block;
|
||||
transition: .4s;
|
||||
margin-bottom: 0px;
|
||||
margin-top: .5rem;
|
||||
margin-left: 1rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 0px;
|
||||
margin-left: 0rem;
|
||||
background-color: #1a1a1a;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: .4s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.name {
|
||||
background: url("../../assets/photos/sun.png") 0/5rem no-repeat;
|
||||
background-size: contain;
|
||||
padding-left: 5.5rem;
|
||||
}
|
||||
|
||||
.textGrad {
|
||||
font-family: "sunset-club" !important;
|
||||
}
|
||||
|
||||
.navControl {
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.navBar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-left: 0px;
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navElement {
|
||||
border: solid black .2rem;
|
||||
width: 25vw;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1rem;
|
||||
background-color: rgb(156, 49, 45, .4);
|
||||
}
|
||||
|
||||
.navElement:hover {
|
||||
background-color: rgb(156, 49, 45, .8);
|
||||
}
|
||||
|
||||
.navElement * {
|
||||
color: white;
|
||||
margin: 0px;
|
||||
display: block;
|
||||
padding-top: .3rem;
|
||||
padding-bottom: .3rem;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
#home {
|
||||
height: 100vh;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.concentratedHead {
|
||||
display: inline-block;
|
||||
padding-right: 4rem;
|
||||
border-bottom: #0f0f0f solid 5px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.foreground {
|
||||
padding-top: 7rem;
|
||||
padding-left: 8rem;
|
||||
width: calc(100%-8rem);
|
||||
min-height: calc(100vh - 8rem);
|
||||
background-color: rgb(44, 44, 44, .5);
|
||||
padding-bottom: 1rem;
|
||||
overflow: hidden;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.foreground p {
|
||||
line-height: 1.5em;
|
||||
max-width: min(90%, 40rem);
|
||||
}
|
||||
|
||||
.centerContent {
|
||||
margin-top: 30vh;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#HomeContent {
|
||||
padding: 3rem;
|
||||
display: inline-block;
|
||||
background-color: rgb(44, 44, 44, .95);
|
||||
}
|
||||
|
||||
#Vertical {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 0;
|
||||
height: 3rem;
|
||||
border-right: rgb(156, 49, 45) solid 1px;
|
||||
}
|
||||
|
||||
.sideimg {
|
||||
float: right;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
max-width: min(40rem, 80%);
|
||||
max-height: min(30rem, 100%);
|
||||
}
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
margin-right: 3rem;
|
||||
width: calc(50% - 3rem);
|
||||
}
|
||||
|
||||
.boxedImg {
|
||||
border: .5rem solid rgba(22, 22, 22, .8);
|
||||
max-width: calc(90% - 1rem);
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
margin-left: 10%;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.elementBlock {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.skills {
|
||||
display: inline-block;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border: solid rgba(156, 49, 45, .8) .3rem;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.skill {
|
||||
display: inline-block;
|
||||
border: rgba(156, 49, 45, .8) solid .15rem;
|
||||
padding: .2rem;
|
||||
margin: .5rem;
|
||||
background-color: rgba(11, 11, 11, .8);
|
||||
color: rgb(212, 212, 212);
|
||||
}
|
||||
|
||||
.projectList {
|
||||
padding: 0px;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.project {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: 1rem;
|
||||
width: 20rem;
|
||||
height: 22rem;
|
||||
border: .3rem rgba(156, 49, 45, .8) solid;
|
||||
background-color: rgba(22, 22, 22, .8);
|
||||
}
|
||||
|
||||
.project .topBox, .project .bottomBox {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: inline;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.project h3 {
|
||||
display: inline-block;
|
||||
border-bottom: black solid .2rem;
|
||||
}
|
||||
|
||||
.project img {
|
||||
margin-top: auto;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.topBox {
|
||||
padding-left: .5rem;
|
||||
padding-right: 1rem;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
.bottomBox {
|
||||
height: auto;
|
||||
padding-left: 0rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.bottomBox a {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.project a img, .project a p {
|
||||
padding: .5rem;
|
||||
filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(52deg) brightness(106%) contrast(101%);
|
||||
}
|
||||
|
||||
.project a img:hover, .project a p:hover {
|
||||
filter: invert(66%) sepia(0%) saturate(3964%) hue-rotate(99deg) brightness(100%) contrast(105%);
|
||||
}
|
||||
|
||||
.incomplete {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.WIP {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.complete {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.socials {
|
||||
margin-left: 1rem;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.socials img {
|
||||
height: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
filter: invert(29%) sepia(20%) saturate(1786%) hue-rotate(314deg) brightness(101%) contrast(110%);
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
.socials img:hover {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
#vertLine {
|
||||
border-right: 1px solid rgb(156, 49, 45);
|
||||
margin-left: 1rem;
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.neon {
|
||||
display: inline-block;
|
||||
font-family: "neon-future";
|
||||
color: #fff;
|
||||
text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #5271ff,
|
||||
0 0 82px #5271ff, 0 0 92px #5271ff, 0 0 102px #5271ff, 0 0 151px #5271ff;
|
||||
animation: pulsate 0.11s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.neonBox h1 {
|
||||
font-size: min(4em, 12vw);
|
||||
}
|
||||
|
||||
.neonBox h3 {
|
||||
font-size: min(2em, 6vw);
|
||||
}
|
||||
|
||||
.neonBox {
|
||||
border: 0.2rem solid #fff;
|
||||
border-radius: 2rem;
|
||||
padding: 2em;
|
||||
margin: 2em;
|
||||
box-shadow: 0 0 0.2rem #fff, 0 0 0.2rem #fff, 0 0 2rem #5271ff,
|
||||
0 0 0.8rem #5271ff, 0 0 2.8rem #5271ff, inset 0 0 1.3rem #5271ff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@keyframes pulsate {
|
||||
100% {
|
||||
text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff,
|
||||
0 0 40px #5271ff, 0 0 80px #5271ff, 0 0 90px #5271ff,
|
||||
0 0 100px #5271ff, 0 0 150px #5271ff;
|
||||
}
|
||||
|
||||
0% {
|
||||
text-shadow: 0 0 4px #fff, 0 0 10px #fff, 0 0 18px #fff,
|
||||
0 0 38px #5271ff, 0 0 73px #5271ff, 0 0 80px #5271ff, 0 0 94px #5271ff,
|
||||
0 0 140px #5271ff;
|
||||
}
|
||||
}
|
||||
|
||||
.fPage {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.thedermacompany.co.uk%2Fwp-content%2Fuploads%2F2020%2F11%2Fblack-brick-scaled.jpg&f=1&nofb=1&ipt=d10be6df79141da1b4ec0c725575cef0f7b67e957e391662226d66cff02d25e6&ipo=images');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.heightBox {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
|
||||
#menu {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #1a1a1a;
|
||||
border-bottom: solid 3px rgb(156, 49, 45, .4);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.navBar {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.navElement {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.navControl {
|
||||
max-height: 0px;
|
||||
}
|
||||
|
||||
.projectList {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.sideimg {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body {
|
||||
background-size: auto 100%;
|
||||
}
|
||||
|
||||
.foreground {
|
||||
width: 100%;
|
||||
padding-left: 2rem;
|
||||
/* centered objects will need to remove 1.5 of this to center */
|
||||
padding-right: .5rem;
|
||||
padding-bottom: 36px;
|
||||
}
|
||||
|
||||
.centeredForeground {
|
||||
margin-left: -1.5rem;
|
||||
/* remove .foreground excess margin */
|
||||
}
|
||||
|
||||
.col {
|
||||
width: 90%;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
#aboutMe {
|
||||
float: none;
|
||||
display: block;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#skills {
|
||||
float: none;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
background-color: rgb(156, 49, 45);
|
||||
}
|
||||
|
||||
.socials {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.socials * {
|
||||
display: inline;
|
||||
text-align: center;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.socials img {
|
||||
height: 2rem;
|
||||
margin-bottom: 0px;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
#vertLine {
|
||||
display: none;
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
60
src/static/css/head.scss
Normal file
60
src/static/css/head.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
.line {
|
||||
&:not(:first-child) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&:nth-child(#{$i}) {
|
||||
animation:
|
||||
clip 6000ms $i * -600ms linear infinite,
|
||||
glitch#{$i} 2500ms random(1000) * -1ms linear infinite;
|
||||
|
||||
@keyframes glitch#{$i} {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
96% {
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
97% {
|
||||
transform: translateX(random(10) - 5px);
|
||||
color: #4E9A26;
|
||||
}
|
||||
98% {
|
||||
transform: translateX(random(10) - 5px);
|
||||
color: #AC1212;
|
||||
}
|
||||
99% {
|
||||
transform: translateX(random(10) - 5px);
|
||||
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
|
||||
);
|
||||
}
|
||||
}
|
||||
BIN
src/static/fonts/INDEPENDENT.ttf
Normal file
BIN
src/static/fonts/INDEPENDENT.ttf
Normal file
Binary file not shown.
BIN
src/static/fonts/Neon Future.ttf
Normal file
BIN
src/static/fonts/Neon Future.ttf
Normal file
Binary file not shown.
BIN
src/static/fonts/Starixo.otf
Executable file
BIN
src/static/fonts/Starixo.otf
Executable file
Binary file not shown.
BIN
src/static/fonts/SunsetClub.otf
Normal file
BIN
src/static/fonts/SunsetClub.otf
Normal file
Binary file not shown.
Reference in New Issue
Block a user