diff --git a/package/hexo-theme-async/layout/page.ejs b/package/hexo-theme-async/layout/page.ejs
index a7a00abf..1f24b04d 100644
--- a/package/hexo-theme-async/layout/page.ejs
+++ b/package/hexo-theme-async/layout/page.ejs
@@ -5,4 +5,6 @@
     <%- partial('./comment') %>
 <%} else if (page.type=='about'){%>
     <%- partial('./about',{post: page }) %>
+<%} else if (page.type=='project'){%>
+    <%- partial('./project',{post: page }) %>
 <%}%>
diff --git a/package/hexo-theme-async/layout/project.ejs b/package/hexo-theme-async/layout/project.ejs
new file mode 100644
index 00000000..b58b4bc8
--- /dev/null
+++ b/package/hexo-theme-async/layout/project.ejs
@@ -0,0 +1,68 @@
+<div class="trm-content-start">
+
+    <!-- banner -->
+    <% let banner = page.banner || {}; %>
+    <%- partial('./_partial/banner',  {
+        ...theme.banner.default,
+        bannerTitle: page.title,
+        ...banner
+    }) %>
+    <!-- banner end -->
+
+    <div class="container">
+        <div class="row">
+            <% if(!page.single_column) { %>
+                <div class="col-lg-4 hidden-sm">
+                    <!-- main card -->
+                    <%- partial('./_partial/sidebar') %>
+                    <!-- main card end -->
+                </div>
+            <% } %>
+            <div class="<%- !page.single_column ? 'col-lg-8':'col-lg-12' %>">
+
+                <!-- content -->
+                <div class="trm-content" id="trm-content">
+                    <div data-scroll data-scroll-repeat data-scroll-offset="500" id="about-triger"></div>
+
+                    <div class="row trm-mb-40 trm-scroll-animation" data-scroll data-scroll-offset="40">
+                        <div class="col-lg-12">
+                            <blockquote>
+                                <%- page.title %>
+                            </blockquote>
+                        </div>
+                    </div>
+
+                    <% if(Array.isArray(theme.projects)){ %>
+                        <% theme.projects.forEach((item,index)=>{ %>
+                            <div class="row">
+                                <div class="col-lg-12">
+                                  <h5 class="trm-mb-40 trm-title-with-divider"><%- item.title %><span  data-number="<%- index+1 %>"></span></h5>
+                                </div>
+                                <% item.children.forEach((project,index)=>{ %>
+                                    <div class="<%- !page.single_column ? 'col-lg-6':'col-lg-4' %>">
+                                        <div class="trm-project-card trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
+                                            <div class="trm-project-content">
+                                                <h6 class="trm-mb-20"><%- project.name %></h6>
+                                                <div class="trm-mb-20 trm-project-desc"><%- project.desc %></div>
+                                                <a target="_parent" href="<%- project.url %>" class="trm-label trm-label-color">Github<i class="fas fa-arrow-right"></i></a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                <%})%>
+                              </div>
+                        <%})%>
+                    <% } %>
+
+                    <div class="trm-divider trm-mb-40"></div>
+
+                    <!-- footer -->
+                    <%- partial('./_partial/footer') %>
+                    <!-- footer end -->
+
+                </div>
+                <!-- content end -->
+
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/package/hexo-theme-async/source/css/_components/card.less b/package/hexo-theme-async/source/css/_components/card.less
index 12d0676c..a348c117 100644
--- a/package/hexo-theme-async/source/css/_components/card.less
+++ b/package/hexo-theme-async/source/css/_components/card.less
@@ -918,4 +918,25 @@
     .trm-sliders-card {
         overflow: hidden
     }
+}
+
+// project card
+.trm-project-card {
+    background-color: @theme-bg-color;
+    position        : relative;
+    overflow        : hidden;
+    border-radius   : 10px;
+    margin-bottom   : 40px;
+    box-shadow      : @box-shadow;
+    padding         : 40px;
+    text-align      : center;
+
+    .trm-project-desc {
+        height  : 3rem;
+        overflow: hidden;
+    }
+
+    &:hover {
+        transform: scale(1.05);
+    }
 }
\ No newline at end of file