new home page

lilacstella · Nov 5, 2023 · 7ebb0cc · 7ebb0cc
1 parent 2bff65b
commit 7ebb0cc
Show file tree

Hide file tree

Showing 3 changed files with 210 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+    <title>Stella Yang</title>
+    <link id="indexCSS" rel="stylesheet" href="styles/block-index.css">
+    <link id="mainCSS" rel="stylesheet" href="styles/block.css">
+    <script type="text/javascript" src="scripts/index.js"></script>
+    <!-- <script type="text/javascript" src="scripts/theme.js"></script> -->
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✨</text></svg>">
+    <script src="https://kit.fontawesome.com/5b7b9c03bc.js" crossorigin="anonymous"></script>
+
+</head>
+
+<body>
+    <div id="frame">
+        <div id="wrapper">
+            <div id="left" onclick="location.assign('projects.html')" onmouseover="emphasize(this)" onmouseleave="reset(this)">
+                <i class="fa-solid fa-bars-progress"></i>
+                <!-- <p>PROJECTS</p> -->
+            </div>
+            <div id="mid" onclick="location.assign('blog.html')" onmouseover="emphasize(this)" onmouseleave="reset(this)">
+                <i class="fa-solid fa-paperclip"></i>
+                <!-- <p>BLOG</p> -->
+            </div>
+            <div id="right" onclick="location.assign('about.html')" onmouseover="emphasize(this)" onmouseleave="reset(this)">
+                <i class="fa-regular fa-heart"></i>
+                <!-- <p>STELLA</p> -->
+            </div>
+        </div>
+        <div id="bg"></div>
+    </div>
+</body>
+
+</html>
diff --git a/scripts/index.js 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);
diff --git a/styles/block-index.css 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%;
+}