Update

CascadingStyleSheets/About/about.css

@@ -144,7 +144,57 @@
     width: 100vw;
     height: 100dvh;
 
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(255, 255, 255, 0.7);
 
     display: none;
+
+    z-index: 998;
+}
+
+#about_ExpandContent.expanded-loading {
+
+    display: initial;
+    opacity: 0;
+
+    transition: opactiy 0.5s;
+}
+#about_ExpandContent.expanded {
+
+    opacity: 1;
+    transition: opacity 0.5s;
+}
+
+#about_ExpandContent #content_acknowledgments {
+
+    width: 100vw;
+    height: 100dvh;
+
+    overflow: hidden scroll;
+
+    /* filter: invert(1); */
+}
+#about_ExpandContent #content_acknowledgments::-webkit-scrollbar {
+    display: none;
+}
+
+#about_ExpandContent #content_acknowledgments > img:nth-child(1) {
+
+    display: block;
+
+    height: 15em;
+    text-align: center;
+
+    margin: 10dvh auto 5dvh;
+
+    border-radius: 10em;
+    border: 0.15em solid #000000;
+}
+
+#about_ExpandContent #content_acknowledgments > p:nth-child(2) {
+
+    color: var(--font-color-title);
+    font-size: var(--font-size-2_5em);
+    font-family: var(--fontface-title);
+
+    text-align: center;
 }

CascadingStyleSheets/General/footer.css

@@ -52,7 +52,7 @@
     position: relative;
     margin: auto;
 
-    z-index: 999;
+    z-index: 888;
 
     transition: opacity 2s;
 }

Data/About/Acknowledgments/AngusTan.json

@@ -1,3 +1,17 @@
 {
-    "target-page": "https://angustan.com/"
+    "profile-pictures": "https://avatars.githubusercontent.com/u/59675739?v=4",
+    "websites": "https://angustan.com/",
+    "github": "https://github.com/tanvihang",
+    "gitlab": "none",
+    "gitee": "none",
+    "email": "[email protected]",
+    "help_list": {
+        "layout-bugs-fix": true,
+        "responsive-design": true,
+        "animation-enhancements": true,
+        "crossBrowser-compatibility": true,
+        "crossDevice-compatibility": true,
+        "styling-best-practices": true,
+        "new-features-of-css":true
+    }
 }

JavaScript/About/about.js

@@ -46,9 +46,12 @@ export const SeeChen_AboutPage = {
                 aboutSession.children[2].children.push({
                     tag: "span",
                     props: {
+                        id: `${aboutSessionList[sessionTitle]["handle"].split("_")[1]}-${aboutSessionChildren["handle"].split("-")[1]}`,
                         class: "session-children",
                         "data-event-handle": aboutSessionChildren["handle"],
-                        "data-target-link": aboutSessionChildren["link"] ? aboutSessionChildren["link"] : null
+                        "data-target-link": aboutSessionChildren["link"] ? aboutSessionChildren["link"] : null,
+
+                        "data-original-obj": sessionContent
                     },
                     lang: "about",
                     children: [sessionContent]
@@ -205,7 +208,27 @@ const SeeChen_AboutPage_Acknowledgments = {
             var targetDetails = `/Data/About/Acknowledgments/${e.target.dataset.eventHandle.split("-")[1]}.json`;
             targetDetails = await window.myTools.getJson(targetDetails);
 
-            console.log(targetDetails);
+            const template_Acknowledgments = await window.myTools.getJson("/Layout/Webpages/About/Session/Acknowledgments.json");
+            const old_Acknowledgmenst = window.myTools.deepCopy(window.myData.about.contentExpand);
+
+            window.myData.about.contentExpand = template_Acknowledgments;
+
+            window.myData.about.contentExpand.children[0].props["src"] = targetDetails["profile-pictures"];
+            window.myData.about.contentExpand.children[1].children = [e.target.dataset.originalObj];
+
+            console.log(window.myData.about.contentExpand);
+
+            window.vDom.Patch(
+                document.querySelector("#about_ExpandContent"),
+                window.vDom.Diff(
+                    old_Acknowledgmenst,
+                    window.myData.about.contentExpand
+                )
+            );
+
+            document.querySelector("#about_ExpandContent").classList.add("expanded-loading");
+            await new Promise(r => setTimeout(r, 100));
+            document.querySelector("#about_ExpandContent").classList.add("expanded");
 
             document.querySelector("#box_LoadingAnimation").classList.remove("display");
             await new Promise(r => setTimeout(r, 600));

JavaScript/Index/index.js

@@ -92,7 +92,9 @@ window.myData = {
 
     about: {
         OldLayout: {},
-        vDomLayout: {}
+        vDomLayout: {},
+
+        contentExpand: {}
     }
 }
 

Layout/Webpages/About/About.json

@@ -17,6 +17,11 @@
             "id": "about_ExpandContent"
         },
         "lang": "",
-        "children": []
+        "children": [{
+            "tag": "p",
+            "props": {},
+            "lang": "",
+            "children": []
+        }]
     }]
 }

Layout/Webpages/About/Session/Acknowledgments.json

@@ -1,6 +1,20 @@
 {
     "tag": "div",
-    "props": {},
+    "props": {
+        "id": "content_acknowledgments"
+    },
     "lang": "",
-    "children": []
+    "children": [{
+        "tag": "img",
+        "props": {
+            "src": "/favicon.svg"
+        },
+        "lang": "",
+        "children": []
+    }, {
+        "tag": "p",
+        "props": {},
+        "lang": "about",
+        "children": []
+    }]
 }

README.md

@@ -167,50 +167,50 @@ seechen.github.io
 
 |||||
 |:---:|:---:|:---:|:---:|
-|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email]([email protected])|
+|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](mailto:[email protected])|
 
 #### 6.2.2 Responsive Design
 > Suggestions on creating responsive designs to ensure optimal performance across different devices.
 
 |||||
 |:---:|:---:|:---:|:---:|
-|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email]([email protected])|
-|Eugene Yip|[Websites](https://spevoljy.site/)|[GitHub](https://github.com/EugeneSpevoljy)|[Email]([email protected])|
+|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](mailto:[email protected])|
+|Eugene Yip|[Websites](https://spevoljy.site/)|[GitHub](https://github.com/EugeneSpevoljy)|[Email](mailto:[email protected])|
 
 #### 6.2.3 Animation Enhancements
 > Enhancements to CSS animations, including optimizations for keyframe animations and transitions.
 
 |||||
 |:---:|:---:|:---:|:---:|
-|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email]([email protected])|
+|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](mailto:[email protected])|
 
 #### 6.2.4 Cross-Browser Compatibility
 > Suggestions for addressing cross-browser compatibility issues to ensure consistent display across different browsers.
 
 |||||
 |:---:|:---:|:---:|:---:|
-|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email]([email protected])|
+|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](mailto:[email protected])|
 
 #### 6.2.5 Cross-Device Compatibility
 > Suggestions on designing layouts for cross-device compatibility, ensuring a good user experience on phones, tablets, and desktops.
 
 |||||
 |:---:|:---:|:---:|:---:|
-|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email]([email protected])|
+|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](mailto:[email protected])|
 
 #### 6.2.6 Styling Best Practices
 > Shared best practices for writing CSS, including naming conventions, performance optimization, and maintainability improvements.
 
 |||||
 |:---:|:---:|:---:|:---:|
-|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email]([email protected])|
+|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](mailto:[email protected])|
 
 #### 6.2.7 New Features of CSS
 > Introduced the application of new CSS features,
 
 |||||
 |:---:|:---:|:---:|:---:|
-|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email]([email protected])|
+|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](mailto:[email protected])|
 
 
 ### 6.3 JavaScript
@@ -223,5 +223,5 @@ seechen.github.io
 ---
 <div align="right">
 
-###### *Last Modified by [SeeChen](https://github.com/SeeChen/) @ 03-DEC-2024 21:22 UTC +08:00*
+###### *Last Modified by [SeeChen](https://github.com/SeeChen/) @ 11-DEC-2024 07:29 UTC +08:00*
 </div>