Merge pull request #80 from gdsc-ncku/zhihao

add: LetterToHighSchoolStudents Page

src/components/Letter.vue

@@ -0,0 +1,35 @@
+<template>
+  <RouterLink
+    :to="link"
+    class="h-[18rem] w-[22rem] block rounded-lg pt-[6rem] group overflow-hidden last:mr-auto"
+  >
+    <div class="w-full h-[12rem] relative isolate bg-primary-900">
+      <div class="group-hover:hidden w-full h-[2rem] absolute top-0 bg-primary-700"></div>
+      <div class="group-hover:hidden absolute top-[2rem] w-0 h-0 border-[#0000] border-x-[11rem] border-y-[4rem] border-t-primary-700"></div>
+      <div class="group-hover:hidden z-[-1] w-full h-[2rem] top-[0.1rem] absolute top-0 bg-[#FFF]"></div>
+      <div class="group-hover:hidden z-[-1] absolute top-[2.1rem] w-0 h-0 border-[#0000] border-x-[11rem] border-y-[4rem] border-t-[#FFF]"></div>
+      <div class="absolute bottom-4 right-3 text-xl font-bold text-white">FROM {{ name }}</div>
+      <div class="hidden group-hover:block absolute top-[-12rem] w-0 h-0 border-[#0000] border-x-[11rem] border-y-[6rem] border-b-primary-900"></div>
+      <div class="hidden group-hover:block absolute w-[20rem] h-[6rem] bg-[#FFF] top-[-3rem] left-[1rem] border-primary-900 border-[0.1rem] rounded-t">
+        <div class="absolute w-[90%] h-[0.1rem] left-[5%] top-[1.5rem] bg-[#CCC]"></div>
+        <div class="absolute w-[90%] h-[0.1rem] left-[5%] top-[3rem] bg-[#CCC]"></div>
+        <div class="absolute w-[90%] h-[0.1rem] left-[5%] top-[4.5rem] bg-[#CCC]"></div>
+      </div>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  link: {
+    type: String,
+    required: true,
+  }
+});
+</script>

src/data/letterToHighSchoolStudents.json

@@ -1,18 +1,20 @@
 [
   {
     "id": "article1",
-    "title": "文章的標題1",
-    "author": "侯智薰（雷蒙）",
-    "tags": ["標籤1", "標籤2"],
-    "content": "lorem ipsum lorem ipsum lorem ipsum",
-    "related_department": "中國文學系"
+    "title": "薛宇志",
+    "author": "薛宇志",
+    "content": "<p>我在 2011 年進到成大化工系，開學的第一天，抱著成為一名優秀工程師的雄心壯志踏進了成大自強校區（化工系館所在之處）。然而，後來展開的故事，都是原本不在計劃內，但更為嚮往的。<br><br>剛進入大學的生活，第一要務就是不斷地探索。什麼都想嘗試，什麼都不想錯過，因為這是人生中短暫的階段，讓你擁有控制自己完整 24 小時的權利，這 24 小時完全依照你的自主意識安排，沒有過多的外力參與，現在回過頭看，那一段日子是真的『自由』，是一種熱血青春的記憶。<br><br>我在大一的時候，就希望找點不同的事情做，豐富課業以外的大學生活，因緣際會下，我加入了一個國際學生組織 AIESEC，一個成立於二次世界大戰之後的學生組織，也是當時唯一個隸屬於聯合國之下的學生組織。自此，我對於後續的職涯有了不同的眼界與想法，透過與不同國家的學生交流，學習不同的文化與建立國際觀，同時也透過舉辦活動、擔任幹部，來學習實務上如果帶領團隊並且與不同價值觀的人合作，這些寶貴的經驗都讓出社會的我受用無窮。我也因此陷入了社團狂熱，整整待在這個組織五年，第四年的時間甚至選上了台灣總會的幹部，到台北辦公室全職工作了一年，帶領了十九個大學分會與各大企業接洽，共同執行專案，也因為這份熱愛，改變了我原本的職涯軌跡，發現我真心喜歡的工作內容與領域。<br><br>當時延畢一年是個重大的選擇，對我或是我的家人都是，但現在回想，那是一個最對的決定。我一直相信，人生沒有一定要照個某個特定的步調走，唯獨走得開心，那才是人生意義。為自己的選擇負責，勇於承擔，都會有所成長的。至少那一年的我是這樣告訴自己的，還好十年後的我也還認同當時的決定。對了，從台北回成大把學分修完的那一年，每個學期都要修到25學分（大概跟大一入學時一樣，完全沒有大五生該有的餘裕），整學年的所有課程幾乎都在同一個系館度過，我想這應該算是扎扎實實地為了自己的選擇負責了吧...<br><br>畢業後當了一年兵，退伍後不久，加入了一間品牌顧問公司，公司不大，因此每個人的負責事項很廣，也有機會接觸到不同國家的同事與客戶，除了把我在社團所學的經驗都再度用上之外，也多了很多學習的機會，像是如何用更高的格局來看待問題，永遠鼓勵自己用主管的視角來做評斷，學習如何做出成熟的決策與有效率的解決問題，把自己跟大你五歲的前輩做比較，缺乏的技能，有意識的補齊，缺乏的經驗，有野心的爭取。這必定確保你不斷地在進步，在成長。<br><br>2022年，我加入了一間軟體顧問公司- beBit TECH (微拓科技)，原先是日商管顧公司，後來合併了一間軟體公司，進而有了自己的軟體產品，近期也有了上市的規劃。在這裡遇到很多過去不曾見過的複雜問題，有些與產品相關，有些與跨部門合作相關，而正因為這些困難，讓工作充滿了挑戰性，培養了如何解決複雜問題的思路與做法，也深刻地了解到每個人的能力並非單指他所會的技能，而是包含了所有他可以接觸的資源、認識的人、執行過的專案等，這一切的加總才是能力的體現，絕對不是一個人埋頭苦幹。也因為這些經驗，讓自己的眼光可以放得更遠，想得更廣，這樣的心態也確實賦予每一天的工作更多的願景。人生很短，但工作的時間很長，選擇自己有興趣的事，就會是職涯最好的投資。<br><br>最後，想跟正在準備升學的你/妳分享，我認為讀書與學業成績並非一切，但仍要付出自己不會後悔的努力，每當盡力之後，就樂觀地看待結果，因為在某些事情上，過程確實是比結果更重要。此外，找到自己想做的事、想認識的朋友、想參與的活動、想過的人生。每當迷惘了，請確保自己是往讓自己變得更好的路上走去。See you on the road!</p>"
   },
   {
     "id": "article2",
-    "title": "文章的標題2",
-    "author": "張人杰",
-    "tags": ["標籤1", "標籤2"],
-    "content": "lorem ipsum lorem ipsum lorem ipsum",
-    "related_department": "政治學系"
+    "title": "陳韋宏",
+    "author": "陳韋宏",
+    "content": "<p><h3>【自身經歷介紹】</h3>各位學弟妹大家好，我是成功大學學士學位學程暨化工系105級的畢業生陳韋宏，現任於日本栗田工業株式會社的技術顧問職（東京本社）。因受成大單車節學術部的活動邀約，想和各位學弟妹分享大學以來的心路歷程。<br><br>在上大學以前我是比較書呆子類型的學生，被問才藝大概會回答「讀書跟考試」那種程度，也因此剛面對繽紛而複雜的大學生活，實際是有些不知所措的。然而在成大提供的項目中我實現了人生第一次的出國夢，之後便一心鑽研各種出國的機會，四年先後公費拜訪了德國、荷蘭、新加坡、香港、美國，畢業後因為對日本傳統工藝的憧憬而至日本東京工業大學進修碩士，除了曾獲扶輪社獎學金資助，也透過研究所訪問過越南以及擔任過日本慶應義塾大學的研究員。畢業後因為感受人們對於環境意識的崛起以及海外拓展的機會，我入職了日本最大的水處理技術公司，栗田工業株式會社，目前從事海外業務相關的技術顧問。<br><br>我相信每個人的經歷都是特殊的，所以在個人的詳細經歷上不會有太多著墨，而會側重在通用型的概念與經驗傳承，如果能給耐心閱讀這封信的後輩們一點啟發，對於畢業生的我來說還是非常幸福的一件事情，也期待未來能讀到學弟妹們的故事。<br><br><h3>【給高中生關於高中及大學的建議】</h3>人生體驗：了解自己是怎麼樣的人。多去做不同嘗試，不管是課業、實習、旅遊、社團活動、認識不同的人甚至談戀愛，我認為本質都是「認識自己」的過程，比如參加了業界的實習，除了對該產業更加了解外，這個業界的薪資待遇（例如你知道台灣平均薪資前三高的業界是哪些嗎？）、工作型態（朝九晚五或隨叫隨到型）自己是否能接受的都可以先考慮清楚。抑或是談了戀愛才知道：一個人身上哪些優點是自己喜歡的、或是哪些缺點是自己不能接受的，尤其戀愛這件事我發現每個人都存在很大的認知落差，這些都是沒有嘗試過不會知道的。<br><br>知識技能：經歷不同的嘗試後，找出自己最最喜歡的領域，哪怕只是一個小分野，徹底地研究它、搞懂它。這件事情對於你一生的幫助絕對會超乎想像。（不限於學校的專業領域）<br><br><h3>【若重來一遍學生時光，會做哪些改變？】</h3>第一是常常思考自己想要什麼，其實很多人當下的糾結很大程度源於不清楚自己想要什麼，比如要不要出國讀書、要不要轉系、甚至要不要休學去做什麼事情，這時候可以換個角度 ，比如出國讀書其實長遠來說可能跟就業或者生活綁在一起，那就可以再想想未來我是不是願意在這個國家工作與生活，真的糾結的時候可以嘗試這種「以終為始」的思考方式。<br><br>第二是試著把自己的感受放在首位，由於我是典型的高敏感型人格（Highly Sensitive Person, HSP），很容易不自覺因別人的三言兩語而陷入內耗，但長大後我開始試著把重心放回自己身上。因為高敏感族群很容易體察別人的情緒與需求，所以我可以很照顧身邊的人，但相對會告訴自己我對別人好是因為我是好人，一旦判定對方不值得我也會毫不猶豫將對方從我生命中移除，在能夠在圓滑與鐵腕之中隨時切換。<br><br><h3>【關於工作的選擇】</h3>雖然知道工學院不少畢業生去了「科技業」，但我清楚知道科技業的工作模式不是我喜歡的。所以我很早就是考慮「傳產」相關的業界，而我認為日本傳產領域做得又比台灣成熟且更全球化，所以選擇留在日本。另外我又希望在這基礎上有「革新」的能力，也就是將來還有機會再火一把的業界，考量當前時代背景：環保意識抬頭、綠能需求上升、經濟成長不再是人們唯一關注焦點，我選擇了跟自身專業最相關的水處理業界，看著公司每年的業務成長以及大膽卻務實的革新目標，雖然速度不能說快，但確實走在了穩健的成長道路上。<br><br><h3>【未來的產業發展發向】</h3>我認為不管是哪個業界，「ＡＩ協同工作」、「大數據分析」」會是未來的主要議題。實際上ＡＩ很多機能都還沒被很好地使用或者開發出來，就像過去人們怕工作被機器取代，但現在我們看到的基本都是人機合作的工作與生活模式，我也相信未來多數業界的主流會是人們跟ＡＩ一同工作。再來是大數據分析，過往的企業專案可能很多是憑主觀感覺去抓趨勢而下結論，但隨著各種計算器的數據分析能力上升，過去難以被定量化的各種問題都開始一一被突破，可以想像未來職業工作者將被要求更理性且定量地去分析問題之後求得結論。<br><br>另外隱藏的一點是關於「多元價值與包容（Diversity and Inclusion）」，其實每個人對工作的想法各有不同，可能有人是為了養家餬口、有人是為了個人價值實現、當然也有只想輕鬆過日子的人，加上不少企業的外籍工作者也有增多的趨勢，也帶來更多不同的價值觀，未來職場怎麼樣體現多元價值與包容，可能在長遠來說會影響各公司的戰力。<br><br><h3>【大學或企業對學生的意義是什麼？】</h3>回顧下來，不管是學校、公司乃至於留學國家，我認為對於個人最大的意義是「提供了怎麼樣的平台與資源」，比如在成功大學我可以透過申請不同的企劃案每年都去不同國家的學術機構進行訪問、在東京工業大學的時候我可以透過海外活動認識了各地頂尖理工大學的學生或者進行企業共同研究專案，而透過現在的公司我可以跟海外數十個國家的人接觸，進而以更大地維度推動社會上的可持續發展（Social sustainability）相關的專案，中間也認識各種不同的人、學習到了不同的思維與想法，這對我來說是最寶貴的東西。<br><br><h3>【職場中必備的軟實力】</h3>一言以蔽之的話：「溝通技巧與自身實力」。日語裡的工作叫做「仕事（しごと）」，我認為這詞的語境非常高。因為「仕」指的就是人，「事」指的是事情本身，對我而言一切「工作」的本質都是「透過『人』把『事情』辦好」。在職場上（尤其大企業），每個部門乃至於每個人的分工都是非常明確的，這也意味著每個人都掌握著不同「資源」：可能是物資、技術、經費甚至於關鍵時的一個授權，但要如何讓每個人願意提供自己手上的資源為我所用就是一門學問。雖然不是職場，但我遇過最貼切地例子便是因為不懂韓語去韓國購物的時候吃了不少啞巴虧，結果麻煩首爾當地的朋友，人家親切地跟老闆閒聊幾句後，老闆不僅舉起大拇指稱讚，還給我們打了一個不小的折扣…其實類似的例子在職場上也是常常遇到，很多時候人家願意幫忙不外乎三個原因：①份內工作不便推辭、②你有硬實力（職位或者對方同樣想要的資源，俗稱等價交換）、③你有軟實力（有私交或至少覺得跟你相處開心），如果這三點都不成立你可能就會發現你調動資源的難度變得非常高，想做的事情也變得更加難以實現。</p>"
+  },
+  {
+    "id": "article3",
+    "title": "古念華",
+    "author": "古念華",
+    "content": "lorem ipsum lorem ipsum lorem ipsum"
   }
 ]

src/views/Souvenir.vue

@@ -45,7 +45,7 @@ const data = [
   {
     name: "御守",
     price: "$120/個",
-    designConcept: "設計理念",
+    designConcept: "成大單車節學業順利御守，帶著滿滿的祝福，祝福你能夠順利考上理想校系！",
     img: [
       "/BikeFestival17th-Frontend/souvenir/LINE_ALBUM_紀念品_240223_2.jpg",
       "/BikeFestival17th-Frontend/souvenir/LINE_ALBUM_紀念品_240223_3.jpg",

src/views/forum/LetterToHighSchoolStudents.vue

@@ -1,12 +1,41 @@
 <template>
   <Breadcrumb />
   <div class="layout_content">
-    <div class="text-4xl font-bold mb-8">給高中生的一封信</div>
-    <WorkInProgress />
+    <div v-if="$route.params.letter === undefined" class="my-8 flex flex-wrap justify-between gap-12 items-center sm:flex-row flex-col">
+      <Letter
+        v-for="data in letterToHighSchoolStudents"
+        :name="data.author"
+        :link="`letterToHighSchoolStudents/${data.id}`"
+      />
+    </div>
+    <div v-else>
+      <div
+        class="w-full py-12 px-8 bg-white shadow-md mb-16 rounded bg-contain bg-repeat-y"
+        style="background-image: url('/BikeFestival17th-Frontend/forum_page/letter-note-texture.png');"
+      >
+        <!-- <div class="font-bold text-3xl text-content mb-8">{{ data.title }}</div> -->
+        <!-- <img class="w-[500px] mx-auto my-8" src="/forum_page/LetterToHighSchoolStudents.webp"> -->
+        <p class="text-sm">To 各位高中生們,</p>
+        <br>
+        <div v-html="data.content" class="sm:px-16 text-sm"></div>
+        <br>
+        <p class="text-sm text-right">From {{ data.author }}</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import Breadcrumb from '@/components/Breadcrumb.vue';
-import WorkInProgress from '@/components/WorkInProgress.vue'
+import Letter from '@/components/Letter.vue';
+import letterToHighSchoolStudents from '@/data/letterToHighSchoolStudents.json';
+
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const data = letterToHighSchoolStudents.find(
+  v => v.id == route.params.letter
+);
+
 </script>