From 6fd537104ee36b9551cbb586ad3c00e46e5e5311 Mon Sep 17 00:00:00 2001 From: MajorDroolz Date: Tue, 3 Jan 2023 00:33:07 -0500 Subject: [PATCH] FEAT: Home page now operational, but yet complete. --- .DS_Store | Bin 8196 -> 8196 bytes home/index.css | 234 ++++++++++++++++++++++++++++++++++++------------ home/index.html | 125 ++++++++++++++++++++------ home/index.js | 10 --- res/.DS_Store | Bin 8196 -> 6148 bytes styles.css | 9 +- 6 files changed, 278 insertions(+), 100 deletions(-) delete mode 100644 home/index.js diff --git a/.DS_Store b/.DS_Store index ee6e651ffa3b4f36683dc8600fdf6ccb574cd301..590fc8f8fc3246dfcb0942f5bd34a1875ecf8716 100644 GIT binary patch delta 32 ncmZp1XmQxEQ;^@#$g);Pq1xQUQb)nm(sc4c5#!Cj1v&WuskI6A delta 16 XcmZp1XmQxEQ*iPo5vR?+1v&WuJN5>2 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 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 } /*----------------------------------------------------------------------------*/