jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 新增 color-tokens 規範文件

Browse Source
This commit is contained in:
jekkinoopy
2026-06-11 15:34:47 +08:00
parent b0cb52fec9
commit 945adc79f6
60 changed files with 17908 additions and 17842 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extra/Untitled-1.html
+45 -45
View File
@@ -1,46 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<div class=" container">
<div class="container21">
<img src="../assets/images/totoga2/jpg/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_01.jpg" alt="">
</div>
<div class="container22">
</div>
</div>
<div class="container">
<div class="container31">
img[s]
</div>
<div class="container32">
img[s]
</div>
<div class="container33">
img[s]
</div>
</div>
<div class="container">
<div class="container41">
img[s]
</div>
<div class="container42">
img[s]
</div>
<div class="container43">
img[s]
</div>
<div class="container44">
img[s]
</div>
</div>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<div class=" container">
<div class="container21">
<img src="../assets/images/totoga2/jpg/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_01.jpg" alt="">
</div>
<div class="container22">
</div>
</div>
<div class="container">
<div class="container31">
img[s]
</div>
<div class="container32">
img[s]
</div>
<div class="container33">
img[s]
</div>
</div>
<div class="container">
<div class="container41">
img[s]
</div>
<div class="container42">
img[s]
</div>
<div class="container43">
img[s]
</div>
<div class="container44">
img[s]
</div>
</div>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
extra/grok.html
+1 -1
View File
@@ -123,7 +123,7 @@
<p>官方應援色 <span class="mark_b">黃色</span> 與粉絲名 <span class="mark_b">YELLOWKIES</span> 依然是他們最堅強的後盾。</p>
<p>無論時間過去多久，這六顆水晶永遠閃耀在韓流歷史的天空。</p>
<br>
<p style="font-size:1.4rem; color:var(--yellow);">「謝謝你們一直陪伴，我們還在這裡。」</p>
<p style="font-size:1.4rem; color:var(--color-brand);">「謝謝你們一直陪伴，我們還在這裡。」</p>
</div>
</section>
extra/lyrics.html
+118 -118
View File
@@ -1,118 +1,118 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세 단어 (THREE WORDS) — SECHSKIES</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/lyrics.css">
<link rel="stylesheet" href="../assets/css/tablet.css">
</head>
<body class="lyrics-page">
<div class="lyrics-layout">
<h1>세 단어 (THREE WORDS)</h1>
<table class="lyrics-main-table">
<tr>
<td class="main-left">
<iframe width="560" height="315" style="aspect-ratio: 16 / 9; max-width: 100%; height: auto; min-height: 200px;"
src="https://www.youtube.com/embed/m7Zt_p9S-yg"
title="SECHSKIES - ‘세 단어 (THREE WORDS)’ M/V" allowfullscreen
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"></iframe>
<dl class="songInfo">
<dt>Artist</dt>
<dd>SECHSKIES</dd>
<dt>Album</dt>
<dd>2016 Re-ALBUM</dd>
<dt>Release Date</dt>
<dd>2016년</dd>
<dt>Genre</dt>
<dd>K-Pop</dd>
</dl>
</td>
<td class="lyrics-text-cell">
<p>다신 볼 수 없을 것만 같던<br>
그대가 내 앞에 서 있네요<br>
지킬 수 있을지 모르며 약속했던<br>
그 언젠가가 지금인 거군요<br>
단 하루도 널, 널 잊었던 적<br>
없다는 말은 거짓말이겠지만<br>
그대가 곁에 있지 않을 때 외로웠죠 (외로웠죠)<br>
한 순간도 널, 널 잊었던 적<br>
없다는 말이 무슨 의미겠어요<br>
지금 여기 우리 세 단어면 돼요<br>
I just wanna be with you<br>
내가 사는 이유<br>
다시는 멀리 가지 않을게요<br>
I'll always be here for you<br>
세월이 지난 후<br>
세상이 다시 우릴 갈라놔도<br>
떠나야만 해도<br>
멀리 있진 않을게요 uh<br>
참 멀리 멀리 멀리도 돌아왔네요<br>
지독한 세월과 세상에게 수없이 꺾이고 (꺾이고)<br>
발밑엔 낙엽이 뒤덮이고 이 야윈 모습이지만<br>
여기 여전히 그대 곁에 서있죠<br>
I missed you 한 순간도 편히 잠든 적 없어 (없어)<br>
잘 지낸 것 같겠지만 I missed you<br>
한 순간도 진짜 웃은 적 없어 (없어)<br>
한 순간도 널, 널 잊었던 적<br>
없다는 말이 무슨 의미겠어요<br>
지금 여기 우리 세 단어면 돼요<br>
I just wanna be with you<br>
내가 사는 이유<br>
다시는 멀리 가지 않을게요<br>
I'll always be here for you<br>
세월이 지난 후<br>
세상이 다시 우릴 갈라놔도<br>
떠나야만 해도<br>
멀리 있진 않을게요<br>
시간은 참 무섭게도 가네요<br>
붙잡으려 해도 잡히지 않을 거예요<br>
언젠가 다시 헤어지게 되어도<br>
여기 가까이 서있을게<br>
지금 여기 우리<br>
I just wanna be with you<br>
내가 사는 이유 (miss you baby)<br>
다시는 멀리 가지 않을게요 (가지 않을게요)<br>
I'll always be here for you<br>
세월이 지난 후<br>
세상이 다시 우릴 갈라놔도 (우릴 갈라놔도)<br>
떠나야만 해도 (떠나야만 해도)<br>
멀리 (멀리) 있진 않을게요<br>
멀리 있진 않을게<br>
</p>
</td>
</tr>
<tr>
<td class="lyrics-map-cell">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3163.2574996244366!2d126.9052587762962!3d37.54899662513289!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357c992bb3f6a887%3A0x6058954f87325221!2sYG%20Entertainment!5e0!3m2!1szh-TW!2stw!4v1776239000614!5m2!1szh-TW!2stw"
width="100%" style="aspect-ratio: 16 / 9; border: 0; border-radius: 10px; display: block; min-height: 200px;"
allowfullscreen loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</td>
<td class="lyrics-contact-cell">
<div class="contact">
<img src="https://ygfamily.com/home/assets/images/f_logo.svg" alt="YG Entertainment logo">
<h3>YG Entertainment</h3>
<p>
<i class="fa-solid fa-map-location-dot"></i> Huiujeong-ro 1-gil, Mapo-gu, Seoul, South Korea<br>
<i class="fas fa-globe"></i> <a href="https://www.ygfamily.com/"
target="_blank" rel="noopener noreferrer">https://www.ygfamily.com/</a><br>
<i class="fas fa-phone"></i> +82231421104
</p>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세 단어 (THREE WORDS) — SECHSKIES</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/lyrics.css">
<link rel="stylesheet" href="../assets/css/tablet.css">
</head>
<body class="lyrics-page">
<div class="lyrics-layout">
<h1>세 단어 (THREE WORDS)</h1>
<table class="lyrics-main-table">
<tr>
<td class="main-left">
<iframe width="560" height="315" style="aspect-ratio: 16 / 9; max-width: 100%; height: auto; min-height: 200px;"
src="https://www.youtube.com/embed/m7Zt_p9S-yg"
title="SECHSKIES - ‘세 단어 (THREE WORDS)’ M/V" allowfullscreen
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"></iframe>
<dl class="songInfo">
<dt>Artist</dt>
<dd>SECHSKIES</dd>
<dt>Album</dt>
<dd>2016 Re-ALBUM</dd>
<dt>Release Date</dt>
<dd>2016년</dd>
<dt>Genre</dt>
<dd>K-Pop</dd>
</dl>
</td>
<td class="lyrics-text-cell">
<p>다신 볼 수 없을 것만 같던<br>
그대가 내 앞에 서 있네요<br>
지킬 수 있을지 모르며 약속했던<br>
그 언젠가가 지금인 거군요<br>
단 하루도 널, 널 잊었던 적<br>
없다는 말은 거짓말이겠지만<br>
그대가 곁에 있지 않을 때 외로웠죠 (외로웠죠)<br>
한 순간도 널, 널 잊었던 적<br>
없다는 말이 무슨 의미겠어요<br>
지금 여기 우리 세 단어면 돼요<br>
I just wanna be with you<br>
내가 사는 이유<br>
다시는 멀리 가지 않을게요<br>
I'll always be here for you<br>
세월이 지난 후<br>
세상이 다시 우릴 갈라놔도<br>
떠나야만 해도<br>
멀리 있진 않을게요 uh<br>
참 멀리 멀리 멀리도 돌아왔네요<br>
지독한 세월과 세상에게 수없이 꺾이고 (꺾이고)<br>
발밑엔 낙엽이 뒤덮이고 이 야윈 모습이지만<br>
여기 여전히 그대 곁에 서있죠<br>
I missed you 한 순간도 편히 잠든 적 없어 (없어)<br>
잘 지낸 것 같겠지만 I missed you<br>
한 순간도 진짜 웃은 적 없어 (없어)<br>
한 순간도 널, 널 잊었던 적<br>
없다는 말이 무슨 의미겠어요<br>
지금 여기 우리 세 단어면 돼요<br>
I just wanna be with you<br>
내가 사는 이유<br>
다시는 멀리 가지 않을게요<br>
I'll always be here for you<br>
세월이 지난 후<br>
세상이 다시 우릴 갈라놔도<br>
떠나야만 해도<br>
멀리 있진 않을게요<br>
시간은 참 무섭게도 가네요<br>
붙잡으려 해도 잡히지 않을 거예요<br>
언젠가 다시 헤어지게 되어도<br>
여기 가까이 서있을게<br>
지금 여기 우리<br>
I just wanna be with you<br>
내가 사는 이유 (miss you baby)<br>
다시는 멀리 가지 않을게요 (가지 않을게요)<br>
I'll always be here for you<br>
세월이 지난 후<br>
세상이 다시 우릴 갈라놔도 (우릴 갈라놔도)<br>
떠나야만 해도 (떠나야만 해도)<br>
멀리 (멀리) 있진 않을게요<br>
멀리 있진 않을게<br>
</p>
</td>
</tr>
<tr>
<td class="lyrics-map-cell">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3163.2574996244366!2d126.9052587762962!3d37.54899662513289!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357c992bb3f6a887%3A0x6058954f87325221!2sYG%20Entertainment!5e0!3m2!1szh-TW!2stw!4v1776239000614!5m2!1szh-TW!2stw"
width="100%" style="aspect-ratio: 16 / 9; border: 0; border-radius: 10px; display: block; min-height: 200px;"
allowfullscreen loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</td>
<td class="lyrics-contact-cell">
<div class="contact">
<img src="https://ygfamily.com/home/assets/images/f_logo.svg" alt="YG Entertainment logo">
<h3>YG Entertainment</h3>
<p>
<i class="fa-solid fa-map-location-dot"></i> Huiujeong-ro 1-gil, Mapo-gu, Seoul, South Korea<br>
<i class="fas fa-globe"></i> <a href="https://www.ygfamily.com/"
target="_blank" rel="noopener noreferrer">https://www.ygfamily.com/</a><br>
<i class="fas fa-phone"></i> +82231421104
</p>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
extra/minister_ge.html
+242 -242
View File
@@ -1,243 +1,243 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水晶男孩推廣部｜視覺進化論：認真魔人的進化之路</title>
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="../assets/css/tablet.css">
</head>
<body class="home-page minister-page">
<header class="inner-page-header">
<div class="header-inner site-header-inner">
<h1 class="main-title">視覺進化論</h1>
<div class="subtitle-wrap">
<span class="sub-title">FROM CURIOSITY TO FULL-STACK</span>
</div>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<div class="container">
<div class="landing-intro">
<p>關於我：<span class="mark_b">把水晶置入生活，將熱愛驅動為進化的燃料</span></p>
</div>
<section id="intro">
<h2 class="section-title">跨越時空的開端</h2>
<div class="intro-tags" role="list">
<span class="hashtag-chip" role="listitem">#水晶傳教士</span>
<span class="hashtag-chip" role="listitem">#認真魔人</span>
</div>
<div class="intro-text">
<p class="intro-text">
這段旅程始於 2016 年 4 月，透過國民綜藝《無限挑戰》六六歌 2 的回歸企劃，讓原本不認識這組傳奇元祖偶像的我，因一時好奇點開節目。當我回頭回溯那段歷史，才發現他們在 2000
年巔峰解散時，我還未曾參與過那個屬於他們的世紀末。即便如此，隨著節目的鋪陳，我依然被那份熱血、真誠且專業的魅力所震撼，那些搞笑又感動的內容結束了我原本的低潮期，從此深陷其中。
</p>
<div class="slogan-quote slogan-quote--awakening">
<span class="slogan-quote__inner">這不只是追星的開始，更成為我自我覺醒的起點。</span>
</div>
<p class="core-description">
當年的節目剛播出，無數新粉集體淪陷，紛紛加入了「水晶廢人」的行列。
在那段瘋狂的歲月裡，我們像是一群共振的靈魂，我也在這股浪潮中開啟了屬於我的進化之路：
身為一名<span
class="mark_b">「水晶傳教士」</span>，我秉持著「飯隨偶像，所以要讓自己變得和他們一樣優秀」的信念，將這份狂熱轉化為跨領域的創作動力。身為熱愛學習新事物的「認真魔人」，我的生活分為旺季與淡季：旺季時為愛進化，挑戰各種專業技能；淡季時則在《動森》認真耍廢半年，甚至組建了「水晶森友會」來獲得另類的成就感。
</p>
</div>
</section>
<section id="identity">
<h2 class="section-title">#Identity：為了熱愛而進化的斜槓精神</h2>
<div class="intro-text">
<p class="intro-text">這份熱愛，讓我橫跨領域，長成了現在的模樣：</p>
<p class="core-description">
<span class="hashtag-chip">#水晶推廣部：視覺即是正義</span>
身為專業品牌設計師，我堅持「不看醜東西」的職業傲骨。我親自操刀所有視覺輸出，將對偶像的滿腔熱血轉化為專業的品牌策劃，這是對這份熱愛最基本的尊重。
</p>
<p class="core-description">
<span class="hashtag-chip">#水晶訓練營：自我提升的最高級</span>
為了聽懂歐巴說的每一句話，我開始挑戰韓檢、投身健身、鑽研舞蹈。我用<span class="mark_b">聽力 93 分</span>與<span class="mark_b">增肌減脂
20%</span>
的數據證明：追星是推動自我實現最強大的燃料。
</p>
<p class="core-description">
<span class="hashtag-chip">#全端開發者：技術與藝術的終極交織</span>
我正將多年的設計積累與程式技術縫合，運用數位開發邏輯，搭建一個專屬於這份熱愛的數位平台。這是我為這段十年長跑獻上的最高致敬。
</p>
</div>
</section>
<section id="evolution" class="story-archive">
<h2 class="section-title">熱愛驅動的職涯轉型</h2>
<div class="subtitle-wrap">
<span class="sub-title">GROWTH TIMELINE</span>
</div>
<div class="merged-storyline">
<article class="story-node" data-era="語言">
<h3>語言與紀律：打破隔閡</h3>
<p>為了聽懂歐巴的每一句話，佛系自學後配合師大進修部三個月，順利通過韓檢 TOPIK 2 級。</p>
</article>
<article class="story-node" data-era="設計">
<h3>設計覺醒：從美編到品牌設計</h3>
<p>學習多媒體設計兩個月即入職美編，半年後升任平面設計，現為專業品牌視覺設計師。</p>
</article>
<article class="story-node" data-era="價值">
<h3>價值提升：3.5 年薪資 +10K</h3>
<p>為了賺錢買周邊與去韓國看演唱會，努力提升技能，在 3 年半內成功提升薪資 10K。證明追星也可以很勵志！</p>
</article>
</div>
</section>
<section id="journey" class="story-archive">
<h2 class="section-title">Journey：推廣部進化史</h2>
<div class="subtitle-wrap">
<span class="sub-title">GROWTH TIMELINE (2016 - 2020)</span>
</div>
<div class="merged-storyline">
<article class="story-node" data-era="2016">
<h3 class="journey-year-sr">2016</h3>
<p class="journey-sublabel">命定緣分與視覺震撼</p>
<h4 class="journey-month">04 月</h4>
<p>因《無限挑戰》開啟與水晶男孩的命定緣分。</p>
<h4 class="journey-month">09 月</h4>
<p>飛往首爾參加首場演唱會，受「人生導師」的手幅視覺震撼，確立了以「專業設計」為導向的推廣路徑。</p>
</article>
<article class="story-node" data-era="2017">
<h3 class="journey-year-sr">2017</h3>
<p class="journey-sublabel">意志與熱舞</p>
<h4 class="journey-month">02 月</h4>
<p>擔任應援組熱舞小組長，成功減重 10 公斤，用身體實踐為愛而戰的意志力。</p>
</article>
<article class="story-node" data-era="2018">
<h3 class="journey-year-sr">2018</h3>
<p class="journey-sublabel">數位推廣與影像覺醒</p>
<h4 class="journey-month">06.01</h4>
<p>進入行銷設計班，在 Premiere 課程首日即以高志溶為素材完成作業，獲得好評並正式開啟數位策展元年。</p>
</article>
<article class="story-node" data-era="2019">
<h3 class="journey-year-sr">2019</h3>
<p class="journey-sublabel">價值提升與自律生活</p>
<h4 class="journey-month">05 月</h4>
<p>憑藉<span class="mark_b">聽力 93 分</span>高分通過 TOPIK 2 級，同年職涯從美編晉升平面設計師。</p>
<h4 class="journey-month">06 - 08 月</h4>
<p>發動全方位打歌：橫跨健身房、單車巡迴與好友飲料店；達成<span class="mark_b">增肌減脂 20%</span>，開啟與偶像同步的自律生活。</p>
</article>
<article class="story-node" data-era="2020">
<h3 class="journey-year-sr">2020</h3>
<p class="journey-sublabel">從羨慕者進化為應援創作者</p>
<h4 class="journey-month">06 月</h4>
<p>在《動森》完成巨型 젝키 Logo 地景；再次運用 Premiere 實力為殷志源製作慶生影片。</p>
<h4 class="journey-month">07.15</h4>
<p>受邀製作首份張水院實體應援小卡，正式從仰望者進化為實體應援的創作者。</p>
<h4 class="journey-month">08 月</h4>
<p>在公司桌曆巧妙致敬《新西遊記 5》，手繪「無臉男」與「陰間使者」，實現職涯美學與熱愛的完美融合。</p>
</article>
</div>
</section>
<section id="journey" class="story-archive">
<h2 class="section-title">Journey：推廣部進化史</h2>
<div class="subtitle-wrap">
<span class="sub-title">GROWTH TIMELINE (2016 - 2020)</span>
</div>
<div class="merged-storyline">
<article class="story-node" data-era="2016">
<h3 class="journey-year-sr">2016</h3>
<p class="journey-sublabel">命定緣分與實踐</p>
<h4 class="journey-month">04 月</h4>
<p>點開影片，開啟與水晶男孩的命定緣分。</p>
<h4 class="journey-month">09 月</h4>
<p>飛往首爾參加首場演唱會，受「人生導師」的手幅視覺震撼，確立推廣方向。</p>
</article>
<article class="story-node" data-era="2017">
<h3 class="journey-year-sr">2017</h3>
<p class="journey-sublabel">意志與熱舞</p>
<h4 class="journey-month">02 月</h4>
<p>擔任熱舞小組長，成功減重 10 公斤，展現為愛而戰的意志。</p>
</article>
<article class="story-node" data-era="2018">
<h3 class="journey-year-sr">2018</h3>
<p class="journey-sublabel">數位推廣元年</p>
<h4 class="journey-month">06 月</h4>
<p>踏進行銷設計的第一天，在剪輯老師突然出的作業後，立刻接收到與高志溶來台拍攝的消息；
這份突如其來的驚喜，讓我有機會直接以偶像為素材完成首支好評作業，就此驚艷開啟數位策展元年。</p>
</article>
<article class="story-node" data-era="2019">
<h3 class="journey-year-sr">2019</h3>
<p class="journey-sublabel">價值提升與自律</p>
<h4 class="journey-month">05 月</h4>
<p>憑藉<span class="mark_b">聽力 93 分</span>通過 TOPIK 2 級合格，同年職涯從美編晉升平面設計師。</p>
<h4 class="journey-month">06－08 月</h4>
<p>發動全方位打歌行動；達成<span class="mark_b">增肌減脂 20%</span> 目標，開啟與偶像同步的自律生活。</p>
<h4 class="journey-milestone">成果</h4>
<p>3.5 年內成功提升薪資 10K，證明熱愛能驅動實質的自我實現。</p>
</article>
<article class="story-node" data-era="2020">
<h3 class="journey-year-sr">2020</h3>
<p class="journey-sublabel">從參與到創作</p>
<h4 class="journey-month">06 月</h4>
<p>在《動森》完成巨型 젝키 Logo 地景，並再次為殷志源製作慶生影片。</p>
<h4 class="journey-month">07－08 月</h4>
<p>正式受邀製作張水院應援小卡，並在職場桌曆中巧妙致敬《新西遊記 5》，實現職涯與熱愛的完美融合。</p>
</article>
</div>
</section>
<section id="training">
<h2 class="section-title">#水晶訓練營：意志力的磨練</h2>
<div class="intro-text">
<p class="intro-text">為了擁有更好的體態跟上歐巴，我將少女心跳成專業舞步，並透過多元運動鍛鍊出強大的紀律：</p>
<ul>
<li><span class="hashtag-chip">#律動</span>熱舞（用身體記憶跨世紀的節奏）。</li>
<li><span class="hashtag-chip">#核心</span>重訓、空中瑜珈。</li>
<li><span class="hashtag-chip">#耐力</span>單車、游泳、爬山。</li>
<li><span class="hashtag-chip">#敏捷</span>桌球。</li>
</ul>
</div>
</section>
<section id="tech-stack">
<h2 class="section-title">全端開發與數位推廣</h2>
<div class="intro-text">
<p class="intro-text">
這十年，我從台下的仰望者進化成了手握技術的守護者。當前最重要的挑戰：朝著前端設計師努力，結合包裝設計的審美與 PHP／MySQL／JS 技術，親手搭建這個數位平台。這份熱愛，就是我最強大的軍功章。
</p>
</div>
<div class="story-grid">
<div class="card">
<h3>Visual &amp; Branding</h3>
<p>品牌包裝設計、視覺藝術策劃；11 種設計軟體掌握（含影像剪輯）。</p>
</div>
<div class="card">
<h3>Full-stack Dev</h3>
<p>HTML, CSS, JS, PHP, MySQL, Cursor AI</p>
</div>
</div>
</section>
<div class="landing-actions">
<a href="../index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
</div>
</div>
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <span class="mark_b">Jekkinoopy Studio</span>
</a>
</footer>
<script src="../assets/js/particles.js"></script>
<script src="../assets/js/portal-nav.js"></script>
</body>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水晶男孩推廣部｜視覺進化論：認真魔人的進化之路</title>
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="../assets/css/tablet.css">
</head>
<body class="home-page minister-page">
<header class="inner-page-header">
<div class="header-inner site-header-inner">
<h1 class="main-title">視覺進化論</h1>
<div class="subtitle-wrap">
<span class="sub-title">FROM CURIOSITY TO FULL-STACK</span>
</div>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<div class="container">
<div class="landing-intro">
<p>關於我：<span class="mark_b">把水晶置入生活，將熱愛驅動為進化的燃料</span></p>
</div>
<section id="intro">
<h2 class="section-title">跨越時空的開端</h2>
<div class="intro-tags" role="list">
<span class="hashtag-chip" role="listitem">#水晶傳教士</span>
<span class="hashtag-chip" role="listitem">#認真魔人</span>
</div>
<div class="intro-text">
<p class="intro-text">
這段旅程始於 2016 年 4 月，透過國民綜藝《無限挑戰》六六歌 2 的回歸企劃，讓原本不認識這組傳奇元祖偶像的我，因一時好奇點開節目。當我回頭回溯那段歷史，才發現他們在 2000
年巔峰解散時，我還未曾參與過那個屬於他們的世紀末。即便如此，隨著節目的鋪陳，我依然被那份熱血、真誠且專業的魅力所震撼，那些搞笑又感動的內容結束了我原本的低潮期，從此深陷其中。
</p>
<div class="slogan-quote slogan-quote--awakening">
<span class="slogan-quote__inner">這不只是追星的開始，更成為我自我覺醒的起點。</span>
</div>
<p class="core-description">
當年的節目剛播出，無數新粉集體淪陷，紛紛加入了「水晶廢人」的行列。
在那段瘋狂的歲月裡，我們像是一群共振的靈魂，我也在這股浪潮中開啟了屬於我的進化之路：
身為一名<span
class="mark_b">「水晶傳教士」</span>，我秉持著「飯隨偶像，所以要讓自己變得和他們一樣優秀」的信念，將這份狂熱轉化為跨領域的創作動力。身為熱愛學習新事物的「認真魔人」，我的生活分為旺季與淡季：旺季時為愛進化，挑戰各種專業技能；淡季時則在《動森》認真耍廢半年，甚至組建了「水晶森友會」來獲得另類的成就感。
</p>
</div>
</section>
<section id="identity">
<h2 class="section-title">#Identity：為了熱愛而進化的斜槓精神</h2>
<div class="intro-text">
<p class="intro-text">這份熱愛，讓我橫跨領域，長成了現在的模樣：</p>
<p class="core-description">
<span class="hashtag-chip">#水晶推廣部：視覺即是正義</span>
身為專業品牌設計師，我堅持「不看醜東西」的職業傲骨。我親自操刀所有視覺輸出，將對偶像的滿腔熱血轉化為專業的品牌策劃，這是對這份熱愛最基本的尊重。
</p>
<p class="core-description">
<span class="hashtag-chip">#水晶訓練營：自我提升的最高級</span>
為了聽懂歐巴說的每一句話，我開始挑戰韓檢、投身健身、鑽研舞蹈。我用<span class="mark_b">聽力 93 分</span>與<span class="mark_b">增肌減脂
20%</span>
的數據證明：追星是推動自我實現最強大的燃料。
</p>
<p class="core-description">
<span class="hashtag-chip">#全端開發者：技術與藝術的終極交織</span>
我正將多年的設計積累與程式技術縫合，運用數位開發邏輯，搭建一個專屬於這份熱愛的數位平台。這是我為這段十年長跑獻上的最高致敬。
</p>
</div>
</section>
<section id="evolution" class="story-archive">
<h2 class="section-title">熱愛驅動的職涯轉型</h2>
<div class="subtitle-wrap">
<span class="sub-title">GROWTH TIMELINE</span>
</div>
<div class="merged-storyline">
<article class="story-node" data-era="語言">
<h3>語言與紀律：打破隔閡</h3>
<p>為了聽懂歐巴的每一句話，佛系自學後配合師大進修部三個月，順利通過韓檢 TOPIK 2 級。</p>
</article>
<article class="story-node" data-era="設計">
<h3>設計覺醒：從美編到品牌設計</h3>
<p>學習多媒體設計兩個月即入職美編，半年後升任平面設計，現為專業品牌視覺設計師。</p>
</article>
<article class="story-node" data-era="價值">
<h3>價值提升：3.5 年薪資 +10K</h3>
<p>為了賺錢買周邊與去韓國看演唱會，努力提升技能，在 3 年半內成功提升薪資 10K。證明追星也可以很勵志！</p>
</article>
</div>
</section>
<section id="journey" class="story-archive">
<h2 class="section-title">Journey：推廣部進化史</h2>
<div class="subtitle-wrap">
<span class="sub-title">GROWTH TIMELINE (2016 - 2020)</span>
</div>
<div class="merged-storyline">
<article class="story-node" data-era="2016">
<h3 class="journey-year-sr">2016</h3>
<p class="journey-sublabel">命定緣分與視覺震撼</p>
<h4 class="journey-month">04 月</h4>
<p>因《無限挑戰》開啟與水晶男孩的命定緣分。</p>
<h4 class="journey-month">09 月</h4>
<p>飛往首爾參加首場演唱會，受「人生導師」的手幅視覺震撼，確立了以「專業設計」為導向的推廣路徑。</p>
</article>
<article class="story-node" data-era="2017">
<h3 class="journey-year-sr">2017</h3>
<p class="journey-sublabel">意志與熱舞</p>
<h4 class="journey-month">02 月</h4>
<p>擔任應援組熱舞小組長，成功減重 10 公斤，用身體實踐為愛而戰的意志力。</p>
</article>
<article class="story-node" data-era="2018">
<h3 class="journey-year-sr">2018</h3>
<p class="journey-sublabel">數位推廣與影像覺醒</p>
<h4 class="journey-month">06.01</h4>
<p>進入行銷設計班，在 Premiere 課程首日即以高志溶為素材完成作業，獲得好評並正式開啟數位策展元年。</p>
</article>
<article class="story-node" data-era="2019">
<h3 class="journey-year-sr">2019</h3>
<p class="journey-sublabel">價值提升與自律生活</p>
<h4 class="journey-month">05 月</h4>
<p>憑藉<span class="mark_b">聽力 93 分</span>高分通過 TOPIK 2 級，同年職涯從美編晉升平面設計師。</p>
<h4 class="journey-month">06 - 08 月</h4>
<p>發動全方位打歌：橫跨健身房、單車巡迴與好友飲料店；達成<span class="mark_b">增肌減脂 20%</span>，開啟與偶像同步的自律生活。</p>
</article>
<article class="story-node" data-era="2020">
<h3 class="journey-year-sr">2020</h3>
<p class="journey-sublabel">從羨慕者進化為應援創作者</p>
<h4 class="journey-month">06 月</h4>
<p>在《動森》完成巨型 젝키 Logo 地景；再次運用 Premiere 實力為殷志源製作慶生影片。</p>
<h4 class="journey-month">07.15</h4>
<p>受邀製作首份張水院實體應援小卡，正式從仰望者進化為實體應援的創作者。</p>
<h4 class="journey-month">08 月</h4>
<p>在公司桌曆巧妙致敬《新西遊記 5》，手繪「無臉男」與「陰間使者」，實現職涯美學與熱愛的完美融合。</p>
</article>
</div>
</section>
<section id="journey" class="story-archive">
<h2 class="section-title">Journey：推廣部進化史</h2>
<div class="subtitle-wrap">
<span class="sub-title">GROWTH TIMELINE (2016 - 2020)</span>
</div>
<div class="merged-storyline">
<article class="story-node" data-era="2016">
<h3 class="journey-year-sr">2016</h3>
<p class="journey-sublabel">命定緣分與實踐</p>
<h4 class="journey-month">04 月</h4>
<p>點開影片，開啟與水晶男孩的命定緣分。</p>
<h4 class="journey-month">09 月</h4>
<p>飛往首爾參加首場演唱會，受「人生導師」的手幅視覺震撼，確立推廣方向。</p>
</article>
<article class="story-node" data-era="2017">
<h3 class="journey-year-sr">2017</h3>
<p class="journey-sublabel">意志與熱舞</p>
<h4 class="journey-month">02 月</h4>
<p>擔任熱舞小組長，成功減重 10 公斤，展現為愛而戰的意志。</p>
</article>
<article class="story-node" data-era="2018">
<h3 class="journey-year-sr">2018</h3>
<p class="journey-sublabel">數位推廣元年</p>
<h4 class="journey-month">06 月</h4>
<p>踏進行銷設計的第一天，在剪輯老師突然出的作業後，立刻接收到與高志溶來台拍攝的消息；
這份突如其來的驚喜，讓我有機會直接以偶像為素材完成首支好評作業，就此驚艷開啟數位策展元年。</p>
</article>
<article class="story-node" data-era="2019">
<h3 class="journey-year-sr">2019</h3>
<p class="journey-sublabel">價值提升與自律</p>
<h4 class="journey-month">05 月</h4>
<p>憑藉<span class="mark_b">聽力 93 分</span>通過 TOPIK 2 級合格，同年職涯從美編晉升平面設計師。</p>
<h4 class="journey-month">06－08 月</h4>
<p>發動全方位打歌行動；達成<span class="mark_b">增肌減脂 20%</span> 目標，開啟與偶像同步的自律生活。</p>
<h4 class="journey-milestone">成果</h4>
<p>3.5 年內成功提升薪資 10K，證明熱愛能驅動實質的自我實現。</p>
</article>
<article class="story-node" data-era="2020">
<h3 class="journey-year-sr">2020</h3>
<p class="journey-sublabel">從參與到創作</p>
<h4 class="journey-month">06 月</h4>
<p>在《動森》完成巨型 젝키 Logo 地景，並再次為殷志源製作慶生影片。</p>
<h4 class="journey-month">07－08 月</h4>
<p>正式受邀製作張水院應援小卡，並在職場桌曆中巧妙致敬《新西遊記 5》，實現職涯與熱愛的完美融合。</p>
</article>
</div>
</section>
<section id="training">
<h2 class="section-title">#水晶訓練營：意志力的磨練</h2>
<div class="intro-text">
<p class="intro-text">為了擁有更好的體態跟上歐巴，我將少女心跳成專業舞步，並透過多元運動鍛鍊出強大的紀律：</p>
<ul>
<li><span class="hashtag-chip">#律動</span>熱舞（用身體記憶跨世紀的節奏）。</li>
<li><span class="hashtag-chip">#核心</span>重訓、空中瑜珈。</li>
<li><span class="hashtag-chip">#耐力</span>單車、游泳、爬山。</li>
<li><span class="hashtag-chip">#敏捷</span>桌球。</li>
</ul>
</div>
</section>
<section id="tech-stack">
<h2 class="section-title">全端開發與數位推廣</h2>
<div class="intro-text">
<p class="intro-text">
這十年，我從台下的仰望者進化成了手握技術的守護者。當前最重要的挑戰：朝著前端設計師努力，結合包裝設計的審美與 PHP／MySQL／JS 技術，親手搭建這個數位平台。這份熱愛，就是我最強大的軍功章。
</p>
</div>
<div class="story-grid">
<div class="card">
<h3>Visual &amp; Branding</h3>
<p>品牌包裝設計、視覺藝術策劃；11 種設計軟體掌握（含影像剪輯）。</p>
</div>
<div class="card">
<h3>Full-stack Dev</h3>
<p>HTML, CSS, JS, PHP, MySQL, Cursor AI</p>
</div>
</div>
</section>
<div class="landing-actions">
<a href="../index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
</div>
</div>
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <span class="mark_b">Jekkinoopy Studio</span>
</a>
</footer>
<script src="../assets/js/particles.js"></script>
<script src="../assets/js/portal-nav.js"></script>
</body>
</html>
extra/site-guide.html
+1 -1
View File
@@ -18,7 +18,7 @@
box-sizing: border-box;
margin: 0 0 14px;
padding: 0.8rem clamp(16px, 4vw, 100px);
background-color: var(--black);
background-color: var(--color-bg-raised);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
overflow: visible;
}
extra/sunghoon.html
+51 -51
View File
@@ -1,51 +1,51 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水晶男孩｜消失的真相</title>
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="../assets/css/tablet.css">
</head>
<body class="chronicle-page">
<header class="inner-page-header">
<div class="header-inner site-header-inner">
<h1 class="main-title">消失的真相</h1>
<div class="subtitle-wrap">
<span class="sub-title">VOICE · RAIN · NARRATIVE</span>
</div>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<main class="content-container variety-page-main chronicle-reader">
<section id="truth" class="variety-block">
<h2 class="section-title">還原那場雨</h2>
<p class="intro-text">流言與標題往往跑在當事人之前；這裡不急著下判決，而是把時間軸、公開說法與作品留痕擺在同一視線高度，讓讀的人自己拼出輪廓。</p>
<p class="intro-text">此區預留給你之後補上的整理與引用來源；先立欄位，避免情緒性的單句蓋過事實層次。</p>
</section>
<section id="voice" class="variety-block">
<h2 class="section-title">被掩蓋的主唱</h2>
<p class="intro-text">White Kies 的高音與哭腔，曾在無數主打裡替團名撐住「好聽」這兩個字；當鏡頭轉向別處，那些聲線與和聲仍留在音檔裡，等耳朵重新打開。</p>
<p class="intro-text">之後可在此收錄現場、翻唱、與合作曲目，讓「主唱」不被標籤蓋過，而被聽見。</p>
</section>
</main>
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <span class="mark_b">Jekkinoopy Studio</span>
</a>
</footer>
<script src="../assets/js/portal-nav.js"></script>
<script src="../assets/js/particles.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水晶男孩｜消失的真相</title>
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="../assets/css/tablet.css">
</head>
<body class="chronicle-page">
<header class="inner-page-header">
<div class="header-inner site-header-inner">
<h1 class="main-title">消失的真相</h1>
<div class="subtitle-wrap">
<span class="sub-title">VOICE · RAIN · NARRATIVE</span>
</div>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<main class="content-container variety-page-main chronicle-reader">
<section id="truth" class="variety-block">
<h2 class="section-title">還原那場雨</h2>
<p class="intro-text">流言與標題往往跑在當事人之前；這裡不急著下判決，而是把時間軸、公開說法與作品留痕擺在同一視線高度，讓讀的人自己拼出輪廓。</p>
<p class="intro-text">此區預留給你之後補上的整理與引用來源；先立欄位，避免情緒性的單句蓋過事實層次。</p>
</section>
<section id="voice" class="variety-block">
<h2 class="section-title">被掩蓋的主唱</h2>
<p class="intro-text">White Kies 的高音與哭腔，曾在無數主打裡替團名撐住「好聽」這兩個字；當鏡頭轉向別處，那些聲線與和聲仍留在音檔裡，等耳朵重新打開。</p>
<p class="intro-text">之後可在此收錄現場、翻唱、與合作曲目，讓「主唱」不被標籤蓋過，而被聽見。</p>
</section>
</main>
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <span class="mark_b">Jekkinoopy Studio</span>
</a>
</footer>
<script src="../assets/js/portal-nav.js"></script>
<script src="../assets/js/particles.js"></script>
</body>
</html>