added scss, but wont move forward
This commit is contained in:
Tyler Koenig
3
.idea/.gitignore
generated
vendored
Normal file
3
.idea/.gitignore
generated
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
9
.idea/lerko96.github.io.iml
generated
Normal file
9
.idea/lerko96.github.io.iml
generated
Normal file
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="JAVA_MODULE" version="4">
|
||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||
<exclude-output />
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
6
.idea/misc.xml
generated
Normal file
6
.idea/misc.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectRootManager" version="2" languageLevel="JDK_15" project-jdk-name="15" project-jdk-type="JavaSDK">
|
||||
<output url="file://$PROJECT_DIR$/out" />
|
||||
</component>
|
||||
</project>
|
||||
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/lerko96.github.io.iml" filepath="$PROJECT_DIR$/.idea/lerko96.github.io.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
1
app/js/script.js
Normal file
1
app/js/script.js
Normal file
@@ -0,0 +1 @@
|
||||
console.log('hello nurse');
|
||||
773
app/scss/_globals.scss
Normal file
773
app/scss/_globals.scss
Normal file
@@ -0,0 +1,773 @@
|
||||
html {
|
||||
font-size: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif;
|
||||
line-height: 1.3;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
background-color: #212121;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
color: #c9cacc;
|
||||
background-color: #110f16;
|
||||
/* background-color: #272727; */
|
||||
font-size: 16px;
|
||||
font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
/* line-height: 1.725; */
|
||||
text-rendering: geometricPrecision;
|
||||
min-height: 100vh;
|
||||
/* margin: 0 auto; */
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
/* max-width: 560px; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
margin: auto;
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
border-radius: 500px;
|
||||
padding: 0.2rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #c9cacc;
|
||||
letter-spacing: 0.09rem;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background-color: #29f3c3;
|
||||
color: #1b1b1b;
|
||||
transition: 150ms ease;
|
||||
}
|
||||
|
||||
/* header {
|
||||
color: #c9cacc;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
line-height: 1.75rem;
|
||||
border-top: 1.5px solid #666;
|
||||
border-bottom: 1.5px solid #666;
|
||||
} */
|
||||
|
||||
/* header img {
|
||||
width: 100px;
|
||||
border: 5px solid #666;
|
||||
border-radius: 165px;
|
||||
} */
|
||||
|
||||
.card {
|
||||
background-color: #151515;
|
||||
margin: 2rem;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.card-top {
|
||||
margin: auto;
|
||||
height: 80px;
|
||||
background: #29f3c3;
|
||||
border-start-end-radius: 10px;
|
||||
border-start-start-radius: 10px;
|
||||
}
|
||||
|
||||
.card img {
|
||||
margin: 40px auto 10px;
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
/* font-family: 'Source Sans Pro', sans-serif; */
|
||||
/* font-weight: 700; */
|
||||
/* line-height: 2rem; */
|
||||
/* letter-spacing: 0.05rem; */
|
||||
}
|
||||
|
||||
h1 a {
|
||||
font-size: .8em;
|
||||
color: #c9cacc;
|
||||
text-decoration: none;
|
||||
letter-spacing: -.05em;
|
||||
word-spacing: -.05em;
|
||||
|
||||
}
|
||||
|
||||
h1 a:hover {
|
||||
color: #29f3c3;
|
||||
}
|
||||
|
||||
header h2 {
|
||||
/* font-weight: 200; */
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.01rem;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
/* letter-spacing: 0.01rem; */
|
||||
}
|
||||
|
||||
#aboutMe {
|
||||
letter-spacing: 0.01rem;
|
||||
}
|
||||
|
||||
#bio,
|
||||
#skills {
|
||||
padding: 1.5rem;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
#bio h2 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
#skills h4 {
|
||||
padding: 1.5rem;
|
||||
color: #666;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
#skills ul {
|
||||
line-height: 1.35rem;
|
||||
font-weight: 200;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.skills {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
gap: 10px 75px;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas:
|
||||
'. .'
|
||||
'. .'
|
||||
'. .'
|
||||
'. .'
|
||||
'. .'
|
||||
'. .'
|
||||
'. .'
|
||||
'. .';
|
||||
}
|
||||
|
||||
#contact {
|
||||
margin-top: 1rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#contact h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#contact ul {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contactLinks li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.contactLinks a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #c9cacc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.contactLinks a:hover {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#project-wrapper {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
#project-wrapper h2 {
|
||||
margin: 0;
|
||||
padding: 1.5rem 1.5rem 0 1.5rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#project-wrapper h3 {
|
||||
font-size: 1.5rem;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem;
|
||||
letter-spacing: 0.01rem;
|
||||
}
|
||||
|
||||
.project-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 1.5rem 0;
|
||||
text-align: center;
|
||||
font-weight: 200;
|
||||
letter-spacing: 0.01rem;
|
||||
}
|
||||
|
||||
.project-item a {
|
||||
color: #c9cacc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.project-item a:hover {
|
||||
color: #29f3c3;
|
||||
}
|
||||
|
||||
.project-desc {
|
||||
margin: 0;
|
||||
padding: 0 0.8rem;
|
||||
}
|
||||
|
||||
.project-skills {
|
||||
color: #666;
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
line-height: 1.25rem;
|
||||
text-align: start;
|
||||
padding: 0 1.5rem;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.project-skills h4 {
|
||||
font-size: 1.5rem;
|
||||
/* flex: 1; */
|
||||
}
|
||||
|
||||
.project-skills li {
|
||||
list-style-type: none;
|
||||
color: #c9cacc;
|
||||
}
|
||||
|
||||
.project-skills ul {
|
||||
/* flex: 9; */
|
||||
line-height: 2rem;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.project-item img {
|
||||
max-width: 375px;
|
||||
/* width: 90%; */
|
||||
box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75);
|
||||
-webkit-box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
footer {
|
||||
color: #666;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
margin: 0.4rem;
|
||||
letter-spacing: 0.1rem;
|
||||
}
|
||||
|
||||
#footLinks {
|
||||
margin: 0.4rem;
|
||||
letter-spacing: 0.8rem;
|
||||
}
|
||||
|
||||
#footLinks a {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#footLinks a:hover {
|
||||
color: #c9cacc;
|
||||
transition: 160ms ease-in;
|
||||
}
|
||||
|
||||
code pen begin
|
||||
|
||||
/* This pen */
|
||||
|
||||
.dark {
|
||||
background: #110f16;
|
||||
}
|
||||
.light {
|
||||
background: #f3f5f7;
|
||||
}
|
||||
a,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.postcard {
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
|
||||
border-radius: 10px;
|
||||
margin: 0 0 2rem 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
}
|
||||
.postcard.dark {
|
||||
background-color: #18151f;
|
||||
}
|
||||
.postcard.light {
|
||||
background-color: #e1e5ea;
|
||||
}
|
||||
.postcard .t-dark {
|
||||
color: #18151f;
|
||||
}
|
||||
.postcard a {
|
||||
color: inherit;
|
||||
}
|
||||
.postcard h1,
|
||||
.postcard .h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.postcard .small {
|
||||
font-size: 80%;
|
||||
}
|
||||
.postcard .postcard__title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
.postcard .postcard__img {
|
||||
max-height: 180px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
}
|
||||
.postcard .postcard__img_link {
|
||||
display: contents;
|
||||
}
|
||||
.postcard .postcard__bar {
|
||||
width: 50px;
|
||||
height: 10px;
|
||||
margin: 10px 0;
|
||||
border-radius: 5px;
|
||||
background-color: #424242;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
.postcard .postcard__text {
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.postcard .postcard__preview-txt {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: justify;
|
||||
height: 100%;
|
||||
}
|
||||
.postcard .postcard__tagbox {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
font-size: 14px;
|
||||
margin: 20px 0 0 0;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
.postcard .postcard__tagbox .tag__item {
|
||||
display: inline-block;
|
||||
background: rgba(83, 83, 83, 0.4);
|
||||
border-radius: 3px;
|
||||
padding: 2.5px 10px;
|
||||
margin: 0 5px 5px 0;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.postcard .postcard__tagbox .tag__item:hover {
|
||||
background: rgba(83, 83, 83, 0.8);
|
||||
}
|
||||
.postcard:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-image: linear-gradient(-70deg, #424242, transparent 50%);
|
||||
opacity: 1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.postcard:hover .postcard__bar {
|
||||
width: 100px;
|
||||
}
|
||||
@media screen and (min-width: 769px) {
|
||||
.postcard {
|
||||
flex-wrap: inherit;
|
||||
}
|
||||
.postcard .postcard__title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.postcard .postcard__tagbox {
|
||||
justify-content: start;
|
||||
}
|
||||
.postcard .postcard__img {
|
||||
max-width: 300px;
|
||||
max-height: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.postcard .postcard__text {
|
||||
padding: 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
.postcard .media.postcard__text:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
background: #18151f;
|
||||
top: -20%;
|
||||
height: 130%;
|
||||
width: 55px;
|
||||
}
|
||||
.postcard:hover .postcard__img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.postcard:nth-child(2n + 1) {
|
||||
flex-direction: row;
|
||||
}
|
||||
.postcard:nth-child(2n + 0) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.postcard:nth-child(2n + 1) .postcard__text::before {
|
||||
left: -12px !important;
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
.postcard:nth-child(2n + 0) .postcard__text::before {
|
||||
right: -12px !important;
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1024px) {
|
||||
.postcard__text {
|
||||
padding: 2rem 3.5rem;
|
||||
}
|
||||
.postcard__text:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: -20%;
|
||||
height: 130%;
|
||||
width: 55px;
|
||||
}
|
||||
.postcard.dark .postcard__text:before {
|
||||
background: #18151f;
|
||||
}
|
||||
.postcard.light .postcard__text:before {
|
||||
background: #e1e5ea;
|
||||
}
|
||||
}
|
||||
/* COLORS */
|
||||
.postcard .postcard__tagbox .green.play:hover {
|
||||
background: #79dd09;
|
||||
color: black;
|
||||
}
|
||||
.green .postcard__title:hover {
|
||||
color: #79dd09;
|
||||
}
|
||||
.green .postcard__bar {
|
||||
background-color: #79dd09;
|
||||
}
|
||||
.green::before {
|
||||
background-image: linear-gradient(
|
||||
-30deg,
|
||||
rgba(121, 221, 9, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.green:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
30deg,
|
||||
rgba(121, 221, 9, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.postcard .postcard__tagbox .blue.play:hover {
|
||||
background: #0076bd;
|
||||
}
|
||||
.blue .postcard__title:hover {
|
||||
color: #0076bd;
|
||||
}
|
||||
.blue .postcard__bar {
|
||||
background-color: #0076bd;
|
||||
}
|
||||
.blue::before {
|
||||
background-image: linear-gradient(
|
||||
-30deg,
|
||||
rgba(0, 118, 189, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.blue:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
30deg,
|
||||
rgba(0, 118, 189, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.postcard .postcard__tagbox .red.play:hover {
|
||||
background: #bd150b;
|
||||
}
|
||||
.red .postcard__title:hover {
|
||||
color: #bd150b;
|
||||
}
|
||||
.red .postcard__bar {
|
||||
background-color: #bd150b;
|
||||
}
|
||||
.red::before {
|
||||
background-image: linear-gradient(
|
||||
-30deg,
|
||||
rgba(189, 21, 11, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.red:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
30deg,
|
||||
rgba(189, 21, 11, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.postcard .postcard__tagbox .yellow.play:hover {
|
||||
background: #bdbb49;
|
||||
color: black;
|
||||
}
|
||||
.yellow .postcard__title:hover {
|
||||
color: #bdbb49;
|
||||
}
|
||||
.yellow .postcard__bar {
|
||||
background-color: #bdbb49;
|
||||
}
|
||||
.yellow::before {
|
||||
background-image: linear-gradient(
|
||||
-30deg,
|
||||
rgba(189, 187, 73, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.yellow:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
30deg,
|
||||
rgba(189, 187, 73, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
@media screen and (min-width: 769px) {
|
||||
.green::before {
|
||||
background-image: linear-gradient(
|
||||
-80deg,
|
||||
rgba(121, 221, 9, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.green:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
80deg,
|
||||
rgba(121, 221, 9, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.blue::before {
|
||||
background-image: linear-gradient(
|
||||
-80deg,
|
||||
rgba(0, 118, 189, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.blue:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
80deg,
|
||||
rgba(0, 118, 189, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.red::before {
|
||||
background-image: linear-gradient(
|
||||
-80deg,
|
||||
rgba(189, 21, 11, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.red:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
80deg,
|
||||
rgba(189, 21, 11, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.yellow::before {
|
||||
background-image: linear-gradient(
|
||||
-80deg,
|
||||
rgba(189, 187, 73, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.yellow:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
80deg,
|
||||
rgba(189, 187, 73, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/* code pen finish */
|
||||
|
||||
/* color: #1b1b1b; */
|
||||
/* color: #2a9d8f */
|
||||
/* @media (min-width: 768px) {
|
||||
#wrapper {
|
||||
max-width: 992px;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin: auto;
|
||||
padding: 0.5rem;
|
||||
flex: 4;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#aboutMe {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#bio {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
#contact {
|
||||
flex: 1;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.contactLinks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contactLinks li {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.contactLinks a {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.contactLinks i {
|
||||
margin: auto 5px;
|
||||
}
|
||||
|
||||
#skills {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#project-container {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.project-item img {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.project-skills {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: end;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.project-skills h4 {
|
||||
margin: 1.5rem;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.project-skills ul {
|
||||
margin: 1.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.project-item a {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 0 auto;
|
||||
width: 87%;
|
||||
padding: 2rem;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
} */
|
||||
|
||||
|
||||
821
app/scss/style.css
Normal file
821
app/scss/style.css
Normal file
@@ -0,0 +1,821 @@
|
||||
html {
|
||||
font-size: 100%;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
-webkit-box-sizing: inherit;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif;
|
||||
line-height: 1.3;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
background-color: #212121;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: #c9cacc;
|
||||
background-color: #110f16;
|
||||
/* background-color: #272727; */
|
||||
font-size: 16px;
|
||||
font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
/* line-height: 1.725; */
|
||||
text-rendering: geometricPrecision;
|
||||
min-height: 100vh;
|
||||
/* margin: 0 auto; */
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
/* max-width: 560px; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
margin: auto;
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
border-radius: 500px;
|
||||
padding: 0.2rem;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
color: #c9cacc;
|
||||
letter-spacing: 0.09rem;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background-color: #29f3c3;
|
||||
color: #1b1b1b;
|
||||
-webkit-transition: 150ms ease;
|
||||
transition: 150ms ease;
|
||||
}
|
||||
|
||||
/* header {
|
||||
color: #c9cacc;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
line-height: 1.75rem;
|
||||
border-top: 1.5px solid #666;
|
||||
border-bottom: 1.5px solid #666;
|
||||
} */
|
||||
/* header img {
|
||||
width: 100px;
|
||||
border: 5px solid #666;
|
||||
border-radius: 165px;
|
||||
} */
|
||||
.card {
|
||||
background-color: #151515;
|
||||
margin: 2rem;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.card-top {
|
||||
margin: auto;
|
||||
height: 80px;
|
||||
background: #29f3c3;
|
||||
border-start-end-radius: 10px;
|
||||
border-start-start-radius: 10px;
|
||||
}
|
||||
|
||||
.card img {
|
||||
margin: 40px auto 10px;
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
/* font-family: 'Source Sans Pro', sans-serif; */
|
||||
/* font-weight: 700; */
|
||||
/* line-height: 2rem; */
|
||||
/* letter-spacing: 0.05rem; */
|
||||
}
|
||||
|
||||
h1 a {
|
||||
font-size: .8em;
|
||||
color: #c9cacc;
|
||||
text-decoration: none;
|
||||
letter-spacing: -.05em;
|
||||
word-spacing: -.05em;
|
||||
}
|
||||
|
||||
h1 a:hover {
|
||||
color: #29f3c3;
|
||||
}
|
||||
|
||||
header h2 {
|
||||
/* font-weight: 200; */
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.01rem;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
/* letter-spacing: 0.01rem; */
|
||||
}
|
||||
|
||||
#aboutMe {
|
||||
letter-spacing: 0.01rem;
|
||||
}
|
||||
|
||||
#bio,
|
||||
#skills {
|
||||
padding: 1.5rem;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
#bio h2 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
#skills h4 {
|
||||
padding: 1.5rem;
|
||||
color: #666;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
#skills ul {
|
||||
line-height: 1.35rem;
|
||||
font-weight: 200;
|
||||
text-align: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.skills {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
-ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
gap: 10px 75px;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas: '. .' '. .' '. .' '. .' '. .' '. .' '. .' '. .';
|
||||
}
|
||||
|
||||
#contact {
|
||||
margin-top: 1rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#contact h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#contact ul {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contactLinks li {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.contactLinks a {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
color: #c9cacc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.contactLinks a:hover {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#project-wrapper {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
#project-wrapper h2 {
|
||||
margin: 0;
|
||||
padding: 1.5rem 1.5rem 0 1.5rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#project-wrapper h3 {
|
||||
font-size: 1.5rem;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem;
|
||||
letter-spacing: 0.01rem;
|
||||
}
|
||||
|
||||
.project-item {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
margin: 1.5rem 0;
|
||||
text-align: center;
|
||||
font-weight: 200;
|
||||
letter-spacing: 0.01rem;
|
||||
}
|
||||
|
||||
.project-item a {
|
||||
color: #c9cacc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.project-item a:hover {
|
||||
color: #29f3c3;
|
||||
}
|
||||
|
||||
.project-desc {
|
||||
margin: 0;
|
||||
padding: 0 0.8rem;
|
||||
}
|
||||
|
||||
.project-skills {
|
||||
color: #666;
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
line-height: 1.25rem;
|
||||
text-align: start;
|
||||
padding: 0 1.5rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: baseline;
|
||||
-ms-flex-align: baseline;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.project-skills h4 {
|
||||
font-size: 1.5rem;
|
||||
/* flex: 1; */
|
||||
}
|
||||
|
||||
.project-skills li {
|
||||
list-style-type: none;
|
||||
color: #c9cacc;
|
||||
}
|
||||
|
||||
.project-skills ul {
|
||||
/* flex: 9; */
|
||||
line-height: 2rem;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.project-item img {
|
||||
max-width: 375px;
|
||||
/* width: 90%; */
|
||||
box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75);
|
||||
-webkit-box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
footer {
|
||||
color: #666;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
margin: 0.4rem;
|
||||
letter-spacing: 0.1rem;
|
||||
}
|
||||
|
||||
#footLinks {
|
||||
margin: 0.4rem;
|
||||
letter-spacing: 0.8rem;
|
||||
}
|
||||
|
||||
#footLinks a {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#footLinks a:hover {
|
||||
color: #c9cacc;
|
||||
-webkit-transition: 160ms ease-in;
|
||||
transition: 160ms ease-in;
|
||||
}
|
||||
|
||||
code pen begin
|
||||
.dark {
|
||||
background: #110f16;
|
||||
}
|
||||
|
||||
.light {
|
||||
background: #f3f5f7;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
-webkit-transition: color 0.3s ease-in-out;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.postcard {
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
|
||||
box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
|
||||
border-radius: 10px;
|
||||
margin: 0 0 2rem 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.postcard.dark {
|
||||
background-color: #18151f;
|
||||
}
|
||||
|
||||
.postcard.light {
|
||||
background-color: #e1e5ea;
|
||||
}
|
||||
|
||||
.postcard .t-dark {
|
||||
color: #18151f;
|
||||
}
|
||||
|
||||
.postcard a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.postcard h1,
|
||||
.postcard .h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.postcard .small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.postcard .postcard__title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.postcard .postcard__img {
|
||||
max-height: 180px;
|
||||
width: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.postcard .postcard__img_link {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.postcard .postcard__bar {
|
||||
width: 50px;
|
||||
height: 10px;
|
||||
margin: 10px 0;
|
||||
border-radius: 5px;
|
||||
background-color: #424242;
|
||||
-webkit-transition: width 0.2s ease;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.postcard .postcard__text {
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.postcard .postcard__preview-txt {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: justify;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.postcard .postcard__tagbox {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
font-size: 14px;
|
||||
margin: 20px 0 0 0;
|
||||
padding: 0;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.postcard .postcard__tagbox .tag__item {
|
||||
display: inline-block;
|
||||
background: rgba(83, 83, 83, 0.4);
|
||||
border-radius: 3px;
|
||||
padding: 2.5px 10px;
|
||||
margin: 0 5px 5px 0;
|
||||
cursor: default;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-transition: background-color 0.3s;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.postcard .postcard__tagbox .tag__item:hover {
|
||||
background: rgba(83, 83, 83, 0.8);
|
||||
}
|
||||
|
||||
.postcard:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-image: linear-gradient(-70deg, #424242, transparent 50%);
|
||||
opacity: 1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.postcard:hover .postcard__bar {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
.postcard {
|
||||
-ms-flex-wrap: inherit;
|
||||
flex-wrap: inherit;
|
||||
}
|
||||
.postcard .postcard__title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.postcard .postcard__tagbox {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: start;
|
||||
}
|
||||
.postcard .postcard__img {
|
||||
max-width: 300px;
|
||||
max-height: 100%;
|
||||
-webkit-transition: -webkit-transform 0.3s ease;
|
||||
transition: -webkit-transform 0.3s ease;
|
||||
transition: transform 0.3s ease;
|
||||
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
|
||||
}
|
||||
.postcard .postcard__text {
|
||||
padding: 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
.postcard .media.postcard__text:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
background: #18151f;
|
||||
top: -20%;
|
||||
height: 130%;
|
||||
width: 55px;
|
||||
}
|
||||
.postcard:hover .postcard__img {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.postcard:nth-child(2n + 1) {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
.postcard:nth-child(2n + 0) {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: reverse;
|
||||
-ms-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.postcard:nth-child(2n + 1) .postcard__text::before {
|
||||
left: -12px !important;
|
||||
-webkit-transform: rotate(4deg);
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
.postcard:nth-child(2n + 0) .postcard__text::before {
|
||||
right: -12px !important;
|
||||
-webkit-transform: rotate(-4deg);
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.postcard__text {
|
||||
padding: 2rem 3.5rem;
|
||||
}
|
||||
.postcard__text:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: -20%;
|
||||
height: 130%;
|
||||
width: 55px;
|
||||
}
|
||||
.postcard.dark .postcard__text:before {
|
||||
background: #18151f;
|
||||
}
|
||||
.postcard.light .postcard__text:before {
|
||||
background: #e1e5ea;
|
||||
}
|
||||
}
|
||||
|
||||
/* COLORS */
|
||||
.postcard .postcard__tagbox .green.play:hover {
|
||||
background: #79dd09;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.green .postcard__title:hover {
|
||||
color: #79dd09;
|
||||
}
|
||||
|
||||
.green .postcard__bar {
|
||||
background-color: #79dd09;
|
||||
}
|
||||
|
||||
.green::before {
|
||||
background-image: linear-gradient(-30deg, rgba(121, 221, 9, 0.1), transparent 50%);
|
||||
}
|
||||
|
||||
.green:nth-child(2n)::before {
|
||||
background-image: linear-gradient(30deg, rgba(121, 221, 9, 0.1), transparent 50%);
|
||||
}
|
||||
|
||||
.postcard .postcard__tagbox .blue.play:hover {
|
||||
background: #0076bd;
|
||||
}
|
||||
|
||||
.blue .postcard__title:hover {
|
||||
color: #0076bd;
|
||||
}
|
||||
|
||||
.blue .postcard__bar {
|
||||
background-color: #0076bd;
|
||||
}
|
||||
|
||||
.blue::before {
|
||||
background-image: linear-gradient(-30deg, rgba(0, 118, 189, 0.1), transparent 50%);
|
||||
}
|
||||
|
||||
.blue:nth-child(2n)::before {
|
||||
background-image: linear-gradient(30deg, rgba(0, 118, 189, 0.1), transparent 50%);
|
||||
}
|
||||
|
||||
.postcard .postcard__tagbox .red.play:hover {
|
||||
background: #bd150b;
|
||||
}
|
||||
|
||||
.red .postcard__title:hover {
|
||||
color: #bd150b;
|
||||
}
|
||||
|
||||
.red .postcard__bar {
|
||||
background-color: #bd150b;
|
||||
}
|
||||
|
||||
.red::before {
|
||||
background-image: linear-gradient(-30deg, rgba(189, 21, 11, 0.1), transparent 50%);
|
||||
}
|
||||
|
||||
.red:nth-child(2n)::before {
|
||||
background-image: linear-gradient(30deg, rgba(189, 21, 11, 0.1), transparent 50%);
|
||||
}
|
||||
|
||||
.postcard .postcard__tagbox .yellow.play:hover {
|
||||
background: #bdbb49;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.yellow .postcard__title:hover {
|
||||
color: #bdbb49;
|
||||
}
|
||||
|
||||
.yellow .postcard__bar {
|
||||
background-color: #bdbb49;
|
||||
}
|
||||
|
||||
.yellow::before {
|
||||
background-image: linear-gradient(-30deg, rgba(189, 187, 73, 0.1), transparent 50%);
|
||||
}
|
||||
|
||||
.yellow:nth-child(2n)::before {
|
||||
background-image: linear-gradient(30deg, rgba(189, 187, 73, 0.1), transparent 50%);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
.green::before {
|
||||
background-image: linear-gradient(-80deg, rgba(121, 221, 9, 0.1), transparent 50%);
|
||||
}
|
||||
.green:nth-child(2n)::before {
|
||||
background-image: linear-gradient(80deg, rgba(121, 221, 9, 0.1), transparent 50%);
|
||||
}
|
||||
.blue::before {
|
||||
background-image: linear-gradient(-80deg, rgba(0, 118, 189, 0.1), transparent 50%);
|
||||
}
|
||||
.blue:nth-child(2n)::before {
|
||||
background-image: linear-gradient(80deg, rgba(0, 118, 189, 0.1), transparent 50%);
|
||||
}
|
||||
.red::before {
|
||||
background-image: linear-gradient(-80deg, rgba(189, 21, 11, 0.1), transparent 50%);
|
||||
}
|
||||
.red:nth-child(2n)::before {
|
||||
background-image: linear-gradient(80deg, rgba(189, 21, 11, 0.1), transparent 50%);
|
||||
}
|
||||
.yellow::before {
|
||||
background-image: linear-gradient(-80deg, rgba(189, 187, 73, 0.1), transparent 50%);
|
||||
}
|
||||
.yellow:nth-child(2n)::before {
|
||||
background-image: linear-gradient(80deg, rgba(189, 187, 73, 0.1), transparent 50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* code pen finish */
|
||||
/* color: #1b1b1b; */
|
||||
/* color: #2a9d8f */
|
||||
/* @media (min-width: 768px) {
|
||||
#wrapper {
|
||||
max-width: 992px;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin: auto;
|
||||
padding: 0.5rem;
|
||||
flex: 4;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#aboutMe {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#bio {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
#contact {
|
||||
flex: 1;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.contactLinks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contactLinks li {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.contactLinks a {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.contactLinks i {
|
||||
margin: auto 5px;
|
||||
}
|
||||
|
||||
#skills {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#project-container {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.project-item img {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.project-skills {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: end;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.project-skills h4 {
|
||||
margin: 1.5rem;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.project-skills ul {
|
||||
margin: 1.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.project-item a {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 0 auto;
|
||||
width: 87%;
|
||||
padding: 2rem;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
} */
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
10
app/scss/style.css.map
Normal file
10
app/scss/style.css.map
Normal file
File diff suppressed because one or more lines are too long
1
app/scss/style.scss
Normal file
1
app/scss/style.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import "globals";
|
||||
64
index.html
64
index.html
@@ -10,14 +10,15 @@
|
||||
href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;600;700&display=swap');
|
||||
</style>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;600;700&display=swap');
|
||||
</style>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');
|
||||
</style>
|
||||
</style>
|
||||
<script src="https://use.fontawesome.com/e427b1b41a.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Tyler Koenig</title>
|
||||
</head>
|
||||
<body>
|
||||
@@ -34,6 +35,8 @@
|
||||
</ul>
|
||||
</nav>
|
||||
<header>
|
||||
<div class="card">
|
||||
<div class="card-top"></div>
|
||||
<img src="/images/headshot-tyler_koenig.png" alt="tyler" />
|
||||
<h1>
|
||||
<a href="index.html">Tyler Koenig</a>
|
||||
@@ -43,6 +46,7 @@
|
||||
<br />
|
||||
Student at We Can Code IT, Web Developer in the making!
|
||||
</h2>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section id="aboutMe">
|
||||
@@ -121,8 +125,54 @@
|
||||
<li>Relational Databases</li>
|
||||
<li>Source Control/ Github</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
<article class="postcard dark blue">
|
||||
<a class="postcard__img_link" href="#">
|
||||
<img
|
||||
class="postcard__img"
|
||||
src="https://picsum.photos/1000/1000"
|
||||
alt="Image Title"
|
||||
/>
|
||||
</a>
|
||||
<div class="postcard__text">
|
||||
<h1 class="postcard__title blue">
|
||||
<a href="#">Podcast Title</a>
|
||||
</h1>
|
||||
<div class="postcard__subtitle small">
|
||||
<time datetime="2020-05-25 12:00:00">
|
||||
<i class="fas fa-calendar-alt mr-2"></i>Mon, May
|
||||
25th 2020
|
||||
</time>
|
||||
</div>
|
||||
<div class="postcard__bar"></div>
|
||||
<div class="postcard__preview-txt">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing
|
||||
elit. Eligendi, fugiat asperiores inventore beatae
|
||||
accusamus odit minima enim, commodi quia, doloribus
|
||||
eius! Ducimus nemo accusantium maiores velit
|
||||
corrupti tempora reiciendis molestiae repellat vero.
|
||||
Eveniet ipsam adipisci illo iusto quibusdam, sunt
|
||||
neque nulla unde ipsum dolores nobis enim quidem
|
||||
excepturi, illum quos!
|
||||
</div>
|
||||
<ul class="postcard__tagbox">
|
||||
<li class="tag__item">
|
||||
<i class="fa fa-tag mr-2"></i>Podcast
|
||||
</li>
|
||||
<li class="tag__item">
|
||||
<i class="fa fa-clock mr-2"></i>55 mins.
|
||||
</li>
|
||||
<li class="tag__item play blue">
|
||||
<a href="#"
|
||||
><i class="fa fa-play mr-2"></i>Play
|
||||
Episode</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<section id="project-wrapper">
|
||||
<h2>projects</h2>
|
||||
<div>
|
||||
@@ -426,6 +476,6 @@
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="index.js" type="text/java"></script>
|
||||
<script src="app/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
403
style.css
403
style.css
@@ -1,25 +1,34 @@
|
||||
html {
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
color: #c9cacc;
|
||||
background-color: #272727;
|
||||
background-color: #110f16;
|
||||
/* background-color: #272727; */
|
||||
font-size: 16px;
|
||||
font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.725;
|
||||
/* line-height: 1.725; */
|
||||
text-rendering: geometricPrecision;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
/* margin: 0 auto; */
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
/* max-width: 560px; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -46,7 +55,7 @@ nav a:hover {
|
||||
transition: 150ms ease;
|
||||
}
|
||||
|
||||
header {
|
||||
/* header {
|
||||
color: #c9cacc;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
@@ -54,25 +63,50 @@ header {
|
||||
line-height: 1.75rem;
|
||||
border-top: 1.5px solid #666;
|
||||
border-bottom: 1.5px solid #666;
|
||||
}
|
||||
} */
|
||||
|
||||
header img {
|
||||
/* header img {
|
||||
width: 100px;
|
||||
border: 5px solid #666;
|
||||
border-radius: 165px;
|
||||
} */
|
||||
|
||||
.card {
|
||||
background-color: #151515;
|
||||
margin: 2rem;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.card-top {
|
||||
margin: auto;
|
||||
height: 80px;
|
||||
background: #29f3c3;
|
||||
border-start-end-radius: 10px;
|
||||
border-start-start-radius: 10px;
|
||||
}
|
||||
|
||||
.card img {
|
||||
margin: 40px auto 10px;
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
/* font-family: 'Source Sans Pro', sans-serif; */
|
||||
/* font-weight: 700; */
|
||||
line-height: 2rem;
|
||||
/* line-height: 2rem; */
|
||||
/* letter-spacing: 0.05rem; */
|
||||
}
|
||||
|
||||
h1 a {
|
||||
font-size: 3rem;
|
||||
font-size: .8em;
|
||||
color: #c9cacc;
|
||||
text-decoration: none;
|
||||
letter-spacing: -.05em;
|
||||
word-spacing: -.05em;
|
||||
|
||||
}
|
||||
|
||||
h1 a:hover {
|
||||
@@ -80,7 +114,7 @@ h1 a:hover {
|
||||
}
|
||||
|
||||
header h2 {
|
||||
font-weight: 200;
|
||||
/* font-weight: 200; */
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.01rem;
|
||||
}
|
||||
@@ -88,7 +122,7 @@ header h2 {
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
letter-spacing: 0.01rem;
|
||||
/* letter-spacing: 0.01rem; */
|
||||
}
|
||||
|
||||
#aboutMe {
|
||||
@@ -277,11 +311,348 @@ footer {
|
||||
transition: 160ms ease-in;
|
||||
}
|
||||
|
||||
code pen begin
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');
|
||||
/* This pen */
|
||||
|
||||
.dark {
|
||||
background: #110f16;
|
||||
}
|
||||
.light {
|
||||
background: #f3f5f7;
|
||||
}
|
||||
a,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.postcard {
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
|
||||
border-radius: 10px;
|
||||
margin: 0 0 2rem 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
}
|
||||
.postcard.dark {
|
||||
background-color: #18151f;
|
||||
}
|
||||
.postcard.light {
|
||||
background-color: #e1e5ea;
|
||||
}
|
||||
.postcard .t-dark {
|
||||
color: #18151f;
|
||||
}
|
||||
.postcard a {
|
||||
color: inherit;
|
||||
}
|
||||
.postcard h1,
|
||||
.postcard .h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.postcard .small {
|
||||
font-size: 80%;
|
||||
}
|
||||
.postcard .postcard__title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
.postcard .postcard__img {
|
||||
max-height: 180px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
}
|
||||
.postcard .postcard__img_link {
|
||||
display: contents;
|
||||
}
|
||||
.postcard .postcard__bar {
|
||||
width: 50px;
|
||||
height: 10px;
|
||||
margin: 10px 0;
|
||||
border-radius: 5px;
|
||||
background-color: #424242;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
.postcard .postcard__text {
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.postcard .postcard__preview-txt {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: justify;
|
||||
height: 100%;
|
||||
}
|
||||
.postcard .postcard__tagbox {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
font-size: 14px;
|
||||
margin: 20px 0 0 0;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
.postcard .postcard__tagbox .tag__item {
|
||||
display: inline-block;
|
||||
background: rgba(83, 83, 83, 0.4);
|
||||
border-radius: 3px;
|
||||
padding: 2.5px 10px;
|
||||
margin: 0 5px 5px 0;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.postcard .postcard__tagbox .tag__item:hover {
|
||||
background: rgba(83, 83, 83, 0.8);
|
||||
}
|
||||
.postcard:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-image: linear-gradient(-70deg, #424242, transparent 50%);
|
||||
opacity: 1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.postcard:hover .postcard__bar {
|
||||
width: 100px;
|
||||
}
|
||||
@media screen and (min-width: 769px) {
|
||||
.postcard {
|
||||
flex-wrap: inherit;
|
||||
}
|
||||
.postcard .postcard__title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.postcard .postcard__tagbox {
|
||||
justify-content: start;
|
||||
}
|
||||
.postcard .postcard__img {
|
||||
max-width: 300px;
|
||||
max-height: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.postcard .postcard__text {
|
||||
padding: 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
.postcard .media.postcard__text:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
background: #18151f;
|
||||
top: -20%;
|
||||
height: 130%;
|
||||
width: 55px;
|
||||
}
|
||||
.postcard:hover .postcard__img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.postcard:nth-child(2n + 1) {
|
||||
flex-direction: row;
|
||||
}
|
||||
.postcard:nth-child(2n + 0) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.postcard:nth-child(2n + 1) .postcard__text::before {
|
||||
left: -12px !important;
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
.postcard:nth-child(2n + 0) .postcard__text::before {
|
||||
right: -12px !important;
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1024px) {
|
||||
.postcard__text {
|
||||
padding: 2rem 3.5rem;
|
||||
}
|
||||
.postcard__text:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: -20%;
|
||||
height: 130%;
|
||||
width: 55px;
|
||||
}
|
||||
.postcard.dark .postcard__text:before {
|
||||
background: #18151f;
|
||||
}
|
||||
.postcard.light .postcard__text:before {
|
||||
background: #e1e5ea;
|
||||
}
|
||||
}
|
||||
/* COLORS */
|
||||
.postcard .postcard__tagbox .green.play:hover {
|
||||
background: #79dd09;
|
||||
color: black;
|
||||
}
|
||||
.green .postcard__title:hover {
|
||||
color: #79dd09;
|
||||
}
|
||||
.green .postcard__bar {
|
||||
background-color: #79dd09;
|
||||
}
|
||||
.green::before {
|
||||
background-image: linear-gradient(
|
||||
-30deg,
|
||||
rgba(121, 221, 9, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.green:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
30deg,
|
||||
rgba(121, 221, 9, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.postcard .postcard__tagbox .blue.play:hover {
|
||||
background: #0076bd;
|
||||
}
|
||||
.blue .postcard__title:hover {
|
||||
color: #0076bd;
|
||||
}
|
||||
.blue .postcard__bar {
|
||||
background-color: #0076bd;
|
||||
}
|
||||
.blue::before {
|
||||
background-image: linear-gradient(
|
||||
-30deg,
|
||||
rgba(0, 118, 189, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.blue:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
30deg,
|
||||
rgba(0, 118, 189, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.postcard .postcard__tagbox .red.play:hover {
|
||||
background: #bd150b;
|
||||
}
|
||||
.red .postcard__title:hover {
|
||||
color: #bd150b;
|
||||
}
|
||||
.red .postcard__bar {
|
||||
background-color: #bd150b;
|
||||
}
|
||||
.red::before {
|
||||
background-image: linear-gradient(
|
||||
-30deg,
|
||||
rgba(189, 21, 11, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.red:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
30deg,
|
||||
rgba(189, 21, 11, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.postcard .postcard__tagbox .yellow.play:hover {
|
||||
background: #bdbb49;
|
||||
color: black;
|
||||
}
|
||||
.yellow .postcard__title:hover {
|
||||
color: #bdbb49;
|
||||
}
|
||||
.yellow .postcard__bar {
|
||||
background-color: #bdbb49;
|
||||
}
|
||||
.yellow::before {
|
||||
background-image: linear-gradient(
|
||||
-30deg,
|
||||
rgba(189, 187, 73, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.yellow:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
30deg,
|
||||
rgba(189, 187, 73, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
@media screen and (min-width: 769px) {
|
||||
.green::before {
|
||||
background-image: linear-gradient(
|
||||
-80deg,
|
||||
rgba(121, 221, 9, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.green:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
80deg,
|
||||
rgba(121, 221, 9, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.blue::before {
|
||||
background-image: linear-gradient(
|
||||
-80deg,
|
||||
rgba(0, 118, 189, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.blue:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
80deg,
|
||||
rgba(0, 118, 189, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.red::before {
|
||||
background-image: linear-gradient(
|
||||
-80deg,
|
||||
rgba(189, 21, 11, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.red:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
80deg,
|
||||
rgba(189, 21, 11, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.yellow::before {
|
||||
background-image: linear-gradient(
|
||||
-80deg,
|
||||
rgba(189, 187, 73, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.yellow:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
80deg,
|
||||
rgba(189, 187, 73, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/* code pen finish */
|
||||
|
||||
/* color: #1b1b1b; */
|
||||
/* color: #2a9d8f */
|
||||
@media (min-width: 576px) {
|
||||
/* @media (min-width: 768px) {
|
||||
#wrapper {
|
||||
width: 560px;
|
||||
max-width: 992px;
|
||||
}
|
||||
|
||||
nav {
|
||||
@@ -375,4 +746,6 @@ footer {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user