Dev

public/albums/process.py

@@ -0,0 +1,31 @@
+import os
+from PIL import Image, ImageOps
+
+# === CONFIGURATION ===
+input_folder = '../articles/computerAssembly'           # Folder containing PNGs
+output_folder = './output_webp'     # Folder to save WEBP images
+max_width = 1024                    # Max width to scale to
+
+# Create output directory if not exists
+os.makedirs(output_folder, exist_ok=True)
+
+# Process all PNG files in the input folder
+for filename in os.listdir(input_folder):
+    if filename.lower().endswith('.jpg') or filename.lower().endswith('.png'):
+        filepath = os.path.join(input_folder, filename)
+        with Image.open(filepath) as img:
+            # Resize if width is greater than max_width
+            img = ImageOps.exif_transpose(img)
+            if img.width > max_width:
+                scale_factor = max_width / img.width
+                new_size = (int(img.width * scale_factor), int(img.height * scale_factor))
+                img = img.resize(new_size, Image.LANCZOS)
+
+            # Convert and save as .webp
+            webp_name = os.path.splitext(filename)[0] + '.webp'
+            webp_path = os.path.join(output_folder, webp_name)
+            img.save(webp_path, 'WEBP', quality=80, lossless=True)
+
+            print(f"Converted: {filename} -> {webp_name}")
+
+print("All PNG images converted to WEBP.")

src/components/homepage/works.jsx

@@ -15,7 +15,7 @@ const Works = () => {
 					<div className="works-body">
 						<div className="work">
 							<img
-								src={`${process.env.PUBLIC_URL}/asml.png`}
+								src={`${process.env.PUBLIC_URL}/asml.webp`}
 								alt="asml"
 								className="work-image"
 							/>
@@ -28,7 +28,7 @@ const Works = () => {
 
 						<div className="work">
 							<img
-								src={`${process.env.PUBLIC_URL}/cloudmile.png`}
+								src={`${process.env.PUBLIC_URL}/cloudmile.webp`}
 								alt="cloudmile"
 								className="work-image"
 							/>

src/data/articles.js

@@ -1,9 +1,10 @@
 import computerAssembly from "./myArticles/computerAssembly";
 import ASML from "./myArticles/asml";
+import HCISPaper from "./myArticles/hcispaper";
 
 
 
 
-const myArticles = [computerAssembly, ASML];
+const myArticles = [computerAssembly, ASML, HCISPaper];
 
 export default myArticles;

src/data/myAlbums/dragon.js

@@ -3,69 +3,69 @@ function dragonPhoto() {
 	const basedir = process.env.PUBLIC_URL || "/me";
 
 	const allphotos = [
-		{ src: `${basedir}/albums/dragon/1.jpg`, width: 1200, height: 2131 },
-		{ src: `${basedir}/albums/dragon/10.jpg`, width: 1200, height: 2133 },
-		{ src: `${basedir}/albums/dragon/11.jpg`, width: 1200, height: 2133 },
-		{ src: `${basedir}/albums/dragon/12.jpg`, width: 1200, height: 2133 },
-		{ src: `${basedir}/albums/dragon/13.jpg`, width: 1200, height: 2133 },
-		{ src: `${basedir}/albums/dragon/14.jpg`, width: 1200, height: 2133 },
-		{ src: `${basedir}/albums/dragon/15.jpg`, width: 1200, height: 2133 },
-		{ src: `${basedir}/albums/dragon/16.jpg`, width: 1200, height: 2133 },
-		{ src: `${basedir}/albums/dragon/17.jpg`, width: 1200, height: 2133 },
-		{ src: `${basedir}/albums/dragon/18.jpg`, width: 960, height: 1705 },
-		{ src: `${basedir}/albums/dragon/19.jpg`, width: 960, height: 1705 },
-		{ src: `${basedir}/albums/dragon/2.jpg`, width: 1200, height: 1600 },
-		{ src: `${basedir}/albums/dragon/20.jpg`, width: 960, height: 1705 },
-		{ src: `${basedir}/albums/dragon/21.jpg`, width: 960, height: 1706 },
-		{ src: `${basedir}/albums/dragon/22.jpg`, width: 960, height: 1706 },
-		{ src: `${basedir}/albums/dragon/23.jpg`, width: 960, height: 1705 },
-		{ src: `${basedir}/albums/dragon/24.jpg`, width: 960, height: 1705 },
-		{ src: `${basedir}/albums/dragon/25.jpg`, width: 1108, height: 1477 },
-		{ src: `${basedir}/albums/dragon/26.jpg`, width: 960, height: 1705 },
-		{ src: `${basedir}/albums/dragon/27.jpg`, width: 960, height: 1705 },
-		{ src: `${basedir}/albums/dragon/28.jpg`, width: 960, height: 1706 },
-		{ src: `${basedir}/albums/dragon/29.jpg`, width: 960, height: 1706 },
-		{ src: `${basedir}/albums/dragon/3.jpg`, width: 1200, height: 2133 },
-		{ src: `${basedir}/albums/dragon/30.jpg`, width: 1108, height: 1477 },
-		{ src: `${basedir}/albums/dragon/31.jpg`, width: 1108, height: 1477 },
-		{ src: `${basedir}/albums/dragon/32.jpg`, width: 1108, height: 1477 },
-		{ src: `${basedir}/albums/dragon/33.jpg`, width: 1108, height: 1477 },
-		{ src: `${basedir}/albums/dragon/34.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/35.jpg`, width: 563, height: 1000 },
-		{ src: `${basedir}/albums/dragon/36.jpg`, width: 459, height: 816 },
-		{ src: `${basedir}/albums/dragon/37.jpg`, width: 459, height: 816 },
-		{ src: `${basedir}/albums/dragon/38.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/39.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/4.jpg`, width: 1200, height: 2133 },
-		{ src: `${basedir}/albums/dragon/40.jpg`, width: 1075, height: 806 },
-		{ src: `${basedir}/albums/dragon/41.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/42.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/43.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/44.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/45.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/46.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/47.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/48.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/49.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/5.jpg`, width: 1200, height: 1600 },
-		{ src: `${basedir}/albums/dragon/50.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/51.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/52.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/53.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/54.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/55.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/56.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/57.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/58.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/59.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/6.jpg`, width: 1200, height: 2133 },
-		{ src: `${basedir}/albums/dragon/60.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/61.jpg`, width: 1080, height: 1920 },
-		{ src: `${basedir}/albums/dragon/62.jpg`, width: 1108, height: 1477 },
-		{ src: `${basedir}/albums/dragon/63.jpg`, width: 960, height: 1706 },
-		{ src: `${basedir}/albums/dragon/7.jpg`, width: 1200, height: 2133 },
-		{ src: `${basedir}/albums/dragon/8.jpg`, width: 1200, height: 2133 },
-		{ src: `${basedir}/albums/dragon/9.jpg`, width: 1200, height: 2134 }
+		{ src: `${basedir}/albums/dragon/1.webp`, width: 1200, height: 2131 },
+		{ src: `${basedir}/albums/dragon/10.webp`, width: 1200, height: 2133 },
+		{ src: `${basedir}/albums/dragon/11.webp`, width: 1200, height: 2133 },
+		{ src: `${basedir}/albums/dragon/12.webp`, width: 1200, height: 2133 },
+		{ src: `${basedir}/albums/dragon/13.webp`, width: 1200, height: 2133 },
+		{ src: `${basedir}/albums/dragon/14.webp`, width: 1200, height: 2133 },
+		{ src: `${basedir}/albums/dragon/15.webp`, width: 1200, height: 2133 },
+		{ src: `${basedir}/albums/dragon/16.webp`, width: 1200, height: 2133 },
+		{ src: `${basedir}/albums/dragon/17.webp`, width: 1200, height: 2133 },
+		{ src: `${basedir}/albums/dragon/18.webp`, width: 960, height: 1705 },
+		{ src: `${basedir}/albums/dragon/19.webp`, width: 960, height: 1705 },
+		{ src: `${basedir}/albums/dragon/2.webp`, width: 1200, height: 1600 },
+		{ src: `${basedir}/albums/dragon/20.webp`, width: 960, height: 1705 },
+		{ src: `${basedir}/albums/dragon/21.webp`, width: 960, height: 1706 },
+		{ src: `${basedir}/albums/dragon/22.webp`, width: 960, height: 1706 },
+		{ src: `${basedir}/albums/dragon/23.webp`, width: 960, height: 1705 },
+		{ src: `${basedir}/albums/dragon/24.webp`, width: 960, height: 1705 },
+		{ src: `${basedir}/albums/dragon/25.webp`, width: 1108, height: 1477 },
+		{ src: `${basedir}/albums/dragon/26.webp`, width: 960, height: 1705 },
+		{ src: `${basedir}/albums/dragon/27.webp`, width: 960, height: 1705 },
+		{ src: `${basedir}/albums/dragon/28.webp`, width: 960, height: 1706 },
+		{ src: `${basedir}/albums/dragon/29.webp`, width: 960, height: 1706 },
+		{ src: `${basedir}/albums/dragon/3.webp`, width: 1200, height: 2133 },
+		{ src: `${basedir}/albums/dragon/30.webp`, width: 1108, height: 1477 },
+		{ src: `${basedir}/albums/dragon/31.webp`, width: 1108, height: 1477 },
+		{ src: `${basedir}/albums/dragon/32.webp`, width: 1108, height: 1477 },
+		{ src: `${basedir}/albums/dragon/33.webp`, width: 1108, height: 1477 },
+		{ src: `${basedir}/albums/dragon/34.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/35.webp`, width: 563, height: 1000 },
+		{ src: `${basedir}/albums/dragon/36.webp`, width: 459, height: 816 },
+		{ src: `${basedir}/albums/dragon/37.webp`, width: 459, height: 816 },
+		{ src: `${basedir}/albums/dragon/38.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/39.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/4.webp`, width: 1200, height: 2133 },
+		{ src: `${basedir}/albums/dragon/40.webp`, width: 1075, height: 806 },
+		{ src: `${basedir}/albums/dragon/41.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/42.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/43.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/44.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/45.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/46.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/47.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/48.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/49.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/5.webp`, width: 1200, height: 1600 },
+		{ src: `${basedir}/albums/dragon/50.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/51.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/52.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/53.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/54.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/55.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/56.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/57.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/58.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/59.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/6.webp`, width: 1200, height: 2133 },
+		{ src: `${basedir}/albums/dragon/60.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/61.webp`, width: 1080, height: 1920 },
+		{ src: `${basedir}/albums/dragon/62.webp`, width: 1108, height: 1477 },
+		{ src: `${basedir}/albums/dragon/63.webp`, width: 960, height: 1706 },
+		{ src: `${basedir}/albums/dragon/7.webp`, width: 1200, height: 2133 },
+		{ src: `${basedir}/albums/dragon/8.webp`, width: 1200, height: 2133 },
+		{ src: `${basedir}/albums/dragon/9.webp`, width: 1200, height: 2134 },
 	];
 
 	return {
@@ -81,7 +81,7 @@ function dragonPhoto() {
 			"Stanley Shen",
 		],
 		photos: allphotos,
-		representative: `${basedir}/albums/representative/dragon.jpg`,
+		representative: `${basedir}/albums/representative/dragon.webp`,
 	};
 }
 

src/data/myArticles/asml.js

@@ -72,7 +72,7 @@ function ASML() {
                         <p id="217b7849-9a0a-807a-887e-dc97347f2a2c" class="">D&amp;E 內部也有很多部門，我接觸的到的有 YieldStar 相關的部門 *3、VCP (Virtual Computing Platform)、Litho Insight (我的 team，以下簡稱 Litho)，平常都跟他們換再一起坐，所以認識了一些他們的人 (Link: <a href="https://www.facebook.com/ASMLTW/posts/asml-rd%E8%81%B7%E7%BC%BA%E8%A7%A3%E7%AD%94%EF%B8%8Fsoftware-design-part-i%E5%B7%A5%E4%BD%9C%E5%85%A7%E5%AE%B9%E7%9B%AE%E5%89%8Dasml-software-design%E9%83%A8%E9%96%80%E6%9C%89%E4%B8%89%E5%80%8B%E5%9C%98%E9%9A%8A1-yieldstar-s/2460475000681055/?locale=zh_TW">我們的大老闆 Charles</a>)。我的 team 做的是機台上執行的程式，可以想像成是機台按一個按鈕後，機台就會跑我們寫的一些 function，他們把這些 function 稱為 job，台灣 team own 大概 8 個 job。Team 內有在敏捷開發，大概是三個月(not sure)，屬於 PI (Program Increment)，每天早上 10. 固定 daily scrum (10 min)，大概講一下昨天做了什麼和今天打算做什麼，是一個可以了解誰跟誰在合作&amp;在做的好機會。</p>
                         <p id="217b7849-9a0a-80ab-b8a2-fdb27fbd1ab5" class=""></p>
                         <p id="217b7849-9a0a-80fc-9a11-d122a1c8a974" class="">Team member 有 (照順序) Jerry, Jimmy, Ethan, Randy, Jeff, (me), Pei-Yi, Pei-Yi, Bart, York。</p>
-                        <figure id="21eb7849-9a0a-805d-95ee-ca56c759b25a" class="image"><a href={`${basedir}/articles/ASML/pastaio.jpg`}><img alt="my role models" className="img70-100" src={`${basedir}/articles/ASML/pastaio.jpg`}/></a></figure>
+                        <figure id="21eb7849-9a0a-805d-95ee-ca56c759b25a" class="image"><a href={`${basedir}/articles/ASML/pastaio.webp`}><img alt="my role models" className="img70-100" src={`${basedir}/articles/ASML/pastaio.webp`}/></a></figure>
                         <p id="21eb7849-9a0a-8094-8d58-fdd3d7c60778" class="">他們都是我的 role model，工作認真溝通效率高，氣氛歡樂又持續有產出，也給了我很多職涯、學業、生活 (這個最多，吃飯常聽他們的帶娃日常) 的建議。</p>
                         <h2 id="217b7849-9a0a-8001-ab3b-e1556cadad12" class="">Mentor</h2>
                         <p id="217b7849-9a0a-8033-a9f1-dd6e8663b6f7" class="">我的 mentor 有兩個 - Jerry &amp; Jeff。兩位 mentor 平常都挺忙，不是在開會就是要準備開會了，我有問題的話都是問 Jeff，每次打開 teams 的時候他幾乎都是紅圈圈 XD。</p>
@@ -133,13 +133,13 @@ function ASML() {
                         <ul id="217b7849-9a0a-8030-af44-d6fb05cd86ed" class="bulleted-list">
                             <li style={{ListStyleType:"disc"}}>
                                 Architecture
-                                <figure id="217b7849-9a0a-802e-849f-fd0f521a54bf" class="image" style={{textAlign:"center"}}><a href={`${basedir}/articles/ASML/architecture.png`}><img alt="architecture" className="img70-100" src={`${basedir}/articles/ASML/architecture.png`}/></a></figure>
+                                <figure id="217b7849-9a0a-802e-849f-fd0f521a54bf" class="image" style={{textAlign:"center"}}><a href={`${basedir}/articles/ASML/architecture.webp`}><img alt="architecture" className="img70-100" src={`${basedir}/articles/ASML/architecture.webp`}/></a></figure>
                             </li>
                         </ul>
                         <ul id="217b7849-9a0a-80b8-9227-f797d927f93b" class="bulleted-list">
                             <li style={{ListStyleType:"disc"}}>
                                 Pipeline
-                                <figure id="217b7849-9a0a-801c-b19f-dc4c15251a76" class="image" style={{textAlign:"center"}}><a href={`${basedir}/articles/ASML/pipeline.png`}><img alt="pipeline" className="img80-100" src={`${basedir}/articles/ASML/pipeline.png`}/></a></figure>
+                                <figure id="217b7849-9a0a-801c-b19f-dc4c15251a76" class="image" style={{textAlign:"center"}}><a href={`${basedir}/articles/ASML/pipeline.webp`}><img alt="pipeline" className="img80-100" src={`${basedir}/articles/ASML/pipeline.webp`}/></a></figure>
                             </li>
                         </ul>
                         <p id="21eb7849-9a0a-800b-827e-f422c4b61840" class="">這份主要對接人是 Pei-Yi &amp; Jeff，感謝 Pei-Yi 在裝 AJTF 時候給了很多幫助，也感謝其他給了很多 tool enhancement 的建議 or feature request。</p>
@@ -233,8 +233,8 @@ function ASML() {
                         <p id="219b7849-9a0a-808b-a189-fa8b21b463ac" class="">感謝你每天都陪我打桌球 (其實是 Esther 走之後才每天打的)，感謝平常陪我聊天講屁話抱怨 (我講真 ASML 少了 Johnny 我真的會無聊死)。我跟 Johnny 算是校友，但我是真的沒想到跑去林口還是能遇到陽明的 bro，總之很高興認識你，我下次依舊會用桌球打爆你，祝 everything 一切順利!</p>
                         <h3 id="219b7849-9a0a-80a1-925b-c0a477fcd7f0" class="">Henry</h3>
                         <p id="219b7849-9a0a-80cc-bf7a-e685d0f47f64" class="">感謝你會在要搭車的時候等我，感謝你在 ASML 認出我 (btw 我一開始真的沒認出他，應該說我根本不知道這人 … 我以為我在實驗室是個小透明)，總之跟這人的緣分挺奇妙的，祝你接下來一切順利嘍~ (2025 Fall 繼續交大見)</p>
-                        <figure class="image"><a href={`${basedir}/articles/ASML/johnnyesther.jpg`}><img alt="Johnny & Esther" className="img60-100" src={`${basedir}/articles/ASML/johnnyesther.jpg`}/></a></figure>
-                        <figure class="image"><a href={`${basedir}/articles/ASML/johnnyhenry.jpg`}><img alt="Johnny & Henry" className="img60-100" src={`${basedir}/articles/ASML/johnnyhenry.jpg`}/></a></figure>
+                        <figure class="image"><a href={`${basedir}/articles/ASML/johnnyesther.webp`}><img alt="Johnny & Esther" className="img60-100" src={`${basedir}/articles/ASML/johnnyesther.webp`}/></a></figure>
+                        <figure class="image"><a href={`${basedir}/articles/ASML/johnnyhenry.webp`}><img alt="Johnny & Henry" className="img60-100" src={`${basedir}/articles/ASML/johnnyhenry.webp`}/></a></figure>
                     </div>
                 </article>
 			</React.Fragment>

src/data/myArticles/computerAssembly.js

@@ -91,10 +91,10 @@ function computerAssembly() {
 						<p id="216b7849-9a0a-8093-8dff-c9500c0db6bb" class="">炫泡亮晶晶 😍</p>
 						<div id="216b7849-9a0a-80a1-9b45-d0f5f7c45715" class="column-list">
 							<div id="216b7849-9a0a-8046-b069-fb798483d12b" style={{width:"50%", textAlign:"center"}} class="column">
-								<figure id="216b7849-9a0a-8031-8b72-f467e1df4c88" class="image"><a href={`${basedir}/articles/computerAssembly/computer1.png`}><img style={{height: "auto", maxHeight:"300px", width: "auto", objectFit: "contain"}} alt="" src={`${basedir}/articles/computerAssembly/computer1.png`}/></a></figure>
+								<figure id="216b7849-9a0a-8031-8b72-f467e1df4c88" class="image"><a href={`${basedir}/articles/computerAssembly/computer1.webp`}><img style={{height: "auto", maxHeight:"300px", width: "auto", objectFit: "contain"}} alt="" src={`${basedir}/articles/computerAssembly/computer1.webp`}/></a></figure>
 							</div>
 							<div id="216b7849-9a0a-8033-a84c-fe4a1e629983" style={{width:"50%", textAlign:"center"}} class="column">
-								<figure id="216b7849-9a0a-805f-9111-d7eaa86c454e" class="image"><a href={`${basedir}/articles/computerAssembly/computer2.png`}><img style={{height: "auto", maxHeight:"300px", width: "auto", objectFit: "contain"}} alt="" src={`${basedir}/articles/computerAssembly/computer2.png`}/></a></figure>
+								<figure id="216b7849-9a0a-805f-9111-d7eaa86c454e" class="image"><a href={`${basedir}/articles/computerAssembly/computer2.webp`}><img style={{height: "auto", maxHeight:"300px", width: "auto", objectFit: "contain"}} alt="" src={`${basedir}/articles/computerAssembly/computer2.webp`}/></a></figure>
 							</div>
 						</div>
 						<h2 id="216b7849-9a0a-800c-bdfb-ce33f8f2597b" class="">心得</h2>