From 17adb48b7a9444cc36e05fde404c31c07bb374b4 Mon Sep 17 00:00:00 2001 From: CAG2Mark Date: Wed, 26 Jun 2024 03:10:28 +0800 Subject: [PATCH] big update --- about.html | 2 +- flychrono2.html | 2 +- flylivestudio.html | 2 +- index.html | 99 +++++++++++++++++++++++++--------------------- projects.html | 2 +- scripts/global.js | 11 ++++-- scripts/home.js | 30 ++++++++++++++ styles/global.css | 38 +++++++++++++----- styles/home.css | 47 ++++++++++++++++++---- 9 files changed, 163 insertions(+), 70 deletions(-) diff --git a/about.html b/about.html index a28f9e5..36da41d 100644 --- a/about.html +++ b/about.html @@ -8,7 +8,7 @@ About - Mark Ng - + diff --git a/flychrono2.html b/flychrono2.html index 280e10e..dafc024 100644 --- a/flychrono2.html +++ b/flychrono2.html @@ -8,7 +8,7 @@ About - Mark Ng - + diff --git a/flylivestudio.html b/flylivestudio.html index a755307..90801bf 100644 --- a/flylivestudio.html +++ b/flylivestudio.html @@ -8,7 +8,7 @@ About - Mark Ng - + diff --git a/index.html b/index.html index eb395c2..1158cbc 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ Portfolio of Mark Ng - + @@ -16,7 +16,7 @@ - + @@ -65,33 +65,38 @@
- -
- Mark -
- Ng. -
- -
- - - - - - +
+ +
+ Mark +
+ Ng. +
+ + + + +
+ + + + + + +
+
-
-

Hey, I'm Mark!

+

Hey, I'm Mark!

I'm a student from Hong Kong studying Computer Science and Mathematics. I enjoy classical music and play the piano as a hobby. @@ -136,10 +141,8 @@

-

Projects

+

Projects.

- The best way to learn as a programmer is to program, and - I have no shortage of past projects under my belt. I've handpicked a shortlist of past projects below. You can also check out my full list of projects or my GitHub.

@@ -282,28 +285,32 @@

ISSIA Magazine

- -
-

Get in touch

- -

Ask me anything about my journey, skills or potential project ideas!

- - - -
- - - - - +
+
+
+

Get in Touch.

+

+ Feel free to ask me anything about my + skills or potential project ideas! +

+

+ If you would like my resume or CV, + please email me directly and let me know why you need it. +

+
+
+ + + + + +
-
-
@@ -325,7 +332,7 @@

Get in touch

- + diff --git a/projects.html b/projects.html index dfd9087..d156765 100644 --- a/projects.html +++ b/projects.html @@ -8,7 +8,7 @@ Projects - Mark Ng - + diff --git a/scripts/global.js b/scripts/global.js index 99c93f2..9036353 100644 --- a/scripts/global.js +++ b/scripts/global.js @@ -31,6 +31,8 @@ var hamburgerOpen = false; hWrapper.addEventListener('click', hamburgerClicked); +var lock = false; + function hamburgerClicked() { hamburgerOpen = !hamburgerOpen; handleHamburgerChange(); @@ -56,14 +58,17 @@ function handleHamburgerChange() { hBottom.classList.add("hamburger-line-bottom-inactive"); } + if (hamburgerOpen) { + document.getElementById("navbar").classList.add("navigation-open"); + } else { + document.getElementById("navbar").classList.remove("navigation-open"); + } + for (var i = 0; i < navItems.length; i++) { let item = navItems[i]; if (hamburgerOpen) { item.classList.add("navigation-item-peek"); - document.getElementById("navbar").classList.add("navigation-open"); } else { - document.getElementById("navbar").classList.remove("navigation-open"); - setTimeout(() => { item.classList.remove("navigation-item-peek"); }, 80); diff --git a/scripts/home.js b/scripts/home.js index c6b3063..e85ccf2 100644 --- a/scripts/home.js +++ b/scripts/home.js @@ -64,6 +64,36 @@ function handleScroll() { } } +// Cover +let cover = document.getElementById("cover"); + +let nameWrap = document.getElementById("name-wrap"); +let emblemWrap = document.getElementById("emblem-wrap"); + +let nameTransform = "translate(0, 0)"; +let emblemTransform = "translate(0, 0)"; + +let NAME_VEL = 0.07; +let EMBLEM_VEL = 0.03; + +cover.addEventListener("mousemove", handleMouseMove) +cover.addEventListener("mouseleave", (ev) => { + nameTransform = "translate(0, 0)"; + emblemTransform = "translate(0, 0)"; +}) +function handleMouseMove(ev) { + let x = ev.clientX - cover.getBoundingClientRect().width / 2; + let y = ev.clientY - cover.getBoundingClientRect().height / 2; + + nameTransform = `translate(${x * NAME_VEL}px, ${y * NAME_VEL * 1.67}px)`; + emblemTransform = `translate(${x * EMBLEM_VEL}px, ${y * EMBLEM_VEL * 1.67}px)`; +} + +setInterval(() => { + nameWrap.style.transform = nameTransform; + emblemWrap.style.transform = emblemTransform; +}, 100); + // Email // Done this way to prevent spambots diff --git a/styles/global.css b/styles/global.css index 7f09dcf..e48b33f 100644 --- a/styles/global.css +++ b/styles/global.css @@ -16,7 +16,7 @@ body { color: rgb(255, 255, 255); - background-color: #2e2e2e; + background-color: #292929; margin: 0; padding: 0; @@ -50,7 +50,7 @@ body { margin: 16px; } -.info-row-grid>* { +.info-row-grid > * { flex: 40%; margin: 8px !important; } @@ -134,10 +134,23 @@ h4 { font-weight: bold; } +.big { + font-size: 44px; + line-height: 0.8em; +} + .red-color { color: #f85757; } +.orange-color { + color: #f87d57; +} + +.yellow-color { + color: #f8c057; +} + .vertical-align { position: absolute; top: 50%; @@ -353,7 +366,7 @@ h4 { border-width: 1px; border-color: transparent; - transition: 400ms height, 250ms opacity; + transition: 400ms height, 250ms opacity, 400ms width, 400ms margin; } .navigation-container { @@ -374,9 +387,9 @@ h4 { -webkit-box-shadow: 0px 0px 32px 5px rgba(0,0,0,0.3); box-shadow: 0px 0px 32px 5px rgba(0,0,0,0.3); - background-color: rgba(29, 29, 29, 0.904); - backdrop-filter: blur(20px) saturate(180%); - -webkit-backdrop-filter: blur(20px) saturate(180%); + background-color: rgba(29, 29, 29, 0.8); + backdrop-filter: blur(16px) saturate(250%); + -webkit-backdrop-filter: blur(16px) saturate(250%); } a.skip-main { @@ -652,7 +665,9 @@ p > a::after { } .navigation-open { - height: calc(100% - 24px); + height: calc(100% + 8px); + width: calc(100% + 8px); + margin: -4px; } } @@ -722,7 +737,6 @@ p > a::after { flex-direction: column; } - .info-col { padding: 12px 0px; } @@ -730,8 +744,9 @@ p > a::after { .info-row-grid { margin: 0; } - .info-row-grid>* { + .info-row-grid > * { flex: 100%; + margin: 8px -2px 8px -2px !important; } .back-link { @@ -739,6 +754,11 @@ p > a::after { top: 10px; transform: translateX(-8px); } + + .info-panel { + margin-left: -2px; + margin-right: -2px; + } } @media (max-width: 1400px) { diff --git a/styles/home.css b/styles/home.css index 2980100..5f02e3b 100644 --- a/styles/home.css +++ b/styles/home.css @@ -6,9 +6,34 @@ html[data-scroll="30"] .navigation-background { #cover { height: 100vh; + box-sizing: border-box; + overflow: hidden; +} + +#cover-wrap { + width: 100%; + height: 100%; position: relative; } +#name-wrap { + position: absolute; + height: 100%; + z-index: 2; + + transition: transform 250ms ease-out; +} + +#emblem-wrap { + position: absolute; + width: 100%; + height: 100%; + right: 0; + z-index: 1; + + transition: transform 250ms ease-out; +} + #about { height: auto; background: #202020; @@ -16,10 +41,6 @@ html[data-scroll="30"] .navigation-background { overflow: hidden; } -#about h1 { - font-size: 44px; -} - #about1 { background-color: rgb(46, 46, 46); border-radius: 10px; @@ -39,7 +60,6 @@ html[data-scroll="30"] .navigation-background { #contact { background: #252525; height: auto; - text-align: center; } /* #endregion */ @@ -156,17 +176,17 @@ html[data-scroll="30"] .navigation-background { } -#emblem-container:hover #emblemM { +#mn-svg:hover #emblemM { transform: translate(-1%, -2.5%); fill: #f85757; } -#emblem-container:hover #emblemMid { +#mn-svg:hover #emblemMid { fill: #f87d57; } -#emblem-container:hover #emblemN { +#mn-svg:hover #emblemN { transform: translate(1%, 2.5%); fill: #f8c057; } @@ -308,6 +328,10 @@ html[data-scroll="30"] .navigation-background { /* #region contact */ +#contact-container { + text-align: center; +} + #email-container { border-radius: 16px; background-color: #2b2b2b; @@ -318,6 +342,7 @@ html[data-scroll="30"] .navigation-background { overflow: auto; margin: 0 auto; + text-align: center; } #email-container * { @@ -405,6 +430,12 @@ body .modal { .modal-dialog > h1 { font-size: 36px; } + + #emblem-container { + left: 50%; + transform: translate(-50%, -50%); + padding: 0; + } } /* #endregion */ \ No newline at end of file