projects added
This commit is contained in:
Tyler Koenig
BIN
images/amok.png
Normal file
BIN
images/amok.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
images/pet.png
Normal file
BIN
images/pet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
images/profile.png
Normal file
BIN
images/profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 488 KiB |
BIN
images/shelter.png
Normal file
BIN
images/shelter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
143
index.html
143
index.html
@@ -4,68 +4,149 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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"
|
||||||
|
/>
|
||||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||||
<title>Tyler Koenig</title>
|
<title>Tyler Koenig</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav>
|
<nav id="links">
|
||||||
<div class="name">
|
<ul>
|
||||||
<a href="/index.html">Tyler Koenig</a>
|
<li style="float: left"><a href="index.html">TYLER KOENIG</a></li>
|
||||||
</div>
|
<li><a href="#projects" target="_self">PROJECTS</a></li>
|
||||||
<div class="indexLinks"></div>
|
<li><a href="#contact" target="_self">CONTACT</a></li>
|
||||||
<a href="/index.html" target="#">About</a>
|
<li><a href="#bio" target="_self">ABOUT</a></li>
|
||||||
<a href="/index.html" target="#">Projects</a>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<header>
|
<header>
|
||||||
<img src="/images/rally.jpg" alt="tyler" />
|
<img src="/images/profile.png" alt="tyler" />
|
||||||
<h1 class="title">Tyler Koenig</h1>
|
<h1>
|
||||||
|
<a href="index.html">Tyler Koenig</a>
|
||||||
|
</h1>
|
||||||
<h2 class="intro">
|
<h2 class="intro">
|
||||||
warehouse associate at amazon
|
Warehouse Associate at Amazon
|
||||||
<p>student at we can code it</p>
|
<p>Student at We Can Code IT</p>
|
||||||
<p>Web Developer in the making!</p>
|
<p>Web Developer in the making!</p>
|
||||||
</h2>
|
</h2>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<section class="about">
|
<section id="aboutMe">
|
||||||
<div class="bio">
|
<div id="bio">
|
||||||
<h3>About Me</h3>
|
<h2>about me</h2>
|
||||||
<p>
|
<p>
|
||||||
I'm Tyler Koenig, a software developer in the making. Lorem ipsum
|
I'm Tyler Koenig, a lifelong student. Graduated with an Associate of
|
||||||
dolor sit amet consectetur adipisicing elit. Iste quod architecto
|
Arts from Lorain County Community College in 2018.
|
||||||
eius numquam. Sunt ducimus deserunt alias id eligendi repellendus
|
|
||||||
dicta veniam asperiores, rerum magnam totam autem ipsum cumque.
|
|
||||||
Fugit.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<h4>skills</h4>
|
||||||
<div class="skills">
|
|
||||||
<h3>skills</h3>
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>problem solver</li>
|
<li>problem solver</li>
|
||||||
<li>microsoft office</li>
|
<li>microsoft office</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="contact">
|
<div id="contact">
|
||||||
<h3>Contact</h3>
|
<h3>contact</h3>
|
||||||
<div class="links">
|
<ul class="contactLinks">
|
||||||
<a href="https://github.com/lerko96" target="_blank" title="github"
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/lerko96"
|
||||||
|
target="_blank"
|
||||||
|
title="github"
|
||||||
>github</a
|
>github</a
|
||||||
>
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
<a
|
<a
|
||||||
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
|
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
title="LinkedIn"
|
title="LinkedIn"
|
||||||
>linkedin</a
|
>linkedin</a
|
||||||
>
|
>
|
||||||
<a href="mailto:tylerkng96@icloud.com" target="_blank" title="email"
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="mailto:tylerkng96@icloud.com"
|
||||||
|
target="_blank"
|
||||||
|
title="email"
|
||||||
>email</a
|
>email</a
|
||||||
>
|
>
|
||||||
</div>
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="projects">
|
<section id="projects">
|
||||||
<h2>Projects</h2>
|
<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-pet-amok</a
|
||||||
|
>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<img src="/images/amok.png" alt="virtual-pet-amok-console" />
|
||||||
|
<ul class="project-skills">
|
||||||
|
<h4>skills</h4>
|
||||||
|
<li>Interface</li>
|
||||||
|
<li>Abstract Classes</li>
|
||||||
|
<li>Encapsulation</li>
|
||||||
|
<li>TDD</li>
|
||||||
|
</ul>
|
||||||
|
</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>
|
||||||
|
<img src="/images/shelter.png" alt="virtual-pet-shelter-console" />
|
||||||
|
<ul class="project-skills">
|
||||||
|
<h4>Skills</h4>
|
||||||
|
<li>abstract</li>
|
||||||
|
<li>encaps</li>
|
||||||
|
<li>tdd</li>
|
||||||
|
</ul>
|
||||||
|
</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>
|
||||||
|
<img src="/images/pet.png" alt="virtual-pet-console" />
|
||||||
|
<ul class="project-skills">
|
||||||
|
<h4>Skills</h4>
|
||||||
|
<li>game loop</li>
|
||||||
|
<li>user input</li>
|
||||||
|
<li>classes</li>
|
||||||
|
<li>instance variables</li>
|
||||||
|
<li>methods</li>
|
||||||
|
<li>clean code</li>
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer></footer>
|
<footer>
|
||||||
|
<ul class="footLinks">
|
||||||
|
<li><a href=""></a></li>
|
||||||
|
</ul>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
195
style.css
195
style.css
@@ -1,4 +1,193 @@
|
|||||||
.about {
|
body {
|
||||||
display: flex;
|
margin: 0;
|
||||||
float: left;
|
color: #c9cacc;
|
||||||
|
background-color: #1b1b1b;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-family: "Source Code Pro", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links ul {
|
||||||
|
/* display: inline; */
|
||||||
|
/* display: inline-block; */
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
/* background-color: black; */
|
||||||
|
/* padding: 4rem auto; */
|
||||||
|
}
|
||||||
|
|
||||||
|
#links li {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links li a {
|
||||||
|
display: block;
|
||||||
|
color: #c9cacc;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0.18rem;
|
||||||
|
padding: 14px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background-color: #767f90;
|
||||||
|
color: #1b1b1b;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
line-height: 0.75rem;
|
||||||
|
border-top: 2px solid #ffffff;
|
||||||
|
border-bottom: 2px solid #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 a {
|
||||||
|
color: #3d405b;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 a:hover {
|
||||||
|
color: #81b29a;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 a:active {
|
||||||
|
color: #3d405b;
|
||||||
|
}
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4 {
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
header img {
|
||||||
|
width: 165px;
|
||||||
|
border: 5px solid #f4f1de;
|
||||||
|
border: 5px solid grey;
|
||||||
|
border-radius: 165px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* h2 {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
} */
|
||||||
|
|
||||||
|
#aboutMe {
|
||||||
|
display: flex;
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 70%;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 620px) {
|
||||||
|
#aboutMe {
|
||||||
|
display: block;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
#contact {
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
#projects {
|
||||||
|
height: auto;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#bio {
|
||||||
|
width: 66%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact {
|
||||||
|
text-align: end;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactLinks li {
|
||||||
|
list-style: none;
|
||||||
|
line-height: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactLinks a {
|
||||||
|
color: #c9cacc;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px solid #c9cacc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactLinks a:hover {
|
||||||
|
font-weight: 600;
|
||||||
|
border-bottom: 2px solid #c9cacc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects {
|
||||||
|
display: block;
|
||||||
|
width: 70%;
|
||||||
|
border: 2px solid red;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
height: auto;
|
||||||
|
/* justify-content: center; */
|
||||||
|
|
||||||
|
/* overflow: auto; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-item {
|
||||||
|
display: block;
|
||||||
|
border: 1px solid blue;
|
||||||
|
margin: 10px auto 20px;
|
||||||
|
height: auto;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
/* background-color: #282c34; */
|
||||||
|
/* color: #ffffff; */
|
||||||
|
font-weight: 200;
|
||||||
|
padding: 2rem auto;
|
||||||
|
/* padding: auto auto 50px; */
|
||||||
|
/* padding: 1.1rem; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-item a {
|
||||||
|
color: #c9cacc;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-item a:hover {
|
||||||
|
color: #81b29a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-item img {
|
||||||
|
width: 45%;
|
||||||
|
border: 2px solid red;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects h2 {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border: 1px solid #3d405b;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects h3 {
|
||||||
|
border: 1px solid brown;
|
||||||
|
text-align: left;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects h4 {
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-skills {
|
||||||
|
list-style: none;
|
||||||
|
width: 25%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: end;
|
||||||
|
float: left;
|
||||||
|
line-height: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user