Update HomePages

CascadingStyleSheets/home/home.css

@@ -60,6 +60,10 @@
 
 }
 
+#box_HomePage {
+    transition: opacity 0.5s;
+}
+
 #box_HomePage > div:first-child {
 
     margin-bottom: calc(2 * var(--home-my-name-margin));

JavaScript/General/VirtualDOM.js

@@ -2,19 +2,20 @@
 export const vDom = {
 
     Create: (
-        Layout,
-        LanguageFile = {}
+        Layout
     ) => {
 
         const { tag, props = {}, lang = "", children = [] } = Layout;
 
+        let LanguageObj = window.globalValues.translateData;
+
         return vDom.CreateElement(
             tag,
             props,
             lang,
             children.length === 1 && typeof children[0] === "string"
-            ? [LanguageFile[lang] ? LanguageFile[lang][children[0]] : children[0]]
-            : children.map(child => vDom.Create(child, LanguageFile))
+            ? [LanguageObj[lang] ? LanguageObj[lang][window.globalValues.language][children[0]] : children[0]]
+            : children.map(child => vDom.Create(child))
         );
     },
 
@@ -46,6 +47,7 @@ export const vDom = {
         }
 
         vNode.children.forEach(child => {
+
             if (typeof child === "string") {
                 el.innerHTML += child;
             } else {

JavaScript/General/footer.js

@@ -7,11 +7,7 @@ export const SeeChen_Footer = {
 
         document.querySelector("#box_footerArea").appendChild(
             window.vDom.Render(
-                window.vDom.Create(footerLayout, {
-                    nav: window.globalValues.translateData.navigation[window.globalValues.language],
-                    idx: window.globalValues.translateData.index[window.globalValues.language],
-                    footer: window.globalValues.translateData.footer[window.globalValues.language]
-                })
+                window.vDom.Create(footerLayout)
             )
         );
     },

JavaScript/General/navigation.js

@@ -5,13 +5,9 @@ export const SeeChen_Navigation = {
 
         var navPageLayout = await window.myTools.getJson("/Layout/Webpages/General/Navigation.json");
 
-        let LanguageFile = window.globalValues.translateData.navigation[window.globalValues.language];
-        LanguageFile["_title_"] = window.globalValues.translateData.index[window.globalValues.language]._title_;
         document.querySelector("#box_navBar").appendChild(
             window.vDom.Render(
-                window.vDom.Create(navPageLayout, {
-                    "nav": LanguageFile
-                })
+                window.vDom.Create(navPageLayout)
             )
         );
     },

JavaScript/General/tools.js

@@ -68,14 +68,23 @@ export const tools = {
 
     getTranslate: async () => {
         try {
+            var translateMonth = await tools.getJson("/Language/General/month.json");
+            window.globalValues.translateData.month = translateMonth;
+
             var translateIndex = await tools.getJson("/Language/Index/index.json");
-            window.globalValues.translateData.index = translateIndex;
+            window.globalValues.translateData.idx = translateIndex;
 
             var translateNavigation = await tools.getJson("/Language/General/navigation.json");
-            window.globalValues.translateData.navigation = translateNavigation;
+            window.globalValues.translateData.nav = translateNavigation;
 
             var translateFooter = await tools.getJson("/Language/General/footer.json");
             window.globalValues.translateData.footer = translateFooter;
+
+            var translateHome = await tools.getJson("/Language/Home/home.json");
+            window.globalValues.translateData.home = translateHome;
+
+            var translateTimeline = await tools.getJson("/Language/Home/timeline.json");
+            window.globalValues.translateData.timeline = translateTimeline;
         } catch (err) {
             console.error(err);
         }

JavaScript/Home/home.js

@@ -3,9 +3,121 @@ export const SeeChen_HomePage = {
 
     render: async () => {
 
-        console.log("Home Page Render.");
         var homePageLayout = await window.myTools.getJson("/Layout/Webpages/Home/Home.json");
-        console.log(homePageLayout);
+        var homePageDom = window.vDom.Create(homePageLayout, {
+            home: window.globalValues.translateData.home[window.globalValues.language],
+            month: window.globalValues.translateData.month[window.globalValues.language]
+        });
+
+        var homeTimeline = await window.myTools.getJson("/Layout/Webpages/Home/Timeline.json");        
+        let homeTimeline_Year = Object.keys(homeTimeline).filter(item => item != "title");
+
+        homePageDom.children[4].children.push(
+            window.vDom.Create(
+                {
+                    tag: "p",
+                    props: {
+                        class: "home_toSticky home_SectionTitle home_ContentSectionAnimation"
+                    },
+                    lang: "timeline",
+                    children: [homeTimeline.title]
+                }
+            )
+        )
+
+        for (const year of homeTimeline_Year) {
+
+            const data_Year = homeTimeline[year];
+            let homeTimeline_Month = Object.keys(data_Year);
+
+            let timeline_Layout = {
+                tag: "div",
+                props: {
+                    style: "position: relative;"
+                },
+                lang: "",
+                children: [{
+                    tag: "p",
+                    props: {
+                        class: "home_toSticky home_SectionSecondTitle"
+                    },
+                    lang: "",
+                    children: [year]
+                }]
+            }
+
+            for (const month of homeTimeline_Month) {
+
+                const data_Month = data_Year[month];
+                let homeTimeline_Day = Object.keys(data_Month);
+
+                timeline_Layout.children.push({
+                    tag: "div",
+                    props: {
+                        style: "position: relative;"
+                    },
+                    lang: "",
+                    children: [{
+                        tag: "p",
+                        props: {
+                            class: "home_toSticky home_SectionSecondTitle home_SectionSecondTitle2"
+                        },
+                        lang: "month",
+                        children: [month]
+                    }]
+                });
+
+                for (const day of homeTimeline_Day) {
+
+                    const day_Data = data_Month[day];
+                    day_Data.forEach(item => {
+
+                        timeline_Layout.children[1].children.push({
+                            tag: "div",
+                            props: {
+                                class: "home_Timeline_Content"
+                            },
+                            lang: "",
+                            children: [{
+                                tag: "p",
+                                props: {
+                                    class: "day"
+                                },
+                                lang: "",
+                                children: [day.replace("d", "")]
+                            }, {
+                                tag: "img",
+                                props: {
+                                    src: item.src,
+                                    alt: item.alt
+                                },
+                                lang: "",
+                                children: []
+                            }, {
+                                tag: "p",
+                                props: {
+                                    class: "description"
+                                },
+                                lang: "timeline",
+                                children: [item.alt]
+                            }]
+                        });
+                    });
+                }
+            }
+
+            homePageDom.children[4].children.push(
+                window.vDom.Create(timeline_Layout)
+            );
+        }
+
+        console.log(homePageDom);
+
+        document.querySelector("#box_contentArea").appendChild(
+            window.vDom.Render(
+                homePageDom
+            )
+        );
     },
 
     home_Scroll: (x) => {
@@ -25,7 +137,15 @@ export const SeeChen_HomePage = {
         window.eventBus.off(
             "scrollEvent",
             home_Scroll
-        )
+        );
+
+        const boxContent = document.querySelector("#box_contentArea");
+        const homeContent = boxContent.querySelector("#box_HomePage");
+        homeContent.style.opacity = 0;
+
+        setTimeout(() => {
+            boxContent.removeChild(homeContent);
+        }, 1000);
     }
 }
 

JavaScript/Index/index.js

@@ -58,7 +58,7 @@ window.onload = async function() {
     await window.webpages.currentPages.render();
     window.webpages.currentPages.registerEvents();
 
-    document.title = window.globalValues.translateData.index[window.globalValues.language]._title_;
+    document.title = window.globalValues.translateData.idx[window.globalValues.language]._title_;
 
     // Home
     homeScroll();

Language/General/month.json

@@ -1,19 +1,31 @@
 {
     "zh": {
-        "_jan_": "一月",
-        "_feb_": "二月",
-        "_lens_": "我的方框",
-        "_post_": "我的发癫",
-        "_projects_": "我的项目",
-        "_about_": "关于我的"
+        "_jan_": "一月份",
+        "_feb_": "二月份",
+        "_mar_": "三月份",
+        "_apr_": "四月份",
+        "_may_": "五月份",
+        "_jun_": "六月份",
+        "_jul_": "七月份",
+        "_aug_": "八月份",
+        "_sep_": "九月份",
+        "_oct_": "十月份",
+        "_nav_": "十一月",
+        "_dec_": "十二月"
     }, 
 
     "en": {
-        "_home_": "Home",
-        "_travel_": "Travel",
-        "_lens_": "Lens",
-        "_post_": "Post",
-        "_projects_": "Projects",
-        "_about_": "About"
+        "_jan_": "January",
+        "_feb_": "February",
+        "_mar_": "March",
+        "_apr_": "April",
+        "_may_": "May",
+        "_jun_": "June",
+        "_jul_": "July",
+        "_aug_": "August",
+        "_sep_": "September",
+        "_oct_": "October",
+        "_nav_": "November",
+        "_dec_": "December"
     }
 }

Language/Home/home.json

@@ -0,0 +1,17 @@
+{
+    "zh": {
+        "_title_": "SEECHEN",
+        "_home_welcome_": "花径不曾缘客扫，蓬门今始为君开.",
+        "_home_name_1_": "您好呀，我是",
+        "_home_name_2_": "李思净",
+        "_home_status_": "求职中..."
+    }, 
+
+    "en": {
+        "_title_": "SEECHEN",
+        "_home_welcome_": "Delighted to have the honor of your visit.",
+        "_home_name_1_": "HERE'S",
+        "_home_name_2_": "SEECHEN",
+        "_home_status_": "LOOKING for WORKS..."
+    }
+}

Language/Home/timeline.json

@@ -0,0 +1,19 @@
+{
+    "zh": {
+        "_timeline_": "时间轴",
+
+        "_t20000806_01_": "我出生啦！！！",
+        "_t20200901_01_": "入学北京理工大学.",
+        "_t20231202_01_": "景山公园眺望故宫.",
+        "_t20240630_01_": "在北京理工大学获得数据科学与大数据技术学士学位."
+    }, 
+
+    "en": {
+        "_timeline_": "TIMELINE",
+
+        "_t20000806_01_": "I was BORN!",
+        "_t20200901_01_": "Admission to Beijing Institute of Technology.",
+        "_t20231202_01_": "Overlooking the Forbidden City from Jingshan Park.",
+        "_t20240630_01_": "Received a bachelor's degree in Data Science and Big Data Technology from Beijing Institute of Technology."
+    }
+}

Layout/Webpages/General/Navigation.json

@@ -4,7 +4,7 @@
     "children": [{
         "tag": "p",
         "props": {},
-        "lang": "nav",
+        "lang": "idx",
         "children": ["_title_"]
     }, {