lerko/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

mobile styling

Browse Source
This commit is contained in:
Tyler Koenig
2021-09-13 17:01:07 -04:00
parent 7e20081f0d
commit b1faab1f4e
2 changed files with 239 additions and 581 deletions
Download Patch File Download Diff File Expand all files Collapse all files

283
index.html
View File

@@ -27,7 +27,9 @@
<a href="index.html">TYLER KOENIG</a>
<ul>
<li><a href="#about" target="_self">ABOUT</a></li>
<li><a href="#contact" target="_self">CONTACT</a></li>
<li id="nav__contact">
<a href="#contact" target="_self">CONTACT</a>
</li>
<li>
<a href="#projects" target="_self">PROJECTS</a>
</li>
@@ -36,6 +38,29 @@
</nav>
</header>
<main>
<div class="side__nav">
<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="https://github.com/lerko96"
target="_blank"
title="github"
><i class="fa fa-github 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 id="wrapper">
<section id="intro">
<div class="top__wrap">
@@ -124,41 +149,6 @@
</ul>
</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>
<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">
@@ -423,227 +413,6 @@
</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="/images/mystery-educator.png"
alt="Image Title"
/>
</a>
<div class="postcard__text">
<h1 class="postcard__title blue">
<a href="#">Podcast Title</a>
</h1>
<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
</time>
</div>
<div class="postcard__bar"></div>
<div class="postcard__preview-txt">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Eligendi, fugiat
asperiores inventore beatae accusamus odit
minima enim, commodi quia, doloribus eius!
Ducimus nemo accusantium maiores velit
corrupti tempora reiciendis molestiae
repellat vero. Eveniet ipsam adipisci illo
iusto quibusdam, sunt neque nulla unde ipsum
dolores nobis enim quidem excepturi, illum
quos!
</div>
<ul class="postcard__tagbox">
<li class="tag__item">
<i class="fa fa-tag mr-2"></i>Podcast
</li>
<li class="tag__item">
<i class="fa fa-clock mr-2"></i>55 mins.
</li>
<li class="tag__item play blue">
<a href="#"
><i class="fa fa-play mr-2"></i>Play
Episode</a
>
</li>
</ul>
</div>
</article>
</section>
</div>
<!-- WCCI Early Projects -->
<!-- <section id="project-wrapper">
<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">
<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> -->
</div>
</main>
<footer>

537
style.css
View File

@@ -42,6 +42,7 @@ nav ul {
}
nav a {
margin: 0 1rem;
text-decoration: none;
border-radius: 500px;
padding: 0.2rem;
@@ -58,6 +59,14 @@ nav a:hover {
transition: 150ms ease;
}
.side__nav {
display: none;
}
header {
display: block;
}
/* header {
color: #c9cacc;
margin: 0 auto;
@@ -89,108 +98,6 @@ nav a:hover {
overflow: hidden;
}
@media screen and (min-width: 576px) {
.card {
max-width: 500px;
}
}
@media screen and (min-width: 769px) {
.card {
max-width: 720px;
}
.project {
display: flex;
flex-direction: row;
/* flex-wrap: nowrap; */
/* flex-direction: column; */
}
.project .project__title {
font-size: 2rem;
}
.project__tagbox {
justify-content: start;
}
.project .project__img {
max-width: 300px;
max-height: 100%;
transition: transform 0.3s ease;
}
.project .project__text {
padding: 3rem;
width: 100%;
}
.project .media.project__text:before {
content: '';
position: absolute;
display: block;
background: #18151f;
top: -20%;
height: 130%;
width: 55px;
}
.project:hover .project__img {
transform: scale(1.1);
}
.project:nth-child(2n + 1) {
flex-direction: row;
}
.project:nth-child(2n + 0) {
flex-direction: row-reverse;
}
.project:nth-child(2n + 1) .project__text::before {
left: -12px !important;
transform: rotate(4deg);
}
.project:nth-child(2n + 0) .project__text::before {
right: -12px !important;
transform: rotate(-4deg);
}
}
@media screen and (min-width: 992px) {
.top__wrap {
display: flex;
flex-direction: row;
}
#profile {
height: 400px;
}
#about p {
max-width: 300px;
}
#about {
right: 0;
/* max-width: 500px; */
height: 400px;
}
.card {
max-width: 960px;
}
.project {
max-width: 960px;
}
}
@media screen and (min-width: 1200px) {
.card {
max-width: 1140px;
}
.project {
max-width: 1140px;
}
}
.card_top {
position: relative;
margin: auto;
@@ -215,7 +122,8 @@ nav a:hover {
}
.name a {
color: #c9cacc;
color: inherit;
text-decoration: none;
font-weight: 700;
font-size: 1.6em;
}
@@ -238,6 +146,11 @@ nav a:hover {
.contact-links a {
margin: 0 10px;
padding: 0;
color: #666;
}
.contact-links a:hover {
transition: color 0.3s ease-in-out;
color: #c9cacc;
}
@@ -391,7 +304,7 @@ nav a:hover {
.project:before {
content: '';
position: absolute;
/* position: absolute; */
top: 0;
right: 0;
bottom: 0;
@@ -448,11 +361,11 @@ footer {
.light {
background: #f3f5f7;
}
a,
/* a,
a:hover {
text-decoration: none;
transition: color 0.3s ease-in-out;
}
} */
/* Cards */
.postcard {
@@ -553,224 +466,6 @@ a:hover {
.postcard:hover .postcard__bar {
width: 100px;
}
@media screen and (min-width: 769px) {
.postcard {
flex-wrap: inherit;
}
.postcard .postcard__title {
font-size: 2rem;
}
.postcard .postcard__tagbox {
justify-content: start;
}
.postcard .postcard__img {
max-width: 300px;
max-height: 100%;
transition: transform 0.3s ease;
}
.postcard .postcard__text {
padding: 3rem;
width: 100%;
}
.postcard .media.postcard__text:before {
content: '';
position: absolute;
display: block;
background: #18151f;
top: -20%;
height: 130%;
width: 55px;
}
.postcard:hover .postcard__img {
transform: scale(1.1);
}
.postcard:nth-child(2n + 1) {
flex-direction: row;
}
.postcard:nth-child(2n + 0) {
flex-direction: row-reverse;
}
.postcard:nth-child(2n + 1) .postcard__text::before {
left: -12px !important;
transform: rotate(4deg);
}
.postcard:nth-child(2n + 0) .postcard__text::before {
right: -12px !important;
transform: rotate(-4deg);
}
}
/* @media screen and (min-width: 1024px) {
.postcard__text {
padding: 2rem 3.5rem;
}
.postcard__text:before {
content: '';
position: absolute;
display: block;
top: -20%;
height: 130%;
width: 55px;
}
.postcard.dark .postcard__text:before {
background: #18151f;
}
.postcard.light .postcard__text:before {
background: #e1e5ea;
}
} */
/* COLORS */
.postcard .postcard__tagbox .green.play:hover {
background: #79dd09;
color: black;
}
.green .postcard__title:hover {
color: #79dd09;
}
.green .postcard__bar {
background-color: #79dd09;
}
.green::before {
background-image: linear-gradient(
-30deg,
rgba(121, 221, 9, 0.1),
transparent 50%
);
}
.green:nth-child(2n)::before {
background-image: linear-gradient(
30deg,
rgba(121, 221, 9, 0.1),
transparent 50%
);
}
.postcard .postcard__tagbox .blue.play:hover {
background: #0076bd;
}
.blue .postcard__title:hover {
color: #0076bd;
}
.blue .postcard__bar {
background-color: #0076bd;
}
.blue::before {
background-image: linear-gradient(
-30deg,
rgba(0, 118, 189, 0.1),
transparent 50%
);
}
.blue:nth-child(2n)::before {
background-image: linear-gradient(
30deg,
rgba(0, 118, 189, 0.1),
transparent 50%
);
}
.postcard .postcard__tagbox .red.play:hover {
background: #bd150b;
}
.red .postcard__title:hover {
color: #bd150b;
}
.red .postcard__bar {
background-color: #bd150b;
}
.red::before {
background-image: linear-gradient(
-30deg,
rgba(189, 21, 11, 0.1),
transparent 50%
);
}
.red:nth-child(2n)::before {
background-image: linear-gradient(
30deg,
rgba(189, 21, 11, 0.1),
transparent 50%
);
}
.postcard .postcard__tagbox .yellow.play:hover {
background: #bdbb49;
color: black;
}
.yellow .postcard__title:hover {
color: #bdbb49;
}
.yellow .postcard__bar {
background-color: #bdbb49;
}
.yellow::before {
background-image: linear-gradient(
-30deg,
rgba(189, 187, 73, 0.1),
transparent 50%
);
}
.yellow:nth-child(2n)::before {
background-image: linear-gradient(
30deg,
rgba(189, 187, 73, 0.1),
transparent 50%
);
}
/* @media screen and (min-width: 769px) {
.green::before {
background-image: linear-gradient(
-80deg,
rgba(121, 221, 9, 0.1),
transparent 50%
);
}
.green:nth-child(2n)::before {
background-image: linear-gradient(
80deg,
rgba(121, 221, 9, 0.1),
transparent 50%
);
}
.blue::before {
background-image: linear-gradient(
-80deg,
rgba(0, 118, 189, 0.1),
transparent 50%
);
}
.blue:nth-child(2n)::before {
background-image: linear-gradient(
80deg,
rgba(0, 118, 189, 0.1),
transparent 50%
);
}
.red::before {
background-image: linear-gradient(
-80deg,
rgba(189, 21, 11, 0.1),
transparent 50%
);
}
.red:nth-child(2n)::before {
background-image: linear-gradient(
80deg,
rgba(189, 21, 11, 0.1),
transparent 50%
);
}
.yellow::before {
background-image: linear-gradient(
-80deg,
rgba(189, 187, 73, 0.1),
transparent 50%
);
}
.yellow:nth-child(2n)::before {
background-image: linear-gradient(
80deg,
rgba(189, 187, 73, 0.1),
transparent 50%
);
}
} */
/* code pen finish */
@@ -873,3 +568,197 @@ a:hover {
justify-content: space-between;
}
} */
@media screen and (min-width: 576px) {
.card {
max-width: 500px;
}
}
@media screen and (min-width: 769px) {
#nav__contact,
.contact-links {
display: none;
}
.side__nav {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* margin: 40px; */
height: 100%;
width: 80px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 17px;
overflow: hidden;
/* border-right: 1px solid #666; */
}
.side__nav a {
padding: 8px;
text-decoration: none;
color: #666;
display: block;
}
.side__nav a:hover {
transition: color 0.3s ease-in-out;
color: #c9cacc;
}
#wrapper {
margin-left: 90px;
}
#skills {
margin-top: 0;
}
nav {
margin: auto 2rem auto 90px;
display: flex;
}
nav a {
margin: auto;
padding: 0.5rem;
flex: 4;
justify-content: flex-start;
}
nav li {
display: inline-block;
}
nav ul {
display: flex;
}
#top__wrap {
position: relative;
}
.card {
max-width: 720px;
}
.project {
display: flex;
flex-direction: row;
/* flex-wrap: nowrap; */
/* flex-direction: column; */
}
.project .project__title {
font-size: 2rem;
}
.project__tagbox {
justify-content: start;
}
.project .project__img {
max-width: 300px;
max-height: 100%;
transition: transform 0.3s ease;
}
.project .project__text {
padding: 3rem;
width: 100%;
}
.project .media.project__text:before {
content: '';
position: absolute;
display: block;
background: #18151f;
top: -20%;
height: 130%;
width: 55px;
}
.project:hover .project__img {
transform: scale(1.1);
}
.project:nth-child(2n + 1) {
flex-direction: row;
}
.project:nth-child(2n + 0) {
flex-direction: row-reverse;
}
.project:nth-child(2n + 1) .project__text::before {
left: -12px !important;
transform: rotate(4deg);
}
.project:nth-child(2n + 0) .project__text::before {
right: -12px !important;
transform: rotate(-4deg);
}
.project .project__tagbox {
justify-content: start;
}
footer {
margin: 0 auto;
width: 87%;
padding: 2rem;
flex-direction: row;
justify-content: space-between;
}
}
@media screen and (min-width: 992px) {
.top__wrap {
max-width: 960px;
/* text-align: center; */
display: flex;
margin: 0 auto;
flex-direction: row;
}
#profile {
margin-right: 1rem;
flex: 1;
height: 400px;
}
#about p {
/* max-width: 400px; */
}
#about {
flex: 2;
margin-left: 1rem;
right: 0;
/* max-width: 500px; */
height: 400px;
}
.card {
max-width: 960px;
}
.project {
max-width: 960px;
}
}
@media screen and (min-width: 1200px) {
.top__wrap {
max-width: 1140px;
}
.card {
max-width: 1140px;
}
.project {
max-width: 1140px;
}
}