鐵人檔案
本系列文章將帶領讀者從零開始，使用純前端技術（HTML5、CSS3、Vanilla JavaScript）打造一個名為「賽博紓壓診所」的互動心理測驗網頁。
內容涵蓋：結合 Web Audio API 的動態互動音效、Rage Click 壓力消滅小遊戲、廟宇抽籤盲選、即時心電圖暴走特效、Canvas 六角形能力雷達圖，以及惡搞病歷戳章動畫與匿名發洩牆。
除了技術實作，也融入了多國語系與日夜模式切換，希望透過這 30 天的實作分享，帶大家用程式碼創造一個兼具娛樂性與療癒感的網頁作品！
前言老實說，最近只要想到離出社會的時間越來越近，心裡的煩惱跟對未來的迷茫就直線上升。每天睜開眼睛就是面對寫不完的程式碼、各種專題死線，還有同儕之間那種無形的比較...
前言昨天跟大家聊完為什麼想做「賽博紓壓診所」這個專題後，今天我們終於要來動手寫程式啦！ 老實說，剛開始學前端的時候，看到很多酷炫的網頁，第一直覺都是想去網路上找...
前言昨天我們把「賽博紓壓診所」的 HTML 骨架搭好了。但老實說，打開瀏覽器一看，白底黑字的畫面看起來簡直就像遠古時代的佈告欄，完全跟「賽博（Cyber）」這兩...
前言昨天我們幫「賽博紓壓診所」加上了日夜切換功能，版面瞬間有了科技感。但是當使用者點擊「進入紓壓診所」準備做測驗時，如果畫面只是瞬間切換過去，會顯得有點生硬。...
前言在前幾天的文章裡，我們陸續把「賽博紓壓診所」的 HTML 骨架、CSS 變數、日夜模式以及呼吸燈過場動畫都刻出來了。 回想在 Day 02 提過的 SPA（...
前言在前幾天，我們陸續把「賽博紓壓診所」的排版、日夜模式、呼吸燈過場以及 SPA 單頁切換架構都搞定了！ 但是大家不覺得，如果一進到首頁，每個人看到的畫面都長得...
前言不知不覺，我們的 30 天鐵人賽已經順利走完第一個星期了！ 回頭看看前六天，我們從一個單純想幫自己與同儕找出口的念頭出發，一步步用純前端的技術刻出「賽博紓壓...
