diff --git a/index.html b/index.html index 655f78c5..7b3290a9 100644 --- a/index.html +++ b/index.html @@ -18,40 +18,78 @@ - + Tyler Koenig
-
-
-
- tyler -

- Tyler Koenig -

-

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

-
+
-
-
-

about me

+
+
+
+ tyler +
+
+
+ Tyler Koenig +
+
+

+ Passionate Software Developer +
+ Recent Graduate of We Can Code IT +

+
+ +
+
+
+

about

I'm Tyler Koenig, a lifelong student. Graduated with an Associate of Arts from Lorain County Community @@ -60,118 +98,120 @@ 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
    • -
-
+ +
-
- - Image Title - -
-

- Podcast Title -

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

projects

+ +
+
+ + +
+
+

mystery educator

+
+
+

mon, may 25th 2021

+
+
+
+

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

+
+
    +
  • + java + +
    • +
+
+
+ + Image Title + +
+

+ Podcast Title +

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

projects

diff --git a/style.css b/style.css index 8fdaf92d..ab8380ff 100644 --- a/style.css +++ b/style.css @@ -12,7 +12,8 @@ html, body { body { box-sizing: border-box; - color: #c9cacc; + color: #fff; + /* color: #c9cacc; */ background-color: #110f16; /* background-color: #272727; */ font-size: 16px; @@ -72,61 +73,73 @@ nav a:hover { } */ .card { + position: relative; background-color: #151515; - margin: 2rem; + margin: 2rem auto; + /* height: 400px; */ + width: 320px; text-align: center; border-radius: 10px; box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2); + overflow: hidden; } .card-top { + position: relative; margin: auto; height: 80px; background: #29f3c3; - border-start-end-radius: 10px; - border-start-start-radius: 10px; } -.card img { +#headshot { margin: 40px auto 10px; width: 100px; + height: 100px; + border: 3px solid #151515; border-radius: 50%; } -h1 { - /* font-family: 'Source Sans Pro', sans-serif; */ - /* font-weight: 700; */ - /* line-height: 2rem; */ - /* letter-spacing: 0.05rem; */ +.name { + height: 40px; + margin-top: 70px; } -h1 a { - font-size: .8em; +.name a { color: #c9cacc; - text-decoration: none; - letter-spacing: -.05em; - word-spacing: -.05em; - + font-weight: 700; + font-size: 1.6em; } -h1 a:hover { +.name a:hover { + text-decoration: underline; color: #29f3c3; } -header h2 { - /* font-weight: 200; */ - font-size: 1.2rem; - letter-spacing: 0.01rem; +.short-bio { + height: 175px; + margin: 20px; } -h2, -h3, -h4 { - /* letter-spacing: 0.01rem; */ +.contact-links { + position: absolute; + font-size: 80%; + left: 0; + right: 0; + bottom: 30px; + margin-top: 40px; } -#aboutMe { - letter-spacing: 0.01rem; +.contact-links a { + margin: 0 10px; + padding: 0; + color: #c9cacc; +} + +.card h2 { + font-size: 2.2rem; + text-align: start; + /* padding: 1.5rem; */ + margin: 16px auto 8px; } #bio, @@ -135,76 +148,33 @@ h4 { text-align: start; } -#bio h2 { - font-size: 2.2rem; +#projects h2 { + text-align: start; + padding: 1.5rem; + } -#skills h4 { - padding: 1.5rem; - color: #666; - font-size: 1.5rem; - margin: 0 auto 20px; -} #skills ul { - line-height: 1.35rem; - font-weight: 200; - text-align: center; - align-items: center; - margin: 0; - padding: 0; + display: flex; + flex-flow: row wrap; list-style-type: none; + overflow-x:visible; } -.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: - '. .' - '. .' - '. .' - '. .' - '. .' - '. .' - '. .' - '. .'; +#skills li { + margin: 5px auto; + padding: 5px 10px; + border: 1px solid #fff; } -#contact { - margin-top: 1rem; - padding: 1.5rem; +.project-img img { + width: 100%; + height: ; + } -#contact h3 { - font-size: 1.5rem; -} +/* end new */ -#contact ul { - display: flex; - list-style-type: none; - margin: 0; - padding: 0; - text-align: center; -} - -.contactLinks li { - display: flex; - flex-direction: column; - flex: 1; -} - -.contactLinks a { - display: flex; - flex-direction: column; - color: #c9cacc; - text-decoration: none; -} - -.contactLinks a:hover { - font-weight: 600; -} #project-wrapper { margin-top: 2.5rem; @@ -311,7 +281,7 @@ footer { transition: 160ms ease-in; } -code pen begin + @import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap'); /* This pen */ @@ -650,7 +620,7 @@ a:hover { /* color: #1b1b1b; */ /* color: #2a9d8f */ -/* @media (min-width: 768px) { +@media (min-width: 768px) { #wrapper { max-width: 992px; } @@ -746,6 +716,6 @@ a:hover { flex-direction: row; justify-content: space-between; } -} */ +}