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

641
index.html
View File

@@ -27,7 +27,7 @@
<nav>
<a href="index.html">TYLER KOENIG</a>
<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="#projects" target="_self">PROJECTS</a>
@@ -37,58 +37,58 @@
</nav>
</header>
<main>
<div class="card">
<div class="card-top">
<div class="avatar-holder">
<img
id="headshot"
src="/images/headshot-tyler_koenig.png"
alt="tyler"
/>
<section id="intro">
<article class="card">
<div class="card_top">
<div class="avatar-holder">
<img
id="headshot"
src="/images/headshot-tyler_koenig.png"
alt="tyler"
/>
</div>
</div>
</div>
<div class="name">
<a href="index.html">Tyler Koenig</a>
</div>
<div class="short-bio">
<p>
Passionate Software Developer
<br />
Recent Graduate of We Can Code IT
</p>
</div>
<div class="contact-links" id="contact">
<a
href="https://github.com/lerko96"
target="_blank"
title="github"
><i
class="fa fa-github fa-2x"
aria-hidden="true"
></i
></a>
<a
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
target="_blank"
title="LinkedIn"
><i
class="fa fa-linkedin-square fa-2x"
aria-hidden="true"
></i
></a>
<a
href="mailto:tylerkng96@icloud.com"
target="_blank"
title="email"
><i
class="fa fa-envelope-o fa-2x"
aria-hidden="true"
></i
></a>
</div>
</div>
<div class="card">
<section id="bio">
<div class="name">
<a href="index.html">Tyler Koenig</a>
</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
href="https://github.com/lerko96"
target="_blank"
title="github"
><i
class="fa fa-github fa-2x"
aria-hidden="true"
></i
></a>
<a
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
target="_blank"
title="LinkedIn"
><i
class="fa fa-linkedin-square fa-2x"
aria-hidden="true"
></i
></a>
<a
href="mailto:tylerkng96@icloud.com"
target="_blank"
title="email"
><i
class="fa fa-envelope-o fa-2x"
aria-hidden="true"
></i
></a>
</div>
</article>
<article class="card" id="about">
<h2>about</h2>
<p>
I'm Tyler Koenig, a lifelong student. Graduated with
@@ -98,11 +98,8 @@
front-end web development through We Can Code IT
Bootcamp. Always interested in a challenge!
</p>
</section>
</div>
<div class="card">
<section id="skills">
</article>
<article class="card" id="skills">
<h2>skills</h2>
<ul>
<li>Java</li>
@@ -122,51 +119,362 @@
<li>Relational Databases</li>
<li>Source Control/ Github</li>
</ul>
</section>
</div>
</article>
</section>
<!-- <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">
<section id="projects">
<h2>projects</h2>
<article class="project">
<div class="project_img">
<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>
</article>
</section> -->
<section class="card" id="projects">
<h2>projects</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/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
>
<img
src="/images/mystery-educator.png"
alt=""
/></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_name">
<h3>mystery educator</h3>
</div>
<div class="project_date">
<p>mon, may 25th 2021</p>
</div>
<div class="project_bar"></div>
<div class="project_about">
<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?
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">
java
</li>
<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"
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="2021-07-23 12:00:00">
<i class="fas fa-calendar-alt mr-2"></i>Fri,
July 23rd 2021
</time>
</div>
<div class="project__bar"></div>
<div class="project__info">
<p>
Designed, built and tested a single page
application that renders unique data from
the MET Museum and NASA APIs each time you
visit. We also built a local backend
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>
</div>
<ul class="project__tagbox">
<li class="tag__item">JavaScript</li>
<li class="tag__item">Node.js</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>
</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 class="postcard dark blue">
<a class="postcard__img_link" href="#">
<img
class="postcard__img"
src="https://picsum.photos/1000/1000"
src="/images/mystery-educator.png"
alt="Image Title"
/>
</a>
@@ -174,7 +482,7 @@
<h1 class="postcard__title blue">
<a href="#">Podcast Title</a>
</h1>
<div class="postcard__subtitle small">
<div class="postcard__subtitle_small">
<time datetime="2020-05-25 12:00:00">
<i class="fas fa-calendar-alt mr-2"></i
>Mon, May 25th 2020
@@ -212,161 +520,10 @@
</section>
</div>
<section id="project-wrapper">
<!-- WCCI Early Projects -->
<!-- <section id="project-wrapper">
<h2>projects</h2>
<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">
<div>
<h3>
@@ -483,7 +640,7 @@
</div>
</article>
</div>
</section>
</section> -->
</main>
<footer>
<span id="copyright">&copy; 2021 Tyler Koenig</span>

202
style.css
View File

@@ -4,7 +4,8 @@
box-sizing: border-box;
}
html, body {
html,
body {
width: 100%;
height: 100%;
scroll-behavior: smooth;
@@ -84,7 +85,7 @@ nav a:hover {
overflow: hidden;
}
.card-top {
.card_top {
position: relative;
margin: auto;
height: 80px;
@@ -115,7 +116,7 @@ nav a:hover {
color: #29f3c3;
}
.short-bio {
.intro_bio {
height: 175px;
margin: 20px;
}
@@ -142,23 +143,29 @@ nav a:hover {
margin: 16px auto 8px;
}
#bio,
#about,
#skills {
padding: 1.5rem;
text-align: start;
}
#about {
overflow: hidden;
text-overflow: ellipsis;
text-align: justify;
height: 100%;
}
#projects h2 {
text-align: start;
padding: 1.5rem;
}
#skills ul {
display: flex;
flex-flow: row wrap;
list-style-type: none;
overflow-x:visible;
overflow-x: visible;
}
#skills li {
@@ -167,96 +174,115 @@ nav a:hover {
border: 1px solid #fff;
}
.project_img {
max-height: 50px;
min-width: 300px;
background-position-x: center;
background-position-y:center ;
.project {
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;
}
.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%;
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%;
}
/* end new */
#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 {
.project .project__tagbox {
display: flex;
flex-direction: column;
margin: 1.5rem 0;
text-align: center;
font-weight: 200;
letter-spacing: 0.01rem;
flex-flow: row wrap;
font-size: 14px;
margin: 20px 0 0 0;
padding: 0;
justify-content: center;
}
.project-item a {
color: #c9cacc;
text-decoration: none;
.project .project__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;
}
.project-item a:hover {
color: #29f3c3;
.project .project__tagbox .tag__item:hover {
background: rgba(83, 83, 83, 0.8);
}
.project-desc {
margin: 0;
padding: 0 0.8rem;
.project:before {
content: '';
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 {
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);
.project:hover .project__bar {
width: 100px;
}
footer {
@@ -288,8 +314,6 @@ footer {
transition: 160ms ease-in;
}
@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');
/* This pen */
@@ -404,7 +428,7 @@ a:hover {
.postcard:hover .postcard__bar {
width: 100px;
}
@media screen and (min-width: 769px) {
/* @media screen and (min-width: 769px) {
.postcard {
flex-wrap: inherit;
}
@@ -449,8 +473,8 @@ a:hover {
right: -12px !important;
transform: rotate(-4deg);
}
}
@media screen and (min-width: 1024px) {
} */
/* @media screen and (min-width: 1024px) {
.postcard__text {
padding: 2rem 3.5rem;
}
@@ -468,7 +492,7 @@ a:hover {
.postcard.light .postcard__text:before {
background: #e1e5ea;
}
}
} */
/* COLORS */
.postcard .postcard__tagbox .green.play:hover {
background: #79dd09;
@@ -564,7 +588,7 @@ a:hover {
transparent 50%
);
}
@media screen and (min-width: 769px) {
/* @media screen and (min-width: 769px) {
.green::before {
background-image: linear-gradient(
-80deg,
@@ -621,7 +645,7 @@ a:hover {
transparent 50%
);
}
}
} */
/* code pen finish */
@@ -724,5 +748,3 @@ a:hover {
justify-content: space-between;
}
} */