Update for 工人大會

index.html

@@ -8,12 +8,12 @@
     <meta
       name="description"
       content="Web site created using create-react-app" />
-    <link rel="apple-touch-icon" href="logo192.png" />
+    <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="/manifest.json" />
+    <!-- <link rel="manifest" href="/manifest.json" /> -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link

src/App.css

@@ -1,3 +1,7 @@
+body {
+  background-color: #D1E0F3;
+}
+
 .App {
   text-align: center;
 }
@@ -37,3 +41,38 @@
     transform: rotate(360deg);
   }
 }
+
+.preloader > div {
+  /* background-color: #72c2a1; */
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 5px;
+  animation: stretchdelay 0.7s infinite ease-in-out;
+}
+
+@keyframes stretchdelay {
+0%, 40%, 100% { 
+    transform: translateY(0px);
+}
+20% {
+    transform: translateY(-10px);
+}
+}
+
+.preloader .circ1 {
+  animation-delay: 0;
+}
+
+.preloader .circ2 {
+  animation-delay: 0.1s;
+}
+
+.preloader .circ3 {
+  animation-delay: 0.2s;
+}
+
+.preloader .circ4 {
+  animation-delay: 0.3s;
+}

src/App.jsx

@@ -1,61 +1,29 @@
-import React, { useRef, useEffect } from "react";
-import Nav from "./pages/Nav";
-import Project from "./pages/Project";
-import BlogPage from "./pages/BlogPage";
-import About from "./pages/AboutPage";
+import React, { useEffect } from "react";
 import Home from "./pages/Home";
-import Footer from "./pages/Footer";
-import { BrowserRouter, useLocation } from "react-router-dom";
+import Footer from "./pages/components/Footer";
+import { BrowserRouter, Route, useLocation, Routes } from "react-router-dom";
 import "./App.css";
-
-function ScrollToAnchor() {
-  const location = useLocation();
-
-  useEffect(() => {
-    const hash = location.hash;
-    if (hash) {
-      const element = document.getElementById(hash.slice(1));
-      if (element) {
-        element.scrollIntoView({ behavior: "smooth" });
-      }
-    }
-  }, [location]);
-
-  return null;
-}
+import Loading from "./pages/components/loading";
+import ProjectPage from "./pages/projects/ProjectPage";
+import PuzzleGame from "./pages/components/PuzzleGame";
 
 function App() {
-  const homeRef = useRef(null);
-  const projectRef = useRef(null);
-  const blogRef = useRef(null);
-  const aboutRef = useRef(null);
-
-  const scrollTo = (elementRef) => {
-    elementRef.current?.scrollIntoView({ behavior: "smooth" });
-  };
-
+  const [blogRef, setBlogRef] = React.useState(null);
   return (
     <BrowserRouter>
-      <div className="">
-        <Nav
-          scrollTo={scrollTo}
-          refs={{ homeRef, projectRef, blogRef, aboutRef }}
-        />
-        <ScrollToAnchor />
-        <main>
-          {/* <section id="home" ref={homeRef}>
-            <Home />
-          </section> */}
-          <section id="blog" ref={blogRef}>
-            <BlogPage />
-          </section>
-          {/* <section id="project" ref={projectRef}>
-            <Project />
-          </section> */}
-          <section id="about" ref={aboutRef}>
-            <About />
-          </section>
-        </main>
+      <div>
+        <Routes>
+          <Route
+            path="/"
+            element={
+              <main>
+                <Home />
+              </main>
+            }
+          />
+          <Route path="/projects/:id" element={<ProjectPage />} />
+          <Route path="/puzzle_game" element={<PuzzleGame />} />
+        </Routes>
         <Footer />
       </div>
     </BrowserRouter>

src/data/1.jsx

@@ -0,0 +1,26 @@
+export function Component() {
+  return (
+    <div>
+      <p>
+        主要希望使用者可以透過此網站找到適合自己抒發情緒的方式，並以不帶來更多壓力為前提。
+      </p>
+      <p>網頁主要提供以下內容：</p>
+      <ul>
+        <li>1. 輕鬆有趣的前導測驗。</li>
+        <li>2. 推薦抒發情緒的地點。</li>
+        <li>3. 簡單AR互動。</li>
+        <li>4. 留言板。</li>
+      </ul>
+    </div>
+  );
+}
+
+export function Motive() {
+  return (
+    <div>
+      <p>
+        看到一位葡萄牙藝術家為城市做了一張哭泣地圖，覺得用不同角度去看城市這點很新奇、很有趣。經過多次討論後衍生成想做一份提供人們抒發情緒、找回自己的地圖，因此取名為「在生活中迷路了」。
+      </p>
+    </div>
+  );
+}

src/data/10.jsx

@@ -0,0 +1,23 @@
+export function Component() {
+  return (
+    <div>
+      <p>
+        本專題特色在於採用更具體化指標, 以性格形容詞分辨適合科系,更準確判定,
+        以考慮校風,具體行為表現及個人情況進行分析並運用ai提升精確度,
+        更有互動性和趣味,
+        以遊戲作為媒介並整合其它升學資訊如ioh等以方便使用者進一步分析
+      </p>
+    </div>
+  );
+}
+
+export function Motive() {
+  return (
+    <div>
+      <p>
+        曾經作為高中生一員的我們也曾受到升學問題困擾,
+        所以是次專題動機就是希望借專題讓未來的高中生們不再為此而煩惱
+      </p>
+    </div>
+  );
+}

src/data/11.jsx

@@ -0,0 +1,33 @@
+export function Component() {
+  return (
+    <div>
+      <p>本專題為一款適用於高齡族群的情境式台語學習平台，內容包含：</p>
+      <ul>
+        <li>1. 介面設計：簡潔明瞭，搭配鮮明圖樣與防呆機制，操作簡易。</li>
+        <li>
+          2.
+          情境式學習：藉由本平台真實情境的場景模擬，並透過聽與說的練習，讓使用者更貼近生活中的常見用語，提升趣味性與應用性的同時可促進學習遷移，讓使用者更具學習動力。{" "}
+        </li>
+        <li>
+          3.
+          語音評分：針對使用者錄音進行判斷給予星等評分，讓使用者自我檢視學習情況並加強自我學習。{" "}
+        </li>
+        <li>
+          4. 響應式設計：藉由網絡世界的串接，使得多個媒介都可使用本平台。
+          藉由上述特點，增強與高齡族群的學習互動及平台實用性，望使用者使用本專題之情境式台語學習平台能助於提升學習效益，並達終身學習。
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+export function Motive() {
+  return (
+    <div>
+      <p>
+        台灣已於2018年成為高齡社會，面對銀髮族平均壽命延長的情況，除照顧資源不敷使用外，終身學習亦需要重視，銀髮族透過學習因應生活並提升自主能力，更是「成功老化」(successful
+        aging)的重要關鍵。透過與銀髮族本人及銀髮族照顧機構之照顧人員的訪談，了解到銀髮族對於人際互動溝通特別重視，對語言學習也有較多興趣，其中銀髮族熟悉的本土語言──台語，更是他們生活經驗中經常使用的。目前台灣的台語資源網大多著重在單字介紹與拼音念法這兩大面向，無法結合生活中日常用語、語句進行搭配學習，與實際生活應用脫節，因此根據銀髮族對語言學習的興趣與不願意嘗試新事物特性，以及現有台語學習資源的不足，我們希望打造情境式銀髮族台語學習平台，將銀髮族所熟習的台語，與現實生活情境相呼應的教學設計進行結合，讓其更符合實際社交溝通的應用，使銀髮族更容易接受，進行再學習，吸引銀髮族的學習興趣並增加主動學習的動機，以此促進銀髮族在高齡社會中的終身學習。
+      </p>
+    </div>
+  );
+}

src/data/12.jsx

@@ -0,0 +1,22 @@
+export function Component() {
+  return (
+    <div>
+      <p>
+        虛擬實境技術在數位教學領域扮演重要角色，並有許多相關研究和可行性探討。然而，目前在生活科技課程中尚未廣泛應用。本專題計畫預計將虛擬實境(VR)結合專家系統，製作一款幫助學習者熟悉木工製作及其原理的學習情境。透過虛擬實境，學習者可獲得身歷其境且互動性強的學習體驗，並由專家系統構建更專業的學習環境，特別是在木工製作、工具應用與工業安全的學習過程中。虛擬實境讓學習者能實際參與虛擬環境中的木工製作過程，深入了解相關應用與原理，專家系統則能引導學生更有效地提升學習成效。這種數位教學方法能激發學習動機，使學習者更積極參與學習，提升效果。引入虛擬實境技術有助於降低真實環境中的風險，減少器材消耗和空間需求，同時由專業人士構建專家系統，提供學生專業需求，避免因資源不足或專業人員稀缺導致的學習差異。此方法不僅為學生提供安全、便捷且專業的學習環境，還有助於節省資源和成本，體現現代教育科技的可持續發展。
+      </p>
+    </div>
+  );
+}
+
+export function Motive() {
+  return (
+    <div>
+      <p>
+        現如今虛擬實境早已於教育界佔據了一席之地，而寓教於樂更是現代教學中不可或缺的一部份，但是在生活科技的領域中，尚有許多知識能藉此技術去進行更加深入的研發和教學內容。
+      </p>
+      <p>
+        因此本專題希望藉由將現實中的生活科技常見的加工機具，以放入虛擬實境世界中的方式，讓同學們以一人一台獨立教學的方式，來實現更為深入的機具接觸和更為詳盡的知識解說，並同時結合專家系統，使其能夠針對學生現有學習上的問題去進行特定的教學講解，以期最終能達成透過事先接觸虛擬實境中的加工機具，來為同學們進行更為完善且有趣的實作前教學，使同學們未來能夠更有信心和興趣來面對生活科技這門學科。
+      </p>
+    </div>
+  );
+}