From 7ebb0ccf35ad87419feb8610b37c726f02a8d984 Mon Sep 17 00:00:00 2001 From: Stella Yang <43301578+lilacstella@users.noreply.github.com> Date: Sun, 5 Nov 2023 01:54:39 -0600 Subject: [PATCH] new home page --- index.html | 36 ++++++++++++++ scripts/index.js | 69 +++++++++++++++++++++++++++ styles/block-index.css | 105 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 210 insertions(+) create mode 100644 index.html create mode 100644 scripts/index.js create mode 100644 styles/block-index.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..dadec2c --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + Stella Yang + + + + + + + + + + +
+
+
+ + +
+
+ + +
+ +
+
+
+ + + \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js new file mode 100644 index 0000000..e6b21cc --- /dev/null +++ b/scripts/index.js @@ -0,0 +1,69 @@ +let p = document.createElement("p"); +// hover animation + +function emphasize(div) { + const rects = document.getElementById("wrapper").children + div.setAttribute("expanded", "t"); + div.style = "z-index: 1"; + clearTimeout(div.timeout); + + if (div.id == "left") + p.textContent = "PROJECTS"; + else if (div.id == "mid") + p.textContent = "BLOG"; + else if (div.id == "right") + p.textContent = "STELLA"; + div.appendChild(p); + + for (let i = 0; i < rects.length; i++) + if (rects[i] != div) + rects[i].style = "z-index: 0"; +} + +function reset(div) { + div.setAttribute("expanded", "f"); + div.style = "z-index: 1"; + + if (p) { + div.removeChild(p); + } + + div.timeout = setTimeout(() => { + div.style = "z-index: 0"; + }, div.id == "mid" ? 750 : 1000 ); +} + +let bgDiv = document.getElementById("bg"); +let position = 0; +let left_travel = Math.floor(Math.random() * 3) - 1; +let top_travel = Math.floor(Math.random() * 3) - 1; +if (left_travel == 0 && top_travel == 0) + top_travel = 1; +console.log(left_travel, top_travel); + + +document.addEventListener("DOMContentLoaded", function () { + bgDiv = document.getElementById("bg"); +}); + +function changePosition() { + // Update the position + position = (position + 100.1) % 100 - 100; + + // Set the new position + if (left_travel > 0) + bgDiv.style.left = position + "vw"; + else if (left_travel < 0) + bgDiv.style.right = position + "vw"; + else + bgDiv.style.left = "0%"; + + if (top_travel > 0) + bgDiv.style.top = position + "vh"; + else if (top_travel < 0) + bgDiv.style.bottom = position + "vh"; + else + bgDiv.style.top = "0%"; +} + +setInterval(changePosition, 60); \ No newline at end of file diff --git a/styles/block-index.css b/styles/block-index.css new file mode 100644 index 0000000..a07ea3f --- /dev/null +++ b/styles/block-index.css @@ -0,0 +1,105 @@ +html, +body { + overflow-x: hidden; + overflow: hidden; + height: 100vh; + width: 100vw; +} + +/* active home button */ +#topnav a.active { + background-color: #0081a7; +} + + +#frame { + left: 0%; + top: 0%; + height: 100%; + width: 100%; + display: flex; + + font-family: 'Space Mono', monospace; + font-weight: 800; + + overflow: hidden; + + background-color: #2e303d; +} + +#bg { + position: absolute; + height: 200vh; + width: 200vw; + background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 2.5px, transparent 8%); + background-size: 50px 50px; + transition: left, top; + transition-timing-function: linear; +} + +#wrapper { + left: 50%; + top: 50%; + position: absolute; + transform: translate(-50%, -50%); + height: 35vh; + width: 60vw; + + display: grid; + z-index: 1; +} + +#wrapper>div { + width: 30%; + height: 100%; + position: absolute; + + transition: left, top, height, width, border-radius; + transition-timing-function: ease-in; + cursor: pointer; + + z-index: 1; +} + +/* text display */ +#wrapper>div { + font-size: 18vh; + display: flex; + overflow: hidden; +} + +#wrapper>div>i { + margin: auto; +} + +#wrapper>div>p { + margin: auto; +} + +#wrapper>div#left { + left: 0%; + background-color: #BDE0FE; + transition-duration: 1000ms; +} + +#wrapper>div#mid { + left: 35%; + background-color: #A2D2FF; + transition-duration: 750ms; +} + +#wrapper>div#right { + left: 70%; + background-color: #FFC8DD; + transition-duration: 1000ms; +} + +/* needs to be more specific */ +#wrapper>div#mid:hover, +#wrapper>div#right:hover { + left: 0; +} + +#wrapper>div[expanded="t"] { + width: 100%; +}