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 index d3dccbd..5df4f2e 100644 --- a/home/index.css +++ b/home/index.css @@ -1,15 +1,32 @@ -body { - --max-width: 1024px; - --pad: max(20px, calc((100vw - var(--max-width)) / 2)); +* { + overflow: hidden; +} +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(--dark); + color: var(--color); text-decoration: none; font-weight: 900; font-family: "Open Sans"; @@ -22,13 +39,7 @@ body { .icon, .r-icon, .button { display: inline-flex; align-items: center; -} - -.clamp-width { - width: 100vw; - padding-right: var(--pad); - padding-left: var(--pad); - box-sizing: border-box; + justify-content: center; } .icon::before { @@ -41,20 +52,21 @@ body { .r-icon::after { font-family: 'Material Symbols Outlined'; content: attr(data-i); - font-size: 1.5rem; margin-left: 5px; } -.scroll-opacity { - opacity: calc(1 - var(--scroll)); -} - 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"; @@ -76,12 +88,13 @@ p { hr { height: 1px; + width: 100%; } .button { color: var(--color); position: relative; - padding: 10px 40px; + padding: 10px 30px; } .button::before { @@ -91,75 +104,180 @@ hr { top: 0; left: 0; background: var(--color); - opacity: 50%; + 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 { - display: flex; - gap: 40px; - font-size: 25px; - padding: 20px; - font-family: "Open Sans"; - font-weight: bolder; - color: var(--dark); - align-items: center; +#header-outer { position: fixed; top: 0; left: 0; z-index: 100; } -#header-back { - background: var(--light); - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 84px; - z-index: -1; +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 { - height: 90vh; - background: var(--light); - overflow: hidden; + position: relative; + margin: auto; display: flex; - justify-content: flex-end; flex-direction: column; - gap: 30px; - padding-bottom: 30px; + 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; } -#avatar { - filter: grayscale(1) opacity(0.2); - position: absolute; - width: 900px; - height: 900px; - left: 70%; - top: 35%; - transform: translate(-50%, -50%); +#about > * { + max-width: 600px; } nav { display: flex; + flex-wrap: wrap; + width: 100%; +} + +#inner-nav { + display: inline-flex; + flex-grow: 1; gap: 20px; -} - -#about-hr { - max-width: 600px; -} - -#about-me { - max-width: 600px; + flex-wrap: wrap; } /*----------------------------------------------------------------------------*/ #projects { - height: 100vh; + 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 index a5fee41..c4341c1 100644 --- a/home/index.html +++ b/home/index.html @@ -4,6 +4,8 @@ + + @@ -15,37 +17,104 @@ - - Max Hutz -
-
- MAX HUTZ -
- Experience - Resume - Contact -
-
- -
-

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

- Software engineer in New York. +
+
+ 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. +
+
+ + + + +
+
-

- 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. -

-
- -
-
+ \ 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 7b5a3f1..7e79c09 100644 Binary files a/res/.DS_Store and b/res/.DS_Store differ 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 } /*----------------------------------------------------------------------------*/