Merge pull request #3 from lerko96/project-design
needs code removed, but functional and cleaner look.
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";
|
||||||
BIN
images/were-hooked.png
Normal file
BIN
images/were-hooked.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 829 KiB |
772
index.html
772
index.html
@@ -10,419 +10,437 @@
|
|||||||
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"
|
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"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;600;700&display=swap');
|
||||||
|
</style>
|
||||||
<style>
|
<style>
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');
|
@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>
|
<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>
|
<title>Tyler Koenig</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="wrapper">
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<a href="index.html">TYLER KOENIG</a>
|
<a href="index.html">TYLER KOENIG</a>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#bio" target="_self">ABOUT</a></li>
|
<li><a href="#about" target="_self">ABOUT</a></li>
|
||||||
<li><a href="#contact" target="_self">CONTACT</a></li>
|
<li id="nav__contact">
|
||||||
|
<a href="#contact" target="_self">CONTACT</a>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#project-wrapper" target="_self">PROJECTS</a>
|
<a href="#projects" target="_self">PROJECTS</a>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="#skills" target="_self">SKILLS</a></li>
|
<li><a href="#skills" target="_self">SKILLS</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<header>
|
</header>
|
||||||
<img src="/images/headshot-tyler_koenig.png" alt="tyler" />
|
<main>
|
||||||
<h1>
|
<div class="side__nav">
|
||||||
<a href="index.html">Tyler Koenig</a>
|
<a
|
||||||
</h1>
|
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
|
||||||
<h2>
|
target="_blank"
|
||||||
Warehouse Associate at Amazon
|
title="LinkedIn"
|
||||||
<br />
|
><i
|
||||||
Student at We Can Code IT, Web Developer in the making!
|
class="fa fa-linkedin-square fa-2x"
|
||||||
</h2>
|
aria-hidden="true"
|
||||||
</header>
|
></i
|
||||||
<main>
|
></a>
|
||||||
<section id="aboutMe">
|
<a
|
||||||
<div id="bio">
|
href="https://github.com/lerko96"
|
||||||
<h2>about me</h2>
|
target="_blank"
|
||||||
<p>
|
title="github"
|
||||||
I'm Tyler Koenig, a lifelong student. Graduated with
|
><i class="fa fa-github fa-2x" aria-hidden="true"></i
|
||||||
an Associate of Arts from Lorain County Community
|
></a>
|
||||||
College in 2018. Inbound associate at Amazon CLE-3
|
<a
|
||||||
since December 2019. Currently learning Java and
|
href="mailto:tylerkng96@icloud.com"
|
||||||
front-end web development through We Can Code IT
|
target="_blank"
|
||||||
Bootcamp. Always interested in a challenge!
|
title="email"
|
||||||
</p>
|
><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i
|
||||||
</div>
|
></a>
|
||||||
<div id="contact">
|
</div>
|
||||||
<h3>contact</h3>
|
<div id="wrapper">
|
||||||
<ul class="contactLinks">
|
<section id="intro">
|
||||||
<li>
|
<div class="top__wrap">
|
||||||
<a
|
<article class="card" id="profile">
|
||||||
href="https://github.com/lerko96"
|
<div class="card_top">
|
||||||
target="_blank"
|
<div class="avatar-holder">
|
||||||
title="github"
|
<img
|
||||||
>
|
id="headshot"
|
||||||
github
|
src="/images/headshot-tyler_koenig.png"
|
||||||
<i
|
alt="tyler"
|
||||||
class="fa fa-github fa-lg"
|
/>
|
||||||
aria-hidden="true"
|
</div>
|
||||||
></i>
|
</div>
|
||||||
</a>
|
<div class="name">
|
||||||
</li>
|
<a href="index.html">Tyler Koenig</a>
|
||||||
<li>
|
</div>
|
||||||
|
<div class="intro_bio">
|
||||||
|
<p>
|
||||||
|
Passionate Software Developer
|
||||||
|
<br />
|
||||||
|
Recent Graduate of We Can Code IT
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="contact-links" id="contact">
|
||||||
<a
|
<a
|
||||||
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
|
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
title="LinkedIn"
|
title="LinkedIn"
|
||||||
>
|
><i
|
||||||
linkedin
|
class="fa fa-linkedin-square fa-2x"
|
||||||
<i
|
|
||||||
class="fa fa-linkedin-square fa-lg"
|
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
></i>
|
></i
|
||||||
</a>
|
></a>
|
||||||
</li>
|
<a
|
||||||
<li>
|
href="https://github.com/lerko96"
|
||||||
|
target="_blank"
|
||||||
|
title="github"
|
||||||
|
><i
|
||||||
|
class="fa fa-github fa-2x"
|
||||||
|
aria-hidden="true"
|
||||||
|
></i
|
||||||
|
></a>
|
||||||
<a
|
<a
|
||||||
href="mailto:tylerkng96@icloud.com"
|
href="mailto:tylerkng96@icloud.com"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
title="tylerkng96@icloud.com"
|
title="email"
|
||||||
>email
|
><i
|
||||||
<i
|
class="fa fa-envelope-o fa-2x"
|
||||||
class="fa fa-envelope-o fa-lg"
|
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
></i>
|
></i
|
||||||
</a>
|
></a>
|
||||||
</li>
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="card" id="about">
|
||||||
|
<h2>about</h2>
|
||||||
|
<p>
|
||||||
|
I'm Tyler Koenig, a lifelong student. Graduated
|
||||||
|
with an Associate of Arts from Lorain County
|
||||||
|
Community College in 2018. Inbound associate at
|
||||||
|
Amazon CLE-3 since December 2019. Currently
|
||||||
|
learning Java and front-end web development
|
||||||
|
through We Can Code IT Bootcamp. Always
|
||||||
|
interested in a challenge!
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<article class="card" id="skills">
|
||||||
|
<h2>skills</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Java</li>
|
||||||
|
<li>Spring</li>
|
||||||
|
<li>Thymeleaf</li>
|
||||||
|
<li>JavaScript</li>
|
||||||
|
<li>MVC</li>
|
||||||
|
<li>HTML</li>
|
||||||
|
<li>CSS</li>
|
||||||
|
<li>Test Driven Development</li>
|
||||||
|
<li>Agile (Scrum)</li>
|
||||||
|
<li>Object Oriented Programming</li>
|
||||||
|
<li>JSON</li>
|
||||||
|
<li>React</li>
|
||||||
|
<li>REST APIs</li>
|
||||||
|
<li>Responsive Design</li>
|
||||||
|
<li>Relational Databases</li>
|
||||||
|
<li>Source Control/ Github</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
<section id="skills">
|
<section class="card" id="projects">
|
||||||
<h4>skills</h4>
|
|
||||||
<ul class="skills">
|
|
||||||
<li>Java</li>
|
|
||||||
<li>Spring</li>
|
|
||||||
<li>Thymeleaf</li>
|
|
||||||
<li>JavaScript</li>
|
|
||||||
<li>MVC</li>
|
|
||||||
<li>HTML</li>
|
|
||||||
<li>CSS</li>
|
|
||||||
<li>Test Driven Development</li>
|
|
||||||
<li>Agile (Scrum)</li>
|
|
||||||
<li>Object Oriented Programming</li>
|
|
||||||
<li>JSON</li>
|
|
||||||
<li>React</li>
|
|
||||||
<li>REST APIs</li>
|
|
||||||
<li>Responsive Design</li>
|
|
||||||
<li>Relational Databases</li>
|
|
||||||
<li>Source Control/ Github</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
<section id="project-wrapper">
|
|
||||||
<h2>projects</h2>
|
<h2>projects</h2>
|
||||||
<div>
|
<article class="project">
|
||||||
<article class="project-item">
|
<a
|
||||||
<div>
|
class="project__img_link"
|
||||||
<h3>
|
href="https://github.com/lerko96/were-hooked-repo"
|
||||||
<a
|
target="_blank"
|
||||||
href="https://github.com/pt-spring-2021-team-project-spa/team-2-spa-repo"
|
>
|
||||||
target="_blank"
|
<img
|
||||||
>Mystery Educator</a
|
class="project__img"
|
||||||
>
|
src="/images/were-hooked.png"
|
||||||
</h3>
|
alt="were-hooked-img"
|
||||||
|
/></a>
|
||||||
|
<div class="project__text">
|
||||||
|
<h3 class="project__title">
|
||||||
|
<a
|
||||||
|
href="https://github.com/lerko96/were-hooked-repo"
|
||||||
|
target="_blank"
|
||||||
|
>We're Hooked</a
|
||||||
|
>
|
||||||
|
</h3>
|
||||||
|
<div class="project__subtitle_small">
|
||||||
|
<time datetime="2021-08-20 12:00:00">
|
||||||
|
<i class="fa fa-calendar mr-2"></i>Fri,
|
||||||
|
August 20th 2021
|
||||||
|
</time>
|
||||||
</div>
|
</div>
|
||||||
<div id="project-container">
|
<div class="project__bar"></div>
|
||||||
<div class="container-right">
|
<div class="project__info">
|
||||||
<img
|
<p>
|
||||||
src="/images/mystery-educator.png"
|
Designed, built and tested an MVC
|
||||||
alt="virtual-pet-amok-console"
|
application that allows users to discover
|
||||||
/>
|
fishing locations in Ohio, as well as teach
|
||||||
<div class="project-desc">
|
beginners how to get started fishing and the
|
||||||
<p>
|
current regulations that are needed to
|
||||||
Designed a single page application
|
follow. This project was built between a
|
||||||
that brings back unique data from
|
team of five in a completely remote
|
||||||
MET Museum and NASA APIs.
|
environment with the help of Github, Zoom
|
||||||
</p>
|
and Slack.
|
||||||
</div>
|
</p>
|
||||||
</div>
|
|
||||||
<div class="project-skills">
|
|
||||||
<h4>skills</h4>
|
|
||||||
<ul>
|
|
||||||
<li>Java</li>
|
|
||||||
<li>JavaScript</li>
|
|
||||||
<li>HTML</li>
|
|
||||||
<li>CSS</li>
|
|
||||||
<li>VS Code</li>
|
|
||||||
<li>Github</li>
|
|
||||||
<li>TDD</li>
|
|
||||||
<li>OOP</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
<ul class="project__tagbox">
|
||||||
<article class="project-item">
|
<li class="tag__item">JavaScript</li>
|
||||||
<div>
|
<li class="tag__item">RESTful APIs</li>
|
||||||
<h3>
|
<li class="tag__item">Java</li>
|
||||||
<a
|
<li class="tag__item">OOP</li>
|
||||||
href="https://github.com/2021-Spring-Part-Time/donut-clicker-lerko96"
|
<li class="tag__item">Thymeleaf</li>
|
||||||
target="_blank"
|
<li class="tag__item">HTML</li>
|
||||||
>Donut Clicker</a
|
<li class="tag__item">CSS</li>
|
||||||
>
|
<li class="tag__item">Responsive Design</li>
|
||||||
</h3>
|
<li class="tag__item">TDD</li>
|
||||||
|
<li class="tag__item">VS Code</li>
|
||||||
|
<li class="tag__item">Github</li>
|
||||||
|
<li class="tag__item">Agile</li>
|
||||||
|
<li class="tag__item">Scrum</li>
|
||||||
|
<li class="tag__item">Zoom</li>
|
||||||
|
<li class="tag__item">Slack</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="project">
|
||||||
|
<a
|
||||||
|
class="project__img_link"
|
||||||
|
href="https://github.com/lerko96/mystery-educator"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="project__img"
|
||||||
|
src="/images/mystery-educator.png"
|
||||||
|
alt=""
|
||||||
|
/></a>
|
||||||
|
<div class="project__text">
|
||||||
|
<h3 class="project__title">
|
||||||
|
<a
|
||||||
|
href="https://github.com/lerko96/mystery-educator"
|
||||||
|
target="_blank"
|
||||||
|
>Mystery Educator</a
|
||||||
|
>
|
||||||
|
</h3>
|
||||||
|
<div class="project__subtitle_small">
|
||||||
|
<time datetime="2021-07-23 12:00:00">
|
||||||
|
<i class="fas fa-calendar-alt mr-2"></i>Fri,
|
||||||
|
July 23rd 2021
|
||||||
|
</time>
|
||||||
</div>
|
</div>
|
||||||
<div id="project-container">
|
<div class="project__bar"></div>
|
||||||
<div class="container-right">
|
<div class="project__info">
|
||||||
<img
|
<p>
|
||||||
src="/images/donut-clicker.png"
|
Designed, built and tested a single page
|
||||||
alt="virtual-pet-amok-console"
|
application that renders unique data from
|
||||||
/>
|
the MET Museum and NASA APIs each time you
|
||||||
<div class="project-desc">
|
visit. We also built a local backend
|
||||||
<p>
|
database to store historical information.
|
||||||
Designed a single page application
|
This project was built between a team of
|
||||||
that lets users make virtual donuts
|
four in a completely remote environemnt with
|
||||||
and buy upgrades for the game.
|
the help of Github, Zoom, and Slack.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="project-skills">
|
|
||||||
<h4>skills</h4>
|
|
||||||
<ul>
|
|
||||||
<li>JavaScript</li>
|
|
||||||
<li>HTML</li>
|
|
||||||
<li>CSS</li>
|
|
||||||
<li>VS Code</li>
|
|
||||||
<li>Github</li>
|
|
||||||
<li>TDD</li>
|
|
||||||
<li>OOP</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
<ul class="project__tagbox">
|
||||||
<article class="project-item">
|
<li class="tag__item">JavaScript</li>
|
||||||
<div>
|
<li class="tag__item">Node.js</li>
|
||||||
<h3>
|
<li class="tag__item">RESTful APIs</li>
|
||||||
<a
|
<li class="tag__item">Java</li>
|
||||||
href="https://github.com/pt-spring-2021-team-project-fullstack/team-4-trek"
|
<li class="tag__item">HTML</li>
|
||||||
target="_blank"
|
<li class="tag__item">CSS</li>
|
||||||
>Trekking Website</a
|
<li class="tag__item">Responsive Design</li>
|
||||||
>
|
<li class="tag__item">TDD</li>
|
||||||
</h3>
|
<li class="tag__item">VS Code</li>
|
||||||
|
<li class="tag__item">Github</li>
|
||||||
|
<li class="tag__item">Agile</li>
|
||||||
|
<li class="tag__item">Scrum</li>
|
||||||
|
<li class="tag__item">Zoom</li>
|
||||||
|
<li class="tag__item">Slack</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="project">
|
||||||
|
<a
|
||||||
|
class="project__img_link"
|
||||||
|
href="https://github.com/lerko96/donut-clicker-lerko96"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="project__img"
|
||||||
|
src="/images/donut-clicker.png"
|
||||||
|
alt="donut-clicker-img"
|
||||||
|
/></a>
|
||||||
|
<div class="project__text">
|
||||||
|
<h3 class="project__title">
|
||||||
|
<a
|
||||||
|
href="https://github.com/lerko96/donut-clicker-lerko96"
|
||||||
|
target="_blank"
|
||||||
|
>Donut Clicker</a
|
||||||
|
>
|
||||||
|
</h3>
|
||||||
|
<div class="project__subtitle_small">
|
||||||
|
<time datetime="2021-07-09 12:00:00">
|
||||||
|
<i class="fas fa-calendar-alt mr-2"></i>Fri,
|
||||||
|
July 9th 2021
|
||||||
|
</time>
|
||||||
</div>
|
</div>
|
||||||
<div id="project-container">
|
<div class="project__bar"></div>
|
||||||
<div class="container-right">
|
<div class="project__info">
|
||||||
<img
|
<p>
|
||||||
src="/images/trek.png"
|
Designed, built and tested a single page
|
||||||
alt="virtual-pet-amok-console"
|
application that lets users make virtual
|
||||||
/>
|
donuts via clicking. Once enough donuts are
|
||||||
<div class="project-desc">
|
made you have the ability to purchase
|
||||||
<p>
|
upgrades such as auto-clickers and
|
||||||
Designed an MVC website that lets
|
clicking-multipliers.
|
||||||
users find treks located by region
|
</p>
|
||||||
and continent.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="project-skills">
|
|
||||||
<h4>skills</h4>
|
|
||||||
<ul>
|
|
||||||
<li>Java</li>
|
|
||||||
<li>SpringJPA</li>
|
|
||||||
<li>HTML</li>
|
|
||||||
<li>CSS</li>
|
|
||||||
<li>IntelliJ</li>
|
|
||||||
<li>VS Code</li>
|
|
||||||
<li>Github</li>
|
|
||||||
<li>TDD</li>
|
|
||||||
<li>OOP</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
<ul class="project__tagbox">
|
||||||
<article class="project-item">
|
<li class="tag__item">JavaScript</li>
|
||||||
<div>
|
<li class="tag__item">Node.js</li>
|
||||||
<h3>
|
<li class="tag__item">HTML</li>
|
||||||
<a
|
<li class="tag__item">CSS</li>
|
||||||
href="https://github.com/2021-Spring-Part-Time/reviews-mvc-lerko96"
|
<li class="tag__item">Responsive Design</li>
|
||||||
target="_blank"
|
<li class="tag__item">TDD</li>
|
||||||
>Reviews Site</a
|
<li class="tag__item">VS Code</li>
|
||||||
>
|
<li class="tag__item">Github</li>
|
||||||
</h3>
|
</ul>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="project">
|
||||||
|
<a
|
||||||
|
class="project__img_link"
|
||||||
|
href="https://github.com/lerko96/trek"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="project__img"
|
||||||
|
src="/images/trek.png"
|
||||||
|
alt="trekking-img"
|
||||||
|
/></a>
|
||||||
|
<div class="project__text">
|
||||||
|
<h3 class="project__title">
|
||||||
|
<a
|
||||||
|
href="https://github.com/lerko96/trek"
|
||||||
|
target="_blank"
|
||||||
|
>Trekking Site</a
|
||||||
|
>
|
||||||
|
</h3>
|
||||||
|
<div class="project__subtitle_small">
|
||||||
|
<time datetime="2021-06-18 12:00:00">
|
||||||
|
<i class="fas fa-calendar-alt mr-2"></i>Fri,
|
||||||
|
June 18th 2021
|
||||||
|
</time>
|
||||||
</div>
|
</div>
|
||||||
<div id="project-container">
|
<div class="project__bar"></div>
|
||||||
<div class="container-right">
|
<div class="project__info">
|
||||||
<img src="/images/review-site.png" alt="" />
|
<p>
|
||||||
<div class="project-desc">
|
Designed, built and tested an MVC
|
||||||
<p>
|
application that lets users discover treks
|
||||||
Designed a movie reviews website
|
located by continent, region and type. This
|
||||||
using thymeleaf templates.
|
project was built between a team of four in
|
||||||
</p>
|
a completely remote environemnt with the
|
||||||
</div>
|
help of Github, Zoom and Slack.
|
||||||
</div>
|
</p>
|
||||||
<div class="project-skills">
|
|
||||||
<h4>skills</h4>
|
|
||||||
<ul>
|
|
||||||
<li>Java</li>
|
|
||||||
<li>Thymeleaf</li>
|
|
||||||
<li>HTML</li>
|
|
||||||
<li>CSS</li>
|
|
||||||
<li>IntelliJ</li>
|
|
||||||
<li>Github</li>
|
|
||||||
<li>TDD</li>
|
|
||||||
<li>OOP</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
<ul class="project__tagbox">
|
||||||
<article class="project-item">
|
<li class="tag__item">Java</li>
|
||||||
<div>
|
<li class="tag__item">SpringJPA</li>
|
||||||
<h3>
|
<li class="tag__item">OOP</li>
|
||||||
<a
|
<li class="tag__item">HTML</li>
|
||||||
href="https://github.com/2021-Spring-Part-Time/virtual-pets-amok-lerko96"
|
<li class="tag__item">CSS</li>
|
||||||
target="_blank"
|
<li class="tag__item">Responsive Design</li>
|
||||||
>Virtual Pets Amok</a
|
<li class="tag__item">TDD</li>
|
||||||
>
|
<li class="tag__item">IntelliJ</li>
|
||||||
</h3>
|
<li class="tag__item">Github</li>
|
||||||
|
<li class="tag__item">Agile</li>
|
||||||
|
<li class="tag__item">Scrum</li>
|
||||||
|
<li class="tag__item">Zoom</li>
|
||||||
|
<li class="tag__item">Slack</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="project">
|
||||||
|
<a
|
||||||
|
class="project__img_link"
|
||||||
|
href="https://github.com/lerko96/reviews-mvc"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="project__img"
|
||||||
|
src="/images/review-site.png"
|
||||||
|
alt="review-site-img"
|
||||||
|
/></a>
|
||||||
|
<div class="project__text">
|
||||||
|
<h3 class="project__title">
|
||||||
|
<a
|
||||||
|
href="https://github.com/lerko96/reviews-mvc"
|
||||||
|
target="_blank"
|
||||||
|
>Movie Reviews</a
|
||||||
|
>
|
||||||
|
</h3>
|
||||||
|
<div class="project__subtitle_small">
|
||||||
|
<time datetime="2021-06-04 12:00:00">
|
||||||
|
<i class="fas fa-calendar-alt mr-2"></i>Fri,
|
||||||
|
June 4th 2021
|
||||||
|
</time>
|
||||||
</div>
|
</div>
|
||||||
<div id="project-container">
|
<div class="project__bar"></div>
|
||||||
<div class="container-right">
|
<div class="project__info">
|
||||||
<img
|
<p>
|
||||||
src="/images/amok.png"
|
Designed, built and tested a Java
|
||||||
alt="virtual-pet-amok-console"
|
application for movie reviews.
|
||||||
/>
|
</p>
|
||||||
<div class="project-desc">
|
|
||||||
<p>
|
|
||||||
Console App that builds off of
|
|
||||||
virtual-pet-shelter. This add's
|
|
||||||
robotic pets to the shelter, with
|
|
||||||
their own robotic needs.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="project-skills">
|
|
||||||
<h4>skills</h4>
|
|
||||||
<ul>
|
|
||||||
<li>TDD</li>
|
|
||||||
<li>polymorphism</li>
|
|
||||||
<li>encapsulation</li>
|
|
||||||
<li>interface (implements)</li>
|
|
||||||
<li>abstract class (extends)</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
<ul class="project__tagbox">
|
||||||
<article class="project-item">
|
<li class="tag__item">Java</li>
|
||||||
<div>
|
<li class="tag__item">SpringJPA</li>
|
||||||
<h3>
|
<li class="tag__item">OOP</li>
|
||||||
<a
|
<li class="tag__item">Thymeleaf</li>
|
||||||
href="https://github.com/2021-Spring-Part-Time/virtual-pet-shelter-lerko96"
|
<li class="tag__item">HTML</li>
|
||||||
target="_blank"
|
<li class="tag__item">CSS</li>
|
||||||
>
|
<li class="tag__item">Responsive Design</li>
|
||||||
Virtual Pet Shelter</a
|
<li class="tag__item">TDD</li>
|
||||||
>
|
<li class="tag__item">IntelliJ</li>
|
||||||
</h3>
|
<li class="tag__item">Github</li>
|
||||||
</div>
|
</ul>
|
||||||
<div id="project-container">
|
</div>
|
||||||
<div class="container-right">
|
</article>
|
||||||
<img
|
|
||||||
src="/images/shelter.png"
|
|
||||||
alt="virtual-pet-shelter-console"
|
|
||||||
/>
|
|
||||||
<div class="project-desc">
|
|
||||||
<p>
|
|
||||||
Built a console application allowing
|
|
||||||
users to take care of multiple pets.
|
|
||||||
Added the ability to admit pets, or
|
|
||||||
adopt.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="project-skills">
|
|
||||||
<h4>skills</h4>
|
|
||||||
<ul>
|
|
||||||
<li>TDD</li>
|
|
||||||
<li>constructor() {...}</li>
|
|
||||||
<li>getter() {...}</li>
|
|
||||||
<li>map<> = hashmap<>()></li>
|
|
||||||
<li>collections<></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article class="project-item">
|
|
||||||
<div>
|
|
||||||
<h3>
|
|
||||||
<a
|
|
||||||
href="https://github.com/2021-Spring-Part-Time/virtual-pet-lerko96"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Virtual Pet</a
|
|
||||||
>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div id="project-container">
|
|
||||||
<div class="container-right">
|
|
||||||
<img
|
|
||||||
src="/images/pet.png"
|
|
||||||
alt="virtual-pet-console"
|
|
||||||
/>
|
|
||||||
<div class="project-desc">
|
|
||||||
<p>
|
|
||||||
Built a console application in Java
|
|
||||||
that allows the user to take care of
|
|
||||||
one virtual pet. This includes
|
|
||||||
keeping track of the pets' hunger,
|
|
||||||
thirst and bordedom.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="project-skills">
|
|
||||||
<h4>skills</h4>
|
|
||||||
<ul>
|
|
||||||
<li>game loop</li>
|
|
||||||
<li>user input</li>
|
|
||||||
<li>classes</li>
|
|
||||||
<li>instance variables</li>
|
|
||||||
<li>methods</li>
|
|
||||||
<li>clean code</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</div>
|
||||||
<footer>
|
</main>
|
||||||
<span id="copyright">© 2021 Tyler Koenig</span>
|
<footer>
|
||||||
<div id="footLinks">
|
<span id="copyright">© 2021 Tyler Koenig</span>
|
||||||
<a
|
<div id="footLinks">
|
||||||
href="https://github.com/lerko96"
|
<a
|
||||||
target="_blank"
|
href="https://github.com/lerko96"
|
||||||
title="github"
|
target="_blank"
|
||||||
><i class="fa fa-github fa-2x" aria-hidden="true"></i
|
title="github"
|
||||||
></a>
|
><i class="fa fa-github fa-2x" aria-hidden="true"></i
|
||||||
<a
|
></a>
|
||||||
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
|
<a
|
||||||
target="_blank"
|
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
|
||||||
title="LinkedIn"
|
target="_blank"
|
||||||
><i
|
title="LinkedIn"
|
||||||
class="fa fa-linkedin-square fa-2x"
|
><i
|
||||||
aria-hidden="true"
|
class="fa fa-linkedin-square fa-2x"
|
||||||
></i
|
aria-hidden="true"
|
||||||
></a>
|
></i
|
||||||
<a
|
></a>
|
||||||
href="mailto:tylerkng96@icloud.com"
|
<a
|
||||||
target="_blank"
|
href="mailto:tylerkng96@icloud.com"
|
||||||
title="email"
|
target="_blank"
|
||||||
><i
|
title="email"
|
||||||
class="fa fa-envelope-o fa-2x"
|
><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i
|
||||||
aria-hidden="true"
|
></a>
|
||||||
></i
|
</div>
|
||||||
></a>
|
</footer>
|
||||||
</div>
|
<script src="app/js/script.js"></script>
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
<script src="index.js" type="text/java"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
674
style.css
674
style.css
@@ -1,26 +1,38 @@
|
|||||||
html {
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: #c9cacc;
|
color: #fff;
|
||||||
background-color: #272727;
|
/* color: #c9cacc; */
|
||||||
font-size: 16px;
|
background-color: #110f16;
|
||||||
|
/* background-color: #1C1924; */
|
||||||
|
/* background-color: #272727; */
|
||||||
font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif;
|
font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.725;
|
/* line-height: 1.725; */
|
||||||
text-rendering: geometricPrecision;
|
text-rendering: optimizeLegibility;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
margin: 0 auto;
|
/* margin: 0 auto; */
|
||||||
}
|
}
|
||||||
|
|
||||||
#wrapper {
|
#wrapper {
|
||||||
display: flex;
|
/* display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%; */
|
||||||
max-width: 560px;
|
/* max-width: 560px; */
|
||||||
margin: 0 auto;
|
margin: 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul {
|
nav ul {
|
||||||
@@ -30,6 +42,7 @@ nav ul {
|
|||||||
}
|
}
|
||||||
|
|
||||||
nav a {
|
nav a {
|
||||||
|
margin: 0 1rem;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-radius: 500px;
|
border-radius: 500px;
|
||||||
padding: 0.2rem;
|
padding: 0.2rem;
|
||||||
@@ -41,12 +54,20 @@ nav a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
nav a:hover {
|
nav a:hover {
|
||||||
background-color: #29f3c3;
|
background-color: #2bf3c4;
|
||||||
color: #1b1b1b;
|
color: #1b1b1b;
|
||||||
transition: 150ms ease;
|
transition: 150ms ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.side__nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* header {
|
||||||
color: #c9cacc;
|
color: #c9cacc;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -54,196 +75,252 @@ header {
|
|||||||
line-height: 1.75rem;
|
line-height: 1.75rem;
|
||||||
border-top: 1.5px solid #666;
|
border-top: 1.5px solid #666;
|
||||||
border-bottom: 1.5px solid #666;
|
border-bottom: 1.5px solid #666;
|
||||||
}
|
} */
|
||||||
|
|
||||||
header img {
|
/* header img {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
border: 5px solid #666;
|
border: 5px solid #666;
|
||||||
border-radius: 165px;
|
border-radius: 165px;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.card {
|
||||||
|
/* display: flex; */
|
||||||
|
flex-wrap: wrap;
|
||||||
|
/* position: relative; */
|
||||||
|
background-color: #151515;
|
||||||
|
margin: 2rem auto;
|
||||||
|
/* height: 400px; */
|
||||||
|
min-width: 320px;
|
||||||
|
/* max-width: 500px; */
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
.card_top {
|
||||||
line-height: 2rem;
|
position: relative;
|
||||||
letter-spacing: 0.01rem;
|
margin: auto;
|
||||||
|
height: 80px;
|
||||||
|
/* og */
|
||||||
|
/* background: #29f3c3; */
|
||||||
|
/* new */
|
||||||
|
background: #0bc196;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 a {
|
#headshot {
|
||||||
font-size: 3rem;
|
margin: 40px auto 10px;
|
||||||
color: #c9cacc;
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border: 3px solid #151515;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
height: 40px;
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name a {
|
||||||
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 a:hover {
|
.name a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
color: #29f3c3;
|
color: #29f3c3;
|
||||||
}
|
}
|
||||||
|
|
||||||
header h2 {
|
.intro_bio {
|
||||||
font-weight: 200;
|
/* height: 175px; */
|
||||||
font-size: 1.2rem;
|
margin: 20px 1.5rem 40px;
|
||||||
letter-spacing: 0.01rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h2,
|
.contact-links {
|
||||||
h3,
|
font-size: 110%;
|
||||||
h4 {
|
margin-bottom: 40px;
|
||||||
letter-spacing: 0.01rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#aboutMe {
|
.contact-links a {
|
||||||
letter-spacing: 0.01rem;
|
margin: 0 10px;
|
||||||
|
padding: 0;
|
||||||
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bio,
|
.contact-links a:hover {
|
||||||
|
transition: color 0.3s ease-in-out;
|
||||||
|
color: #c9cacc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h2 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
text-align: start;
|
||||||
|
/* padding: 1.5rem; */
|
||||||
|
margin: 16px auto 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about,
|
||||||
#skills {
|
#skills {
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bio h2 {
|
#about {
|
||||||
font-size: 2.2rem;
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
text-align: justify;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#skills h4 {
|
#projects {
|
||||||
padding: 1.5rem;
|
background: linear-gradient(
|
||||||
color: #666;
|
180deg,
|
||||||
font-size: 1.5rem;
|
hsla(0, 0%, 8%, 1) 0%,
|
||||||
margin: 0 auto 20px;
|
hsla(257, 19%, 7%, 1) 100%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#projects h2 {
|
||||||
|
text-align: start;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
#skills ul {
|
#skills ul {
|
||||||
line-height: 1.35rem;
|
display: flex;
|
||||||
font-weight: 200;
|
flex-flow: row wrap;
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
overflow-x: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skills {
|
#skills li {
|
||||||
display: grid;
|
margin: 5px auto;
|
||||||
grid-template-columns: 1fr 1fr;
|
padding: 5px 10px;
|
||||||
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
border: 1px solid #fff;
|
||||||
gap: 10px 75px;
|
|
||||||
grid-auto-flow: row;
|
|
||||||
grid-template-areas:
|
|
||||||
'. .'
|
|
||||||
'. .'
|
|
||||||
'. .'
|
|
||||||
'. .'
|
|
||||||
'. .'
|
|
||||||
'. .'
|
|
||||||
'. .'
|
|
||||||
'. .';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#contact {
|
.project {
|
||||||
margin-top: 1rem;
|
/* display: flex; */
|
||||||
padding: 1.5rem;
|
/* flex-direction: column; */
|
||||||
|
/* 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;
|
||||||
|
/* change gradient start */
|
||||||
|
background-color: #18151f;
|
||||||
}
|
}
|
||||||
|
|
||||||
#contact h3 {
|
.project a,
|
||||||
font-size: 1.5rem;
|
.project a:hover {
|
||||||
}
|
|
||||||
|
|
||||||
#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;
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease-in-out;
|
||||||
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contactLinks a:hover {
|
.project h3 {
|
||||||
font-weight: 600;
|
margin-bottom: 0.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
#project-wrapper {
|
.project__subtitle_small {
|
||||||
margin-top: 2.5rem;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#project-wrapper h2 {
|
.project__subtitle_small i {
|
||||||
margin: 0;
|
margin-right: 5px;
|
||||||
padding: 1.5rem 1.5rem 0 1.5rem;
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#project-wrapper h3 {
|
.project__title {
|
||||||
font-size: 1.5rem;
|
font-size: 1.75rem;
|
||||||
text-align: left;
|
}
|
||||||
margin: 0 auto;
|
|
||||||
|
.project__title:hover {
|
||||||
|
color: #00d7a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__img {
|
||||||
|
max-height: 180px;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__img_link {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__bar {
|
||||||
|
width: 50px;
|
||||||
|
height: 10px;
|
||||||
|
margin: 10px 0;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: width 0.2s ease;
|
||||||
|
background-color: #00d7a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__text {
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
letter-spacing: 0.01rem;
|
position: relative;
|
||||||
}
|
|
||||||
|
|
||||||
.project-item {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 1.5rem 0;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 200;
|
|
||||||
letter-spacing: 0.01rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-item a {
|
.project__info {
|
||||||
color: #c9cacc;
|
overflow: hidden;
|
||||||
text-decoration: none;
|
text-overflow: ellipsis;
|
||||||
|
text-align: justify;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-item a:hover {
|
.project .project__tagbox {
|
||||||
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;
|
display: flex;
|
||||||
align-items: baseline;
|
flex-flow: row wrap;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 20px 0 0 0;
|
||||||
|
padding: 0;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-skills h4 {
|
.project .project__tagbox .tag__item {
|
||||||
font-size: 1.5rem;
|
display: inline-block;
|
||||||
/* flex: 1; */
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-skills li {
|
.project .project__tagbox .tag__item:hover {
|
||||||
list-style-type: none;
|
background: rgba(83, 83, 83, 0.8);
|
||||||
color: #c9cacc;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-skills ul {
|
.project:before {
|
||||||
/* flex: 9; */
|
content: '';
|
||||||
line-height: 2rem;
|
/* position: absolute; */
|
||||||
text-align: start;
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
/* background-image: linear-gradient(
|
||||||
|
-30deg,
|
||||||
|
rgba(0, 118, 189, 0.1),
|
||||||
|
transparent 50%
|
||||||
|
); */
|
||||||
|
/* background-image: linear-gradient(-30deg, #110f16, transparent 50%); */
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-item img {
|
.project:hover .project__bar {
|
||||||
max-width: 375px;
|
width: 100px;
|
||||||
/* 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 {
|
footer {
|
||||||
@@ -275,11 +352,128 @@ footer {
|
|||||||
transition: 160ms ease-in;
|
transition: 160ms ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* code pen finish */
|
||||||
|
|
||||||
/* color: #1b1b1b; */
|
/* color: #1b1b1b; */
|
||||||
/* color: #2a9d8f */
|
/* color: #2a9d8f */
|
||||||
@media (min-width: 576px) {
|
/* @media (min-width: 768px) {
|
||||||
#wrapper {
|
#wrapper {
|
||||||
width: 560px;
|
max-width: 992px;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
@@ -373,4 +567,198 @@ footer {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
} */
|
||||||
|
|
||||||
|
@media screen and (min-width: 576px) {
|
||||||
|
.card {
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 769px) {
|
||||||
|
#nav__contact,
|
||||||
|
.contact-links {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side__nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
/* margin: 40px; */
|
||||||
|
height: 100%;
|
||||||
|
width: 80px;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
font-size: 17px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
/* border-right: 1px solid #666; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.side__nav a {
|
||||||
|
padding: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side__nav a:hover {
|
||||||
|
transition: color 0.3s ease-in-out;
|
||||||
|
color: #c9cacc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wrapper {
|
||||||
|
margin-left: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#skills {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
margin: auto 2rem auto 90px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
margin: auto;
|
||||||
|
padding: 0.5rem;
|
||||||
|
flex: 4;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#top__wrap {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
max-width: 720px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
/* flex-wrap: nowrap; */
|
||||||
|
/* flex-direction: column; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.project .project__title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__tagbox {
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project .project__img {
|
||||||
|
max-width: 300px;
|
||||||
|
max-height: 100%;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
.project .project__text {
|
||||||
|
padding: 3rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.project .media.project__text:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
background: #18151f;
|
||||||
|
top: -20%;
|
||||||
|
height: 130%;
|
||||||
|
width: 55px;
|
||||||
|
}
|
||||||
|
.project:hover .project__img {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
.project:nth-child(2n + 1) {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.project:nth-child(2n + 0) {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
.project:nth-child(2n + 1) .project__text::before {
|
||||||
|
left: -12px !important;
|
||||||
|
transform: rotate(4deg);
|
||||||
|
}
|
||||||
|
.project:nth-child(2n + 0) .project__text::before {
|
||||||
|
right: -12px !important;
|
||||||
|
transform: rotate(-4deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project .project__tagbox {
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 87%;
|
||||||
|
padding: 2rem;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 992px) {
|
||||||
|
.top__wrap {
|
||||||
|
max-width: 960px;
|
||||||
|
/* text-align: center; */
|
||||||
|
display: flex;
|
||||||
|
margin: 0 auto;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
#profile {
|
||||||
|
margin-right: 1rem;
|
||||||
|
flex: 1;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about p {
|
||||||
|
/* max-width: 400px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
#about {
|
||||||
|
flex: 2;
|
||||||
|
margin-left: 1rem;
|
||||||
|
right: 0;
|
||||||
|
/* max-width: 500px; */
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
max-width: 960px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project {
|
||||||
|
max-width: 960px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1200px) {
|
||||||
|
.top__wrap {
|
||||||
|
max-width: 1140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
max-width: 1140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project {
|
||||||
|
max-width: 1140px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user