kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-06-17 10:02:02 +02:00
Code Issues Projects Releases Wiki Activity

Initialize project and port basics

Browse source
This commit is contained in:
Kevin Kandlbinder 2020-12-21 18:23:28 +01:00
commit ebb4f4d515
31 changed files with 20401 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

183
src/pages/index.module.scss Normal file
View file

@ -0,0 +1,183 @@
@import "../variables";
.heroSection {
width: 100%;
background: #000710;
min-height: 500px;
padding-top: 100px;
overflow: hidden;
background: radial-gradient(ellipse at top left, #1f0ba659, transparent), radial-gradient(ellipse at bottom right, #4a086829, transparent);
.profile {
position: relative;
left: 50%;
width: calc(90% - 40px);
max-width: 600px;
max-height: 400px;
transform: translate(-50%, 0%);
&:hover .profileImage {
transform: translate(4px, -4px);
}
&:hover .profileImageDummy {
transform: translate(-3px, 3px);
}
.hello {
font-weight: 100;
opacity: .75;
display: block;
margin-bottom: -5px;
}
.name {
font-weight: 100;
font-size: 2em;
display: block;
}
.description {
font-weight: 100;
display: block;
}
.contactLinks {
margin-top: 20px;
display: flex;
flex-direction: column;
}
.contactLink {
transition: text-decoration .5s;
text-decoration: underline dotted rgba(0, 0, 0, 0);
padding: 6px 0 6px 25px;
color: $textColor;
}
.contactLink:hover, .contactLink:active {
text-decoration: underline dotted rgba(0, 0, 0, .5);
}
.contactLink > i {
color: $accentColor;
margin-left: -25px;
margin-right: 5px;
}
.profileCard {
width: calc(100% - 40px);
height: calc(100% - 20px);
background: $background;
transform: translate(40px, 20px);
border-radius: 5px;
/*box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.4);*/
box-shadow: -1px 11px 33px -10px #e5502b4b;
padding: 20px 20px 20px 230px;
color: $textColor;
}
.profileImage, .profileImageDummy {
display: inline-block;
width: 250px;
height: 350px;
border-radius: 5px;
position: absolute;
z-index: 100;
background-color: #1c1c1c;
background-size: cover;
background-position: center;
transform: translate(0, 0);
transition: transform .25s;
}
.profileImage {
z-index: 20;
/*box-shadow: -5px 7px 10px -6px rgba(127,127,127,.4);*/
}
.profileImageDummy {
z-index: 10;
background: $accentColor;
opacity: .2;
/*box-shadow: 0 0 10px -10px var(--accent-color);
background: transparent;*/
}
@media (max-width: 590px) {
.profileImage,.profileImageDummy {
display: none;
}
.profileCard {
padding: 20px 20px 20px 20px;
transform: translate(20px, 20px);
}
}
}
}
.amazonAlexaSection, .donationSection, .hireMeSection {
min-height: 90px;
background: #10141e;
cursor: pointer;
display: block;
text-decoration: none;
color: inherit;
}
.amazonAlexaSection img {
height: 50px;
}
.amazonAlexaSection > div, .donationSection > div, .hireMeSection > div {
display: flex;
height: 100%;
padding: 20px !important;
line-height: 50px;
font-size: 1.7em;
color: white;
}
.amazonAlexaSection > div > span, .donationSection > div > span, .hireMeSection > div > span {
margin-left: auto;
margin-right: auto;
}
.amazonAlexaSection > div > i, .donationSection > div > i, .hireMeSection > div > i {
line-height: 50px !important;
}
.creditSection {
background: #060606;
cursor: pointer;
display: block;
text-decoration: none;
color: inherit;
}
.creditSection > div {
display: flex;
height: 100%;
padding: 15px !important;
line-height: 15px;
font-size: 1.2em;
color: white;
}
.creditSection > div > span {
margin-left: auto;
margin-right: auto;
}
.creditSection > div > i {
line-height: 15px !important;
}