lerko/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

project styling finished

Browse Source
This commit is contained in:
Tyler Koenig
2021-09-13 15:49:56 -04:00
parent 6b484b76b2
commit 7e20081f0d
2 changed files with 250 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
index.html
View File

@@ -22,7 +22,6 @@
<title>Tyler Koenig</title> <title>Tyler Koenig</title>
</head> </head>
<body> <body>
<div id="wrapper">
<header> <header>
<nav> <nav>
<a href="index.html">TYLER KOENIG</a> <a href="index.html">TYLER KOENIG</a>
@@ -37,8 +36,10 @@
</nav> </nav>
</header> </header>
<main> <main>
<div id="wrapper">
<section id="intro"> <section id="intro">
<article class="card"> <div class="top__wrap">
<article class="card" id="profile">
<div class="card_top"> <div class="card_top">
<div class="avatar-holder"> <div class="avatar-holder">
<img <img
@@ -91,14 +92,16 @@
<article class="card" id="about"> <article class="card" id="about">
<h2>about</h2> <h2>about</h2>
<p> <p>
I'm Tyler Koenig, a lifelong student. Graduated with I'm Tyler Koenig, a lifelong student. Graduated
an Associate of Arts from Lorain County Community with an Associate of Arts from Lorain County
College in 2018. Inbound associate at Amazon CLE-3 Community College in 2018. Inbound associate at
since December 2019. Currently learning Java and Amazon CLE-3 since December 2019. Currently
front-end web development through We Can Code IT learning Java and front-end web development
Bootcamp. Always interested in a challenge! through We Can Code IT Bootcamp. Always
interested in a challenge!
</p> </p>
</article> </article>
</div>
<article class="card" id="skills"> <article class="card" id="skills">
<h2>skills</h2> <h2>skills</h2>
<ul> <ul>
@@ -179,7 +182,7 @@
</h3> </h3>
<div class="project__subtitle_small"> <div class="project__subtitle_small">
<time datetime="2021-08-20 12:00:00"> <time datetime="2021-08-20 12:00:00">
<i class="fas fa-calendar-alt mr-2"></i>Fri, <i class="fa fa-calendar mr-2"></i>Fri,
August 20th 2021 August 20th 2021
</time> </time>
</div> </div>
@@ -641,6 +644,7 @@
</article> </article>
</div> </div>
</section> --> </section> -->
</div>
</main> </main>
<footer> <footer>
<span id="copyright">&copy; 2021 Tyler Koenig</span> <span id="copyright">&copy; 2021 Tyler Koenig</span>
@@ -664,14 +668,10 @@
href="mailto:tylerkng96@icloud.com" href="mailto:tylerkng96@icloud.com"
target="_blank" target="_blank"
title="email" title="email"
><i ><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i
class="fa fa-envelope-o fa-2x"
aria-hidden="true"
></i
></a> ></a>
</div> </div>
</footer> </footer>
</div>
<script src="app/js/script.js"></script> <script src="app/js/script.js"></script>
</body> </body>
</html> </html>

161
style.css
View File

@@ -16,22 +16,23 @@ body {
color: #fff; color: #fff;
/* color: #c9cacc; */ /* color: #c9cacc; */
background-color: #110f16; background-color: #110f16;
/* background-color: #1C1924; */
/* background-color: #272727; */ /* background-color: #272727; */
font-size: 16px;
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 {
@@ -52,7 +53,7 @@ nav a {
} }
nav a:hover { nav a:hover {
background-color: #29f3c3; background-color: #2bf3c4;
color: #1b1b1b; color: #1b1b1b;
transition: 150ms ease; transition: 150ms ease;
} }
@@ -74,22 +75,130 @@ nav a:hover {
} */ } */
.card { .card {
position: relative; /* display: flex; */
flex-wrap: wrap;
/* position: relative; */
background-color: #151515; background-color: #151515;
margin: 2rem auto; margin: 2rem auto;
/* height: 400px; */ /* height: 400px; */
width: 320px; min-width: 320px;
/* max-width: 500px; */
text-align: center; text-align: center;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
overflow: hidden; overflow: hidden;
} }
@media screen and (min-width: 576px) {
.card {
max-width: 500px;
}
}
@media screen and (min-width: 769px) {
.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);
}
}
@media screen and (min-width: 992px) {
.top__wrap {
display: flex;
flex-direction: row;
}
#profile {
height: 400px;
}
#about p {
max-width: 300px;
}
#about {
right: 0;
/* max-width: 500px; */
height: 400px;
}
.card {
max-width: 960px;
}
.project {
max-width: 960px;
}
}
@media screen and (min-width: 1200px) {
.card {
max-width: 1140px;
}
.project {
max-width: 1140px;
}
}
.card_top { .card_top {
position: relative; position: relative;
margin: auto; margin: auto;
height: 80px; height: 80px;
background: #29f3c3; /* og */
/* background: #29f3c3; */
/* new */
background: #0bc196;
} }
#headshot { #headshot {
@@ -152,6 +261,14 @@ nav a:hover {
height: 100%; height: 100%;
} }
#projects {
background: linear-gradient(
180deg,
hsla(0, 0%, 8%, 1) 0%,
hsla(257, 19%, 7%, 1) 100%
);
}
#projects h2 { #projects h2 {
text-align: start; text-align: start;
padding: 1.5rem; padding: 1.5rem;
@@ -171,14 +288,18 @@ nav a:hover {
} }
.project { .project {
flex-wrap: wrap; /* display: flex; */
display: flex; /* flex-direction: column; */
/* flex-wrap: wrap; */
/* display: flex; */
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; border-radius: 10px;
margin: 0 0 2rem 0; margin: 0 0 2rem 0;
overflow: hidden; overflow: hidden;
position: relative; /* position: relative; */
color: #ffffff; color: #ffffff;
/* change gradient start */
background-color: #18151f;
} }
.project a, .project a,
@@ -198,10 +319,18 @@ nav a:hover {
font-size: 80%; font-size: 80%;
} }
.project__subtitle_small i {
margin-right: 5px;
}
.project__title { .project__title {
font-size: 1.75rem; font-size: 1.75rem;
} }
.project__title:hover {
color: #00d7a5;
}
.project__img { .project__img {
max-height: 180px; max-height: 180px;
width: 100%; width: 100%;
@@ -218,8 +347,8 @@ nav a:hover {
height: 10px; height: 10px;
margin: 10px 0; margin: 10px 0;
border-radius: 5px; border-radius: 5px;
background-color: #424242;
transition: width 0.2s ease; transition: width 0.2s ease;
background-color: #00d7a5;
} }
.project__text { .project__text {
@@ -272,7 +401,7 @@ nav a:hover {
rgba(0, 118, 189, 0.1), rgba(0, 118, 189, 0.1),
transparent 50% transparent 50%
); */ ); */
background-image: linear-gradient(-70deg, #424242, transparent 30%); /* background-image: linear-gradient(-30deg, #110f16, transparent 50%); */
opacity: 1; opacity: 1;
border-radius: 10px; border-radius: 10px;
} }
@@ -424,7 +553,7 @@ a:hover {
.postcard:hover .postcard__bar { .postcard:hover .postcard__bar {
width: 100px; width: 100px;
} }
/* @media screen and (min-width: 769px) { @media screen and (min-width: 769px) {
.postcard { .postcard {
flex-wrap: inherit; flex-wrap: inherit;
} }
@@ -469,7 +598,7 @@ a:hover {
right: -12px !important; right: -12px !important;
transform: rotate(-4deg); transform: rotate(-4deg);
} }
} */ }
/* @media screen and (min-width: 1024px) { /* @media screen and (min-width: 1024px) {
.postcard__text { .postcard__text {
padding: 2rem 3.5rem; padding: 2rem 3.5rem;