innocuous-symmetry/about-mikayla
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

about me styled

Browse Source
This commit is contained in:
Mikayla Dobson
2022-04-06 17:07:36 -05:00
parent 41a85cf39d
commit 60fdae3150
4 changed files with 168 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
src/App.scss
View File

@@ -6,120 +6,137 @@ $purple200: #ce93d8;
.App {
text-align: center;
}
header {
background-color: $purple200;
display: flex;
align-items: center;
border-bottom: 1px solid black;
font-family: 'Open Sans', sans-serif;
a {
transition: color 150ms ease;
color: black;
font-weight: 900;
font-size: 2rem;
padding-left: 1rem;
border-right: 1px solid black;
padding-right: 1rem;
text-decoration: none;
&:visited {
color: inherit;
}
&:hover {
color: purple;
header {
background-color: $purple200;
display: flex;
align-items: center;
border-bottom: 1px solid black;
font-family: 'Open Sans', sans-serif;
a {
transition: color 150ms ease;
color: black;
font-weight: 900;
font-size: 2rem;
padding-left: 1rem;
border-right: 1px solid black;
padding-right: 1rem;
text-decoration: none;
&:visited {
color: inherit;
}
&:hover {
color: purple;
transition: color 150ms ease;
}
}
h2 {
font-weight: 400;
position: relative;
padding-left: 1rem;
}
}
h2 {
font-weight: 400;
position: relative;
padding-left: 1rem;
}
}
.landing {
padding-top: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
width: 75vw;
h3 {
position: relative;
top: 0.8rem;
}
}
// .landing {
// padding-top: 1.5rem;
// display: flex;
// flex-direction: column;
// align-items: center;
// width: 75vw;
// h3 {
// position: relative;
// top: 0.8rem;
// }
// }
.tech-scrollbar {
height: 5rem;
width: 60rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
left: 0;
overflow-x: hidden;
animation: 30s linear tech-scroll infinite;
.tech-bar-item {
.technologies-page {
.tech-scrollbar {
height: 5rem;
width: 60rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
left: 0;
font-size: 1.2rem;
font-weight: 700;
margin: 0.3rem;
padding: 1rem;
background-color: $purple200;
height: 5rem;
width: 20rem;
overflow-x: hidden;
animation: 30s linear tech-scroll infinite;
.tech-bar-item {
display: flex;
align-items: center;
justify-content: center;
position: relative;
left: 0;
font-size: 1.2rem;
font-weight: 700;
margin: 0.3rem;
padding: 1rem;
background-color: $purple200;
height: 5rem;
width: 20rem;
}
@keyframes hide-until-start {
from {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes tech-scroll {
from {
left: -60rem;
}
100% {
left: 60rem;
}
}
@keyframes from-right {
from {
left: 60rem;
}
100% {
left: -60rem;
}
}
}
.backup-bar {
bottom: 5rem;
animation: 30s linear 15s tech-scroll infinite, 15s hide-until-start;
}
.from-right {
animation: 30s linear from-right infinite;
}
.backup-from-right {
bottom: 5rem;
animation: 30s linear 15s from-right infinite, 15s hide-until-start;
}
.variant-2 {
background-color: #62286d !important;
color: white !important;
}
}
.backup-bar {
bottom: 5rem;
animation: 30s linear 15s tech-scroll infinite, 15s hide-until-start;
}
.from-right {
animation: 30s linear from-right infinite;
}
.backup-from-right {
bottom: 5rem;
animation: 30s linear 15s from-right infinite, 15s hide-until-start;
}
.variant-2 {
background-color: #62286d !important;
color: white !important;
}
@keyframes hide-until-start {
from {
opacity: 0;
.about-me-page {
a {
color: white;
border-radius: 12px;
transition: color 0.3s linear;
text-decoration: none;
&:hover {
color: $purple200;
transition: color 0.3s linear;
}
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes tech-scroll {
from {
left: -60rem;
}
100% {
left: 60rem;
}
}
@keyframes from-right {
from {
left: 60rem;
}
100% {
left: -60rem;
.card-title {
text-transform: uppercase;
}
}