[edit] server domain

Sniij · Jan 30, 2024 · 8ecb403 · 8ecb403
1 parent 04895f5
commit 8ecb403
Show file tree

Hide file tree

Showing 7 changed files with 168 additions and 5 deletions.
diff --git a/deploy/assets/css/main.css b/deploy/assets/css/main.css
@@ -135,6 +135,38 @@ div #birds2 {
 	display: none;
 }
 
+#loading{
+	display: none;
+
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+    background-color: #222 ;
+    color: #fff;
+    font-weight: 400;
+    font-size: 2vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    text-transform: uppercase;
+    font-family: "Khula", sans-serif;
+    box-sizing: border-box;
+    letter-spacing: 6px;
+    margin: 0;
+    line-height: 100%;
+    z-index: 9999;
+} #loading  span {
+        display: inline-block;
+}
+
+
+
+
+
 @font-face {
     font-family: 'KBO-Dia-Gothic_bold';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/KBO-Dia-Gothic_bold.woff') format('woff');

diff --git a/deploy/assets/js/test.js b/deploy/assets/js/test.js
@@ -0,0 +1,38 @@
+import Letterize from "https://cdn.skypack.dev/[email protected]";
+import anime from "https://cdn.skypack.dev/[email protected]";
+
+window.addEventListener("load", async function() {
+
+    var load = document.getElementById("loading");
+
+
+    const test = new Letterize({
+        targets: ".animate-me"
+        });
+
+    const animation = anime.timeline({
+        targets: test.listAll,
+        delay: anime.stagger(100, {
+            grid: [test.list[0].length, test.list.length],
+            from: "center"
+        }),
+        loop: true
+    });
+
+    animation
+    .add({
+        scale: 0.5
+    })
+    .add({
+        letterSpacing: "10px"
+    })
+    .add({
+        scale: 1
+    })
+    .add({
+        letterSpacing: "6px"
+    });
+    setTimeout(function() {
+        load.style.display = "none";
+    }, 7000);
+});
diff --git a/deploy/assets/js/visitors.js b/deploy/assets/js/visitors.js
@@ -1,4 +1,4 @@
-let url = 'https://portfolio.chomanki.com/visitors/portfolio-ga4';
+let url = 'https://server.portfolio.chomanki.com/visitors/portfolio-ga4';
 
 let today = new Date();
 let dd = String(today.getDate()).padStart(2, '0');

diff --git a/deploy/index.html b/deploy/index.html
@@ -16,6 +16,7 @@
 
 
     <!-- Google tag (gtag.js) -->
+    <script type="module" src="assets/js/test.js"></script>
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-RMK304M5PQ"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
@@ -183,12 +184,8 @@ <h3>Social</h3>
     <script src="assets/js/main.js"></script>
     <script src="assets/js/contentMD.js"></script>
     <script src="assets/js/visitors.js"></script>
-    <script src="assets/js/gaapi.js"></script>
-    <script src="assets/js/vanta.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
     <script>
     var check = $("input[type='checkbox']");
       check.click(function(){

diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,33 @@
+<html>
+<head>
+    <title>Back-end Portfolio Web, CMK</title>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, user-scalable=no"
+    />
+    <link rel="stylesheet" href="main.css"/>
+    <script type="module" src="test.js"></script>
+</head>
+<body>
+
+    <div id="loading">
+        <div>
+            <div class="animate-me">cmk's web.portfolio</div>
+            <div class="animate-me">portfolio.cmk's web</div>
+            <div class="animate-me">cmk's web.portfolio</div>
+            <div class="animate-me">portfolio.cmk's web</div>
+            <div class="animate-me">cmk's web.portfolio</div>
+            <div class="animate-me">portfolio.cmk's web</div>
+            <div class="animate-me">cmk's web.portfolio</div>
+            <div class="animate-me">portfolio.cmk's web</div>
+            <div class="animate-me">cmk's web.portfolio</div>
+            <div class="animate-me">portfolio.cmk's web</div>
+        </div>
+    </div>
+
+    <div>asdasdasd22222</div>
+
+
+</body>
+</html>
diff --git a/test/main.css b/test/main.css
@@ -0,0 +1,24 @@
+#loading{
+    background-color: #222;
+    color: #fff;
+    font-weight: 400;
+    font-size: 2vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    text-transform: uppercase;
+    font-family: "Khula", sans-serif;
+    height: 100%;
+    box-sizing: border-box;
+    letter-spacing: 6px;
+    margin: 0;
+    line-height: 100%;
+    z-index: 999;
+} #loading  span {
+        display: inline-block;
+}
+
+
+
+
diff --git a/test/test.js b/test/test.js
@@ -0,0 +1,39 @@
+import Letterize from "https://cdn.skypack.dev/[email protected]";
+import anime from "https://cdn.skypack.dev/[email protected]";
+
+
+window.addEventListener("load", function() {
+    var loading = document.getElementById("loading");
+
+    const test = new Letterize({
+        targets: ".animate-me"
+    });
+
+    const animation = anime.timeline({
+        targets: test.listAll,
+        delay: anime.stagger(100, {
+            grid: [test.list[0].length, test.list.length],
+            from: "center"
+        }),
+        loop: true,
+        duratiom: 3000
+    });
+
+    animation
+    .add({
+        scale: 0.5
+    })
+    .add({
+        letterSpacing: "10px"
+    })
+    .add({
+        scale: 1
+    })
+    .add({
+        letterSpacing: "6px"
+    });
+
+    setTimeout(function() {
+        loading.style.display = "none"; // 3초 후에 애니메이션 정지
+    }, 10000);
+});