From 41885de1d62554a675cedb156afe05930caeea5e Mon Sep 17 00:00:00 2001 From: MajorDroolz Date: Fri, 16 Dec 2022 03:29:37 -0500 Subject: [PATCH 01/16] FEAT: Created the dymanic title page. --- home/index.css | 318 ++++++++++++++++++++++++++++++++++++++++++++++++ home/index.html | 61 ++++++++++ home/index.js | 52 ++++++++ res/avatar.svg | 1 + 4 files changed, 432 insertions(+) create mode 100644 home/index.css create mode 100644 home/index.html create mode 100644 home/index.js create mode 100644 res/avatar.svg diff --git a/home/index.css b/home/index.css new file mode 100644 index 0000000..bc63ba4 --- /dev/null +++ b/home/index.css @@ -0,0 +1,318 @@ +@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,200'); +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital@1&display=swap'); + +/*----------------------------------------------------------------------------*/ + +* { + padding: 0; + border: 0; + margin: 0; + outline: 0; + + --light: #FEFADC; + --dark: #504B43; + --red: #F8333C; + --yellow: #FCAB10; + --green: #8FD694; + --blue: #2B9EB3; + + --timing: cubic-bezier(0.2, 1, 0, 1); + --start-timing: cubic-bezier(0,.5,0,.9); +} + +.light { --color: var(--light) } +.dark { --color: var(--dark) } +.red { --color: var(--red) } +.yellow { --color: var(--yellow) } +.green { --color: var(--green) } +.blue { --color: var(--blue) } + +.flex-space { flex: 1 } + +.pos-center { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +/*----------------------------------------------------------------------------*/ + +@media (min-aspect-ratio: 6 / 5) { + .nav2, .nav3 { + display: none !important; + } +} + +@media (min-aspect-ratio: 3 / 4) and (max-aspect-ratio: 6 / 5) { + .nav1, .nav3 { + display: none !important; + } +} + +@media (max-aspect-ratio: 3 / 4) { + .nav1, .nav2 { + display: none !important; + } +} + +/*----------------------------------------------------------------------------*/ + +html { + background: var(--dark); + scroll-behavior: smooth; + -webkit-overflow-scrolling: touch; + overflow-y: scroll; +} + +nav { + position: fixed; + z-index: 1000; + filter: drop-shadow(0px 0px 100px #000); +} + +#title-page > * { + opacity: calc(1 - 1.25 * var(--scroll, 0)); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +#title-page { + position: fixed; + width: 100vw; + background-color: var(--light); + -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%); + clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%); + height: calc(90vh - 77.5vh * var(--scroll, 0)); + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; +} + +#title-bottom { + position: absolute; + top: 65%; +} + +#avatar { + position: fixed; + top: 50vh; + translate: 0 calc(-70% - 35% * var(--scroll, 0)); + filter: grayscale(1) opacity(0.3); + z-index: -1; + width: max(90vmin, 60vh); + height: max(90vmin, 60vh); + image-rendering: crisp-edges; + image-rendering: -webkit-optimize-contrast; +} + +#title-name::before { + content: "Hi! I'm"; + position: absolute; + font-family: "Source Serif Pro", serif; + font-style: italic; + font-size: calc(min(6vh, 8vw)); + line-height: calc(min(5vh, 7vw)); + top: 0; + left: 0; + translate: 1vmin -100%; + color: var(--dark); +} + +.fade-text::before { + content: attr(data) " " attr(data) " " attr(data) " " attr(data) " " attr(data) " " attr(data) " " attr(data); + font-size: calc(min(12vh, 16vw)); + line-height: calc(min(11vh, 14vw)); + font-family: "Open Sans", sans-serif; + font-weight: 900; + white-space: pre; + color: black; +} + +#title-name { + position: absolute; + top: 0; + left: 50%; + translate: -50% 0; + font-size: calc(min(12vh, 16vw)); + line-height: calc(min(11vh, 14vw)); + font-family: "Open Sans", sans-serif; + font-weight: 900; + color: transparent; + -webkit-background-clip: text; + background-clip: text; + background-image: linear-gradient(45deg, #F008, #00F8); + transform: translateZ(0); +} + +.fade1 { opacity: 05%; translate: 0 0; } + +.fade2 { opacity: 10%; translate: -5% 0; } + +.fade3 { opacity: 20%; translate: 5% 0; } + +.fade4 { opacity: 25%; translate: -10% 0; } + +.fade5 { opacity: 30%; translate: 10% 0; } + +.navbar { + padding: 2vmin 3vmin; + width: 100vw; + position: absolute; + display: flex; + box-sizing: border-box; + align-items: flex-start; + z-index: 100; +} + +nav a:nth-child(1) { animation: nav-enter 2s 000ms var(--timing) backwards; } +nav a:nth-child(2) { animation: nav-enter 2s 100ms var(--timing) backwards; } +nav a:nth-child(3) { animation: nav-enter 2s 200ms var(--timing) backwards; } +nav a:nth-child(4) { animation: nav-enter 2s 300ms var(--timing) backwards; } +nav a:nth-child(5) { animation: nav-enter 2s 400ms var(--timing) backwards; } +nav a:nth-child(6) { animation: nav-enter 2s 500ms var(--timing) backwards; } +nav a:nth-child(7) { animation: nav-enter 2s 600ms var(--timing) backwards; } + +@keyframes nav-enter { + from { + opacity: 0; + transform: translateX(-7%); + } + + to { + opacity: 1; + transform: translateX(0%); + } +} + +.button { + position: relative; + font-style: normal; + display: flex; + justify-content: center; + align-items: center; + font-size: 4vh; + font-family: "Open Sans", sans-serif; + font-weight: 900; + padding: 1vh 3vh; + color: var(--color, var(--dark)); + background: transparent; + text-decoration: none; + transition: transform var(--timing) 1s, filter var(--timing) 1s; +} + +.button.icon { + font-size: 2.5vh; +} + +.button:active { + transition: transform var(--timing) 0.3s, filter var(--timing) 0.3s; + transform: scale(0.9); +} + +.button.icon::before { + content: attr(data-i); + font-family: "Material Symbols Outlined"; + font-size: 4vh; +} + +.button::after { + content: ""; + width: 100%; + height: 100%; + position: absolute; + background-color: var(--color, var(--dark)); + filter: opacity(0); + transform: scale(0.9); + z-index: -1; + border-radius: 1vh; + transition: transform var(--timing) 1s, filter var(--timing) 1s; +} + +.button:hover::after { + filter: opacity(0.25); + transform: scale(1); +} + +@media (hover: none) { + .button:hover::after { + filter: opacity(0); + transform: scale(0.9); + } +} + +.button:active::after { + filter: opacity(0.5); +} + +/*----------------------------------------------------------------------------*/ + +section { + margin-bottom: 200vh; + background-color: var(--color, transparent); +} + +#about-section { + height: 60vmin; +} + +#title-section { + height: 90vmin; + z-index: 1000; +} + +/*----------------------------------------------------------------------------*/ + +#menu-modal::backdrop { + background-color: #0008; + animation: 0.5s ease menu-back-enter; +} + +#menu-modal { + position: fixed; + height: 100vh; + width: 100vw; + max-height: 100vh; + max-width: 100vw; + background: transparent; +} + +#menu-inner { + padding: 2vmin 3vmin; + position: fixed; + height: 100vh; + width: 75vw; + display: flex; + box-sizing: border-box; + align-items: flex-start; + flex-direction: column; + -webkit-clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%); + clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%); + background-color: var(--light); +} + +#menu-modal[open] { + animation: 0.5s ease menu-enter; +} + +@keyframes menu-enter { + from { + transform: translateX(-100%); + } + + to { + transform: translateX(0%); + } +} + +@keyframes menu-back-enter { + from { + filter: opacity(0); + } + + to { + filter: opacity(1); + } +} \ No newline at end of file diff --git a/home/index.html b/home/index.html new file mode 100644 index 0000000..02da93d --- /dev/null +++ b/home/index.html @@ -0,0 +1,61 @@ + + + + + + + + + + Max's Place + + + +
+ + + + + + \ No newline at end of file diff --git a/home/index.js b/home/index.js new file mode 100644 index 0000000..bb39562 --- /dev/null +++ b/home/index.js @@ -0,0 +1,52 @@ +let menuOpen = true; + +function calcScroll() { + const scroll = window.scrollY; + const vh = window.innerHeight / 100; + const title = document.getElementById("title-page"); + if (title == null) return; + + title.style.setProperty("--scroll", Math.min(1, scroll / (77.5 * vh))); +} + +function openMenu() { + const menu = document.getElementById("menu-modal"); + if (menu == null) return; + requestAnimationFrame(() => menuOpen = false); + menu.showModal(); +} + +function closeMenu() { + const menu = document.getElementById("menu-modal"); + if (menu == null) return; + requestAnimationFrame(() => menuOpen = true); + menu.close(); +} + +function main() { + document.body.addEventListener('wheel', preventScroll, { passive: false }); + document.body.addEventListener('touchmove', preventScroll, { passive: false }); + window.addEventListener("scroll", () => requestAnimationFrame(calcScroll)); + + const menu = document.getElementById("menu-modal"); + + if (menu) { + menu.addEventListener("click", clickMenuModal); + menu.addEventListener("touchstart", clickMenuModal); + } +} + +function clickMenuModal(e) { + const menu = document.getElementById("menu-modal"); + if (menu == null || e.target != menu) return; + closeMenu(); +} + +function preventScroll(e) { + if (menuOpen) return; + e.preventDefault(); + e.stopPropagation(); + return false; +} + +window.onload = main; \ No newline at end of file diff --git a/res/avatar.svg b/res/avatar.svg new file mode 100644 index 0000000..01e4770 --- /dev/null +++ b/res/avatar.svg @@ -0,0 +1 @@ + \ No newline at end of file From 8da4fac381917036cc69d655670ed7f565b0dd8a Mon Sep 17 00:00:00 2001 From: MajorDroolz Date: Sat, 17 Dec 2022 21:36:16 -0500 Subject: [PATCH 02/16] Added a side bar to access the parts of the site for mobile users. --- home/index.css | 4 ++-- home/index.html | 58 ++++++++++++++++++++++++------------------------- 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/home/index.css b/home/index.css index bc63ba4..a455f3c 100644 --- a/home/index.css +++ b/home/index.css @@ -122,7 +122,7 @@ nav { } .fade-text::before { - content: attr(data) " " attr(data) " " attr(data) " " attr(data) " " attr(data) " " attr(data) " " attr(data); + content: attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t); font-size: calc(min(12vh, 16vw)); line-height: calc(min(11vh, 14vw)); font-family: "Open Sans", sans-serif; @@ -249,7 +249,7 @@ nav a:nth-child(7) { animation: nav-enter 2s 600ms var(--timing) backwards; } /*----------------------------------------------------------------------------*/ -section { +article { margin-bottom: 200vh; background-color: var(--color, transparent); } diff --git a/home/index.html b/home/index.html index 02da93d..0da0e41 100644 --- a/home/index.html +++ b/home/index.html @@ -11,51 +11,51 @@ -
- - +
- - - \ No newline at end of file + + + + + \ No newline at end of file From 440e5b3921a5e1e8fc4d109e66a5a934b1c34502 Mon Sep 17 00:00:00 2001 From: MajorDroolz Date: Tue, 20 Dec 2022 04:04:46 -0500 Subject: [PATCH 03/16] FIX: root now points to home. --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 725e6ce..def6f31 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - + \ No newline at end of file From cf6a5ef9101cbe6efbe7e3bd23aa1160665cbaaf Mon Sep 17 00:00:00 2001 From: MajorDroolz Date: Thu, 22 Dec 2022 16:51:59 -0500 Subject: [PATCH 04/16] FEAT: Added rest of unstyled HTML content. Temporarily removed animations. --- home/index.css | 86 +++++++--------------------------- home/index.html | 121 ++++++++++++++++++++++++++++++++++++------------ home/index.js | 21 ++------- 3 files changed, 113 insertions(+), 115 deletions(-) diff --git a/home/index.css b/home/index.css index a455f3c..37b5784 100644 --- a/home/index.css +++ b/home/index.css @@ -1,6 +1,6 @@ @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,200'); @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital@1&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;900&display=swap'); /*----------------------------------------------------------------------------*/ @@ -12,9 +12,9 @@ --light: #FEFADC; --dark: #504B43; - --red: #F8333C; + --red: #EC1B24; --yellow: #FCAB10; - --green: #8FD694; + --green: #62C869; --blue: #2B9EB3; --timing: cubic-bezier(0.2, 1, 0, 1); @@ -30,13 +30,6 @@ .flex-space { flex: 1 } -.pos-center { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); -} - /*----------------------------------------------------------------------------*/ @media (min-aspect-ratio: 6 / 5) { @@ -49,10 +42,14 @@ .nav1, .nav3 { display: none !important; } + + .nav12 > p { + display: none; + } } @media (max-aspect-ratio: 3 / 4) { - .nav1, .nav2 { + .nav1, .nav2, .nav12 { display: none !important; } } @@ -64,10 +61,13 @@ html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overflow-y: scroll; + padding: 100vh 0; } -nav { +header { position: fixed; + top: 0; + left: 0; z-index: 1000; filter: drop-shadow(0px 0px 100px #000); } @@ -111,8 +111,9 @@ nav { #title-name::before { content: "Hi! I'm"; position: absolute; - font-family: "Source Serif Pro", serif; - font-style: italic; + text-transform: none; + font-family: "Source Code Pro"; + font-weight: normal; font-size: calc(min(6vh, 8vw)); line-height: calc(min(5vh, 7vw)); top: 0; @@ -123,6 +124,7 @@ nav { .fade-text::before { content: attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t); + text-transform: uppercase; font-size: calc(min(12vh, 16vw)); line-height: calc(min(11vh, 14vw)); font-family: "Open Sans", sans-serif; @@ -135,6 +137,7 @@ nav { position: absolute; top: 0; left: 50%; + text-transform: uppercase; translate: -50% 0; font-size: calc(min(12vh, 16vw)); line-height: calc(min(11vh, 14vw)); @@ -148,13 +151,9 @@ nav { } .fade1 { opacity: 05%; translate: 0 0; } - .fade2 { opacity: 10%; translate: -5% 0; } - .fade3 { opacity: 20%; translate: 5% 0; } - .fade4 { opacity: 25%; translate: -10% 0; } - .fade5 { opacity: 30%; translate: 10% 0; } .navbar { @@ -167,27 +166,8 @@ nav { z-index: 100; } -nav a:nth-child(1) { animation: nav-enter 2s 000ms var(--timing) backwards; } -nav a:nth-child(2) { animation: nav-enter 2s 100ms var(--timing) backwards; } -nav a:nth-child(3) { animation: nav-enter 2s 200ms var(--timing) backwards; } -nav a:nth-child(4) { animation: nav-enter 2s 300ms var(--timing) backwards; } -nav a:nth-child(5) { animation: nav-enter 2s 400ms var(--timing) backwards; } -nav a:nth-child(6) { animation: nav-enter 2s 500ms var(--timing) backwards; } -nav a:nth-child(7) { animation: nav-enter 2s 600ms var(--timing) backwards; } - -@keyframes nav-enter { - from { - opacity: 0; - transform: translateX(-7%); - } - - to { - opacity: 1; - transform: translateX(0%); - } -} - .button { + white-space: nowrap; position: relative; font-style: normal; display: flex; @@ -249,11 +229,6 @@ nav a:nth-child(7) { animation: nav-enter 2s 600ms var(--timing) backwards; } /*----------------------------------------------------------------------------*/ -article { - margin-bottom: 200vh; - background-color: var(--color, transparent); -} - #about-section { height: 60vmin; } @@ -267,7 +242,6 @@ article { #menu-modal::backdrop { background-color: #0008; - animation: 0.5s ease menu-back-enter; } #menu-modal { @@ -291,28 +265,4 @@ article { -webkit-clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%); background-color: var(--light); -} - -#menu-modal[open] { - animation: 0.5s ease menu-enter; -} - -@keyframes menu-enter { - from { - transform: translateX(-100%); - } - - to { - transform: translateX(0%); - } -} - -@keyframes menu-back-enter { - from { - filter: opacity(0); - } - - to { - filter: opacity(1); - } } \ No newline at end of file diff --git a/home/index.html b/home/index.html index 0da0e41..141b53c 100644 --- a/home/index.html +++ b/home/index.html @@ -10,41 +10,104 @@ Max's Place -
Avatar
-
MAX HUTZ
-
-
-
-
-
+
Max Hutz
+
+
+
+
+
- -
+ + +
+

About Me

+

+ Passionate computer science student skilled in building + responsive, full-stack applications. Motivated to learn from + colleagues and future developers. Seeks role to fashion + software solutions, focused on teamwork and creativity. +

+
+ +
+

Projects

+

+ A selection of applications worked on as a computer scientist, from + flexible web solutions to REST-ful mobile apps. +

+
+

Malung

+ +

+ A cloud-based COVID-19 classifier incorporating AI deep learning. Using + MariaDB and Microsoft Azure, users can store... +

+ Learn more → +
+
+

Fresh-Manual

+ +

+ A mobile companion to Fresh Manuals website to find, save and organize + product manuals. UI built with React, React-Native, and SwiftUI... +

+ Learn more → +
+ View all Projects +
+ +
+

My Experience

+

+ I've had varied experiences: from mentoring fellow undergrads + to performing in fast-paced settings where communication + and innovation are key. +

+ +
+ + + + -
+

Contact Me!

 \ No newline at end of file diff --git a/home/index.js b/home/index.js deleted file mode 100644 index a6dd052..0000000 --- a/home/index.js +++ /dev/null @@ -1,10 +0,0 @@ -window.onload = main; - -function calcScroll() { - document.body.style.setProperty("--scroll", window.scrollY / (0.7 * window.innerHeight)); -} - -function main() { - window.addEventListener("scroll", calcScroll); - calcScroll(); -} \ No newline at end of file diff --git a/res/.DS_Store b/res/.DS_Store index 7b5a3f1dfa318feb6e35207d4a656721f87c4b0a..7e79c09200f855c23e13fb8f1d481de701923ed1 100644 GIT binary patch delta 366 zcmZp1XfcprU|?W$DortDU=RQ@Ie-{MGjUEV6q~50D9Q|y2a6>$S-7Z)Vu_{re$t*50Fu2CZ#LU9V#?Hac!OamHoRME1 zT#{H)TI`fq6b<5qBbhhp4i?bx?eE zPHtX)7tnD)zzFmb81O=A7}X7AAbF`QxF|0tKQA39%DA!cCd*=W4h}(3kN|-IH;`}z g1=YsF@640=WgJ0a2?{J05X}S$Ot9GIc%C`T07<@3fdBvi literal 8196 zcmeHMO>5gg5S?{%h-(Nbh2Tp;e;_7y>^QzDAwBfmKhS&-6EJZuEj|U^^B?*b^80dX z-<#bQ$r@QbIfcx^&NI@^+u66P5hII8IRAb#6zPk|E;@0)2V*qeXRozRx^e&v@D~}% zNKR!S4{~1{?H61DSHKl;1zZ7F;D1m6?`*c+hWCEF>(&);1>U3r%nunlF;7@T)YJi^ zB>->-m$l(H>Hzi066Ohui0TT?SUrT~8d8Z7qC4(q91hGA77?Sngy=3I%^XsN5_ER> zWjb6!9?`8U;0n|gVC~*Zb^EGPzt6ucme*H{u%RjJ8QY=K1g-W)@GSS@_3ejYd zGq99*&|1-HiiK#iP~A3`S&D^dvZ%UcmJhX^9;vppHUpHcoUZz6j&WAF%Mlw{Dyyl- zF~+yE6{7g_1#RtVqN?(<^jy>#CNc#Btr-K)YYW4Pu7lQO(C21z3{z#GwHc5{T4I>$ zp3>S3+>f>xm}90*8AkKPW`>xh8grDM@Nzcnt(~et%p}zusykTDQ&@;MSKyTtco*mG zv;P0w{QduxqVs880asuf3WS}DuNUW-Db?1sIazCG=-<%UIIf7OE-+e-1GO9n{{6!c dzcUP_PoA)dh%0DY{}6y$#^3)cy_+|zz;9flfqno0 diff --git a/styles.css b/styles.css index d739197..5e9da18 100644 --- a/styles.css +++ b/styles.css @@ -9,8 +9,8 @@ --light: #FEFADC; --dark: #504B43; --red: #EC1B24; - --yellow: #F29F00; - --green: #62C869; + --yellow: #E19200; + --green: #4CB753; --blue: #2B9EB3; --timing: cubic-bezier(0.2, 1, 0, 1); @@ -26,9 +26,10 @@ .yellow { --color: var(--yellow) } .green { --color: var(--green) } .blue { --color: var(--blue) } -.white { --color: var(--white) } +.white { --color: white } -.flex-space { flex: 1 } +.flex-space, .flex { flex-grow: 1 } +.space { flex: 1000 } /*----------------------------------------------------------------------------*/ From 151f01c335931751a9691f4566a8c231cf8c98a9 Mon Sep 17 00:00:00 2001 From: MajorDroolz Date: Tue, 3 Jan 2023 01:02:17 -0500 Subject: [PATCH 15/16] FEAT: add logos to page --- home/index.css | 3 ++- home/index.html | 46 ++++++++++++++++++++--------------------- res/icons/.DS_Store | Bin 0 -> 6148 bytes res/icons/github.png | Bin 0 -> 8745 bytes res/icons/linkedin.png | Bin 0 -> 8794 bytes 5 files changed, 25 insertions(+), 24 deletions(-) create mode 100644 res/icons/.DS_Store create mode 100644 res/icons/github.png create mode 100644 res/icons/linkedin.png diff --git a/home/index.css b/home/index.css index 5df4f2e..8e99481 100644 --- a/home/index.css +++ b/home/index.css @@ -1,5 +1,6 @@ * { overflow: hidden; + text-decoration: none; } button { @@ -20,7 +21,7 @@ html { scroll-behavior: smooth; } -pre { +.pre { all: unset; white-space: pre; } diff --git a/home/index.html b/home/index.html index c4341c1..0242d0e 100644 --- a/home/index.html +++ b/home/index.html @@ -27,10 +27,10 @@ Experience Resume Contact - - - - + + + + @@ -39,7 +39,7 @@
-

Hey! 👋 
I'm Max Hutz.

+

Hey! 👋 I'm Max Hutz.

Software engineer in New York.

@@ -48,7 +48,7 @@ and teaching future developers. I thrive where teamwork and creativity are key.

-
+