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

project mobile layout

Browse Source
This commit is contained in:
Tyler Koenig
2021-09-13 12:39:39 -04:00
parent 79b4bf43be
commit ae8775a902
2 changed files with 511 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

537
index.html
View File

@@ -27,7 +27,7 @@
<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><a href="#contact" target="_self">CONTACT</a></li>
<li> <li>
<a href="#projects" target="_self">PROJECTS</a> <a href="#projects" target="_self">PROJECTS</a>
@@ -37,8 +37,9 @@
</nav> </nav>
</header> </header>
<main> <main>
<div class="card"> <section id="intro">
<div class="card-top"> <article class="card">
<div class="card_top">
<div class="avatar-holder"> <div class="avatar-holder">
<img <img
id="headshot" id="headshot"
@@ -50,7 +51,7 @@
<div class="name"> <div class="name">
<a href="index.html">Tyler Koenig</a> <a href="index.html">Tyler Koenig</a>
</div> </div>
<div class="short-bio"> <div class="intro_bio">
<p> <p>
Passionate Software Developer Passionate Software Developer
<br /> <br />
@@ -86,9 +87,8 @@
></i ></i
></a> ></a>
</div> </div>
</div> </article>
<div class="card"> <article class="card" id="about">
<section id="bio">
<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 with
@@ -98,11 +98,8 @@
front-end web development through We Can Code IT front-end web development through We Can Code IT
Bootcamp. Always interested in a challenge! Bootcamp. Always interested in a challenge!
</p> </p>
</section> </article>
</div> <article class="card" id="skills">
<div class="card">
<section id="skills">
<h2>skills</h2> <h2>skills</h2>
<ul> <ul>
<li>Java</li> <li>Java</li>
@@ -122,51 +119,362 @@
<li>Relational Databases</li> <li>Relational Databases</li>
<li>Source Control/ Github</li> <li>Source Control/ Github</li>
</ul> </ul>
</article>
</section> </section>
</div> <!-- <section>
<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 class="card"> <article class="card" id="skills">
<section id="projects"> <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>
</article>
</section> -->
<section class="card" id="projects">
<h2>projects</h2> <h2>projects</h2>
<article class="project"> <article class="project">
<div class="project_img">
<a <a
class="project__img_link"
href="https://github.com/pt-spring-2021-team-project-spa/team-2-spa-repo" href="https://github.com/pt-spring-2021-team-project-spa/team-2-spa-repo"
target="_blank" target="_blank"
> >
<img <img
class="project__img"
src="/images/headshot-tyler_koenig.png"
alt="were-hooked-img"
/></a>
<div class="project__text">
<h3 class="project__title">
<a
href="https://github.com/pt-spring-2021-team-project-spa/team-2-spa-repo"
target="_blank"
>We're Hooked</a
>
</h3>
<div class="project__subtitle_small">
<time datetime="2021-08-20 12:00:00">
<i class="fas fa-calendar-alt mr-2"></i>Fri,
August 20th 2021
</time>
</div>
<div class="project__bar"></div>
<div class="project__info">
<p>
Designed, built and tested an MVC
application that allows users to discover
fishing locations in Ohio, as well as teach
beginners how to get started fishing and the
current regulations that are needed to
follow. This project was built between a
team of five in a completely remote
environment with the help of Github, Zoom
and Slack.
</p>
</div>
<ul class="project__tagbox">
<li class="tag__item">JavaScript</li>
<li class="tag__item">RESTful APIs</li>
<li class="tag__item">Java</li>
<li class="tag__item">OOP</li>
<li class="tag__item">Thymeleaf</li>
<li class="tag__item">HTML</li>
<li class="tag__item">CSS</li>
<li class="tag__item">Responsive Design</li>
<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/pt-spring-2021-team-project-spa/team-2-spa-repo"
target="_blank"
>
<img
class="project__img"
src="/images/mystery-educator.png" src="/images/mystery-educator.png"
alt="" alt=""
/></a> /></a>
<div class="project__text">
<h3 class="project__title">
<a
href="https://github.com/pt-spring-2021-team-project-spa/team-2-spa-repo"
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 class="project_name"> <div class="project__bar"></div>
<h3>mystery educator</h3> <div class="project__info">
</div>
<div class="project_date">
<p>mon, may 25th 2021</p>
</div>
<div class="project_bar"></div>
<div class="project_about">
<p> <p>
Lorem ipsum dolor sit amet consectetur Designed, built and tested a single page
adipisicing elit. Et a maiores laborum quo application that renders unique data from
animi, unde repellat. Libero ab sequi vel the MET Museum and NASA APIs each time you
beatae natus numquam consequuntur molestias visit. We also built a local backend
ducimus. Ad laudantium neque nobis? database to store historical information.
This project was built between a team of
four in a completely remote environemnt with
the help of Github, Zoom, and Slack.
</p> </p>
</div> </div>
<ul class="project_tagbox"> <ul class="project__tagbox">
<li class="tag__item"> <li class="tag__item">JavaScript</li>
java <li class="tag__item">Node.js</li>
</li> <li class="tag__item">RESTful APIs</li>
<li class="tag__item">Java</li>
<li class="tag__item">HTML</li>
<li class="tag__item">CSS</li>
<li class="tag__item">Responsive Design</li>
<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> </ul>
</div>
</article>
<article class="project">
<a
class="project__img_link"
href="https://github.com/2021-Spring-Part-Time/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/2021-Spring-Part-Time/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 class="project__bar"></div>
<div class="project__info">
<p>
Designed, built and tested a single page
application that lets users make virtual
donuts via clicking. Once enough donuts are
made you have the ability to purchase
upgrades such as auto-clickers and
clicking-multipliers.
</p>
</div>
<ul class="project__tagbox">
<li class="tag__item">JavaScript</li>
<li class="tag__item">Node.js</li>
<li class="tag__item">HTML</li>
<li class="tag__item">CSS</li>
<li class="tag__item">Responsive Design</li>
<li class="tag__item">TDD</li>
<li class="tag__item">VS Code</li>
<li class="tag__item">Github</li>
</ul>
</div>
</article>
<article class="project">
<a
class="project__img_link"
href="https://github.com/pt-spring-2021-team-project-fullstack/team-4-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/pt-spring-2021-team-project-fullstack/team-4-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 class="project__bar"></div>
<div class="project__info">
<p>
Designed, built and tested an MVC
application that lets users discover treks
located by continent, region and type. This
project was built between a team of four in
a completely remote environemnt with the
help of Github, Zoom and Slack.
</p>
</div>
<ul class="project__tagbox">
<li class="tag__item">Java</li>
<li class="tag__item">SpringJPA</li>
<li class="tag__item">OOP</li>
<li class="tag__item">HTML</li>
<li class="tag__item">CSS</li>
<li class="tag__item">Responsive Design</li>
<li class="tag__item">TDD</li>
<li class="tag__item">IntelliJ</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/2021-Spring-Part-Time/reviews-mvc-lerko96"
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/2021-Spring-Part-Time/reviews-mvc-lerko96"
target="_blank"
>Review Site</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 class="project__bar"></div>
<div class="project__info">
<p>
Designed, built and tested a Java
application for movie reviews.
</p>
</div>
<ul class="project__tagbox">
<li class="tag__item">Java</li>
<li class="tag__item">SpringJPA</li>
<li class="tag__item">OOP</li>
<li class="tag__item">Thymeleaf</li>
<li class="tag__item">HTML</li>
<li class="tag__item">CSS</li>
<li class="tag__item">Responsive Design</li>
<li class="tag__item">TDD</li>
<li class="tag__item">IntelliJ</li>
<li class="tag__item">Github</li>
</ul>
</div>
</article>
</section>
<div class="card">
<section id="projects">
<h2>old project style</h2>
<article class="project">
<a
class="project__img_link"
href="https://github.com/pt-spring-2021-team-project-spa/team-2-spa-repo"
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/pt-spring-2021-team-project-spa/team-2-spa-repo"
target="_blank"
>Mystery Educator</a
>
</h3>
<div class="project__subtitle_small">
<time datetime="2020-05-25 12:00:00">
<i class="fas fa-calendar-alt mr-2"></i
>Mon, May 25th 2020
</time>
</div>
<div class="project__bar"></div>
<div class="project__info">
<p>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Et a maiores laborum
quo animi, unde repellat. Libero ab
sequi vel beatae natus numquam
consequuntur molestias ducimus. Ad
laudantium neque nobis?
</p>
</div>
<ul class="project__tagbox">
<li class="tag__item">java</li>
<li class="tag__item">java</li>
<li class="tag__item">java</li>
<li class="tag__item">java</li>
<li class="tag__item">java</li>
</ul>
</div>
</article> </article>
<article class="postcard dark blue"> <article class="postcard dark blue">
<a class="postcard__img_link" href="#"> <a class="postcard__img_link" href="#">
<img <img
class="postcard__img" class="postcard__img"
src="https://picsum.photos/1000/1000" src="/images/mystery-educator.png"
alt="Image Title" alt="Image Title"
/> />
</a> </a>
@@ -174,7 +482,7 @@
<h1 class="postcard__title blue"> <h1 class="postcard__title blue">
<a href="#">Podcast Title</a> <a href="#">Podcast Title</a>
</h1> </h1>
<div class="postcard__subtitle small"> <div class="postcard__subtitle_small">
<time datetime="2020-05-25 12:00:00"> <time datetime="2020-05-25 12:00:00">
<i class="fas fa-calendar-alt mr-2"></i <i class="fas fa-calendar-alt mr-2"></i
>Mon, May 25th 2020 >Mon, May 25th 2020
@@ -212,161 +520,10 @@
</section> </section>
</div> </div>
<section id="project-wrapper"> <!-- WCCI Early Projects -->
<!-- <section id="project-wrapper">
<h2>projects</h2> <h2>projects</h2>
<div> <div>
<article class="project-item">
<div>
<h3>
<a
href="https://github.com/pt-spring-2021-team-project-spa/team-2-spa-repo"
target="_blank"
>Mystery Educator</a
>
</h3>
</div>
<div id="project-container">
<div class="container-right">
<img
src="/images/mystery-educator.png"
alt="virtual-pet-amok-console"
/>
<div class="project-desc">
<p>
Designed a single page application
that brings back unique data from
MET Museum and NASA APIs.
</p>
</div>
</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>
</article>
<article class="project-item">
<div>
<h3>
<a
href="https://github.com/2021-Spring-Part-Time/donut-clicker-lerko96"
target="_blank"
>Donut Clicker</a
>
</h3>
</div>
<div id="project-container">
<div class="container-right">
<img
src="/images/donut-clicker.png"
alt="virtual-pet-amok-console"
/>
<div class="project-desc">
<p>
Designed a single page application
that lets users make virtual donuts
and buy upgrades for the game.
</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>
</article>
<article class="project-item">
<div>
<h3>
<a
href="https://github.com/pt-spring-2021-team-project-fullstack/team-4-trek"
target="_blank"
>Trekking Website</a
>
</h3>
</div>
<div id="project-container">
<div class="container-right">
<img
src="/images/trek.png"
alt="virtual-pet-amok-console"
/>
<div class="project-desc">
<p>
Designed an MVC website that lets
users find treks located by region
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>
</article>
<article class="project-item">
<div>
<h3>
<a
href="https://github.com/2021-Spring-Part-Time/reviews-mvc-lerko96"
target="_blank"
>Reviews Site</a
>
</h3>
</div>
<div id="project-container">
<div class="container-right">
<img src="/images/review-site.png" alt="" />
<div class="project-desc">
<p>
Designed a movie reviews website
using thymeleaf templates.
</p>
</div>
</div>
<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>
</article>
<article class="project-item"> <article class="project-item">
<div> <div>
<h3> <h3>
@@ -483,7 +640,7 @@
</div> </div>
</article> </article>
</div> </div>
</section> </section> -->
</main> </main>
<footer> <footer>
<span id="copyright">&copy; 2021 Tyler Koenig</span> <span id="copyright">&copy; 2021 Tyler Koenig</span>

200
style.css
View File

@@ -4,7 +4,8 @@
box-sizing: border-box; box-sizing: border-box;
} }
html, body { html,
body {
width: 100%; width: 100%;
height: 100%; height: 100%;
scroll-behavior: smooth; scroll-behavior: smooth;
@@ -84,7 +85,7 @@ nav a:hover {
overflow: hidden; overflow: hidden;
} }
.card-top { .card_top {
position: relative; position: relative;
margin: auto; margin: auto;
height: 80px; height: 80px;
@@ -115,7 +116,7 @@ nav a:hover {
color: #29f3c3; color: #29f3c3;
} }
.short-bio { .intro_bio {
height: 175px; height: 175px;
margin: 20px; margin: 20px;
} }
@@ -142,16 +143,22 @@ nav a:hover {
margin: 16px auto 8px; margin: 16px auto 8px;
} }
#bio, #about,
#skills { #skills {
padding: 1.5rem; padding: 1.5rem;
text-align: start; text-align: start;
} }
#about {
overflow: hidden;
text-overflow: ellipsis;
text-align: justify;
height: 100%;
}
#projects h2 { #projects h2 {
text-align: start; text-align: start;
padding: 1.5rem; padding: 1.5rem;
} }
#skills ul { #skills ul {
@@ -167,96 +174,115 @@ nav a:hover {
border: 1px solid #fff; border: 1px solid #fff;
} }
.project_img { .project {
max-height: 50px; flex-wrap: wrap;
min-width: 300px; display: flex;
background-position-x: center; box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
background-position-y:center ; border-radius: 10px;
margin: 0 0 2rem 0;
overflow: hidden; overflow: hidden;
position: relative;
color: #ffffff;
} }
.project_img img { .project a,
.project a:hover {
text-decoration: none;
transition: color 0.3s ease-in-out;
color: inherit;
}
.project h3 {
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}
.project__subtitle_small {
font-size: 80%;
}
.project__title {
font-size: 1.75rem;
}
.project__img {
max-height: 180px;
width: 100%; width: 100%;
object-fit: cover;
position: relative;
}
.project__img_link {
display: contents;
}
.project__bar {
width: 50px;
height: 10px;
margin: 10px 0;
border-radius: 5px;
background-color: #424242;
transition: width 0.2s ease;
}
.project__text {
padding: 1.5rem;
position: relative;
display: flex;
flex-direction: column;
}
.project__info {
overflow: hidden;
text-overflow: ellipsis;
text-align: justify;
height: 100%; height: 100%;
} }
/* end new */ .project .project__tagbox {
#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; display: flex;
flex-direction: column; flex-flow: row wrap;
margin: 1.5rem 0; font-size: 14px;
text-align: center; margin: 20px 0 0 0;
font-weight: 200; padding: 0;
letter-spacing: 0.01rem; justify-content: center;
} }
.project-item a { .project .project__tagbox .tag__item {
color: #c9cacc; display: inline-block;
text-decoration: none; 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-item a:hover { .project .project__tagbox .tag__item:hover {
color: #29f3c3; background: rgba(83, 83, 83, 0.8);
} }
.project-desc { .project:before {
margin: 0; content: '';
padding: 0 0.8rem; position: absolute;
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(-70deg, #424242, transparent 30%);
opacity: 1;
border-radius: 10px;
} }
.project-skills { .project:hover .project__bar {
color: #666; width: 100px;
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 { footer {
@@ -288,8 +314,6 @@ footer {
transition: 160ms ease-in; transition: 160ms ease-in;
} }
@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');
/* This pen */ /* This pen */
@@ -404,7 +428,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;
} }
@@ -449,8 +473,8 @@ 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;
} }
@@ -468,7 +492,7 @@ a:hover {
.postcard.light .postcard__text:before { .postcard.light .postcard__text:before {
background: #e1e5ea; background: #e1e5ea;
} }
} } */
/* COLORS */ /* COLORS */
.postcard .postcard__tagbox .green.play:hover { .postcard .postcard__tagbox .green.play:hover {
background: #79dd09; background: #79dd09;
@@ -564,7 +588,7 @@ a:hover {
transparent 50% transparent 50%
); );
} }
@media screen and (min-width: 769px) { /* @media screen and (min-width: 769px) {
.green::before { .green::before {
background-image: linear-gradient( background-image: linear-gradient(
-80deg, -80deg,
@@ -621,7 +645,7 @@ a:hover {
transparent 50% transparent 50%
); );
} }
} } */
/* code pen finish */ /* code pen finish */
@@ -724,5 +748,3 @@ a:hover {
justify-content: space-between; justify-content: space-between;
} }
} */ } */