diff --git a/_config.yml b/_config.yml
new file mode 100644
index 0000000..7b452ed
--- /dev/null
+++ b/_config.yml
@@ -0,0 +1,84 @@
+name: Tapestry
+version: 0.1
+copy_year: 2025
+
+# Site configuration
+avatar: images/assets/avatar.jpg  # Avatar image, also fontawesome fallback
+banner: images/assets/banner.jpg
+favicon: images/assets/avatar.jpg
+fontawesome: https://kit.fontawesome.com/bae8420862.js    # Use your own kit here
+primary_color: '#ffc107 !important'
+tag_border: false   # Add border to tags
+column: 2    # Number of columns (2 or 3)
+sidebar: true    # Display sidebar
+scarves: true    # Display scarves
+
+#Footer
+hexo: true    # Display "Powered by Hexo" in footer
+copyright: true    # Display copyright
+
+# Scarves (links on top right of screen) (add more / remove as needed)
+# Defaults into FontAwesome if no image provided
+# Disables scarf if no image, and font awesome not configured
+scarf:
+  - url: /      # Example Usecase for image
+    image: images/assets/scarves/scarf.png
+    icon: false
+    enable: true
+    color: #fff
+    alt: Example
+  - url: /      # Example Usecase for FontAwesome
+    image: false
+    icon: fa-solid fa-heart
+    enable: true
+    color: false
+    alt: Example
+
+# Enable or disable social links (add more / remove as needed)
+social:
+  - url: https://www.instagram.com/
+    icon: fab fa-instagram
+    enable: true
+  - url: https://discord.com/
+    icon: fab fa-discord
+    enable: true
+  - url: https://www.twitch.tv/
+    icon: fab fa-twitch
+    enable: false
+  - url: https://www.goodreads.com/
+    icon: fab fa-goodreads
+    enable: false
+  - url: https://www.linkedin.com/  
+    icon: fab fa-linkedin
+    enable: true
+  - url: https://www.twitter.com/
+    icon: fab fa-twitter
+    enable: true
+  - url: https://www.facebook.com/
+    icon: fab fa-facebook
+    enable: false
+  - url: https://www.youtube.com/
+    icon: fab fa-youtube
+    enable: false
+  - url: https://www.exapmle.com/
+    icon: fab fa-hashtag
+    enable: false
+
+# Sidebar menu configuration (add more / remove as needed)
+sidebar_menu:
+  - enable: true
+    name: Home
+    url: /
+  - enable: true
+    name: Get Hexo
+    url: https://hexo.io/docs/setup
+  - enable: true
+    name: Get Tapestry
+    url: https://tapestry.demo.bashynx.dev
+  - enable: true
+    name: Bashynx
+    url: https://bashynx.com
+  - enable: true
+    name: The Hackman Club
+    url: https://blog.hackman.club
+    
\ No newline at end of file
diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
new file mode 100644
index 0000000..d5b2ce9
--- /dev/null
+++ b/layout/_partial/article.ejs
@@ -0,0 +1,28 @@
+<!-- This is the template for the post. -->
+<div class="post">
+    <div class="post-header">
+        <h1 class="article"><%= page.title  || "Untitled" %></h1>
+        <% if(page.photos) { %>
+            <div class="cover">
+                <img class="gallery" src="<%- config.root %><%- page.photos %>" alt="<%- page.title || "Untitled" %>">
+            </div>
+        <% } %>
+        <p class="post_description"><%= page.description %></p>
+        <% if(page.content) { %>
+            <hr class="page-divider">
+        <% } %>
+        <a href='<%= url_for(page.path) %>' class="page-date"><%- include('date', { date: page.date.toISOString() }) %></a>
+    </div>
+    <div class="post-content">
+        <%- page.content %>
+    </div>
+    <div class="post-footer">
+        <div class="tags smoll">
+            <% if (page.tags) { %>
+                <% page.tags.data.forEach(function(tag) { %>
+                    <a href="<%= url_for('/tags/' + tag.name) %>">#<%= tag.name %></a>
+                <% }); %>
+            <% } else {console.log(page)} %>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/layout/_partial/date.ejs b/layout/_partial/date.ejs
new file mode 100644
index 0000000..e40c646
--- /dev/null
+++ b/layout/_partial/date.ejs
@@ -0,0 +1,11 @@
+<div class="date smoll">
+    <% 
+        const posted = new Date(date);
+        const now = new Date();
+        const year = 365 * 24 * 60 * 60 * 1000;
+        const format = (now - posted) < year ? 
+            { day: 'numeric', month: 'long', hour: 'numeric', minute: 'numeric', hour12: true } : 
+            { day: 'numeric', month: 'long', year: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true };
+    %>
+    <%= posted.toLocaleString('en-US', format ) %>
+</div>
\ No newline at end of file
diff --git a/layout/_partial/feed.ejs b/layout/_partial/feed.ejs
new file mode 100644
index 0000000..b5b2bc9
--- /dev/null
+++ b/layout/_partial/feed.ejs
@@ -0,0 +1,28 @@
+<!-- Default number of columns is two. If 3 is defined, then third column is added-->
+<% columns = theme.column; %> <!-- Number of columns -->
+<div class="posts-container">
+    <div class="column column-0">
+        <% item.forEach(function(post, index) { %>
+            <% if (index % columns === 0) { %>
+                <%- include('post_feed', { post: post }) %>
+            <% } %>
+        <% }); %>
+    </div>
+    <div class="column column-1">
+        <% item.forEach(function(post, index) { %>
+            <% if (index % columns === 1) { %>
+                <%- include('post_feed', { post: post }) %>
+            <% } %>
+        <% }); %>
+    </div>
+    <!-- Condition for column number 3 -->
+    <% if (columns === 3) { %>
+        <div class="column column-2">
+            <% item.forEach(function(post, index) { %>
+                <% if (index % columns === 2) { %>
+                    <%- include('post_feed', { post: post }) %>
+                <% } %>
+            <% }); %>
+        </div>
+    <% } %>
+</div>
\ No newline at end of file
diff --git a/layout/_partial/post_feed.ejs b/layout/_partial/post_feed.ejs
new file mode 100644
index 0000000..eb5b1f7
--- /dev/null
+++ b/layout/_partial/post_feed.ejs
@@ -0,0 +1,18 @@
+<!-- This is the template for the post. It is used to display the posts in the feeds. -->
+<div class="post">
+    <% if(post.photos) { %>
+        <div class="cover">
+            <img class="gallery" src="<%- config.root %><%- post.photos %>" alt="<%- post.title || "Untitled" %>">
+        </div>
+    <% } %>
+    <div class="post-header">
+        <h2><%= post.title || "Untitled" %></h2>
+        <a href='<%= url_for(post.path) %>'><%- include('date', { date: post.date.toISOString() }) %></a>
+        <p><%= post.description %></p>
+        <div class="tags smoll">
+            <% post.tags.data.forEach(function(tag) { %>
+                <a href="<%= url_for('/tags/' + tag.name) %>">#<%= tag.name %></a>
+            <% }); %>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/layout/_partial/scarves.ejs b/layout/_partial/scarves.ejs
new file mode 100644
index 0000000..a3e2b55
--- /dev/null
+++ b/layout/_partial/scarves.ejs
@@ -0,0 +1,17 @@
+<div class="scarves">
+    <% theme.scarf.forEach(function(scarf, index) { %> 
+        <% if (scarf.enable) { %>
+            <a href="<%= scarf.url %>">
+                <div class="scarf" title="<%= scarf.alt %>" style="right: <%= index * 30 %>px;
+                                margin-top:-<%= ( (index % 5) * 10) + 40 %>px;
+                                background-color:<%= scarf.color ? scarf.color : theme.primary_color %>;">
+                    <% if(scarf.image) { %>
+                        <img class= "logo" src="<%= url_for(scarf.image) %>" alt="<%= scarf.alt %>">
+                    <% } else if(scarf.icon) { %>
+                        <i class='logo <%= scarf.icon %>'></i>
+                    <% } else%>
+                </div>
+            </a>
+        <% } %>
+    <% }); %>
+</div>
\ No newline at end of file
diff --git a/layout/archive.ejs b/layout/archive.ejs
new file mode 100644
index 0000000..1cbb80e
--- /dev/null
+++ b/layout/archive.ejs
@@ -0,0 +1,9 @@
+<% site.tags.forEach(function(tag) { %>
+  <h2><%= tag.name %></h2>
+  <ul>
+    <% tag.posts.forEach(function(post) { %>
+      <li><a href="<%= post.url %>"><%= post.title %></a></li>
+    <% }); %>
+  </ul>
+<% }); %>
+
diff --git a/layout/index.ejs b/layout/index.ejs
new file mode 100644
index 0000000..5b60c5a
--- /dev/null
+++ b/layout/index.ejs
@@ -0,0 +1 @@
+<%- include("_partial/feed", { item: site.posts.sort('-date') }) %>
\ No newline at end of file
diff --git a/layout/layout.ejs b/layout/layout.ejs
new file mode 100644
index 0000000..bb5c268
--- /dev/null
+++ b/layout/layout.ejs
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Metadata -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="<%= config.description %>">
+    <meta name="author" content="<%= config.author %>">
+    <meta name="title" content="<%= config.title %> - <%= config.subtitle %>">
+    <meta name="theme-color" content="<%= theme.primary_color %>">
+
+    <!-- Open Graph Meta Tags -->
+    <meta property="og:title" content="<%= config.title %>">
+    <meta property="og:description" content="<%= config.description %>">
+    <meta property="og:image" content="<%= url_for(theme.banner) %>">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="<%= config.url %>">
+
+    <link rel="icon" href="<%= url_for(theme.favicon) %>">
+
+    <script src="<%= url_for(theme.fontawesome) %>" crossorigin="anonymous"></script>
+
+    <title><%= config.title %></title>
+    <link rel="stylesheet" href="<%= url_for('/css/style.css') %>">
+
+    <style>
+        a:hover {
+            color: <%= theme.primary_color %>;
+        }
+
+        .banner img {
+            border: 2px solid <%= theme.primary_color %>;
+        }
+
+        .avatar img {
+            border: 2px solid <%= theme.primary_color %>;
+        }
+
+        <% if (theme.tag_border) { %>
+            .tags a {
+                border: 1px solid #6c6f72;
+            }
+
+            .tags a:hover {
+                border-color: #9fa5aa;
+            }
+        <% } %>
+    </style>
+</head>
+<body>
+    <main>
+        <% if (theme.scarves) { %>
+            <%- include('_partial/scarves') %>
+        <% } %>
+        <% if (theme.sidebar) { %>
+        <div class="sidebar">
+            <!-- Avatar -->
+            <a href="/">
+                <div class="sidebar-header">
+                    <div class="banner">
+                        <img src="<%= url_for(theme.banner) %>" alt="<%= config.author %>">
+                    </div>
+
+                    <div class="avatar">
+                        <img src="<%= url_for(theme.avatar) %>" alt="<%= config.author %>">
+                    </div>
+                </div>
+            </a>
+
+            <!-- Sidebar Menu -->
+            <nav>
+                <% theme.sidebar_menu.forEach(function(menu) { %> 
+                    <% if (menu.enable) { %>
+                        <a href="<%= menu.url %>">
+                            <%= menu.name %>
+                        </a>
+                    <% } %>
+                <% }); %>
+            </nav>
+
+            <!-- Sidebar Content -->
+            <div class="sidebar-content">
+                <a href="/">
+                    <h1 class="title"><%= config.title %></h1>
+                </a>
+                <p><%= config.description %></p>
+                <div class="social">
+                    <% theme.social.forEach(function(social) { %> 
+                        <% if (social.enable) { %>
+                            <span class="social-icon">
+                                <a href="<%= social.url %>" target="_blank">
+                                    <% if (theme.fontawesome) { %>
+                                        <i class="<%= social.icon %>"></i>
+                                    <% } else { %>
+                                        <img src='<%= url_for(theme.avatar) %>'></img>
+                                    <% } %>
+                                </a>
+                            </span>
+                            <% } %>
+                    <% }); %>
+                </div>
+            </div>
+
+            <!-- Sidebar Footer -->
+            <div class="footer smoll">
+                <% if (theme.hexo) { %>
+                    <div class="hexo footer">
+                        Powered by Hexo, theme <a href="https://tapestry.demo.bashynx.dev" target="_blank">Tapestry</a><br>
+                    </div>
+                <% } %>
+                <% if (theme.copyright) { %>
+                    <div class="copy footer">
+                        &copy; <%= theme.copy_year %> <%= config.author %>
+                    </div>
+                <% } %>
+            </div>
+        </div>
+        <% } %>
+        <div class="content">
+            <%- body %>
+        </div>
+    </main>
+</body>
+</html>
diff --git a/layout/page.ejs b/layout/page.ejs
new file mode 100644
index 0000000..0b8fd7f
--- /dev/null
+++ b/layout/page.ejs
@@ -0,0 +1 @@
+<%- include("_partial/article", { page: page }) %>
\ No newline at end of file
diff --git a/layout/post.ejs b/layout/post.ejs
new file mode 100644
index 0000000..0b8fd7f
--- /dev/null
+++ b/layout/post.ejs
@@ -0,0 +1 @@
+<%- include("_partial/article", { page: page }) %>
\ No newline at end of file
diff --git a/layout/tag.ejs b/layout/tag.ejs
new file mode 100644
index 0000000..5a7de68
--- /dev/null
+++ b/layout/tag.ejs
@@ -0,0 +1 @@
+<%- include("_partial/feed", { item: page.posts.sort('-date') }) %>
\ No newline at end of file
diff --git a/source/css/style.css b/source/css/style.css
new file mode 100644
index 0000000..07b9cc3
--- /dev/null
+++ b/source/css/style.css
@@ -0,0 +1,319 @@
+body {
+    font-family:  "Helvetica";
+    margin: auto;
+    font-size: 14px;
+    background-color: #343a40;
+}
+
+main{
+    padding: 20px;
+}
+
+h1, h2, h3, h4 {
+    padding: 0;
+    margin: 0;
+    font-weight: lighter;
+    color: #4a4a4a;
+}
+
+h1 {
+    font-size: 25px;
+    line-height: 30px;
+    text-align: center;
+}
+
+h2 {
+    font-size: 22px;
+    line-height: 25px;
+}
+
+h3 {
+    font-size: 18px;
+    line-height: 22px;
+}
+
+h4 {
+    font-size: 15px;
+    line-height: 18px;
+    font-style: italic;
+}
+
+a {
+    text-decoration: none;
+    color: #343a40;
+}
+
+/* Definition of small fonted text, example: footer */
+.smoll {
+    font-size: 12px !important;
+    line-height: 12px;
+}
+
+/* Scarves section */
+.scarves {
+    position:fixed;
+    right: 0;
+    margin-right:50px;
+    z-index: 10;
+}
+
+.scarf {
+    width:25px;
+    height:100px;
+    position:absolute;
+    transition: all 1s, transform 1s;
+    -moz-transition: all 1s, -moz-transform 1s;
+    -webkit-transition: all 1s, -webkit-transform 1s;
+    -o-transition: all 1s, -o-transform 1s;
+    opacity:1;
+}
+
+.scarf .logo {
+    width:100%;
+    bottom: 0px;
+    font-size: 15px;
+    text-align: center;
+    padding: 5px 0;
+    position: absolute;
+    object-fit: cover;
+}
+
+.scarf:hover {
+    margin-top:-25px !important;
+    transition: all 1s, transform 1s;
+    -moz-transition: all 1s, -moz-transform 1s;
+    -webkit-transition: all 1s, -webkit-transform 1s;
+    -o-transition: all 1s, -o-transform 1s;
+    opacity:0.9;
+}
+
+.scarf:hover img {
+    opacity: 0.75;
+    transition: opacity 1s;
+}
+
+/* Sidebar header section */
+.sidebar {
+    margin-right: 1em;
+    margin-bottom: 0;
+    border-radius: 10px;
+    flex-shrink: 0;
+}
+
+.sidebar-header {
+    border-radius: 10px;
+    max-width: 100%;
+}
+
+.avatar img {
+    border-radius: 100%;
+    width: 75px;
+    margin-top: -60px;
+    margin-left: 25px;
+    position: relative; 
+    z-index: 2;
+}
+
+
+/* Sidebar content section */
+.sidebar-content {
+    padding: 1em;
+    background-color: #dcdcdf;
+    color:#343a40;
+    border-radius: 10px;
+}
+
+.sidebar-content p {
+    line-height: 17px;
+    font-size: 15px;
+}
+
+.social {
+    justify-content: center;
+    margin-top: 0.5em;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+}
+
+.social-icon a {
+    padding: 5px;
+    box-sizing: border-box;
+    display:inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 14px;
+    transition: color 0.3s;
+}
+
+.social-icon img {
+    width: 15px !important;
+    height: 15px !important;
+    border-radius: 50%;
+}
+
+/* Sidebar menu section */
+nav a {
+    margin: 0.5rem 0.125rem;
+    padding: 0.25rem 0;
+    display: block;
+    background-color: #dcdcdf;
+    width: 100%;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+    border-radius: 50px;
+    transition: color 0.3s;
+}
+
+/* Footer under the sidebar */
+.footer {
+    color: #dcdcdf !important;
+    text-align: center;
+    margin-top: 5px;
+}
+
+.footer a {
+    color: #dcdcdf !important;
+}
+
+/* Small devices (phones, 0-576px) */
+@media (max-width: 576px) {
+    body{
+        width: 400px;
+    }
+}
+
+@media (max-width: 768px) {
+    .sidebar-content {
+        display: none;
+    }
+
+    .post_description {
+        display: none;
+    }
+
+    .content {
+        width: calc(100% - 1em);
+    }
+}
+
+/* Medium devices (tablets, 576px-768px) */
+@media (min-width: 577px) and (max-width: 768px) {
+    body{
+        width: 576px;
+    }
+}
+
+@media (min-width: 769px) {
+    .sidebar {
+		width: 250px;
+		height: auto;
+		position: fixed;
+		z-index: 1;
+    }
+
+    .content {
+		width: calc(100% - 250px - 1em);
+		margin-left: calc(250px + 1em);
+    }
+
+}
+
+/* Large devices (desktops, 768px-992px) */
+@media (min-width: 769px) and (max-width: 992px) {
+    body{
+        width: 769px;
+    }
+}
+
+@media (min-width: 993px) and (max-width: 1199px) {
+    body{
+        width: 993px;
+    }
+}
+
+@media (min-width: 1200px) {
+    body{
+        width: 1200px;
+    }
+}
+
+/* Images */
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    border-radius: 10px;
+    opacity: 1;
+    transition: all 1s;
+}
+
+img:hover {
+    opacity: 0.95;
+}
+
+/* Post */
+.posts-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 1em;
+}
+
+.column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+}
+
+.post {
+    padding: 1em;
+    background-color: #dcdcdf;
+    border-radius: 10px;
+    box-sizing: border-box;
+}
+
+.post-header {
+    line-height: 100%;
+    color:#343a40;
+}
+
+.date {
+    color: #343a40;
+    font-style: italic;
+}
+
+/* Post - Top section */
+.article {
+    font-size: 35px !important;
+    line-height: 40px !important;
+    padding-bottom: 15px;
+}
+
+.page-date{
+    text-align: right !important;
+}
+
+.page-divider {
+    margin-top: 1em;
+    border-top: 1px solid #343a40;
+}
+
+/* Post - Tags */
+.tags {
+    text-align: right;
+    margin-bottom: 0em;
+}
+
+.tags a {
+    color: #6c6f72 !important;
+    border-radius: 5px;
+    padding: 0.25em;
+}
+
+.tags a:hover {
+    color: #9fa5aa !important;
+}