從電腦autosave自動同步 2024/12/01 週日 13:03:51.35

kelvinlinkk · Dec 1, 2024 · 63d2faa · 63d2faa
1 parent 371ae0f
commit 63d2faa
Show file tree

Hide file tree

Showing 11 changed files with 497 additions and 292 deletions.
diff --git a/README.md b/README.md
@@ -6,8 +6,6 @@
 
 my website : [myhome (kelvinlinkk.github.io)](https://kelvinlinkk.github.io/)
 
-my facebook : [Kun-Yi Lin | Facebook](https://www.facebook.com/profile.php?id=100069651581286)
-
 my instagram : [Instagram](https://www.instagram.com/)
 
 my twitter : [Kun-Yi Lin (@kelvinlinkk) / Twitter](https://twitter.com/kelvinlinkk)
diff --git a/genshin/README.md b/genshin/README.md
@@ -6,8 +6,6 @@
 
 my website : [myhome (kelvinlinkk.github.io)](https://kelvinlinkk.github.io/)
 
-my facebook : [Kun-Yi Lin | Facebook](https://www.facebook.com/profile.php?id=100069651581286)
-
 my instagram : [Instagram](https://www.instagram.com/)
 
 my twitter : [Kun-Yi Lin (@kelvinlinkk) / Twitter](https://twitter.com/kelvinlinkk)
diff --git a/portfolio.html b/portfolio.html
@@ -32,28 +32,6 @@ <h1><a href="https://epf-mlife.k12ea.gov.tw/Portal.do" target="_self">Portfolio<
         --><a href="學習歷程/Competition.html" target="_self"><h3>競賽</h3></a>
     </nav>
     <main>
-        <article>
-            <span class="pic">
-                <blockquote class="instagram-media"
-                    data-instgrm-permalink="https://www.instagram.com/p/CsLwv1Ny7M3/?utm_source=ig_embed&amp;utm_campaign=loading"
-                    data-instgrm-version="14"
-                    style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);max-height: 80vh;width: 40vw; min-width:326px; ">
-                </blockquote>
-                <script async src="//www.instagram.com/embed.js"></script>
-                <p><a
-                        href="https://www.instagram.com/p/CsLwv1Ny7M3/?utm_source=ig_web_copy_link&igshid=MzRlODBiNWFlZA==">網站介紹</a>
-                </p>
-            </span>
-            <h2>高一學習歷程</h2>
-            <br />
-            <p>
-                除了定期上傳學習歷程以外，我希望建立一個能夠成為我<span class="highlight">整理各種學習歷程的中心</span>。<br>
-                於是，這裡便誕生了——不僅僅是屬於我的個人園地，更是一本沒有頁數限制的日記。<br>
-                潔白的卷軸在面前緩緩展開，用最耀眼的色彩揮灑最閃亮的青春吧!
-            </p>
-        </article>
-        <hr />
-
         <article>
             <span class="pic">
                 <img src="首頁資料/pic/js.png">
@@ -75,23 +53,6 @@ <h2>網站成立的過程</h2>
                     class="highlight">為平面設計配色</span>。<br>
             </p>
         </article>
-        <hr />
-
-
-        <article>
-            <span class="pic">
-                <video src="https://github.com/kelvinlinkk/portfolio/raw/main/個人網站/個人網站導覽_大.mp4" controls></video>
-                <p><a href="https://github.com/kelvinlinkk/portfolio/raw/main/個人網站/個人網站導覽_大.mp4">簡略介紹影片</a></p>
-            </span>
-            <h2>心得</h2>
-            <br />
-            <p>
-                資訊科技是個很神奇的東西，我只是敲敲鍵盤，便能產生出一個精美的網頁。我希望以後我能夠好好學習資訊，<span
-                    class="highlight">並利用資訊科技的力量幫助他人</span>。每隔一段時間，我都會<span class="highlight">用git
-                    branch建立分支</span>，方便我回去觀看自己的舊版網站。看著自己的網站愈來愈漂亮，我也感受到<span
-                    class="highlight">成就感</span>帶來的喜悅。比如有一次寫問卷，他問我最常用的入口網站是什麼，當我提筆寫下「自製」時，心中滿是喜悅!<br>
-            </p>
-        </article>
     </main>
 </body>
 

diff --git a/profile.html b/profile.html
diff --git a/report.html b/report.html
@@ -1,40 +1,71 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-TW">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Kelvin 林坤逸</title>
-    <meta http-equiv="Content-Security-Policy">
+    <title>Kelvin 林坤逸 | 學生程式設計師 | 競賽得獎者</title>
+    <meta http-equiv="Content-Security-Policy" 
+        content="default-src 'self' 'unsafe-inline' *.github.io *.youtube.com *.instagram.com *.spotify.com">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="icon" href="首頁資料/logo/logo.png" type="x-icon">
+    <link rel="icon" href="首頁資料/logo/logo.png" type="image/png">
     <link rel="stylesheet" href="首頁資料/css/report.css">
-    <link rel="preload" href="首頁資料/logo/分頁.svg" as="image">
-    <link rel="preload" href="首頁資料/pic/profile.jpg" as="image">
-    <link rel="preload" href="首頁資料/background/background0.jpg" as="image">
-    <meta name="description" content="This is Kelvin's homepage. Here you can find the information about Kelvin 林坤逸. Also, this website contains useful links.">
+
+    <!-- Preload critical resources -->
+    <link rel="preload" href="首頁資料/pic/me.jpg" as="image" fetchpriority="high">
+    <link rel="preload" href="首頁資料/pic/profile.jpg" as="image" fetchpriority="high">
+    <link rel="preload" href="首頁資料/css/report.css" as="style">
+
+    <!-- Preconnect to external domains -->
+    <link rel="preconnect" href="https://youtube.com">
+    <link rel="preconnect" href="https://instagram.com">
+    <link rel="preconnect" href="https://spotify.com">
+
+    <!-- Defer non-critical images -->
+    <link rel="preload" href="首頁資料/pic/gept.jpg" as="image" fetchpriority="low">
+    <link rel="preload" href="首頁資料/pic/exp.jpg" as="image" fetchpriority="low">
+    <link rel="preload" href="首頁資料/pic/chess.png" as="image" fetchpriority="low">
+
+    <!-- Meta tags -->
+    <meta name="description" content="Kelvin林坤逸的作品集與競賽經歷，包含英語演講、科展、小論文等獎項。展示五子棋AI、遊戲開發等程式作品。">
+    <meta name="keywords" content="Kelvin林坤逸, 英語演講, 科展, 小論文, 程式設計, 五子棋AI">
+    <meta property="og:title" content="Kelvin林坤逸 | 作品集與競賽經歷">
+    <meta property="og:description" content="Kelvin林坤逸的作品集與競賽經歷，展示英語演講、科展等獎項與程式作品。">
     <meta property="og:image" content="首頁資料/logo/分頁.svg">
+    <meta property="og:type" content="website">
+    <meta name="robots" content="index, follow">
+    <link rel="canonical" href="https://kelvinlinkk.github.io/report.html">
     <base target="_blank">
 </head>
 
 <body>
     <article id="intro">
-        <img src="首頁資料/pic/me.jpg" id="background-img" alt="Max Verstappen drving in the sunset">
-        <img src="首頁資料/pic/profile.jpg" id="profile" alt="Kelvin programming">
+        <img src="首頁資料/pic/me.jpg" id="background-img" alt="Max Verstappen drving in the sunset" 
+            loading="eager" decoding="async" width="1920" height="1080" onerror="handleImageError(this)">
+        <img src="首頁資料/pic/profile.jpg" id="profile" alt="Kelvin programming" 
+            loading="eager" decoding="async" width="400" height="400" onerror="handleImageError(this)">
         <h1><a href="#about" target="_self">Kelvin 林坤逸</a></h1>
         <section>
-            <a href="https://www.facebook.com/profile.php?id=100069651581286"><img src="首頁資料/logo/facebook.png" alt="Kelvin's facebook"></a>
-            <a href="https://www.youtube.com/channel/UC4V9rH959eGiONgF675Jh6Q"><img src="首頁資料/logo/youtube.png" alt="Kelvin's youtube"></a>
-            <a href="https://www.instagram.com/kvl._.19"><img src="首頁資料/logo/instagram.png" alt="Kelvin's instagram"></a>
-            <a href="https://open.spotify.com/user/kjtyw7iaimedna4fnobopere4"><img src="首頁資料/logo/spotify.png" alt="Kelvin's spotify"></a>
+            <a href="https://www.youtube.com/channel/UC4V9rH959eGiONgF675Jh6Q" 
+                aria-label="Visit Kelvin's YouTube channel"><img src="首頁資料/logo/youtube.png" alt="Kelvin's youtube" 
+                loading="lazy" decoding="async" width="32" height="32" onerror="handleImageError(this)"></a>
+            <a href="https://www.instagram.com/kelvinlinkk" 
+                aria-label="Visit Kelvin's Instagram profile"><img src="首頁資料/logo/instagram.png" alt="Kelvin's instagram" 
+                loading="lazy" decoding="async" width="32" height="32" onerror="handleImageError(this)"></a>
+            <a href="https://open.spotify.com/user/kjtyw7iaimedna4fnobopere4" 
+                aria-label="Visit Kelvin's Spotify profile"><img src="首頁資料/logo/spotify.png" alt="Kelvin's spotify" 
+                loading="lazy" decoding="async" width="32" height="32" onerror="handleImageError(this)"></a>
         </section>
         <br>
     </article>
     <main>
         <article id="about" class="content">
             <h2>雲林縣英語讀者劇場比賽</h2>
             <section>
-                <iframe src="https://www.youtube.com/embed/CVLvCb-r1SM?si=L5RPk_ijGzCPd6GF" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
+                <iframe src="https://www.youtube.com/embed/CVLvCb-r1SM?si=L5RPk_ijGzCPd6GF" 
+                    title="YouTube video player" loading="lazy" 
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    frameborder="0" allowfullscreen></iframe>
                 <h3>2016/10/25 A組第五名</h3>
                 <p>
                     &emsp;&emsp;我的家庭相當注重英文能力的養成，國小的我已經培養了基本的英語能力，可以自然閱讀基礎的英文書籍，並使用英文和外籍人士進行會話，而高中時通過全民英檢中高級複試。此外，為了改善我先天膽怯怕生的性格，我在國小到高中的學習歷程中時常代表學校參加校外演講或說故事比賽，校內比賽曾獲得英文演講比賽第一名、英文說故事比賽第一名、國文演講第二名，校外比賽曾獲得英文說故事第六名、英語讀者劇場第五名。<br><br>
@@ -44,7 +75,10 @@ <h3>2016/10/25 A組第五名</h3>
         <article id="about" class="content">
             <h2>雲林縣說故事比賽</h2>
             <section>
-                <iframe src="https://www.youtube.com/embed/8VEtfnHvC3I?si=L5RPk_ijGzCPd6GF" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
+                <iframe src="https://www.youtube.com/embed/8VEtfnHvC3I?si=L5RPk_ijGzCPd6GF" 
+                    title="YouTube video player" loading="lazy"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    frameborder="0" allowfullscreen></iframe>
                 <h3>2018/10/26 A組第六名</h3>
                 <p>
                     &emsp;&emsp;英文說故事中，我分飾兩角詮釋了西遊記中孫悟空向鐵扇公主借扇子的經典場面，短短五分鐘的演出，令我切身瞭解到凡事沒有捷徑，也不存在什麼絕對無法完成的事情。此外，我也初次瞭解到英式口音與美式口音諾大的差距。<br><br>
@@ -54,7 +88,10 @@ <h3>2018/10/26 A組第六名</h3>
         <article id="about" class="content">
             <h2>雲林縣英語讀者劇場比賽</h2>
             <section>
-                <iframe src="https://www.youtube.com/embed/VAx_UAWe07c?si=L5RPk_ijGzCPd6GF" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
+                <iframe src="https://www.youtube.com/embed/VAx_UAWe07c?si=L5RPk_ijGzCPd6GF" 
+                    title="YouTube video player" loading="lazy"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    frameborder="0" allowfullscreen></iframe>
                 <h3>2019/10/26 A組第五名</h3>
                 <p>
                     &emsp;&emsp;當三隻小豬與大野狼遇上衛生紙短缺危機，究竟會摩擦出什麼火花呢?這次，就讓畢業前的我們再為各位獻上最後一場好戲吧!<br><br>
@@ -64,7 +101,8 @@ <h3>2019/10/26 A組第五名</h3>
         <article id="about" class="content">
             <h2>全民英檢</h2>
             <section>
-                <img src="首頁資料/pic/gept.jpg" alt="Kelvin's classmates">
+                <img src="首頁資料/pic/gept.jpg" alt="Kelvin's GEPT certificate" 
+                    loading="lazy" decoding="async" width="800" height="600" onerror="handleImageError(this)">
                 <h3>2022/12/17 中高級複試通過</h3>
                 <p>
                     &emsp;&emsp;學習英文的過程，我會善用資訊科技輔助學習，如使用Anki背單詞、用podcast練習聽力，並利用字根表幫助我更加容易記憶單字。英文能力很大程度的幫助了我在準備科展查找資料、在大型比賽用英文發表作品的過程。<br><br>
@@ -74,7 +112,8 @@ <h3>2022/12/17 中高級複試通過</h3>
         <article id="about" class="content">
             <h2>全國高級中學小論文寫作比賽</h2>
             <section>
-                <img src="首頁資料/pic/exp.jpg" alt="Kelvin's classmates">
+                <img src="首頁資料/pic/exp.jpg" alt="小論文特優作品展示" 
+                    loading="lazy" decoding="async" width="800" height="600" onerror="handleImageError(this)">
                 <h3>1120315梯次  獲得特優</h3>
                 <p>
                     &emsp;&emsp;在了解YOLO演算法運作原理後，身為雲林人的我們覺得這項科技可以應用在農業上，因此，我們結合了YOLO演算法和可以即時回傳影像的TELLO無人機，並根據影像調控無人機的飛行軌跡，建立了一個自動驅逐有害鳥類獼猴的的無人機系統，報告在小論文比賽中獲得特優。<br><br>
@@ -84,7 +123,8 @@ <h3>1120315梯次  獲得特優</h3>
         <article id="about" class="content">
             <h2>國立暨縣(市)公私立高級中等學校第四區分區科學展覽會</h2>
             <section>
-                <img src="首頁資料/pic/exp.jpg" alt="Kelvin's classmates">
+                <img src="首頁資料/pic/exp.jpg" alt="科展優等作品展示" 
+                    loading="lazy" decoding="async" width="800" height="600" onerror="handleImageError(this)">
                 <h3>第63屆  獲得優等</h3>
                 <p>
                     &emsp;&emsp;在瞭解到學校有學生家裡從事錦鯉魚產業後，我們將YOLO的應用的目光投向了錦鯉魚產業上。我們在深入了解後發現錦鯉魚是適合台灣發展的高附加價值產業，因此我們建構了一個既適合賣家更適合買家使用的錦鯉魚辨識系統，讓對於該產業有興趣的初學者可以更深入的認識自己手上錦鯉魚的品種以及預估價格、疾病等相關資訊。<br><br>
@@ -94,7 +134,8 @@ <h3>第63屆  獲得優等</h3>
         <article id="about" class="content">
             <h2>五子棋專家系統</h2>
             <section>
-                <img src="首頁資料/pic/chess.png" alt="Kelvin's classmates">
+                <img src="首頁資料/pic/chess.png" alt="AI五子棋遊戲介面" 
+                    loading="lazy" decoding="async" width="800" height="600" onerror="handleImageError(this)">
                 <h3><a href="https://scratch.mit.edu/projects/655103105/editor">點擊此處開始遊戲</a></h3>
                 <p>
                     &emsp;&emsp;另外個讓我深愛資訊科技的啟蒙者是MIT開發的Scratch軟體。小學時，我用Scratch撰寫了許多遊戲以及計算工具。我曾經用Scratch寫出一個自動下棋機器人，AI會根據棋子連線長度自動給予加權分數計算出最佳下法。<br><br>
@@ -104,17 +145,29 @@ <h3><a href="https://scratch.mit.edu/projects/655103105/editor">點擊此處開
         <article id="about" class="content">
             <h2>手機遊戲抽卡模擬器</h2>
             <section>
-                <img src="首頁資料/pic/exp.jpg" alt="Kelvin's classmates">
+                <img src="首頁資料/pic/exp.jpg" alt="抽卡模擬器介面" 
+                    loading="lazy" decoding="async" width="800" height="600" onerror="handleImageError(this)">
                 <h3><a href="genshin/card.html">點擊此處開始抽卡</a></h3>
                 <p>
                     &emsp;&emsp;<br><br>
                 </p>
             </section>
         </article>
-        <script src="首頁資料/js/profile.js"></script>
+        <script src="首頁資料/js/profile.js" defer></script>
     </main>
     <footer>
         <h3><a href="#about">Kelvin Lin</a> 的首頁 | 技術支援：<a href="https://pages.github.com/">github pages</a></h3>
     </footer>
+    <script>
+        function handleError(event) {
+            console.error('An error occurred:', event.error);
+        }
+
+        function handleImageError(img) {
+            console.error('Image failed to load:', img.src);
+            img.src = '首頁資料/logo/logo.png';
+            img.alt = 'Image loading failed';
+        }
+    </script>
 </body>
 </html>
diff --git a/tesst.json b/tesst.json