Update

CSS/General/navigation_bar.css

@@ -9,7 +9,7 @@
     margin: auto;
     border-radius: 1em;
     backdrop-filter: blur(0.35em);
-    box-shadow: 1px 1px 0.25em #ccc;
+    box-shadow: 2px 2px 0.25em #000;
     z-index: 1000;
 }
 

CSS/index/home.css

@@ -78,6 +78,7 @@
     width: 70%;
     height: 40vh;
     margin: auto;
+    margin-bottom: 2em;
     text-align: center;
     position: relative;
     padding: 1em;
@@ -110,7 +111,8 @@
     transition: all 1s;
 }
 #main_timeline div img {
-    height: 90%;
+    width: 100%;
+    max-height: 90%;
     position: absolute;
     left: 0;
     right: 0;
@@ -119,6 +121,10 @@
     margin: auto;
     opacity: 1;
     transition: all 0.5s;
+    pointer-events: none;
+    box-shadow: 0 0 50px 30px #d8dad7 inset;
+    object-fit: contain;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cbody class='wrap' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cstyle%3E.wrap%7Bbox-sizing:border-box;margin:0;height:100%25;padding:10px%7D.shadow%7Bheight:100%25;background:%23000;border-radius:10px;box-shadow:0 0 5px %23000,0 0 10px %23000,0 0 15px %23000%7D%3C/style%3E%3Cdiv class='shadow'/%3E%3C/body%3E%3C/foreignObject%3E%3C/svg%3E");
 }
 
 #main_timeline div:hover .p_time {
@@ -134,6 +140,7 @@
 
 #main_timeline div:hover img{
     opacity: 0.2;
+    transform: scale(1.5);
 }
 
 #social_media_icon {
@@ -195,6 +202,10 @@
         margin-top: 1em;
     }
 
+    #main_timeline div {
+        margin-bottom: 1em;
+    }
+
     #main_timeline div .p_time {
         font-size: 2em;
     }

JS/INDEX/home.js

@@ -0,0 +1,23 @@
+function loadTimeLine() {
+
+    $.getJSON('../../JSON/LAYOUT/home_timeline.json', function(data) {
+
+        LenData = data.length;
+        for(var items = 0; items < LenData; items++) {
+            let item = data[items]['img'];
+            let item_src = './MATERIALS/' + item + '.avif';
+            let item_area_id = "area_" + item.replace("-", "_");
+            let item_time = item.substring(0, 4) + "." + item.substring(4, 6) + "." + item.substring(6, 8);
+            let item_lang_obj = "_t" + item.replace("-", "_") + "_";
+
+            $('#main_timeline').html(
+                $('#main_timeline').html()
+                + '<div id="' + item_area_id + '">'
+                + '<img src="' + item_src + '" alt="">'
+                + '<p class="p_time">' + item_time + '</p>'
+                + '<p class="_switch_lang_ p_descript" lang_obj="' + item_lang_obj + '"></p>'
+                + '</div>'
+            )
+        }
+    })
+}

JS/INDEX/index.js

@@ -5,6 +5,7 @@ var language = new _language();
 var lang_url = "./JSON/LANGUAGE/index.json";
 var nav_lang = "./JSON/LANGUAGE/navigation_bar.json";
 var index_home = "./JSON/LANGUAGE/index_home.json";
+var home_timeline = "./JSON/LANGUAGE/home_timeline.json";
 
 var current_content_margin_left = 0;
 
@@ -19,8 +20,12 @@ window.onload = function() {
     language_click(lang_url)
     language_click(nav_lang)
     language_click(index_home)
+    language_click(home_timeline)
 
     SlideLeftAndRight();
+    loadTimeLine();
+
+    language.loadPageLanguage(home_timeline, language.getLanguage());
 
 }
 

JSON/LANGUAGE/home_timeline.json

@@ -0,0 +1,13 @@
+{
+    "zh" : [{
+        "_t20000806_01_": "我出生啦！！！",
+        "_t20200901_01_": "入学北京理工大学.",
+        "_t20240630_01_": "在北京理工大学获得数据科学与大数据技术学士学位."
+    }],
+
+    "en" : [{
+        "_t20000806_01_": "I was BORN!",
+        "_t20200901_01_": "Admission to Beijing Institute of Technology.",
+        "_t20240630_01_": "Received a bachelor's degree in Data Science and Big Data Technology from Beijing Institute of Technology."
+    }]
+}

JSON/LANGUAGE/index_home.json

@@ -4,18 +4,14 @@
       "_home_name_": "您好，我是 <span class='_switch_lang_' lang_obj='_home_my_name_' ></span>",
       "_home_my_name_": "李思净。",
       "_status_": "求职中。。。",
-      "_timeline_": "我的纪年表",
-      "_t20000806_01_": "我出生啦！！！",
-      "_t20240630_01_": "在北京理工大学获得数据科学与大数据技术学士学位."
+      "_timeline_": "我的纪年表"
     }],
 
     "en" : [{
       "_home_welcome_": "Delighted to have the honor of your visit.",
       "_home_name_": "HERE'S <span class='_switch_lang_' lang_obj='_home_my_name_' ></span>",
       "_home_my_name_": "SEECHEN LEE.",
       "_status_": "LOOKING for WORK.",
-      "_timeline_": "My TIMELINE",
-      "_t20000806_01_": "I was BORN!",
-      "_t20240630_01_": "Received a bachelor's degree in Data Science and Big Data Technology from Beijing Institute of Technology."
+      "_timeline_": "My TIMELINE"
     }]
   }

JSON/LAYOUT/home_timeline.json

@@ -0,0 +1,9 @@
+[{
+    "img": "20000806-01"
+}, 
+{
+    "img": "20200901-01"
+},
+{
+    "img": "20240630-01"
+}]

MATERIALS/2.py

@@ -1,5 +1,5 @@
 from PIL import Image
 import pillow_avif
 
-JPGimg = Image.open('home-background' + '.jpg')
-JPGimg.save('home-background' + '.AVIF','AVIF', exif=None)
+JPGimg = Image.open('20200901-01' + '.jpg')
+JPGimg.save('20200901-01' + '.avif','AVIF', exif=None)

index.html

@@ -49,18 +49,7 @@
                             <p class="_switch_lang_" lang_obj="_status_">_status_</p>
                             <div id="my_timeline">
                                 <p class="_switch_lang_" lang_obj="_timeline_">_timeline_</p>
-                                <div id="main_timeline">
-                                    <div id="area_20000806_01">
-                                        <img src="./MATERIALS/20000806-01.png" alt="">
-                                        <p class="p_time">2000.08.06</p>
-                                        <p class="_switch_lang_ p_descript" lang_obj="_t20000806_01_">_t20000806_01_</p>
-                                    </div>
-                                    <div id="area_20240630_01">
-                                        <img src="./MATERIALS/20240630-01.AVIF" alt="">
-                                        <p class="p_time">2024.06.30</p>
-                                        <p class="_switch_lang_ p_descript" lang_obj="_t20240630_01_">_t20240630_01_</p>
-                                    </div>
-                                </div>
+                                <div id="main_timeline"></div>
                             </div>
 
                             <br>