diff --git a/.DS_Store b/.DS_Store index ee6e651..590fc8f 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/home/index.css b/home/index.css new file mode 100644 index 0000000..8e99481 --- /dev/null +++ b/home/index.css @@ -0,0 +1,284 @@ +* { + overflow: hidden; + text-decoration: none; +} + +button { + background-color: transparent; +} + +body { + display: flex; + align-items: center; + flex-direction: column; + justify-content: flex-start; + width: 100vw; + overflow-y: scroll; +} + +html { + overflow-y: scroll; + scroll-behavior: smooth; +} + +.pre { + all: unset; + white-space: pre; +} + +.nav-link { + color: var(--color); + text-decoration: none; + font-weight: 900; + font-family: "Open Sans"; +} + +.shadow { + filter: drop-shadow(0 4px 0 #0004); +} + +.icon, .r-icon, .button { + display: inline-flex; + align-items: center; + justify-content: center; +} + +.icon::before { + font-family: 'Material Symbols Outlined'; + content: attr(data-i); + font-size: 36px; + margin-right: 5px; +} + +.r-icon::after { + font-family: 'Material Symbols Outlined'; + content: attr(data-i); + margin-left: 5px; +} + +h1 { + font-size: 40px; + font-family: "Open Sans"; + font-weight: 900; +} + +h2 { + font-size: 30px; + font-family: "Open Sans"; + font-weight: 900; +} + +i { + font-size: 20px; + font-size: "Source Serif Pro"; +} + +p { + font-size: 20px; + font-family: "Open Sans"; + font-weight: 100; +} + +.lighter { + background: #fff4; +} + +.darker { + background: #0004; +} + +hr { + height: 1px; + width: 100%; +} + +.button { + color: var(--color); + position: relative; + padding: 10px 30px; +} + +.button::before { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: var(--color); + opacity: 25%; + content: ""; + border-radius: 10px; +} + +.width-pad { + width: 100vw; + background-color: var(--color); + padding: 10px 20px; + box-sizing: border-box; +} + +.png-icon { + filter: brightness(0) invert(1); +} + +/*----------------------------------------------------------------------------*/ + +#header-outer { + position: fixed; + top: 0; + left: 0; + z-index: 100; +} + +header { + margin: auto; + max-width: 1024px; + display: flex; + gap: 40px; + font-size: 25px; + font-family: "Open Sans"; + font-weight: bolder; + color: var(--dark); + align-items: center; + box-sizing: border-box; +} + +#about { + position: relative; + margin: auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + max-width: 1024px; + min-height: 90vh; + color: var(--dark); + padding-top: 30px; + box-sizing: border-box; + gap: 30px; +} + +#about > * { + max-width: 600px; +} + +nav { + display: flex; + flex-wrap: wrap; + width: 100%; +} + +#inner-nav { + display: inline-flex; + flex-grow: 1; + gap: 20px; + flex-wrap: wrap; +} + +/*----------------------------------------------------------------------------*/ + +#projects { + margin: 30px auto; + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + max-width: 1024px; + min-height: 100vh; + color: white; + box-sizing: border-box; + gap: 30px; +} + +#project-list { + overflow: visible; + display: flex; + flex-wrap: wrap; + width: 100%; + gap: 20px; +} + +.project-item { + min-width: max(40%, 300px); + flex: 1; + height: 300px; + background-color: var(--color); + border-radius: 10px; + overflow: visible; + display: flex; + flex-direction: column; +} + +.project-link { + color: white; + background-color: #0005; + padding: 10px; + border-radius: 0 0 10px 10px; +} + +#experience-button { + align-self: center; +} + +#footer-pad { + background: var(--dark) linear-gradient(#0002, #0002); +} + +footer { + display: flex; + align-items: center; + color: white; + max-width: 1024px; + margin: auto; + gap: 10px; +} + +/*----------------------------------------------------------------------------*/ + +#menu { + top: 0; + left: 0; + max-width: none; + max-height: none; + position: fixed; + background-color: var(--light); + color: var(--dark); + width: 100vw; + font-size: 25px; + overflow: visible; +} + +#menu-top { + display: flex; + align-items: center; + transform: translateY(-1.5px); +} + +#menu-inner { + max-width: 1024px; + display: flex; + flex-direction: column; + gap: 30px; + margin: auto; + margin-bottom: 50px; +} + +/*----------------------------------------------------------------------------*/ + +@media (max-width: 464px) { + .nav2, .nav3 { + display: none; + } +} + +@media (max-width: 813px) and (min-width: 465px) { + .nav1, .nav3 { + display: none; + } +} + +@media (min-width: 814px) { + .nav1, .nav2 { + display: none; + } +} \ No newline at end of file diff --git a/home/index.html b/home/index.html new file mode 100644 index 0000000..0242d0e --- /dev/null +++ b/home/index.html @@ -0,0 +1,120 @@ + + + + + + + + + + + + + + + + + + + + Max Hutz + + +
+
+ MAX HUTZ +
+ Experience + Resume + Contact + + + + +
+
+ +
+
+
+
+
+

Hey! šŸ‘‹ I'm Max Hutz.

+ Software engineer in New York. +
+

+ Iā€™m a passionate computer science student skilled in building + responsive, full-stack applications. I love learning from colleagues + and teaching future developers. I thrive where teamwork and creativity + are key. +

+
+ +
+
+
+ +
+
+

Worked on:

+ +
+ View all experiences. +
+
+ + + + +
+ +
+ + + \ No newline at end of file diff --git a/index.html b/index.html index 725e6ce..422126a 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - + + - \ No newline at end of file diff --git a/res/.DS_Store b/res/.DS_Store index 7b5a3f1..7e79c09 100644 Binary files a/res/.DS_Store and b/res/.DS_Store differ 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 diff --git a/res/icons/.DS_Store b/res/icons/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/res/icons/.DS_Store differ diff --git a/res/icons/github.png b/res/icons/github.png new file mode 100644 index 0000000..b6ba5e6 Binary files /dev/null and b/res/icons/github.png differ diff --git a/res/icons/linkedin.png b/res/icons/linkedin.png new file mode 100644 index 0000000..9145b3b Binary files /dev/null and b/res/icons/linkedin.png differ diff --git a/resume/index.css b/resume/index.css index a1214c3..815d86c 100644 --- a/resume/index.css +++ b/resume/index.css @@ -22,7 +22,6 @@ html { font-size: 1vw; - background: black; animation: var(--enter) scene-enter; } @@ -148,7 +147,7 @@ article { } body::before { - background: lightsteelblue linear-gradient(45deg, #F008, #00F8); + background: lightsteelblue var(--grad); width: 100vw; height: 100vh; content: ""; diff --git a/resume/index.html b/resume/index.html index 9acf7fe..af2f2a7 100644 --- a/resume/index.html +++ b/resume/index.html @@ -16,6 +16,7 @@ "> + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5e9da18 --- /dev/null +++ b/styles.css @@ -0,0 +1,38 @@ +* { + padding: 0; + border: 0; + margin: 0; + outline: 0; +} + +:root { + --light: #FEFADC; + --dark: #504B43; + --red: #EC1B24; + --yellow: #E19200; + --green: #4CB753; + --blue: #2B9EB3; + + --timing: cubic-bezier(0.2, 1, 0, 1); + --start-timing: cubic-bezier(0,.5,0,.9); + + --grad: linear-gradient(45deg, #F008, #00F8); + --shadow: 0px 10px 50px 0 #0008; +} + +.light { --color: var(--light) } +.dark { --color: var(--dark) } +.red { --color: var(--red) } +.yellow { --color: var(--yellow) } +.green { --color: var(--green) } +.blue { --color: var(--blue) } +.white { --color: white } + +.flex-space, .flex { flex-grow: 1 } +.space { flex: 1000 } + +/*----------------------------------------------------------------------------*/ + +html { + background: var(--dark); +} \ No newline at end of file