元智大學資訊傳播學系　第 30 屆畢業展

鏡界面

MIRROR SURFACE

參展作品

目前沒有公開作品。

FOR THE NEXT PERSON

這份不是展覽文案，是交接筆記。前台現在刻意做得很乾，特效都拔掉了。你要加動畫、3D、平滑捲動都可以，先把下面看完再動手，比較不會把自己搞死。

元智資傳 30 屆畢業展網站，暫時叫「鏡界面」。前台給觀眾看作品跟展覽資訊，作品資料都從 gradexhibit.tech 的 API 讀，後台在 gradexhibit.tech 管。展名、文案、視覺都還可能改，所以標題不要寫死在十個檔案裡，改 src/config/site.ts。

用 pnpm，不要用 npm。終端機進專案資料夾後打這些：

pnpm install
cp .env.example .env
# 把 GRADEXHIBIT_API_KEY 填進 .env
pnpm dev

瀏覽器開 http://localhost:4321。

GRADEXHIBIT_API_KEY 由 gradexhibit.tech 的 SUPER_ADMIN 在 API key 管理頁建立。後台是 gradexhibit.tech/login，這個網站的 /login、/studio 會直接導過去。

Astro 7: 頁面是 .astro。能靜態就靜態，不要整站做成 React App。
React: 只有要互動的元件才用，例如表單。在 Astro 裡要加 client:load 才會在瀏覽器跑。
pnpm: 套件管理。裝東西用 pnpm add 套件名。
Tailwind 4 + shadcn / Base UI: 樣式用 class。按鈕、輸入框在 src/components/ui/，要做表單請沿用，不要自己再做一套醜 input。
gradexhibit.tech API: 作品資料來源（唯讀）。所有存取都在 src/lib/gradexhibit.ts，頁面用 src/lib/works.ts。

作品新增、修改、權限都在 gradexhibit.tech 處理，這個網站只負責顯示。展覽時間地點在 src/config/site.ts 的 highlight 手動改。

下面四個都還沒進專案。想用再裝。一次不要全裝，先想清楚要解決什麼問題。裝法都是 pnpm add 套件名。

讓滾動變滑。一般瀏覽器滾動有點頓，Lenis 會把捲動做成比較順的慣性。首頁變長、有分區進場時很好用。它不管畫面長怎樣，只負責「捲動手感」。

什麼時候裝：你開始做長頁、錨點滾動、跟捲動連動的動畫。

什麼時候別裝：頁面還很短，或你根本沒在做滾動效果。

動畫的瑞士刀。進場、時間軸、捲到某段才播，都是它。官網的 ScrollTrigger 幾乎是做作品集網站的標準件。文件很多，先看 Getting Started，不要一開始就複製一堆 timeline。

什麼時候裝：標題要進場、作品卡要 stagger、捲動要釘住某段。

在 Astro 裡：動畫邏輯寫在 React 元件或 <script>，記得元件卸載時 kill()，不然會漏記憶體。

在網頁裡畫 3D。凸面鏡、空間、粒子都靠它。它很重：手機容易熱、檔案會變大、debug 也比較痛。我們試過放在首頁，後來拿掉了，因為還沒打磨好看。你要加 3D，先做一個獨立元件，不要綁死整站。

什麼時候裝：確定主視覺一定要 3D，而且你願意花時間調光線跟效能。

什麼時候別裝：只是想讓網站「看起來比較厲害」。2D 做好看遠比爛 3D 有用。

以前叫 Framer Motion。跟 React 最合，按鈕、列表、頁面切換的小動畫很好寫。比 GSAP 更接近「寫元件」，比 CSS 好處理進場／離場。後台或作品卡 hover 這類 UI 微互動，優先考慮它。

什麼時候裝：React 元件需要進場、layout 切換、手感比較彈的 hover。

跟 GSAP 不要混在同一個元件樹上亂打，選一個當主工具就好。

不要只滑 Dribbble 截圖。打開電腦、縮放視窗、看別人怎麼排字跟留白。

awwwards.com
蒐集被認真做好的網站。搜 Site of the Day、Exhibition、Portfolio。重點看：第一屏說了什麼、字級差多少、手機版怎麼收。看完試著講出「我要偷哪個結構」，不要整頁複製。
responsive-jp.com
日本那邊整理的 RWD 範例。畢業展網站常常要同時顧桌機跟手機，這裡很適合看別人斷點切在哪、選單怎麼收。請真的拉瀏覽器寬度，不要只看靜態圖。