feat: Added welcome page

ZacharyBear · Aug 19, 2024 · a619eca · a619eca
1 parent b445cda
commit a619eca
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 1 deletion.
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/style/global.scss" />
+  <link rel="stylesheet" href="welcome.scss" />
+  <title>Document</title>
+</head>
+<body>
+  <main>
+    <h1>Zachary's Three.js Works</h1>
+    <a href="pages/basic/hello/index.html">Browse from "Hello Three.js"</a>
+  </main>
+  <footer>
+    <div>Copyright by Zachary Bear 2024.</div>
+    <div>Contact me on <a href="https://github.com/ZenkieBear">Github</a>.</div>
+    <div>This is an open-source project, <a href="https://github.com/ZenkieBear/learn-three">check it out</a> on Github.</div>
+  </footer>
+</body>
+<script type="module" src="welcome.ts"></script>
+</html>
diff --git a/src/lib/menu.ts b/src/lib/menu.ts
@@ -36,6 +36,10 @@ export const renderMenu = (menus: MenuNode[], container: HTMLUListElement) => {
 }
 
 const menus: MenuNode[] = [
+  {
+    label: 'Home',
+    url: '/'
+  },
   {
     label: 'Basic Skills',
     children: [

diff --git a/src/style/global.scss b/src/style/global.scss
@@ -6,7 +6,10 @@ $clr-bg-hover: lighten($accent, 20%);
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  transition: 0.3s ease;
+
+  &, &::after, &::before {
+    transition: 0.3s ease;
+  }
 }
 
 ul,

diff --git a/src/welcome.scss b/src/welcome.scss
@@ -0,0 +1,82 @@
+@import '@/style/global.scss';
+
+main {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  margin: calc(3.4rem + 2rem) auto 0;
+  padding: 2em;
+  width: 90%;
+  background-color: adjust-color($accent, $lightness: 47%);
+
+  h1 {
+    font-size: 8em;
+    line-height: 1.5;
+  }
+
+  a {
+    position: relative;
+    display: block;
+    padding: 2rem;
+    width: fit-content;
+    color: white;
+    background-color: $accent;
+
+    &::before {
+      content: '→';
+      position: absolute;
+      left: 0;
+      display: block;
+      text-decoration: none;
+      opacity: 0;
+    }
+
+    &:hover {
+      padding-left: 3rem;
+
+      &::before {
+        left: 1em;
+        opacity: 1;
+        transition: all .4s ease-out;
+      }
+    }
+
+  }
+
+  @media screen and (max-width: 768px) {
+    a {
+      padding: 1rem;
+    }
+    h1 {
+      font-size: 5em;
+    }
+  }
+
+  @media screen and (max-width: 425px) {
+    h1 {
+      font-size: 3em;
+    }
+  }
+}
+
+footer {
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+  margin-top: 2rem;
+  padding: 2.5% 5% 0;
+  min-height: 50vh;
+  background-color: rgba($accent, 20%);
+  color: $accent;
+
+  a {
+    color: $accent;
+  }
+}
+
+// Customized menu
+.menu {
+  padding: 0 5%;
+  background-color: rgba($accent, 5%);
+  backdrop-filter: blur(1rem);
+}
diff --git a/src/welcome.ts b/src/welcome.ts
@@ -0,0 +1,3 @@
+import { useMenu } from '@/lib/menu'
+
+useMenu()
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { useMenu } from '@/lib/menu'

		useMenu()