Update

CSS/index/projects.css

@@ -0,0 +1,73 @@
+#projects_area {
+    height: 100vh;
+    width: 98vw;
+    overflow-y: scroll;
+    padding: 0 1vw;
+}
+
+#projects_area::-webkit-scrollbar {
+    background: transparent;
+    width: 0.5em;
+    width: 0.75em;
+}
+
+#projects_area::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 1em;
+}
+
+#projects_area .box_project {
+    border-top: 0.05em solid #888;
+    border-bottom: 0.05em solid #888;
+    width: 90vw;
+    margin: auto;
+    padding: 1em 0.5em;
+}
+
+#projects_area .box_project .project_title {
+    font-size: 2em;
+    font-family: 'PPAcma-Black';
+    color: #888;
+}
+
+#projects_area .box_project .project_desc {
+    font-size: 1em;
+    font-family: 'GenJyuuGothic-Normal';
+    color: #888;
+    margin: 0.55em 0;
+}
+
+#projects_area .box_project .project_label {
+    font-family: 'GenJyuuGothic-Normal';
+    font-size: 0.75em;
+    color: #888;
+}
+
+#projects_area .box_project .project_label a {
+    padding: 0 0.5em;
+    border-radius: 1em;
+    border: 0.15em solid #888;
+    text-decoration: none;
+    color: #888;
+}
+
+#projects_area .box_project .project_language {
+    font-family: 'GenJyuuGothic-Normal';
+    height: 2em;
+    line-height: 2em;
+    margin-top: 1em;
+}
+
+#projects_area .box_project .project_language span {
+    font-size: 0.75em;
+    color: #888;
+}
+
+#projects_area .box_project .project_language span img {
+    width: 1.5em;
+    height: 1.5em;
+    line-height: 0;
+    vertical-align: middle;
+    margin: 0 0.5em;
+    border-radius: 1em;
+}

JS/INDEX/index.js

@@ -37,6 +37,7 @@ window.onload = function() {
 
     SlideLeftAndRight();
     asyncFunction();
+    projects();
 
     $(window).resize(function() {
 

JS/INDEX/projects.js

@@ -0,0 +1,27 @@
+function projects() {
+
+    let project_content = '';
+    $.getJSON('https://api.github.com/users/seechen/repos', function(my_projects) {
+
+        my_projects = my_projects.filter(item => !item['fork']);
+        my_projects.forEach(function(my_project) {
+
+            project_content += `
+            <div class="box_project">
+                <p class="project_title">${my_project.name}</p>
+                <p class="project_desc">${my_project.description ? my_project.description : 'No Description.'}</p>
+                <p class="project_label">
+                    ${my_project.topics.map(function(topic) {
+                        return `<a href="https://github.com/topics/${topic}" target="blank">${topic}</a>`;
+                    }).join(' ')}
+                </p>
+                <p class="project_language">
+                    <span><img src="/MATERIALS/language/${my_project.language ? my_project.language : "1"}.png" alt="">${my_project.language ? my_project.language : "-"}</span>
+                </p>
+            </div>
+            `
+        })
+
+        $('#projects_area').html(project_content);
+    });
+}

index.html

@@ -19,6 +19,7 @@
         <link rel = "stylesheet" href="./CSS/index/home.css" type="text/css">
         <link rel = "stylesheet" href="./CSS/index/lens.css" type="text/css">
         <link rel = "stylesheet" href="./CSS/index/travel.css" type="text/css">
+        <link rel = "stylesheet" href="./CSS/index/projects.css" type="text/css">
 
         <link rel="preload" href="/Travel/index.html" as="text">
 
@@ -29,6 +30,7 @@
         <script src = "./JS/INDEX/home.js" type="text/javascript"></script>
         <script src = "./JS/INDEX/lens.js" type="text/javascript"></script>
         <script src = "./JS/INDEX/travel.js" type="text/javascript"></script>
+        <script src = "./JS/INDEX/projects.js" type="text/javascript"></script>
         <script src = "./JS/INDEX/language.js" type="module"></script>
 
         <script src = "./JS/MODULE/Language.js" type = "module"></script>
@@ -152,7 +154,30 @@
                     </td>
 
 
-                    <td style="background: #F0FF0F;"></td>
+                    <td id="td_projects">
+                        <div id="projects_area">
+                            <div class="box_project">
+                                <p class="project_title">Project-title</p>
+                                <p class="project_desc">Project-desc</p>
+                                <p class="project_label">
+                                    <a href="#">label1</a>
+                                    <a href="#">label1</a>
+                                    <a href="#">label1</a>
+                                    <a href="#">label1</a>
+                                    <a href="#">label1</a>
+                                    <a href="#">label1</a>
+                                    <a href="#">label1</a>
+                                    <a href="#">label1</a>
+                                </p>
+                                <p class="project_language">
+                                    <span><img src="https://static-00.iconduck.com/assets.00/java-icon-256x256-k4ufhihr.png" alt="">java</span>
+                                    <span><img src="https://static-00.iconduck.com/assets.00/java-icon-256x256-k4ufhihr.png" alt="">java</span>
+                                    <span><img src="https://static-00.iconduck.com/assets.00/java-icon-256x256-k4ufhihr.png" alt="">java</span>
+                                    <span><img src="https://static-00.iconduck.com/assets.00/java-icon-256x256-k4ufhihr.png" alt="">java</span>
+                                </p>
+                            </div>
+                        </div>
+                    </td>
 
                     <td id="td_language">
                         <div id="language_area">