diff --git a/CascadingStyleSheets/Projects/projects.css b/CascadingStyleSheets/Projects/projects.css
index 725b290..0ed528e 100644
--- a/CascadingStyleSheets/Projects/projects.css
+++ b/CascadingStyleSheets/Projects/projects.css
@@ -12,12 +12,39 @@
 
     --project-Details-top: 0;
     --project-Details-left: 0;
+
+    --project-Details-div-flex-direction: row;
+
+    --project-Details-Directory-height: 94vh;
+    --project-Details-Directory-width: 20vw;
+    --project-Details-Directory-overflow: hidden scroll;
+    --project-Details-Directory-border-right: 0.1em solid var(--font-color-title);
+    --project-Details-Directory-border-top: 0em solid var(--font-color-title);
+
+    --project-Details-Directory-flex-direction: column;
+
+    --project-Details-Content-height: 94vh;
+    --project-Details-Content-width: 80vw;
+    --project-Details-Content-overflow: hidden scroll;
 }
 
 @media screen and (max-width: 750px) {
 
     :root {
 
+        --project-Details-div-flex-direction: column-reverse;
+
+        --project-Details-Directory-height: 8vh;
+        --project-Details-Directory-width: 100vw;
+        --project-Details-Directory-overflow: scroll hidden;
+        --project-Details-Directory-border-top: 0.1em solid var(--font-color-title);
+        --project-Details-Directory-border-right: 0em solid var(--font-color-title);
+
+        --project-Details-Directory-flex-direction: row;
+
+        --project-Details-Content-height: 92vh;
+        --project-Details-Content-width: 100vw;
+        --project-Details-Content-overflow: hidden scroll;
     }
 }
 
@@ -81,6 +108,8 @@
 
     border-radius: 1em;
     border: 0.15em solid var(--font-color-normal);
+
+    cursor: pointer;
 }
 
 #box_projectsPage > div:nth-child(3) > .project_border > div:first-child {
@@ -202,15 +231,20 @@
     left: var(--project-Details-left);
     top: var(--project-Details-top);
 
-    width: 10vw;
+    width: 0;
     height: 0;
 
     pointer-events: none;
 
+    border: 0em solid var(--font-color-normal);
+    border-radius: 1em;
+    background: rgba(255, 255, 255, 0.8);
+    opacity: 0;
+
     z-index: 10000;
-    background: red;
 
-    transition: width 0.25s, height 0.15s;
+    transition: width 0.15s, height 0.15s, border 0.15s;
+
 }
 
 #project_details.small-window {
@@ -218,5 +252,527 @@
     width: 20vw;
     height: 20vw;
 
+    border: 0.15em solid var(--font-color-normal);
+    border-radius: 1em;
+
+    pointer-events: initial;
+    opacity: 1;
+
     transition: width 0.25s, height 0.15s;
 }
+
+#project_details.ready-to-full {
+
+    transition: all 0.5s;
+}
+
+#project_details.full-window {
+
+    width: 100vw;
+    height: 100vh;
+
+    border: 0em solid var(--font-color-normal);
+    border-radius: 0em;
+    background: var(--bg-color);
+
+    pointer-events: initial;
+
+    left: 0;
+    top: 0;
+    opacity: 1;
+
+    overflow: hidden;
+}
+
+#project_details.full-window #project_details_header {
+
+    position: relative;
+
+    width: 100vw;
+    height: 6vh;
+
+    box-shadow: 2px 2px 2px var(--font-color-title);
+
+    z-index: 2;
+}
+
+#project_details.full-window #project_details_header > p:first-child {
+
+    position: absolute;
+
+    width: 6vh;
+    height: 6vh;
+
+    text-align: center;
+
+    left: 0;
+    top: 0;
+
+    line-height: 6vh;
+
+    cursor: pointer;
+}
+
+#project_details.full-window #project_details_header > p:nth-child(2) {
+
+    position: absolute;
+
+    width: calc(100vw - 12vh);
+    height: 6vh;
+
+    left: 0;
+    right: 0;
+    top: 0;
+
+    margin: auto;
+
+    text-align: center;
+    line-height: 6vh;
+
+    font-size: var(--font-size-2em);
+    font-family: var(--fontface-title);
+}
+
+#project_details.full-window > div:nth-child(2) {
+
+    position: absolute;
+    display: flex;
+    flex-direction: var(--project-Details-div-flex-direction);
+
+    width: 100vw;
+    height: 94vh;
+
+    top: 6vh;
+    left: 0;
+
+    z-index: 1;
+    overflow: hidden;
+}
+
+#project_details.full-window > div:nth-child(2) #project_details_directory {
+
+    height: var(--project-Details-Directory-height);
+    width: var(--project-Details-Directory-width);
+
+    overflow: var(--project-Details-Directory-overflow);
+
+    border-right: var(--project-Details-Directory-border-right);
+    border-top: var(--project-Details-Directory-border-top);
+    box-sizing: border-box;
+
+    display: flex;
+    flex-direction: var(--project-Details-Directory-flex-direction);
+}
+
+#project_details.full-window > div:nth-child(2) #project_details_content {
+
+    position: relative;
+
+    height: var(--project-Details-Content-height);
+    width: var(--project-Details-Content-width);
+
+    overflow: var(--project-Details-Content-overflow);
+}
+
+#project_details.full-window > div:nth-child(2) #project_details_directory::-webkit-scrollbar,
+#project_details.full-window > div:nth-child(2) #project_details_content::-webkit-scrollbar {
+
+    display: none;
+}
+
+#project_details.full-window > div:nth-child(2) #project_details_directory div {
+
+    width: 100%;
+    box-sizing: border-box;
+}
+
+#project_details.full-window > div:nth-child(2) #project_details_directory div p {
+
+    position: relative;
+
+    font-size: var(--font-size-2em);
+    font-family: var(--fontface-title-2);
+    color: var(--font-color-normal);
+    padding-left: 5%;
+
+    width: 90%;
+    height: 8vh;
+    line-height: 8vh;
+
+    box-sizing: border-box;
+
+    cursor: pointer;
+}
+#project_details.full-window > div:nth-child(2) #project_details_directory div p::before {
+
+    position: absolute;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    width: 80%;
+    height: 100%;
+
+    content: "";
+    margin: auto;
+
+    border-bottom: 0.05em solid var(--font-color-normal);
+}
+
+#project_details.full-window > div:nth-child(2) #project_details_directory div.dir_level {
+
+    max-height: 8vh;
+    height: max-content;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    transition: all 1s;
+}
+
+#project_details.full-window > div:nth-child(2) #project_details_directory div.dir_level:has( > p.expand) {
+
+    max-height: 1000vh;
+    height: max-content;
+    transition: all 1s;
+}
+
+#project_details_content .content-block {
+
+    position: absolute;
+
+    left: 0;
+    top: 0;
+
+    width: 100%;
+
+    padding-top: 1em;
+    padding-left: 1em;
+    padding-right: 1em;
+
+    box-sizing: border-box;
+
+    opacity: 0;
+    transition: opacity 0.5s;
+}
+
+#project_details_content > div.content-display {
+
+    opacity: 1;
+    transition: opacity 0.5s;
+}
+
+#project_details_content .content-block .content-block-title-1 {
+
+    position: sticky;
+
+    top: 0;
+
+    font-size: var(--font-size-3em);
+    font-family: var(--fontface-title-4);
+
+    background: var(--bg-color);
+
+    border-bottom: 0.05em solid #CCC;
+}
+
+#project_details_content .content-block .content-block-content-1 {
+
+    font-size: calc(1.5 * var(--font-size-1em));
+    font-family: var(--fontface-content-3);
+
+    text-indent: 2ch;
+    line-height: 1.5em;
+
+    margin-top: 1em;
+    margin-bottom: 1em;
+
+    white-space: pre-wrap;
+}
+
+
+#box_Projects_Git {
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#box_Projects_Git > div {
+
+    width: 100%;
+
+    margin-top: 1em;
+    margin-bottom: 1em;
+    padding-top: 1em;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    border: 0.15em solid #CCC;
+    border-radius: 1em;
+}
+
+#box_Projects_Git > div > p:first-child img {
+
+    height: 4em;
+}
+
+#box_Projects_Git > div > div:nth-child(2) {
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    font-size: var(--font-size-normal);
+    font-family: var(--fontface-content);
+
+    flex-wrap: wrap;
+}
+
+#box_Projects_Git > div > div:nth-child(2) > div {
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    margin: 1em;
+
+    box-sizing: border-box;
+}
+
+#box_Projects_Git > div > div:nth-child(2) > div > p:nth-child(2) {
+
+    padding: 0.15em 0.5em;
+    overflow: scroll hidden;
+
+    border-radius: 0.5em;
+
+    max-width: 60%;
+
+    color: var(--bg-color);
+    background: var(--font-color-title);
+
+    user-select: text;
+}
+
+#box_Projects_Git > div > div:nth-child(2) > div > p:nth-child(2)::-webkit-scrollbar {
+    display: none;
+}
+
+#box_Projects_Git > div > p:nth-child(3), #box_Projects_Git > div > p:nth-child(4) {
+
+    padding: 1em;
+    font-family: var(--fontface-content-4);
+    font-size: var(--font-size-normal);
+}
+
+#box_Projects_License pre {
+
+    font-size: var(--font-size-1em) !important;
+    font-family: var(--fontface-content-4) !important;
+}
+
+#box_Projects_License #license_translate {
+
+    font-size: var(--font-size-normal);
+    color: var(--font-color-normal);
+    font-family: var(--fontface-content);
+
+    margin: 0.5em;
+}
+
+#box_Projects_Author {
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    box-sizing: border-box;
+}
+
+#box_Projects_Author > div {
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 1em;
+    border: 0.15em solid var(--font-color-title);
+
+    width: clamp(40vh, 31vw, 90vw);
+    box-sizing: border-box;
+
+    padding: 1em;
+    margin: 1em auto;
+}
+
+#box_Projects_Author > div > div:first-child {
+
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: baseline;
+
+    width: 100%;
+
+    border-bottom: 0.15em solid #CCC;
+
+    box-sizing: border-box;
+}
+
+#box_Projects_Author > div > div:first-child img {
+
+    display: inline-block;
+
+    height: 4em;
+    width: 4em;
+    
+    object-fit: cover;
+
+    border-radius: 1em;
+    border: 0.15em solid var(--font-color-title)
+}
+
+#box_Projects_Author > div > div:first-child p {
+
+    display: inline-block;
+
+    font-size: var(--font-size-2em);
+    font-family: var(--fontface-title-4);
+
+    padding-left: 0.15em;
+
+    transform: translateY(-0.1em);
+}
+
+#box_Projects_Author > div > div:nth-child(2) {
+
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+
+    padding: 0.5em;
+
+    width: 100%;
+}
+
+#box_Projects_Author > div > div:nth-child(2) a {
+
+    position: relative;
+
+    font-size: var(--font-size-normal);
+    color: var(--font-color-normal);
+    font-family: var(--fontface-content);
+
+    margin: 0.15em;
+    text-indent: 3ch;
+}
+
+#box_Projects_Author > div > div:nth-child(2) a::before {
+
+    content: "";
+
+    width: 100%;
+    height: 100%;
+
+    position: absolute;
+
+    top: 0;
+    left: 0;
+
+    opacity: 0.5;
+}
+
+#box_Projects_Author > div > div:nth-child(2) a.profile_school::before {
+
+    background: url(/File/Icon/ico_school.png);
+
+    background-position: center left;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+#box_Projects_Author > div > div:nth-child(2) a.profile_company::before {
+
+    background: url(/File/Icon/ico_company.png);
+
+    background-position: center left;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+#box_Projects_Author > div > div:nth-child(2) a.profile_location::before {
+
+    background: url(/File/Icon/ico_location.png);
+
+    background-position: center left;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+#box_Projects_Author > div > div:nth-child(2) a.profile_website::before {
+
+    background: url(/File/Icon/ico_website.png);
+
+    background-position: center left;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+#box_Projects_Author > div > div:nth-child(2) a.profile_github::before {
+
+    background: url(/File/Icon/ico_github.png);
+
+    background-position: center left;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+#box_Projects_Author > div > div:nth-child(2) a.profile_email::before {
+
+    background: url(/File/Icon/ico_gmail.png);
+
+    background-position: center left;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+#box_Projects_Update figure {
+
+    padding: 1em;
+    margin-top: 1em;
+
+    box-sizing: border-box;
+    border: 0.15em solid #CCC;
+    border-radius: 1em;
+}
+
+#box_Projects_Update figure figcaption {
+
+    color: var(--font-color-title);
+
+    font-size: var(--font-size-2em);
+    font-family: var(--fontface-title-2);
+
+    text-decoration: underline;
+}
+
+#box_Projects_Update figure ol {
+
+    color: var(--font-color-normal-selected);
+    font-size: var(--font-size-normal);
+    text-indent: 1ch;
+
+    padding-left: 2em;
+
+    font-family: var(--fontface-content-4);
+}
\ No newline at end of file
diff --git a/File/Icon/ico_company.png b/File/Icon/ico_company.png
new file mode 100644
index 0000000..c4946d4
Binary files /dev/null and b/File/Icon/ico_company.png differ
diff --git a/File/Icon/ico_location.png b/File/Icon/ico_location.png
new file mode 100644
index 0000000..3554c1c
Binary files /dev/null and b/File/Icon/ico_location.png differ
diff --git a/File/Icon/ico_school.png b/File/Icon/ico_school.png
new file mode 100644
index 0000000..fcb29db
Binary files /dev/null and b/File/Icon/ico_school.png differ
diff --git a/File/Icon/ico_website.png b/File/Icon/ico_website.png
new file mode 100644
index 0000000..d6e7029
Binary files /dev/null and b/File/Icon/ico_website.png differ
diff --git a/File/Projects/seechen.github.io/intro.txt b/File/Projects/seechen.github.io/intro.txt
new file mode 100644
index 0000000..d650f9b
--- /dev/null
+++ b/File/Projects/seechen.github.io/intro.txt
@@ -0,0 +1,3 @@
+fdsafjni
+fdalmsfkldjakfdafd
+fdksafmnkjfnjk
\ No newline at end of file
diff --git a/JavaScript/Projects/projects.js b/JavaScript/Projects/projects.js
index 63e0dd1..a8fb79b 100644
--- a/JavaScript/Projects/projects.js
+++ b/JavaScript/Projects/projects.js
@@ -28,6 +28,11 @@ export const SeeChen_ProjectsPage = {
 
     bindEvent: async () => {
 
+        document.querySelector("#box_projectsPage > div:nth-child(3)").addEventListener("click", (e) => {
+
+            window.eventBus.emit("projectMouseClick", { e });
+        });
+
         document.querySelector("#box_projectsPage > div:nth-child(3)").addEventListener("mousemove", (e) => {
 
             window.eventBus.emit("projectMouseMove", { e });
@@ -42,6 +47,23 @@ export const SeeChen_ProjectsPage = {
 
             window.eventBus.emit("projectMouseLeave", { e });
         });
+
+        document.querySelector("#project_details_header > p:first-child").addEventListener("click", (e) => {
+
+            window.eventBus.emit("projectDetailsCloseClick", { e });
+        });
+
+        document.querySelectorAll(".dir_title").forEach(ele => {
+            ele.addEventListener("click", (e) => {
+
+                window.eventBus.emit("projectDetailsDirExpand", { e });
+            });
+        });
+
+        document.querySelector("#project_details_directory").addEventListener("click", (e) => {
+
+            window.eventBus.emit("projectDetailsDirClick", { e });
+        });
     },
 
     registerEvent: async () => {
@@ -51,12 +73,34 @@ export const SeeChen_ProjectsPage = {
             projectMouseMove: SeeChen_ProjectsMouseEvent.mouseMove,
             projectMouseEnter: SeeChen_ProjectsMouseEvent.mouseEnter,
             projectMouseLeave: SeeChen_ProjectsMouseEvent.mouseLeave,
+            projectMouseClick: SeeChen_ProjectsMouseEvent.mouseClick,
+
+            projectDetailsCloseClick: SeeChen_ProjectsDetailsMouseEvent.closeClick,
+
+            projectDetailsDirExpand: SeeChen_ProjectsDetailsDirEvent.expandDir,
+            projectDetailsDirClick: SeeChen_ProjectsDetailsDirEvent.clickDir,
         }
 
         Object.entries(projects_EvnetHandler).forEach(([event, handler]) => {
 
             window.eventBus.on(event, handler);
         });
+
+        let isTouchScreen = 'ontouchstart' in window;
+
+        if (isTouchScreen || true) {
+            const projects_EvnetHandler = {
+        
+                projectMouseMove: SeeChen_ProjectsMouseEvent.mouseMove,
+                projectMouseEnter: SeeChen_ProjectsMouseEvent.mouseEnter,
+                projectMouseLeave: SeeChen_ProjectsMouseEvent.mouseLeave,
+            }
+    
+            Object.entries(projects_EvnetHandler).forEach(([event, handler]) => {
+    
+                window.eventBus.off(event, handler);
+            });
+        }
     },
 
     clearUp: () => {
@@ -120,5 +164,59 @@ const SeeChen_ProjectsMouseEvent = {
             document.querySelector("#project_details").classList.remove("small-window");
         }
     },
-    mouseClick: () => {}
+    mouseClick: (
+        event
+    ) => {
+
+        const { e } = event;
+
+        if (e.target.classList.contains("project_border")) {
+
+            document.querySelector("#project_details").classList.add("ready-to-full");
+            setTimeout(() => {
+                document.querySelector("#project_details").classList.add("full-window");
+            }, 100);
+        }
+    }
+}
+
+const SeeChen_ProjectsDetailsMouseEvent = {
+
+    closeClick: (
+        event
+    ) => {
+
+        document.querySelector("#project_details").classList.remove("full-window");
+        setTimeout(() => {
+            document.querySelector("#project_details").classList.remove("ready-to-full");
+        }, 600);
+    }
+}
+
+const SeeChen_ProjectsDetailsDirEvent = {
+
+    expandDir: (
+        event
+    ) => {
+
+        const { e } = event;
+
+        e.target.classList.toggle("expand");
+        console.log("click")
+    },
+
+    clickDir: (
+        event
+    ) => {
+
+        const { e } = event;
+
+        if (e.target.classList.contains("details_Dir_option")) {
+
+            document.querySelector(".content-display").classList.remove("content-display");
+            
+            const targetDiv = `box_Projects_${e.target.id.split("_")[1]}`;
+            document.querySelector(`#${targetDiv}`).classList.add("content-display");
+        }
+    }
 }
diff --git a/spa.html b/spa.html
index 4e7fc3e..f7145e6 100644
--- a/spa.html
+++ b/spa.html
@@ -170,7 +170,187 @@
                     </div>
                 </div>
 
-                <div id="project_details"></div>
+                <div id="project_details">
+                    <div id="project_details_header">
+                        <p>❌</p>
+                        <p>_title_</p>
+                    </div>
+
+                    <div>
+                        <div id="project_details_directory">
+                            <div class="dir_level_0">
+                                <p id="details_Intro" class="details_Dir_option">Introduction</p>
+                                <p id="details_Git" class="details_Dir_option">Git</p>
+                                <p id="details_Features" class="details_Dir_option">Features</p>
+                                <p id="details_Guide" class="details_Dir_option">Guide</p>
+                                <p id="details_Documentation" class="details_Dir_option">Documentation</p>
+                                <p id="details_License" class="details_Dir_option">License</p>
+                                <p id="details_Community" class="details_Dir_option">Community</p>
+                                <p id="details_Faqs" class="details_Dir_option">FAQs</p>
+                                <p id="details_Update" class="details_Dir_option">Update Log</p>
+                                <p id="details_Author" class="details_Dir_option">Collaborator</p>
+                                <!-- <div class="dir_level">
+                                    <p class="dir_title">aaa</p>
+                                    <p>Overview</p>
+                                    <p>Overview</p>
+                                    <p>Overview</p>
+                                    <p>Overview</p>
+                                    <p>Overview</p>
+                                    <div class="dir_level">
+                                        <p class="dir_title">bbb</p>
+                                        <p>Overview</p>
+                                        <p>Overview</p>
+                                        <p>Overview</p>
+                                        <p>Overview</p>
+                                        <p>Overview</p>
+                                    </div>
+                                    <div class="dir_level">
+                                        <p class="dir_title">ddd</p>
+                                        <p>Overview</p>
+                                        <p>Overview</p>
+                                        <p>Overview</p>
+                                        <p>Overview</p>
+                                        <p>Overview</p>
+                                    </div>
+                                </div>
+                                <div class="dir_level">
+                                    <p class="dir_title">ccc</p>
+                                    <p>Overview</p>
+                                    <p>Overview</p>
+                                    <p>Overview</p>
+                                    <p>Overview</p>
+                                    <p>Overview</p>
+                                </div> -->
+                            </div>
+                        </div>
+                        <div id="project_details_content">
+                            <div id="box_Projects_Intro" class="content-block content-display">
+
+                                <div class="content-block-section">
+                                    <p class="content-block-title-1">Introduction</p>
+                                    <pre class="content-block-content-1">Especially thanks to the guiding principals, I think it’s fair to say if you are testing your component or app the same way you would instruct a human to test it in production, then you are doing it right. If your component is taking an API call, and formatting it into Markdown, then you should test that it is actually happening correctly. How the component is rendering (and mimicking it in your test) is an example of testing implementation details. Testing what the component renders is not.I know it’s a fine line, but I think you should include your last line. I also think it’d be great if you could find a way to query by something other than test-id.是的，这种顺序基本可行，因为它提供了呈现项目相关信息的逻辑流程。但是，细微的调整可以改善用户导航并提高清晰度。以下是对当前结构的分析和建议的改进：</pre>
+                                </div>
+                            </div>
+
+                            <div id="box_Projects_Git" class="content-block">
+
+                                <div>
+                                    <p><a href="#"><img src="/File/Icon/ico_github.png" alt=""></a></p>
+                                    <div>
+                                        <div>
+                                            <p>HTTPS</p>
+                                            <p>https://github.com/SeeChen/seechen.github.io.git</p>
+                                            <p>Copy</p>
+                                        </div>
+                                        <div>
+                                            <p>SSH</p>
+                                            <p>git@github.com:SeeChen/seechen.github.io.git</p>
+                                            <p>Copy</p>
+                                        </div>
+                                    </div>
+                                    <p><a href="#">Download ZIP File</a></p>
+                                    <p><a href="#">View on GitHub</a></p>
+                                </div>
+                                <div>
+                                    <p><a href="#"><img src="/File/Icon/ico_github.png" alt=""></a></p>
+                                    <div>
+                                        <div>
+                                            <p>HTTPS</p>
+                                            <p>https://github.com/SeeChen/seechen.github.io.git</p>
+                                            <p>Copy</p>
+                                        </div>
+                                        <div>
+                                            <p>SSH</p>
+                                            <p>git@github.com:SeeChen/seechen.github.io.git</p>
+                                            <p>Copy</p>
+                                        </div>
+                                    </div>
+                                    <p><a href="#">Download ZIP File</a></p>
+                                    <p><a href="#">View on GitHub</a></p>
+                                </div>
+                                <div>
+                                    <p><a href="#"><img src="/File/Icon/ico_github.png" alt=""></a></p>
+                                    <div>
+                                        <div>
+                                            <p>HTTPS</p>
+                                            <p>https://github.com/SeeChen/seechen.github.io.git</p>
+                                            <p>Copy</p>
+                                        </div>
+                                        <div>
+                                            <p>SSH</p>
+                                            <p>git@github.com:SeeChen/seechen.github.io.git</p>
+                                            <p>Copy</p>
+                                        </div>
+                                    </div>
+                                    <p><a href="#">Download ZIP File</a></p>
+                                    <p><a href="#">View on GitHub</a></p>
+                                </div>
+                            </div>
+
+                            <div id="box_Projects_Features" class="content-block">
+                                <div class="content-block-section">
+                                    <p class="content-block-title-1">Introduction</p>
+                                    <pre class="content-block-content-1"> a Especially thanks to the guiding principals, I think it’s fair to say if you are testing your component or app the same way you would instruct a human to test it in production, then you are doing it right. If your component is taking an API call, and formatting it into Markdown, then you should test that it is actually happening correctly. How the component is rendering (and mimicking it in your test) is an example of testing implementation details. Testing what the component renders is not.I know it’s a fine line, but I think you should include your last line. I also think it’d be great if you could find a way to query by something other than test-id.是的，这种顺序基本可行，因为它提供了呈现项目相关信息的逻辑流程。但是，细微的调整可以改善用户导航并提高清晰度。以下是对当前结构的分析和建议的改进：</pre>
+                                </div>
+                            </div>
+
+                            <div id="box_Projects_Guide" class="content-block"></div>
+                            <div id="box_Projects_Documentation" class="content-block"></div>
+
+                            <div id="box_Projects_License" class="content-block">
+
+                                <div class="content-block-section">
+                                    <p class="content-block-title-1">LICENSE</p>
+                                    <p class="content-block-content-1">本项目使用 <a href="#">MIT</a> 开源许可证进行开发</p>
+                                    <p class="content-block-content-1">许可证协议详情请查看 <a href="#">www.example.com</a></p>
+                                </div>
+                                <div class="content-block-section">
+                                    <p class="content-block-title-1">中文</p>
+                                    <p id="license_translate">本翻译仅供参考，原文请查看<a href="#license_original">这里</a>，或点击<a href="#">这里</a>。</p>
+                                    <pre class="content-block-content-1">这是中文的开源许可证</pre>
+                                </div>
+                                <div class="content-block-section">
+                                    <p class="content-block-title-1" id="license_original">Introduction</p>
+                                    <pre class="content-block-content-1">GNU GENERAL PUBLIC LICENSEVersion 3, 29 June 2007</pre>
+                                </div>
+                            </div>
+
+                            <div id="box_Projects_Community" class="content-block"></div>
+                            <div id="box_Projects_Faqs" class="content-block"></div>
+
+                            <div id="box_Projects_Update" class="content-block">
+                                <div class="content-block-section">
+                                    <p class="content-block-title-1">2000.08.06</p>
+                                    <figure>
+                                        <figcaption>Fruit</figcaption>
+                                        <ol start="0">
+                                          <li>Apple</li>
+                                          <li>Pear</li>
+                                          <li>Orange</li>
+                                        </ol>
+                                      </figure>
+                                </div>
+                            </div>
+
+                            <div id="box_Projects_Author" class="content-block">
+                                <div>
+                                    <div>
+                                        <img src="/File/Image/Home/home-background.avif" alt="">
+                                        <p>SEECHEN LEE</p>
+                                    </div>
+                                    <div>
+                                        <a href="" class="profile_location">Malaysia</a>
+                                        <a href="" class="profile_school">Beijing Institute of Technology</a>
+                                        <a href="" class="profile_company">-</a>
+                                        <a href="#" class="profile_website">https://seechen.github.io</a>
+                                        <a href="#" class="profile_github">https://github.com/SeeChen</a>
+                                        <a href="#" class="profile_email">leeseechen@gmail.com</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
 
@@ -180,3 +360,4 @@
         </div>
     </body>
 </html>
+