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 |
163
index.html
163
index.html
@@ -4,68 +4,149 @@
|
||||
<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"
|
||||
/>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<title>Tyler Koenig</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<div class="name">
|
||||
<a href="/index.html">Tyler Koenig</a>
|
||||
</div>
|
||||
<div class="indexLinks"></div>
|
||||
<a href="/index.html" target="#">About</a>
|
||||
<a href="/index.html" target="#">Projects</a>
|
||||
<nav id="links">
|
||||
<ul>
|
||||
<li style="float: left"><a href="index.html">TYLER KOENIG</a></li>
|
||||
<li><a href="#projects" target="_self">PROJECTS</a></li>
|
||||
<li><a href="#contact" target="_self">CONTACT</a></li>
|
||||
<li><a href="#bio" target="_self">ABOUT</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<header>
|
||||
<img src="/images/rally.jpg" alt="tyler" />
|
||||
<h1 class="title">Tyler Koenig</h1>
|
||||
<img src="/images/profile.png" alt="tyler" />
|
||||
<h1>
|
||||
<a href="index.html">Tyler Koenig</a>
|
||||
</h1>
|
||||
<h2 class="intro">
|
||||
warehouse associate at amazon
|
||||
<p>student at we can code it</p>
|
||||
Warehouse Associate at Amazon
|
||||
<p>Student at We Can Code IT</p>
|
||||
<p>Web Developer in the making!</p>
|
||||
</h2>
|
||||
</header>
|
||||
<main>
|
||||
<section class="about">
|
||||
<div class="bio">
|
||||
<h3>About Me</h3>
|
||||
<section id="aboutMe">
|
||||
<div id="bio">
|
||||
<h2>about me</h2>
|
||||
<p>
|
||||
I'm Tyler Koenig, a software developer in the making. Lorem ipsum
|
||||
dolor sit amet consectetur adipisicing elit. Iste quod architecto
|
||||
eius numquam. Sunt ducimus deserunt alias id eligendi repellendus
|
||||
dicta veniam asperiores, rerum magnam totam autem ipsum cumque.
|
||||
Fugit.
|
||||
I'm Tyler Koenig, a lifelong student. Graduated with an Associate of
|
||||
Arts from Lorain County Community College in 2018.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skills">
|
||||
<h3>skills</h3>
|
||||
<h4>skills</h4>
|
||||
<ul>
|
||||
<li>problem solver</li>
|
||||
<li>microsoft office</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<h3>Contact</h3>
|
||||
<div class="links">
|
||||
<a href="https://github.com/lerko96" target="_blank" title="github"
|
||||
>github</a
|
||||
>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
|
||||
target="_blank"
|
||||
title="LinkedIn"
|
||||
>linkedin</a
|
||||
>
|
||||
<a href="mailto:tylerkng96@icloud.com" target="_blank" title="email"
|
||||
>email</a
|
||||
>
|
||||
</div>
|
||||
<div id="contact">
|
||||
<h3>contact</h3>
|
||||
<ul class="contactLinks">
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/lerko96"
|
||||
target="_blank"
|
||||
title="github"
|
||||
>github</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
|
||||
target="_blank"
|
||||
title="LinkedIn"
|
||||
>linkedin</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="mailto:tylerkng96@icloud.com"
|
||||
target="_blank"
|
||||
title="email"
|
||||
>email</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="projects">
|
||||
<h2>Projects</h2>
|
||||
<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-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>
|
||||
</main>
|
||||
<footer></footer>
|
||||
<footer>
|
||||
<ul class="footLinks">
|
||||
<li><a href=""></a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
195
style.css
195
style.css
@@ -1,4 +1,193 @@
|
||||
.about {
|
||||
display: flex;
|
||||
float: left;
|
||||
body {
|
||||
margin: 0;
|
||||
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