From afbf55aa62c803aa70a126bf2a55be15eda2bf10 Mon Sep 17 00:00:00 2001 From: Tyler Koenig Date: Fri, 10 Sep 2021 15:14:15 -0400 Subject: [PATCH 1/9] add another font --- index.html | 3 +++ style.css | 4 +++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index e16c3d21..300899cc 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,9 @@ 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" /> + diff --git a/style.css b/style.css index 05b327c9..4fe4c3b1 100644 --- a/style.css +++ b/style.css @@ -63,8 +63,10 @@ header img { } h1 { + /* font-family: 'Source Sans Pro', sans-serif; */ + /* font-weight: 700; */ line-height: 2rem; - letter-spacing: 0.01rem; + /* letter-spacing: 0.05rem; */ } h1 a { From 8753311f5ce34ee68813858becb41e0809acec58 Mon Sep 17 00:00:00 2001 From: Tyler Koenig Date: Fri, 10 Sep 2021 18:11:32 -0400 Subject: [PATCH 2/9] added scss, but wont move forward --- .idea/.gitignore | 3 + .idea/lerko96.github.io.iml | 9 + .idea/misc.xml | 6 + .idea/modules.xml | 8 + .idea/vcs.xml | 6 + app/js/script.js | 1 + app/scss/_globals.scss | 773 +++++++++++++++++++++++++++++++++ app/scss/style.css | 821 ++++++++++++++++++++++++++++++++++++ app/scss/style.css.map | 10 + app/scss/style.scss | 1 + index.html | 64 ++- style.css | 403 +++++++++++++++++- 12 files changed, 2083 insertions(+), 22 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/lerko96.github.io.iml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 app/js/script.js create mode 100644 app/scss/_globals.scss create mode 100644 app/scss/style.css create mode 100644 app/scss/style.css.map create mode 100644 app/scss/style.scss diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 00000000..26d33521 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,3 @@ +# Default ignored files +/shelf/ +/workspace.xml diff --git a/.idea/lerko96.github.io.iml b/.idea/lerko96.github.io.iml new file mode 100644 index 00000000..d6ebd480 --- /dev/null +++ b/.idea/lerko96.github.io.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 00000000..40674af8 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 00000000..6e636ebb --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 00000000..35eb1ddf --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/app/js/script.js b/app/js/script.js new file mode 100644 index 00000000..3d4db9c9 --- /dev/null +++ b/app/js/script.js @@ -0,0 +1 @@ +console.log('hello nurse'); \ No newline at end of file diff --git a/app/scss/_globals.scss b/app/scss/_globals.scss new file mode 100644 index 00000000..d5dc5bae --- /dev/null +++ b/app/scss/_globals.scss @@ -0,0 +1,773 @@ +html { + font-size: 100%; + box-sizing: border-box; +} + + +*, *::before, *::after { + box-sizing: inherit; +} + +body { + font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif; + line-height: 1.3; + margin: 0px; + padding: 0px; + background-color: #212121; + color: #ffffff; +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html, body { + width: 100%; + height: 100%; + scroll-behavior: smooth; +} + +body { + box-sizing: border-box; + color: #c9cacc; + background-color: #110f16; + /* background-color: #272727; */ + font-size: 16px; + font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif; + font-weight: 400; + /* line-height: 1.725; */ + text-rendering: geometricPrecision; + min-height: 100vh; + /* margin: 0 auto; */ +} + +#wrapper { + display: flex; + flex-direction: column; + width: 100%; + /* max-width: 560px; */ + margin: 0 auto; +} + +nav { + +} + +nav ul { + list-style-type: none; + margin: auto; + padding: 0em; +} + +nav a { + text-decoration: none; + border-radius: 500px; + padding: 0.2rem; + font-weight: 600; + display: flex; + justify-content: center; + color: #c9cacc; + letter-spacing: 0.09rem; +} + +nav a:hover { + background-color: #29f3c3; + color: #1b1b1b; + transition: 150ms ease; +} + +/* header { + color: #c9cacc; + margin: 0 auto; + text-align: center; + padding: 2rem; + line-height: 1.75rem; + border-top: 1.5px solid #666; + border-bottom: 1.5px solid #666; +} */ + +/* header img { + width: 100px; + border: 5px solid #666; + border-radius: 165px; +} */ + +.card { + background-color: #151515; + margin: 2rem; + text-align: center; + border-radius: 10px; + box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2); +} + +.card-top { + margin: auto; + height: 80px; + background: #29f3c3; + border-start-end-radius: 10px; + border-start-start-radius: 10px; +} + +.card img { + margin: 40px auto 10px; + width: 100px; + border-radius: 50%; +} + +h1 { + /* font-family: 'Source Sans Pro', sans-serif; */ + /* font-weight: 700; */ + /* line-height: 2rem; */ + /* letter-spacing: 0.05rem; */ +} + +h1 a { + font-size: .8em; + color: #c9cacc; + text-decoration: none; + letter-spacing: -.05em; + word-spacing: -.05em; + +} + +h1 a:hover { + color: #29f3c3; +} + +header h2 { + /* font-weight: 200; */ + font-size: 1.2rem; + letter-spacing: 0.01rem; +} + +h2, +h3, +h4 { + /* letter-spacing: 0.01rem; */ +} + +#aboutMe { + letter-spacing: 0.01rem; +} + +#bio, +#skills { + padding: 1.5rem; + text-align: start; +} + +#bio h2 { + font-size: 2.2rem; +} + +#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; + 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; +} + +#contact h3 { + font-size: 1.5rem; +} + +#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; +} + +#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: 1.5rem 0; + text-align: center; + font-weight: 200; + letter-spacing: 0.01rem; +} + +.project-item a { + color: #c9cacc; + text-decoration: none; +} + +.project-item a:hover { + color: #29f3c3; +} + +.project-desc { + margin: 0; + padding: 0 0.8rem; +} + +.project-skills { + color: #666; + list-style: none; + margin: 0 auto; + line-height: 1.25rem; + text-align: start; + padding: 0 1.5rem; + display: flex; + align-items: baseline; +} + +.project-skills h4 { + font-size: 1.5rem; + /* flex: 1; */ +} + +.project-skills li { + list-style-type: none; + color: #c9cacc; +} + +.project-skills ul { + /* flex: 9; */ + line-height: 2rem; + text-align: start; +} + +.project-item img { + 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); +} + +footer { + color: #666; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + margin: 0 auto; + padding: 1rem; +} + +#copyright { + margin: 0.4rem; + letter-spacing: 0.1rem; +} + +#footLinks { + margin: 0.4rem; + letter-spacing: 0.8rem; +} + +#footLinks a { + color: #666; +} + +#footLinks a:hover { + color: #c9cacc; + transition: 160ms ease-in; +} + +code pen begin + +/* This pen */ + +.dark { + background: #110f16; +} +.light { + background: #f3f5f7; +} +a, +a:hover { + text-decoration: none; + transition: color 0.3s ease-in-out; +} + +/* Cards */ +.postcard { + flex-wrap: wrap; + display: flex; + box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66); + border-radius: 10px; + margin: 0 0 2rem 0; + overflow: hidden; + position: relative; + color: #ffffff; +} +.postcard.dark { + background-color: #18151f; +} +.postcard.light { + background-color: #e1e5ea; +} +.postcard .t-dark { + color: #18151f; +} +.postcard a { + color: inherit; +} +.postcard h1, +.postcard .h1 { + margin-bottom: 0.5rem; + font-weight: 500; + line-height: 1.2; +} +.postcard .small { + font-size: 80%; +} +.postcard .postcard__title { + font-size: 1.75rem; +} +.postcard .postcard__img { + max-height: 180px; + width: 100%; + object-fit: cover; + position: relative; +} +.postcard .postcard__img_link { + display: contents; +} +.postcard .postcard__bar { + width: 50px; + height: 10px; + margin: 10px 0; + border-radius: 5px; + background-color: #424242; + transition: width 0.2s ease; +} +.postcard .postcard__text { + padding: 1.5rem; + position: relative; + display: flex; + flex-direction: column; +} +.postcard .postcard__preview-txt { + overflow: hidden; + text-overflow: ellipsis; + text-align: justify; + height: 100%; +} +.postcard .postcard__tagbox { + display: flex; + flex-flow: row wrap; + font-size: 14px; + margin: 20px 0 0 0; + padding: 0; + justify-content: center; +} +.postcard .postcard__tagbox .tag__item { + display: inline-block; + background: rgba(83, 83, 83, 0.4); + border-radius: 3px; + padding: 2.5px 10px; + margin: 0 5px 5px 0; + cursor: default; + user-select: none; + transition: background-color 0.3s; +} +.postcard .postcard__tagbox .tag__item:hover { + background: rgba(83, 83, 83, 0.8); +} +.postcard:before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-image: linear-gradient(-70deg, #424242, transparent 50%); + opacity: 1; + border-radius: 10px; +} +.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 */ + +/* color: #1b1b1b; */ +/* color: #2a9d8f */ +/* @media (min-width: 768px) { + #wrapper { + max-width: 992px; + } + + nav { + display: flex; + } + + nav a { + margin: auto; + padding: 0.5rem; + flex: 4; + justify-content: flex-start; + } + + nav li { + display: inline-block; + } + + nav ul { + display: flex; + } + + #aboutMe { + display: flex; + } + + #bio { + flex: 2; + } + + #contact { + flex: 1; + text-align: end; + } + + .contactLinks { + display: flex; + flex-direction: column; + } + + .contactLinks li { + align-items: flex-end; + } + .contactLinks a { + flex-direction: row; + } + + .contactLinks i { + margin: auto 5px; + } + + #skills { + padding: 0; + } + + #project-container { + display: flex; + flex-direction: row-reverse; + } + + .project-item img { + flex: 2; + } + + .project-skills { + flex: 1; + margin: 0; + padding: 0; + text-align: end; + flex-direction: column; + align-items: flex-end; + } + + .project-skills h4 { + margin: 1.5rem; + align-self: flex-start; + } + + .project-skills ul { + margin: 1.5rem; + padding: 0; + } + + .project-item a { + align-self: start; + } + + footer { + margin: 0 auto; + width: 87%; + padding: 2rem; + flex-direction: row; + justify-content: space-between; + } +} */ + + diff --git a/app/scss/style.css b/app/scss/style.css new file mode 100644 index 00000000..a44ac628 --- /dev/null +++ b/app/scss/style.css @@ -0,0 +1,821 @@ +html { + font-size: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +*, *::before, *::after { + -webkit-box-sizing: inherit; + box-sizing: inherit; +} + +body { + font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif; + line-height: 1.3; + margin: 0px; + padding: 0px; + background-color: #212121; + color: #ffffff; +} + +* { + padding: 0; + margin: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html, body { + width: 100%; + height: 100%; + scroll-behavior: smooth; +} + +body { + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #c9cacc; + background-color: #110f16; + /* background-color: #272727; */ + font-size: 16px; + font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif; + font-weight: 400; + /* line-height: 1.725; */ + text-rendering: geometricPrecision; + min-height: 100vh; + /* margin: 0 auto; */ +} + +#wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; + /* max-width: 560px; */ + margin: 0 auto; +} + +nav ul { + list-style-type: none; + margin: auto; + padding: 0em; +} + +nav a { + text-decoration: none; + border-radius: 500px; + padding: 0.2rem; + font-weight: 600; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + color: #c9cacc; + letter-spacing: 0.09rem; +} + +nav a:hover { + background-color: #29f3c3; + color: #1b1b1b; + -webkit-transition: 150ms ease; + transition: 150ms ease; +} + +/* header { + color: #c9cacc; + margin: 0 auto; + text-align: center; + padding: 2rem; + line-height: 1.75rem; + border-top: 1.5px solid #666; + border-bottom: 1.5px solid #666; +} */ +/* header img { + width: 100px; + border: 5px solid #666; + border-radius: 165px; +} */ +.card { + background-color: #151515; + margin: 2rem; + text-align: center; + border-radius: 10px; + -webkit-box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2); + box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2); +} + +.card-top { + margin: auto; + height: 80px; + background: #29f3c3; + border-start-end-radius: 10px; + border-start-start-radius: 10px; +} + +.card img { + margin: 40px auto 10px; + width: 100px; + border-radius: 50%; +} + +h1 { + /* font-family: 'Source Sans Pro', sans-serif; */ + /* font-weight: 700; */ + /* line-height: 2rem; */ + /* letter-spacing: 0.05rem; */ +} + +h1 a { + font-size: .8em; + color: #c9cacc; + text-decoration: none; + letter-spacing: -.05em; + word-spacing: -.05em; +} + +h1 a:hover { + color: #29f3c3; +} + +header h2 { + /* font-weight: 200; */ + font-size: 1.2rem; + letter-spacing: 0.01rem; +} + +h2, +h3, +h4 { + /* letter-spacing: 0.01rem; */ +} + +#aboutMe { + letter-spacing: 0.01rem; +} + +#bio, +#skills { + padding: 1.5rem; + text-align: start; +} + +#bio h2 { + font-size: 2.2rem; +} + +#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; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0; + padding: 0; + list-style-type: none; +} + +.skills { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; + -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 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; +} + +#contact h3 { + font-size: 1.5rem; +} + +#contact ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + list-style-type: none; + margin: 0; + padding: 0; + text-align: center; +} + +.contactLinks li { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.contactLinks a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + color: #c9cacc; + text-decoration: none; +} + +.contactLinks a:hover { + font-weight: 600; +} + +#project-wrapper { + margin-top: 2.5rem; +} + +#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: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin: 1.5rem 0; + text-align: center; + font-weight: 200; + letter-spacing: 0.01rem; +} + +.project-item a { + color: #c9cacc; + text-decoration: none; +} + +.project-item a:hover { + color: #29f3c3; +} + +.project-desc { + margin: 0; + padding: 0 0.8rem; +} + +.project-skills { + color: #666; + list-style: none; + margin: 0 auto; + line-height: 1.25rem; + text-align: start; + padding: 0 1.5rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; +} + +.project-skills h4 { + font-size: 1.5rem; + /* flex: 1; */ +} + +.project-skills li { + list-style-type: none; + color: #c9cacc; +} + +.project-skills ul { + /* flex: 9; */ + line-height: 2rem; + text-align: start; +} + +.project-item img { + 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); +} + +footer { + color: #666; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: distribute; + justify-content: space-around; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0 auto; + padding: 1rem; +} + +#copyright { + margin: 0.4rem; + letter-spacing: 0.1rem; +} + +#footLinks { + margin: 0.4rem; + letter-spacing: 0.8rem; +} + +#footLinks a { + color: #666; +} + +#footLinks a:hover { + color: #c9cacc; + -webkit-transition: 160ms ease-in; + transition: 160ms ease-in; +} + +code pen begin +.dark { + background: #110f16; +} + +.light { + background: #f3f5f7; +} + +a, +a:hover { + text-decoration: none; + -webkit-transition: color 0.3s ease-in-out; + transition: color 0.3s ease-in-out; +} + +/* Cards */ +.postcard { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66); + box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66); + border-radius: 10px; + margin: 0 0 2rem 0; + overflow: hidden; + position: relative; + color: #ffffff; +} + +.postcard.dark { + background-color: #18151f; +} + +.postcard.light { + background-color: #e1e5ea; +} + +.postcard .t-dark { + color: #18151f; +} + +.postcard a { + color: inherit; +} + +.postcard h1, +.postcard .h1 { + margin-bottom: 0.5rem; + font-weight: 500; + line-height: 1.2; +} + +.postcard .small { + font-size: 80%; +} + +.postcard .postcard__title { + font-size: 1.75rem; +} + +.postcard .postcard__img { + max-height: 180px; + width: 100%; + -o-object-fit: cover; + object-fit: cover; + position: relative; +} + +.postcard .postcard__img_link { + display: contents; +} + +.postcard .postcard__bar { + width: 50px; + height: 10px; + margin: 10px 0; + border-radius: 5px; + background-color: #424242; + -webkit-transition: width 0.2s ease; + transition: width 0.2s ease; +} + +.postcard .postcard__text { + padding: 1.5rem; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.postcard .postcard__preview-txt { + overflow: hidden; + text-overflow: ellipsis; + text-align: justify; + height: 100%; +} + +.postcard .postcard__tagbox { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + font-size: 14px; + margin: 20px 0 0 0; + padding: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.postcard .postcard__tagbox .tag__item { + display: inline-block; + background: rgba(83, 83, 83, 0.4); + border-radius: 3px; + padding: 2.5px 10px; + margin: 0 5px 5px 0; + cursor: default; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: background-color 0.3s; + transition: background-color 0.3s; +} + +.postcard .postcard__tagbox .tag__item:hover { + background: rgba(83, 83, 83, 0.8); +} + +.postcard:before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-image: linear-gradient(-70deg, #424242, transparent 50%); + opacity: 1; + border-radius: 10px; +} + +.postcard:hover .postcard__bar { + width: 100px; +} + +@media screen and (min-width: 769px) { + .postcard { + -ms-flex-wrap: inherit; + flex-wrap: inherit; + } + .postcard .postcard__title { + font-size: 2rem; + } + .postcard .postcard__tagbox { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: start; + } + .postcard .postcard__img { + max-width: 300px; + max-height: 100%; + -webkit-transition: -webkit-transform 0.3s ease; + transition: -webkit-transform 0.3s ease; + transition: transform 0.3s ease; + transition: transform 0.3s ease, -webkit-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 { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + .postcard:nth-child(2n + 1) { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + } + .postcard:nth-child(2n + 0) { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + .postcard:nth-child(2n + 1) .postcard__text::before { + left: -12px !important; + -webkit-transform: rotate(4deg); + transform: rotate(4deg); + } + .postcard:nth-child(2n + 0) .postcard__text::before { + right: -12px !important; + -webkit-transform: rotate(-4deg); + 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 */ +/* color: #1b1b1b; */ +/* color: #2a9d8f */ +/* @media (min-width: 768px) { + #wrapper { + max-width: 992px; + } + + nav { + display: flex; + } + + nav a { + margin: auto; + padding: 0.5rem; + flex: 4; + justify-content: flex-start; + } + + nav li { + display: inline-block; + } + + nav ul { + display: flex; + } + + #aboutMe { + display: flex; + } + + #bio { + flex: 2; + } + + #contact { + flex: 1; + text-align: end; + } + + .contactLinks { + display: flex; + flex-direction: column; + } + + .contactLinks li { + align-items: flex-end; + } + .contactLinks a { + flex-direction: row; + } + + .contactLinks i { + margin: auto 5px; + } + + #skills { + padding: 0; + } + + #project-container { + display: flex; + flex-direction: row-reverse; + } + + .project-item img { + flex: 2; + } + + .project-skills { + flex: 1; + margin: 0; + padding: 0; + text-align: end; + flex-direction: column; + align-items: flex-end; + } + + .project-skills h4 { + margin: 1.5rem; + align-self: flex-start; + } + + .project-skills ul { + margin: 1.5rem; + padding: 0; + } + + .project-item a { + align-self: start; + } + + footer { + margin: 0 auto; + width: 87%; + padding: 2rem; + flex-direction: row; + justify-content: space-between; + } +} */ +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/app/scss/style.css.map b/app/scss/style.css.map new file mode 100644 index 00000000..c1458690 --- /dev/null +++ b/app/scss/style.css.map @@ -0,0 +1,10 @@ +{ + "version": 3, + "mappings": "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", + "sources": [ + "style.scss", + "_globals.scss" + ], + "names": [], + "file": "style.css" +} \ No newline at end of file diff --git a/app/scss/style.scss b/app/scss/style.scss new file mode 100644 index 00000000..995faf56 --- /dev/null +++ b/app/scss/style.scss @@ -0,0 +1 @@ +@import "globals"; \ No newline at end of file diff --git a/index.html b/index.html index 300899cc..655f78c5 100644 --- a/index.html +++ b/index.html @@ -10,14 +10,15 @@ 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" /> - + + - + + Tyler Koenig @@ -34,6 +35,8 @@
+
+
tyler

Tyler Koenig @@ -43,6 +46,7 @@
Student at We Can Code IT, Web Developer in the making!

+
@@ -121,8 +125,54 @@
  • 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

    @@ -426,6 +476,6 @@
    - + diff --git a/style.css b/style.css index 4fe4c3b1..8fdaf92d 100644 --- a/style.css +++ b/style.css @@ -1,25 +1,34 @@ -html { +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html, body { + width: 100%; + height: 100%; scroll-behavior: smooth; } body { box-sizing: border-box; color: #c9cacc; - background-color: #272727; + background-color: #110f16; + /* background-color: #272727; */ font-size: 16px; font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif; font-weight: 400; - line-height: 1.725; + /* line-height: 1.725; */ text-rendering: geometricPrecision; min-height: 100vh; - margin: 0 auto; + /* margin: 0 auto; */ } #wrapper { display: flex; flex-direction: column; width: 100%; - max-width: 560px; + /* max-width: 560px; */ margin: 0 auto; } @@ -46,7 +55,7 @@ nav a:hover { transition: 150ms ease; } -header { +/* header { color: #c9cacc; margin: 0 auto; text-align: center; @@ -54,25 +63,50 @@ header { line-height: 1.75rem; border-top: 1.5px solid #666; border-bottom: 1.5px solid #666; -} +} */ -header img { +/* header img { width: 100px; border: 5px solid #666; border-radius: 165px; +} */ + +.card { + background-color: #151515; + margin: 2rem; + text-align: center; + border-radius: 10px; + box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2); +} + +.card-top { + margin: auto; + height: 80px; + background: #29f3c3; + border-start-end-radius: 10px; + border-start-start-radius: 10px; +} + +.card img { + margin: 40px auto 10px; + width: 100px; + border-radius: 50%; } h1 { /* font-family: 'Source Sans Pro', sans-serif; */ /* font-weight: 700; */ - line-height: 2rem; + /* line-height: 2rem; */ /* letter-spacing: 0.05rem; */ } h1 a { - font-size: 3rem; + font-size: .8em; color: #c9cacc; text-decoration: none; + letter-spacing: -.05em; + word-spacing: -.05em; + } h1 a:hover { @@ -80,7 +114,7 @@ h1 a:hover { } header h2 { - font-weight: 200; + /* font-weight: 200; */ font-size: 1.2rem; letter-spacing: 0.01rem; } @@ -88,7 +122,7 @@ header h2 { h2, h3, h4 { - letter-spacing: 0.01rem; + /* letter-spacing: 0.01rem; */ } #aboutMe { @@ -277,11 +311,348 @@ footer { transition: 160ms ease-in; } +code pen begin + +@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap'); +/* This pen */ + +.dark { + background: #110f16; +} +.light { + background: #f3f5f7; +} +a, +a:hover { + text-decoration: none; + transition: color 0.3s ease-in-out; +} + +/* Cards */ +.postcard { + flex-wrap: wrap; + display: flex; + box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66); + border-radius: 10px; + margin: 0 0 2rem 0; + overflow: hidden; + position: relative; + color: #ffffff; +} +.postcard.dark { + background-color: #18151f; +} +.postcard.light { + background-color: #e1e5ea; +} +.postcard .t-dark { + color: #18151f; +} +.postcard a { + color: inherit; +} +.postcard h1, +.postcard .h1 { + margin-bottom: 0.5rem; + font-weight: 500; + line-height: 1.2; +} +.postcard .small { + font-size: 80%; +} +.postcard .postcard__title { + font-size: 1.75rem; +} +.postcard .postcard__img { + max-height: 180px; + width: 100%; + object-fit: cover; + position: relative; +} +.postcard .postcard__img_link { + display: contents; +} +.postcard .postcard__bar { + width: 50px; + height: 10px; + margin: 10px 0; + border-radius: 5px; + background-color: #424242; + transition: width 0.2s ease; +} +.postcard .postcard__text { + padding: 1.5rem; + position: relative; + display: flex; + flex-direction: column; +} +.postcard .postcard__preview-txt { + overflow: hidden; + text-overflow: ellipsis; + text-align: justify; + height: 100%; +} +.postcard .postcard__tagbox { + display: flex; + flex-flow: row wrap; + font-size: 14px; + margin: 20px 0 0 0; + padding: 0; + justify-content: center; +} +.postcard .postcard__tagbox .tag__item { + display: inline-block; + background: rgba(83, 83, 83, 0.4); + border-radius: 3px; + padding: 2.5px 10px; + margin: 0 5px 5px 0; + cursor: default; + user-select: none; + transition: background-color 0.3s; +} +.postcard .postcard__tagbox .tag__item:hover { + background: rgba(83, 83, 83, 0.8); +} +.postcard:before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-image: linear-gradient(-70deg, #424242, transparent 50%); + opacity: 1; + border-radius: 10px; +} +.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 */ + /* color: #1b1b1b; */ /* color: #2a9d8f */ -@media (min-width: 576px) { +/* @media (min-width: 768px) { #wrapper { - width: 560px; + max-width: 992px; } nav { @@ -375,4 +746,6 @@ footer { flex-direction: row; justify-content: space-between; } -} +} */ + + From cffa6db1315b0233e64cb05c174e50cbe3746533 Mon Sep 17 00:00:00 2001 From: Tyler Koenig Date: Fri, 10 Sep 2021 20:58:13 -0400 Subject: [PATCH 3/9] card layout --- index.html | 314 ++++++++++++++++++++++++++++++----------------------- style.css | 148 ++++++++++--------------- 2 files changed, 236 insertions(+), 226 deletions(-) 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! -
    -
      -
    • - Podcast -
      • -
    • - 55 mins. -
      • -
    • - Play - Episode -
      • +
      +
      +

      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

    + +
    +
    + + +
    +
    +

    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; } -} */ +} From 79b4bf43bea639d797962756ed16cc91d02f7b14 Mon Sep 17 00:00:00 2001 From: Tyler Koenig Date: Fri, 10 Sep 2021 21:21:47 -0400 Subject: [PATCH 4/9] project card --- index.html | 13 ++++++------- style.css | 17 ++++++++++++----- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 7b3290a9..939a6d21 100644 --- a/index.html +++ b/index.html @@ -130,7 +130,7 @@

    projects

    -
    +
    -
    +

    mystery educator

    -
    +

    mon, may 25th 2021

    -
    -
    +
    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Et a maiores laborum quo @@ -156,10 +156,9 @@ ducimus. Ad laudantium neque nobis?

    -
      +
      • java -
    diff --git a/style.css b/style.css index ab8380ff..01cfd20e 100644 --- a/style.css +++ b/style.css @@ -167,10 +167,17 @@ nav a:hover { border: 1px solid #fff; } -.project-img img { - width: 100%; - height: ; +.project_img { + max-height: 50px; + min-width: 300px; + background-position-x: center; + background-position-y:center ; + overflow: hidden; +} +.project_img img { + width: 100%; + height: 100%; } /* end new */ @@ -620,7 +627,7 @@ a:hover { /* color: #1b1b1b; */ /* color: #2a9d8f */ -@media (min-width: 768px) { +/* @media (min-width: 768px) { #wrapper { max-width: 992px; } @@ -716,6 +723,6 @@ a:hover { flex-direction: row; justify-content: space-between; } -} +} */ From ae8775a9022a294d20e00984d62abfbcf67d8d47 Mon Sep 17 00:00:00 2001 From: Tyler Koenig Date: Mon, 13 Sep 2021 12:39:39 -0400 Subject: [PATCH 5/9] project mobile layout --- index.html | 641 +++++++++++++++++++++++++++++++++-------------------- style.css | 202 +++++++++-------- 2 files changed, 511 insertions(+), 332 deletions(-) diff --git a/index.html b/index.html index 939a6d21..5143d7c5 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@
    -
    -
    -
    - tyler +
    +
    +
    +
    + tyler +
    -
    -
    - Tyler Koenig -
    -
    -

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

    -
    - -
    -
    -
    +
    + Tyler Koenig +
    +
    +

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

    +
    + + +

    about

    I'm Tyler Koenig, a lifelong student. Graduated with @@ -98,11 +98,8 @@ front-end web development through We Can Code IT Bootcamp. Always interested in a challenge!

    -
    -
    - -
    -
    + +

    skills

    • Java
      • @@ -122,51 +119,362 @@
    • Relational Databases
    • Source Control/ Github
    -
    -
    + +
    + +
    +

    projects

    +
    + + were-hooked-img +
    +

    We're Hooked - +

    +
    +
    -
    -

    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? + Designed, built and tested an MVC + application that allows users to discover + fishing locations in Ohio, as well as teach + beginners how to get started fishing and the + current regulations that are needed to + follow. This project was built between a + team of five in a completely remote + environment with the help of Github, Zoom + and Slack.

    -
      -
    • - java -
      • +
        +
      • JavaScript
        • +
      • RESTful APIs
        • +
      • Java
        • +
      • OOP
        • +
      • Thymeleaf
        • +
      • HTML
        • +
      • CSS
        • +
      • Responsive Design
        • +
      • TDD
        • +
      • VS Code
        • +
      • Github
        • +
      • Agile
        • +
      • Scrum
        • +
      • Zoom
        • +
      • Slack
      +
    +
    +
    + + +
    +

    + Mystery Educator +

    +
    + +
    +
    +
    +

    + Designed, built and tested a single page + application that renders unique data from + the MET Museum and NASA APIs each time you + visit. We also built a local backend + database to store historical information. + This project was built between a team of + four in a completely remote environemnt with + the help of Github, Zoom, and Slack. +

    +
    +
      +
    • JavaScript
      • +
    • Node.js
      • +
    • RESTful APIs
      • +
    • Java
      • +
    • HTML
      • +
    • CSS
      • +
    • Responsive Design
      • +
    • TDD
      • +
    • VS Code
      • +
    • Github
      • +
    • Agile
      • +
    • Scrum
      • +
    • Zoom
      • +
    • Slack
      • +
    +
    +
    +
    + + donut-clicker-img +
    +

    + Donut Clicker +

    +
    + +
    +
    +
    +

    + Designed, built and tested a single page + application that lets users make virtual + donuts via clicking. Once enough donuts are + made you have the ability to purchase + upgrades such as auto-clickers and + clicking-multipliers. +

    +
    +
      +
    • JavaScript
      • +
    • Node.js
      • +
    • HTML
      • +
    • CSS
      • +
    • Responsive Design
      • +
    • TDD
      • +
    • VS Code
      • +
    • Github
      • +
    +
    +
    +
    + + trekking-img +
    +

    + Trekking Site +

    +
    + +
    +
    +
    +

    + Designed, built and tested an MVC + application that lets users discover treks + located by continent, region and type. This + project was built between a team of four in + a completely remote environemnt with the + help of Github, Zoom and Slack. +

    +
    +
      +
    • Java
      • +
    • SpringJPA
      • +
    • OOP
      • +
    • HTML
      • +
    • CSS
      • +
    • Responsive Design
      • +
    • TDD
      • +
    • IntelliJ
      • +
    • Github
      • +
    • Agile
      • +
    • Scrum
      • +
    • Zoom
      • +
    • Slack
      • +
    +
    +
    +
    + + review-site-img +
    +

    + Review Site +

    +
    + +
    +
    +
    +

    + Designed, built and tested a Java + application for movie reviews. +

    +
    +
      +
    • Java
      • +
    • SpringJPA
      • +
    • OOP
      • +
    • Thymeleaf
      • +
    • HTML
      • +
    • CSS
      • +
    • Responsive Design
      • +
    • TDD
      • +
    • IntelliJ
      • +
    • Github
      • +
    +
    +
    +
    + +
    +
    +

    old project style

    + +
    + + +
    +

    + Mystery Educator +

    +
    + +
    +
    +
    +

    + 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
      • +
    • java
      • +
    • java
      • +
    • java
      • +
    • java
      • +
    +
    Image Title @@ -174,7 +482,7 @@

    Podcast Title

    -
    +
    -
    + +