diff --git a/images/donut-clicker.png b/images/donut-clicker.png new file mode 100644 index 00000000..17cb7d38 Binary files /dev/null and b/images/donut-clicker.png differ diff --git a/images/headshot-tyler_koenig.png b/images/headshot-tyler_koenig.png new file mode 100644 index 00000000..402b2c73 Binary files /dev/null and b/images/headshot-tyler_koenig.png differ diff --git a/images/mystery-educator.png b/images/mystery-educator.png new file mode 100644 index 00000000..e4615fb0 Binary files /dev/null and b/images/mystery-educator.png differ diff --git a/images/review-site.png b/images/review-site.png new file mode 100644 index 00000000..a1b8d564 Binary files /dev/null and b/images/review-site.png differ diff --git a/images/trek.png b/images/trek.png new file mode 100644 index 00000000..1eb3c58f Binary files /dev/null and b/images/trek.png differ diff --git a/index.html b/index.html index 6e0f04bd..e16c3d21 100644 --- a/index.html +++ b/index.html @@ -1,199 +1,428 @@ - - - - - - - - - - Tyler Koenig - - -
- -
- tyler -

- Tyler Koenig -

-

- Warehouse Associate at Amazon -
- Student at We Can Code IT, Web Developer in the making! -

-
-
-
-
-

about me

-

- 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! -

-

skills

-
    -
  • adaptability
    • -
  • attention to detail
    • -
  • html/css
    • -
  • github
    • -
  • java
    • -
  • microsoft office
    • -
  • remote teamwork
    • -
  • test-driven development
    • -
  • time management
    • -
-
-
-

contact

- -
-
-
-

projects.

-
-
- -
- virtual-pet-amok-console -
-

skills

-
    -
  • TDD
    • -
  • polymorphism
    • -
  • encapsulation
    • -
  • interface (implements)
    • -
  • abstract class (extends)
    • -
-
-
-
-
- -
- virtual-pet-shelter-console -
-

skills

-
    -
  • TDD
    • -
  • constructor() {...}
    • -
  • getter() {...}
    • -
  • map<> = hashmap<>()>
    • -
  • collections<>
    • -
-
-
-
-
- -
- virtual-pet-console -
-

skills

-
    -
  • game loop
    • -
  • user input
    • -
  • classes
    • -
  • instance variables
    • -
  • methods
    • -
  • clean code
    • -
-
-
-
-
-
-
- -
- + + + + + + + + + + + Tyler Koenig + + +
+ +
+ tyler +

+ Tyler Koenig +

+

+ Warehouse Associate at Amazon +
+ Student at We Can Code IT, Web Developer in the making! +

+
+
+
+
+

about me

+

+ 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! +

+
+
+

contact

+ +
+
+
+

skills

+
    +
  • Java
    • +
  • Spring
    • +
  • Thymeleaf
    • +
  • JavaScript
    • +
  • MVC
    • +
  • HTML
    • +
  • CSS
    • +
  • Test Driven Development
    • +
  • Agile (Scrum)
    • +
  • Object Oriented Programming
    • +
  • JSON
    • +
  • React
    • +
  • REST APIs
    • +
  • Responsive Design
    • +
  • Relational Databases
    • +
  • Source Control/ Github
    • +
+ +
+
+

projects

+
+
+ +
+
+ virtual-pet-amok-console +
+

+ Designed a single page application + that brings back unique data from + MET Museum and NASA APIs. +

+
+
+
+

skills

+
    +
  • Java
    • +
  • JavaScript
    • +
  • HTML
    • +
  • CSS
    • +
  • VS Code
    • +
  • Github
    • +
  • TDD
    • +
  • OOP
    • +
+
+
+
+
+
+

+ Donut Clicker +

+
+
+
+ virtual-pet-amok-console +
+

+ Designed a single page application + that lets users make virtual donuts + and buy upgrades for the game. +

+
+
+
+

skills

+
    +
  • JavaScript
    • +
  • HTML
    • +
  • CSS
    • +
  • VS Code
    • +
  • Github
    • +
  • TDD
    • +
  • OOP
    • +
+
+
+
+
+ +
+
+ virtual-pet-amok-console +
+

+ Designed an MVC website that lets + users find treks located by region + and continent. +

+
+
+
+

skills

+
    +
  • Java
    • +
  • SpringJPA
    • +
  • HTML
    • +
  • CSS
    • +
  • IntelliJ
    • +
  • VS Code
    • +
  • Github
    • +
  • TDD
    • +
  • OOP
    • +
+
+
+
+
+
+

+ Reviews Site +

+
+
+
+ +
+

+ Designed a movie reviews website + using thymeleaf templates. +

+
+
+
+

skills

+
    +
  • Java
    • +
  • Thymeleaf
    • +
  • HTML
    • +
  • CSS
    • +
  • IntelliJ
    • +
  • Github
    • +
  • TDD
    • +
  • OOP
    • +
+
+
+
+
+ +
+
+ virtual-pet-amok-console +
+

+ Console App that builds off of + virtual-pet-shelter. This add's + robotic pets to the shelter, with + their own robotic needs. +

+
+
+
+

skills

+
    +
  • TDD
    • +
  • polymorphism
    • +
  • encapsulation
    • +
  • interface (implements)
    • +
  • abstract class (extends)
    • +
+
+
+
+
+ +
+
+ virtual-pet-shelter-console +
+

+ Built a console application allowing + users to take care of multiple pets. + Added the ability to admit pets, or + adopt. +

+
+
+
+

skills

+
    +
  • TDD
    • +
  • constructor() {...}
    • +
  • getter() {...}
    • +
  • map<> = hashmap<>()>
    • +
  • collections<>
    • +
+
+
+
+
+ +
+
+ virtual-pet-console +
+

+ 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. +

+
+
+
+

skills

+
    +
  • game loop
    • +
  • user input
    • +
  • classes
    • +
  • instance variables
    • +
  • methods
    • +
  • clean code
    • +
+
+
+
+
+
+
+ +
+ + diff --git a/index.js b/index.js new file mode 100644 index 00000000..f0415d17 --- /dev/null +++ b/index.js @@ -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'; +} diff --git a/style.css b/style.css index 5cf98d53..0c165777 100644 --- a/style.css +++ b/style.css @@ -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;