I graduated from Georgia Institute of Technology with a degree in Material Science & Engineering. I worked in that field for six years, first at an R&D startup making ceramic body armor and then at a materials consultancy in New York, working with designers and engineers at Fortune 500 companies.
@@ -48,8 +46,8 @@Jun 2022 - Present
diff --git a/_site/styles.css b/_site/styles.css index b4f8dc6..18b9ac5 100644 --- a/_site/styles.css +++ b/_site/styles.css @@ -22,9 +22,7 @@ p, h1, h2, h3, h4, h5, h6 { #root, #__next { isolation: isolate; } -/* CSS Reset End */ - -:root { +/* CSS Reset End */ :root { --primary: rgba(0, 135, 104, 1); --accent: rgba(0, 135, 104, 0.1); --text-color-secondary: rgba(117, 117, 117, 1); @@ -35,6 +33,7 @@ p, h1, h2, h3, h4, h5, h6 { html { font-size: 16px; scroll-behavior: smooth; + scroll-padding-top: 10rem; } body { @@ -46,6 +45,28 @@ main { max-width: fit-content; } +nav { + display: none; +} + +nav a { + text-decoration: none; +} + +nav ul li.active, nav ul li a:hover { + color: var(--primary); +} + +nav ul li.active::before { + content: "•"; + position: absolute; + left: -1rem; +} + +nav ul li:not(:last-child) { + margin-bottom: 10px; +} + a { color: inherit; text-decoration: solid underline var(--primary) 2px; @@ -122,7 +143,16 @@ img.portrait { h2 { color: var(--primary); font-weight: 600; - font-size: 18px; + font-size: 1.125rem; + text-transform: uppercase; + letter-spacing: 2px; + padding: 10px 10px 10px 0; +} + +nav ul li { + color: var(--text-color); + font-weight: 600; + font-size: 1.125rem; text-transform: uppercase; letter-spacing: 2px; padding: 10px 10px 10px 0; @@ -308,6 +338,10 @@ a:hover .svg { height: 335px; padding: 40px 0; } + + h2 { + padding-bottom: 1.5rem; + } } @media (width >= 960px) { @@ -315,10 +349,10 @@ a:hover .svg { max-width: 1184px; display: grid; grid-template-areas: - "intro intro" - "header-background background" - "header-skills skills" - "header-experience experience"; + "intro intro intro" + "navbar . background" + "navbar . skills" + "navbar . experience"; grid-template-rows: repeat(4, auto); grid-template-columns: 1fr minmax(min-content, 3fr); gap: 200px 10%; @@ -340,19 +374,15 @@ a:hover .svg { } h2 { - text-align: right; - } - - h2#background { - grid-area: header-background; - } - - h2#skills { - grid-area: header-skills; + display: none; } - h2#experience { - grid-area: header-experience; + nav { + grid-area: navbar; + position: sticky; + align-self: start; + top: 10rem; + display: initial; } .intro { diff --git a/bundle.js b/bundle.js new file mode 100644 index 0000000..21d3a9c --- /dev/null +++ b/bundle.js @@ -0,0 +1,21 @@ +const sections = document.querySelectorAll("main > div"); +const navLi = document.querySelectorAll("nav ul li"); + +window.addEventListener("scroll", () => { + let current = ""; + sections.forEach((section) => { + const sectionTop = section.offsetTop; + const sectionHeight = section.clientHeight; + if (pageYOffset >= sectionTop - 200 - Math.sqrt(sectionHeight)) { + current = section.getAttribute("id"); + } + }); + + navLi.forEach((li) => { + li.classList.remove("active"); + if (li.classList.contains(current)) { + li.classList.add("active"); + } + }); +}); + diff --git a/index.html b/index.html index 4c0c2e4..c0df584 100644 --- a/index.html +++ b/index.html @@ -2,24 +2,15 @@I graduated from Georgia Institute of Technology with a degree in Material Science & Engineering. I worked in that field for six years, first at an R&D startup making ceramic body armor and then at a materials consultancy in New York, working with designers and engineers at Fortune 500 companies.
@@ -48,8 +46,8 @@Jun 2022 - Present
diff --git a/styles.css b/styles.css index b4f8dc6..18b9ac5 100644 --- a/styles.css +++ b/styles.css @@ -22,9 +22,7 @@ p, h1, h2, h3, h4, h5, h6 { #root, #__next { isolation: isolate; } -/* CSS Reset End */ - -:root { +/* CSS Reset End */ :root { --primary: rgba(0, 135, 104, 1); --accent: rgba(0, 135, 104, 0.1); --text-color-secondary: rgba(117, 117, 117, 1); @@ -35,6 +33,7 @@ p, h1, h2, h3, h4, h5, h6 { html { font-size: 16px; scroll-behavior: smooth; + scroll-padding-top: 10rem; } body { @@ -46,6 +45,28 @@ main { max-width: fit-content; } +nav { + display: none; +} + +nav a { + text-decoration: none; +} + +nav ul li.active, nav ul li a:hover { + color: var(--primary); +} + +nav ul li.active::before { + content: "•"; + position: absolute; + left: -1rem; +} + +nav ul li:not(:last-child) { + margin-bottom: 10px; +} + a { color: inherit; text-decoration: solid underline var(--primary) 2px; @@ -122,7 +143,16 @@ img.portrait { h2 { color: var(--primary); font-weight: 600; - font-size: 18px; + font-size: 1.125rem; + text-transform: uppercase; + letter-spacing: 2px; + padding: 10px 10px 10px 0; +} + +nav ul li { + color: var(--text-color); + font-weight: 600; + font-size: 1.125rem; text-transform: uppercase; letter-spacing: 2px; padding: 10px 10px 10px 0; @@ -308,6 +338,10 @@ a:hover .svg { height: 335px; padding: 40px 0; } + + h2 { + padding-bottom: 1.5rem; + } } @media (width >= 960px) { @@ -315,10 +349,10 @@ a:hover .svg { max-width: 1184px; display: grid; grid-template-areas: - "intro intro" - "header-background background" - "header-skills skills" - "header-experience experience"; + "intro intro intro" + "navbar . background" + "navbar . skills" + "navbar . experience"; grid-template-rows: repeat(4, auto); grid-template-columns: 1fr minmax(min-content, 3fr); gap: 200px 10%; @@ -340,19 +374,15 @@ a:hover .svg { } h2 { - text-align: right; - } - - h2#background { - grid-area: header-background; - } - - h2#skills { - grid-area: header-skills; + display: none; } - h2#experience { - grid-area: header-experience; + nav { + grid-area: navbar; + position: sticky; + align-self: start; + top: 10rem; + display: initial; } .intro {