diff --git a/CSS/General/navigation_bar.css b/CSS/General/navigation_bar.css index 985b4e9..c74eb5f 100644 --- a/CSS/General/navigation_bar.css +++ b/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; } diff --git a/CSS/index/home.css b/CSS/index/home.css index 68e854e..94e6ae8 100644 --- a/CSS/index/home.css +++ b/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; } diff --git a/JS/INDEX/home.js b/JS/INDEX/home.js index e69de29..1cff9e1 100644 --- a/JS/INDEX/home.js +++ b/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>' + ) + } + }) +} \ No newline at end of file diff --git a/JS/INDEX/index.js b/JS/INDEX/index.js index d58f834..f9c69d4 100644 --- a/JS/INDEX/index.js +++ b/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()); } diff --git a/JSON/LANGUAGE/home_timeline.json b/JSON/LANGUAGE/home_timeline.json new file mode 100644 index 0000000..ef2b60a --- /dev/null +++ b/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." + }] +} \ No newline at end of file diff --git a/JSON/LANGUAGE/index_home.json b/JSON/LANGUAGE/index_home.json index 02e9d9a..12d7c04 100644 --- a/JSON/LANGUAGE/index_home.json +++ b/JSON/LANGUAGE/index_home.json @@ -4,9 +4,7 @@ "_home_name_": "您好,我是 <span class='_switch_lang_' lang_obj='_home_my_name_' ></span>", "_home_my_name_": "李思净。", "_status_": "求职中。。。", - "_timeline_": "我的纪年表", - "_t20000806_01_": "我出生啦!!!", - "_t20240630_01_": "在北京理工大学获得数据科学与大数据技术学士学位." + "_timeline_": "我的纪年表" }], "en" : [{ @@ -14,8 +12,6 @@ "_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" }] } \ No newline at end of file diff --git a/JSON/LAYOUT/home_timeline.json b/JSON/LAYOUT/home_timeline.json new file mode 100644 index 0000000..76bcbee --- /dev/null +++ b/JSON/LAYOUT/home_timeline.json @@ -0,0 +1,9 @@ +[{ + "img": "20000806-01" +}, +{ + "img": "20200901-01" +}, +{ + "img": "20240630-01" +}] \ No newline at end of file diff --git a/MATERIALS/2.py b/MATERIALS/2.py index fbc8ed0..a3bed6e 100644 --- a/MATERIALS/2.py +++ b/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) \ No newline at end of file +JPGimg = Image.open('20200901-01' + '.jpg') +JPGimg.save('20200901-01' + '.avif','AVIF', exif=None) \ No newline at end of file diff --git a/MATERIALS/20000806-01.avif b/MATERIALS/20000806-01.avif new file mode 100644 index 0000000..94e84bf Binary files /dev/null and b/MATERIALS/20000806-01.avif differ diff --git a/MATERIALS/20000806-01.png b/MATERIALS/20000806-01.png deleted file mode 100644 index e77b4f8..0000000 Binary files a/MATERIALS/20000806-01.png and /dev/null differ diff --git a/MATERIALS/20200901-01.avif b/MATERIALS/20200901-01.avif new file mode 100644 index 0000000..89d8eba Binary files /dev/null and b/MATERIALS/20200901-01.avif differ diff --git a/index.html b/index.html index 41fdcb9..80dec6c 100644 --- a/index.html +++ b/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>