Merge pull request #1 from lerko96/end-of-year

looks good
This commit is contained in:
Tyler Koenig
2021-08-25 17:12:24 -04:00
committed by GitHub
8 changed files with 499 additions and 215 deletions

BIN
images/donut-clicker.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1001 KiB

BIN
images/mystery-educator.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 526 KiB

BIN
images/review-site.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 394 KiB

BIN
images/trek.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 MiB

View File

@@ -1,199 +1,428 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
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"
/>
<script src="https://use.fontawesome.com/e427b1b41a.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Tyler Koenig</title>
</head>
<body>
<div id="wrapper">
<nav>
<a href="index.html">TYLER KOENIG</a>
<ul>
<li><a href="#bio" target="_self">ABOUT</a></li>
<li><a href="#contact" target="_self">CONTACT</a></li>
<li><a href="#projects" target="_self">PROJECTS</a></li>
</ul>
</nav>
<header>
<img src="/images/profile.png" alt="tyler" />
<h1>
<a href="index.html">Tyler Koenig</a>
</h1>
<h2>
Warehouse Associate at Amazon
<br />
Student at We Can Code IT, Web Developer in the making!
</h2>
</header>
<main>
<section id="aboutMe">
<div id="bio">
<h2>about me</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>
<h4>skills</h4>
<ul>
<li>adaptability</li>
<li>attention to detail</li>
<li>html/css</li>
<li>github</li>
<li>java</li>
<li>microsoft office</li>
<li>remote teamwork</li>
<li>test-driven development</li>
<li>time management</li>
</ul>
</div>
<div id="contact">
<h3>contact</h3>
<ul class="contactLinks">
<li>
<a
href="https://github.com/lerko96"
target="_blank"
title="github"
>
github <i class="fa fa-github fa-lg" aria-hidden="true"></i>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
target="_blank"
title="LinkedIn"
>
linkedin
<i class="fa fa-linkedin-square fa-lg" aria-hidden="true"></i>
</a>
</li>
<li>
<a
href="mailto:tylerkng96@icloud.com"
target="_blank"
title="tylerkng96@icloud.com"
>email
<i class="fa fa-envelope-o fa-lg" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</section>
<section id="projects">
<h2>projects.</h2>
<div>
<article class="project-item">
<div>
<h3>
<a
href="https://github.com/2021-Spring-Part-Time/virtual-pets-amok-lerko96"
target="_blank"
>virtual-pets-amok</a
>
</h3>
</div>
<div id="project-container">
<img src="/images/amok.png" alt="virtual-pet-amok-console" />
<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>
</article>
<article class="project-item">
<div>
<h3>
<a
href="https://github.com/2021-Spring-Part-Time/virtual-pet-shelter-lerko96"
target="_blank"
>
virtual-pet-shelter</a
>
</h3>
</div>
<div id="project-container">
<img
src="/images/shelter.png"
alt="virtual-pet-shelter-console"
/>
<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">
<img src="/images/pet.png" alt="virtual-pet-console" />
<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>
</main>
<footer>
<span id="copyright">&copy; 2021 Tyler Koenig</span>
<div id="footLinks">
<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>
</footer>
</div>
</body>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap"
rel="stylesheet"
/>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');
</style>
<script src="https://use.fontawesome.com/e427b1b41a.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Tyler Koenig</title>
</head>
<body>
<div id="wrapper">
<nav>
<a href="index.html">TYLER KOENIG</a>
<ul>
<li><a href="#bio" target="_self">ABOUT</a></li>
<li><a href="#contact" target="_self">CONTACT</a></li>
<li>
<a href="#project-wrapper" target="_self">PROJECTS</a>
</li>
<li><a href="#skills" target="_self">SKILLS</a></li>
</ul>
</nav>
<header>
<img src="/images/headshot-tyler_koenig.png" alt="tyler" />
<h1>
<a href="index.html">Tyler Koenig</a>
</h1>
<h2>
Warehouse Associate at Amazon
<br />
Student at We Can Code IT, Web Developer in the making!
</h2>
</header>
<main>
<section id="aboutMe">
<div id="bio">
<h2>about me</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>
</div>
<div id="contact">
<h3>contact</h3>
<ul class="contactLinks">
<li>
<a
href="https://github.com/lerko96"
target="_blank"
title="github"
>
github
<i
class="fa fa-github fa-lg"
aria-hidden="true"
></i>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
target="_blank"
title="LinkedIn"
>
linkedin
<i
class="fa fa-linkedin-square fa-lg"
aria-hidden="true"
></i>
</a>
</li>
<li>
<a
href="mailto:tylerkng96@icloud.com"
target="_blank"
title="tylerkng96@icloud.com"
>email
<i
class="fa fa-envelope-o fa-lg"
aria-hidden="true"
></i>
</a>
</li>
</ul>
</div>
</section>
<section id="skills">
<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>
<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>
<a
href="https://github.com/2021-Spring-Part-Time/virtual-pets-amok-lerko96"
target="_blank"
>Virtual Pets Amok</a
>
</h3>
</div>
<div id="project-container">
<div class="container-right">
<img
src="/images/amok.png"
alt="virtual-pet-amok-console"
/>
<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>
</article>
<article class="project-item">
<div>
<h3>
<a
href="https://github.com/2021-Spring-Part-Time/virtual-pet-shelter-lerko96"
target="_blank"
>
Virtual Pet Shelter</a
>
</h3>
</div>
<div id="project-container">
<div class="container-right">
<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>
</main>
<footer>
<span id="copyright">&copy; 2021 Tyler Koenig</span>
<div id="footLinks">
<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>
</footer>
</div>
<script src="index.js" type="text/java"></script>
</body>
</html>

23
index.js Normal file
View File

@@ -0,0 +1,23 @@
console.log('hello nurse');
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs((slideIndex += n));
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName('mySlides');
if (n > x.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = x.length;
}
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
x[slideIndex - 1].style.display = 'block';
}

View File

@@ -1,8 +1,12 @@
html {
scroll-behavior: smooth;
}
body {
box-sizing: border-box;
color: #c9cacc;
background-color: #272727;
font-size: 15px;
font-size: 16px;
font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif;
font-weight: 400;
line-height: 1.725;
@@ -89,7 +93,8 @@ h4 {
letter-spacing: 0.01rem;
}
#bio {
#bio,
#skills {
padding: 1.5rem;
text-align: start;
}
@@ -98,20 +103,38 @@ h4 {
font-size: 2.2rem;
}
#bio h4 {
#skills h4 {
color: #666;
font-size: 1.5rem;
margin: 0 auto 20px;
}
#bio ul {
#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;
@@ -146,21 +169,28 @@ h4 {
font-weight: 600;
}
#projects {
display: flex;
flex-direction: column;
#project-wrapper {
margin-top: 2.5rem;
}
#projects h2 {
#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: 1rem auto;
margin: 1.5rem 0;
text-align: center;
font-weight: 200;
letter-spacing: 0.01rem;
@@ -175,12 +205,9 @@ h4 {
color: #29f3c3;
}
#projects h3 {
font-size: 1.5rem;
text-align: left;
margin: 0 auto;
padding: 1.5rem;
letter-spacing: 0.01rem;
.project-desc {
margin: 0;
padding: 0 0.8rem;
}
.project-skills {
@@ -196,7 +223,7 @@ h4 {
.project-skills h4 {
font-size: 1.5rem;
flex: 1;
/* flex: 1; */
}
.project-skills li {
@@ -205,13 +232,14 @@ h4 {
}
.project-skills ul {
flex: 2;
/* flex: 9; */
line-height: 2rem;
text-align: start;
}
.project-item img {
width: 90%;
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);
@@ -301,6 +329,10 @@ footer {
margin: auto 5px;
}
#skills {
padding: 0;
}
#project-container {
display: flex;
flex-direction: row-reverse;