diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..beec634 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +*.css.map + + diff --git a/css/style.css b/css/style.css index 88dc75d..709adb4 100644 --- a/css/style.css +++ b/css/style.css @@ -1,352 +1,325 @@ *, *:before, *:after { - -webkit-box-sizing: border-box; - box-sizing: border-box; } + box-sizing: border-box; +} html { - overflow-x: hidden; } + overflow-x: hidden; +} body { margin: 0; - font-family: 'Work Sans', sans-serif; } + font-family: "Work Sans", sans-serif; +} body.dark-mode { - -webkit-filter: invert(100%); - filter: invert(100%); } - body.dark-mode .image-container img { - -webkit-filter: invert(100%); - filter: invert(100%); } - body.dark-mode .bg { - opacity: 0 !important; } - body.dark-mode section:nth-child(even), body.dark-mode footer:nth-child(even) { - background: #eee !important; } - body.dark-mode section:nth-child(odd), body.dark-mode footer:nth-child(odd) { - background: white !important; } - body.dark-mode .works-card .text-container { - color: #333 !important; } - body.dark-mode .works-card .text-container a { - color: inherit !important; - background: rgba(0, 0, 0, 0.1) !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; } - body.dark-mode footer { - color: #333 !important; } + filter: invert(100%); +} +body.dark-mode .image-container img { + filter: invert(100%); +} +body.dark-mode .bg { + opacity: 0 !important; +} +body.dark-mode section:nth-child(even), body.dark-mode footer:nth-child(even) { + background: #eee !important; +} +body.dark-mode section:nth-child(odd), body.dark-mode footer:nth-child(odd) { + background: white !important; +} +body.dark-mode .works-card .text-container { + color: #333 !important; +} +body.dark-mode .works-card .text-container a { + color: inherit !important; + background: rgba(0, 0, 0, 0.1) !important; + box-shadow: none !important; +} +body.dark-mode footer { + color: #333 !important; +} .main { height: 100vh; position: relative; z-index: 10; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; justify-content: center; - -webkit-box-align: start; - -ms-flex-align: start; align-items: flex-start; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; flex-direction: column; - overflow-y: hidden; } - .main > * { - position: relative; } - .main > canvas#bg { - position: absolute; - top: 0; - left: 0; } - .main .text-container { - text-align: left; - max-width: 50rem; - margin: auto auto auto 13vw; } - .main h1 { - font-size: 4rem; - font-weight: 500; - margin: 0 0 2rem; - color: #333; } - .main h3 { - margin: 1rem 0 0; - font-size: 1.7rem; - line-height: 1.4; - font-weight: normal; - color: #999; } - .main a { - color: #333; - text-decoration: none; - border-bottom: 0.2rem solid transparent; - white-space: nowrap; - position: relative; } - .main a:before { - content: ''; - bottom: 0.2rem; - left: 0; - width: 100%; - height: 0.1rem; - background: rgba(51, 51, 51, 0.2); - position: absolute; - -webkit-transform: scaleX(0); - -ms-transform: scaleX(0); - transform: scaleX(0); - -webkit-transform-origin: center left; - -ms-transform-origin: center left; - transform-origin: center left; - opacity: 0.2; - -webkit-transition: all 0.2s ease; - -o-transition: all 0.2s ease; - transition: all 0.2s ease; } - .main a:hover:before { - -webkit-transform: scaleX(1); - -ms-transform: scaleX(1); - transform: scaleX(1); - opacity: 1; } + overflow-y: hidden; +} +.main > * { + position: relative; +} +.main > canvas#bg { + position: absolute; + top: 0; + left: 0; +} +.main .text-container { + text-align: left; + max-width: 50rem; + margin: auto auto auto 13vw; +} +.main h1 { + font-size: 4rem; + font-weight: 500; + margin: 0 0 2rem; + color: #333; +} +.main h3 { + margin: 1rem 0 0; + font-size: 1.7rem; + line-height: 1.4; + font-weight: normal; + color: #999; +} +.main em { + color: #333; + font: inherit; +} +.main a { + color: #333; + text-decoration: none; + border-bottom: 0.2rem solid transparent; + white-space: nowrap; + position: relative; +} +.main a:before { + content: ""; + bottom: 0.2rem; + left: 0; + width: 100%; + height: 0.1rem; + background: rgba(51, 51, 51, 0.2); + position: absolute; + transform: scaleX(0); + transform-origin: center left; + opacity: 0.2; + transition: all 0.2s ease; +} +.main a:hover:before { + transform: scaleX(1); + opacity: 1; +} .works-card { height: 100vh; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: start; - -ms-flex-pack: start; justify-content: flex-start; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; max-width: 100%; position: relative; - z-index: 10; } - .works-card > div { - width: 50%; - position: relative; - height: 100%; } - .works-card .image-container img { - width: 133%; - position: absolute; - top: 0; - bottom: 0; - margin: auto; - border-radius: 0.2rem; - -webkit-box-shadow: 0 0 10rem rgba(0, 0, 0, 0.1), 0 0.25rem 1rem rgba(0, 0, 0, 0.33); - box-shadow: 0 0 10rem rgba(0, 0, 0, 0.1), 0 0.25rem 1rem rgba(0, 0, 0, 0.33); } - .works-card .image-container:nth-child(1) img { - right: 0; } - .works-card .image-container:nth-child(2) img { - left: 0; } - .works-card .text-container { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - padding: 0 2rem; - -webkit-transition: all 0.225s ease; - -o-transition: all 0.225s ease; - transition: all 0.225s ease; } - .works-card .text-container > * { - max-width: 30rem; - width: 100%; } - .works-card .text-container h1 { - font-size: 3.3rem; - margin: 0 0 1rem; } - .works-card .text-container p { - font-size: 1.15rem; - line-height: 1.5; - margin: 1rem 0 0; } - .works-card .text-container a { - color: black; - text-decoration: none; - position: relative; - background: rgba(0, 0, 0, 0.05); - display: inline-block; - padding: 1rem 2rem 1rem 1.25rem; - border-radius: 0.1rem; - margin-top: 1rem; - -webkit-box-shadow: 0 0.05rem 0.025rem rgba(0, 0, 0, 0.3); - box-shadow: 0 0.05rem 0.025rem rgba(0, 0, 0, 0.3); - margin-right: 1rem; } - .works-card .text-container a:before { - position: absolute; - bottom: 1.2rem; - left: 1.25rem; - width: calc(100% - 3.25rem); - content: ''; - height: 0.115rem; - -webkit-transition: all 0.2s ease; - -o-transition: all 0.2s ease; - transition: all 0.2s ease; - border-top: 0.115rem solid black; - opacity: 0.2; - -webkit-box-sizing: border-box; - box-sizing: border-box; - -webkit-transform: scaleX(0); - -ms-transform: scaleX(0); - transform: scaleX(0); - -webkit-transform-origin: center left; - -ms-transform-origin: center left; - transform-origin: center left; } - .works-card .text-container a:after { - content: ''; - position: absolute; - right: 1.25rem; - pointer-events: none; - font-size: 0.66rem; - top: 0; - bottom: 0; - height: 0.33rem; - width: 0.33rem; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - border: 1px solid black; - border-bottom: 0; - border-left: 0; - line-height: 1.2rem; - margin: auto; - opacity: 0.7; - -webkit-transition: all 0.2s ease; - -o-transition: all 0.2s ease; - transition: all 0.2s ease; } - .works-card .text-container a:hover:before { - -webkit-transform: scaleX(1); - -ms-transform: scaleX(1); - transform: scaleX(1); } - .works-card .text-container a:hover:after { - right: 1.15rem; } - .works-card .text-container a.dark { - color: rgba(255, 255, 255, 0.8); - background: rgba(255, 255, 255, 0.9); } - .works-card .text-container a.dark:before { - border-color: inherit; } - .works-card .text-container a.dark:after { - border-color: inherit; } + z-index: 10; +} +.works-card > div { + width: 50%; + position: relative; + height: 100%; +} +.works-card .image-container img { + width: 133%; + position: absolute; + top: 0; + bottom: 0; + margin: auto; + border-radius: 0.2rem; + box-shadow: 0 0 10rem rgba(0, 0, 0, 0.1), 0 0.25rem 1rem rgba(0, 0, 0, 0.33); +} +.works-card .image-container:nth-child(1) img { + right: 0; +} +.works-card .image-container:nth-child(2) img { + left: 0; +} +.works-card .text-container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 0 2rem; + transition: all 0.225s ease; +} +.works-card .text-container > * { + max-width: 30rem; + width: 100%; +} +.works-card .text-container h1 { + font-size: 3.3rem; + margin: 0 0 1rem; +} +.works-card .text-container p { + font-size: 1.15rem; + line-height: 1.5; + margin: 1rem 0 0; +} +.works-card .text-container a { + color: black; + text-decoration: none; + position: relative; + background: rgba(0, 0, 0, 0.05); + display: inline-block; + padding: 1rem 2rem 1rem 1.25rem; + border-radius: 0.1rem; + margin-top: 1rem; + box-shadow: 0 0.05rem 0.025rem rgba(0, 0, 0, 0.3); + margin-right: 1rem; +} +.works-card .text-container a:before { + position: absolute; + bottom: 1.2rem; + left: 1.25rem; + width: calc(100% - 3.25rem); + content: ""; + height: 0.115rem; + transition: all 0.2s ease; + border-top: 0.115rem solid black; + opacity: 0.2; + box-sizing: border-box; + transform: scaleX(0); + transform-origin: center left; +} +.works-card .text-container a:after { + content: ""; + position: absolute; + right: 1.25rem; + pointer-events: none; + font-size: 0.66rem; + top: 0; + bottom: 0; + height: 0.33rem; + width: 0.33rem; + transform: rotate(45deg); + border: 1px solid black; + border-bottom: 0; + border-left: 0; + line-height: 1.2rem; + margin: auto; + opacity: 0.7; + transition: all 0.2s ease; +} +.works-card .text-container a:hover:before { + transform: scaleX(1); +} +.works-card .text-container a:hover:after { + right: 1.15rem; +} +.works-card .text-container a.dark { + color: rgba(255, 255, 255, 0.8); + background: rgba(255, 255, 255, 0.9); +} +.works-card .text-container a.dark:before { + border-color: inherit; +} +.works-card .text-container a.dark:after { + border-color: inherit; +} #contact { position: relative; z-index: 10; text-align: center; - padding: 5rem 2rem 3rem; } - #contact h1 { - font-size: 3.3rem; - margin: 0 0 2rem; } - #contact p { - font-size: 1.15rem; - line-height: 1.5; - margin: 1rem auto 0; } - #contact .contact-info-container { - max-width: 40rem; - margin: 2rem auto; - text-align: left; - 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-wrap: wrap; - flex-wrap: wrap; - height: 12rem; } - #contact .contact-info-container a.contact-method { - text-decoration: none; - color: inherit; - display: block; - width: 50%; - height: 6rem; - position: relative; - padding-left: 6rem; - 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-align: start; - -ms-flex-align: start; - align-items: flex-start; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - overflow: hidden; } - #contact .contact-info-container a.contact-method h3, #contact .contact-info-container a.contact-method p { - font-weight: normal; - margin: 0; - -webkit-transition: all 0.2s ease; - -o-transition: all 0.2s ease; - transition: all 0.2s ease; } - #contact .contact-info-container a.contact-method h3 { - font-size: 1.5rem; - line-height: 1.4; - -webkit-transform: translateY(0.6rem); - -ms-transform: translateY(0.6rem); - transform: translateY(0.6rem); } - #contact .contact-info-container a.contact-method p { - line-height: 1.25rem; - height: 1.25rem; - -webkit-transform: translateY(1rem); - -ms-transform: translateY(1rem); - transform: translateY(1rem); - opacity: 0; - color: #777; - font-size: 0.9rem; } - #contact .contact-info-container a.contact-method i { - font-size: 2rem; - line-height: 6rem; - position: absolute; - top: 0; - left: 0; - width: 6rem; - height: 6rem; - text-align: center; } - #contact .contact-info-container a.contact-method i:before { - position: relative; - z-index: 10; } - #contact .contact-info-container a.contact-method i:after { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; - width: 60%; - height: 60%; - border-radius: 50%; - opacity: 0; - -webkit-transform: scale(0.7); - -ms-transform: scale(0.7); - transform: scale(0.7); - content: ''; - -webkit-transition: all 0.2s ease; - -o-transition: all 0.2s ease; - transition: all 0.2s ease; - background: #333; } - #contact .contact-info-container a.contact-method i.email:before { - content: '@'; - font-style: normal; - font-weight: 500; - line-height: 5.5rem; - top: 0; - left: 0; - width: 100%; - height: 100%; - position: absolute; - text-align: center; } - #contact .contact-info-container a.contact-method:hover h3 { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); } - #contact .contact-info-container a.contact-method:hover p { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); - opacity: 1; } + padding: 5rem 2rem 3rem; +} +#contact h1 { + font-size: 3.3rem; + margin: 0 0 2rem; +} +#contact p { + font-size: 1.15rem; + line-height: 1.5; + margin: 1rem auto 0; +} +#contact .contact-info-container { + max-width: 40rem; + margin: 2rem auto; + text-align: left; + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 12rem; +} +#contact .contact-info-container a.contact-method { + text-decoration: none; + color: inherit; + display: block; + width: 50%; + height: 6rem; + position: relative; + padding-left: 6rem; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + overflow: hidden; +} +#contact .contact-info-container a.contact-method h3, #contact .contact-info-container a.contact-method p { + font-weight: normal; + margin: 0; + transition: all 0.2s ease; +} +#contact .contact-info-container a.contact-method h3 { + font-size: 1.5rem; + line-height: 1.4; + transform: translateY(0.6rem); +} +#contact .contact-info-container a.contact-method p { + line-height: 1.25rem; + height: 1.25rem; + transform: translateY(1rem); + opacity: 0; + color: #777; + font-size: 0.9rem; +} +#contact .contact-info-container a.contact-method i { + font-size: 2rem; + line-height: 6rem; + position: absolute; + top: 0; + left: 0; + width: 6rem; + height: 6rem; + text-align: center; +} +#contact .contact-info-container a.contact-method i:before { + position: relative; + z-index: 10; +} +#contact .contact-info-container a.contact-method i:after { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + width: 60%; + height: 60%; + border-radius: 50%; + opacity: 0; + transform: scale(0.7); + content: ""; + transition: all 0.2s ease; + background: #333; +} +#contact .contact-info-container a.contact-method i.email:before { + content: "@"; + font-style: normal; + font-weight: 500; + line-height: 5.5rem; + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + text-align: center; +} +#contact .contact-info-container a.contact-method:hover h3 { + transform: translateY(0); +} +#contact .contact-info-container a.contact-method:hover p { + transform: translateY(0); + opacity: 1; +} footer { position: relative; @@ -355,134 +328,143 @@ footer { padding: 3rem 0; background: #1f2e3a; color: white; - font-size: 1.2rem; } + font-size: 1.2rem; +} .ticker { padding: 2rem 0 0; font-size: 0.9rem; opacity: 0.7; font-family: monospace; - letter-spacing: 1px; } + letter-spacing: 1px; +} .ticker:after { - content: '_'; + content: "_"; opacity: 0.4; - -webkit-animation: blink 0.5s infinite; - animation: blink 0.5s infinite; } - -@-webkit-keyframes blink { - 0% { - opacity: 0; } - 49% { - opacity: 0; } - 51% { - opacity: 1; } - 100% { - opacity: 1; } } + animation: blink 0.5s infinite; +} @keyframes blink { 0% { - opacity: 0; } + opacity: 0; + } 49% { - opacity: 0; } + opacity: 0; + } 51% { - opacity: 1; } + opacity: 1; + } 100% { - opacity: 1; } } - + opacity: 1; + } +} @media (max-width: 900px), (orientation: portrait) { .main > .text-container { margin: auto; - padding: 2rem; } - .works-card { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - height: auto; } - .works-card > div { - height: auto; - width: 100%; } - .works-card .text-container { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; - padding-bottom: 2rem; } - .works-card .image-container { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - padding-top: 3rem; - min-height: calc(45vw + 5rem); } - .works-card .image-container img { - width: 80vw; - margin: auto; - display: block; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - -webkit-box-shadow: 0 0 5rem rgba(0, 0, 0, 0.1), 0 0.25rem 1rem rgba(0, 0, 0, 0.33); - box-shadow: 0 0 5rem rgba(0, 0, 0, 0.1), 0 0.25rem 1rem rgba(0, 0, 0, 0.33); } - #contact { - text-align: left; } - #contact .contact-info-container a.contact-method h3 { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); } - #contact .contact-info-container a.contact-method p { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); - opacity: 1; } } + padding: 2rem; + } + .works-card { + flex-direction: column; + height: auto; + } + .works-card > div { + height: auto; + width: 100%; + } + .works-card .text-container { + order: 2; + padding-bottom: 2rem; + } + .works-card .image-container { + order: 1; + padding-top: 3rem; + min-height: calc(45vw + 5rem); + } + .works-card .image-container img { + width: 80vw; + margin: auto; + display: block; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + box-shadow: 0 0 5rem rgba(0, 0, 0, 0.1), 0 0.25rem 1rem rgba(0, 0, 0, 0.33); + } + + #contact { + text-align: left; + } + #contact .contact-info-container a.contact-method h3 { + transform: translateY(0); + } + #contact .contact-info-container a.contact-method p { + transform: translateY(0); + opacity: 1; + } +} @media (max-width: 600px) { #contact .contact-info-container { - height: auto; } - #contact .contact-info-container a.contact-method { - width: 100%; } } - + height: auto; + } + #contact .contact-info-container a.contact-method { + width: 100%; + } +} @media (max-width: 400px) { .main > .text-container h1 { - font-size: 3rem; } + font-size: 3rem; + } .main > .text-container h3 { - font-size: 1.5rem; } - .works-card > .text-container p { - font-size: 1rem; } - .works-card > .text-container h1 { - font-size: 2.6rem; } } + font-size: 1.5rem; + } + .works-card > .text-container p { + font-size: 1rem; + } + .works-card > .text-container h1 { + font-size: 2.6rem; + } +} .bg-scroller { z-index: 5; position: fixed; top: 0; left: 0; width: 100%; - height: 100vh; } - .bg-scroller .bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0; - -webkit-transition: all 0.225s ease; - -o-transition: all 0.225s ease; - transition: all 0.225s ease; } + height: 100vh; +} +.bg-scroller .bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: all 0.225s ease; +} @media (min-width: 1800px) { html { - font-size: 20px; } } - + font-size: 20px; + } +} @media (min-width: 2400px) { html { - font-size: 24px; } } - + font-size: 24px; + } +} @media (min-width: 2800px) { html { - font-size: 32px; } } - + font-size: 32px; + } +} @media (min-width: 3600px) { html { - font-size: 36px; } } + font-size: 36px; + } +} + +/*# sourceMappingURL=style.css.map */ diff --git a/css/style.scss b/css/style.scss index 4138f15..7b0d93b 100644 --- a/css/style.scss +++ b/css/style.scss @@ -87,6 +87,11 @@ body.dark-mode { color: #999; } + em { + color: #333; + font: inherit; + } + a { color: #333; text-decoration: none; diff --git a/resume.pdf b/resume.pdf new file mode 100644 index 0000000..2432979 Binary files /dev/null and b/resume.pdf differ