diff --git a/.github/workflows/t2006.yml b/.github/workflows/t2006.yml
index 4e0c1e7..ca5594d 100644
--- a/.github/workflows/t2006.yml
+++ b/.github/workflows/t2006.yml
@@ -16,8 +16,8 @@ jobs:
         with:
           node-version: 20
       - run: npm install -g t2006
-      - run: t2006 --input '.' --output './dist'
+      - run: t2006 --input '.' --output '.'
       - uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./dist
+          publish_dir: .
diff --git a/data.json b/data.json
new file mode 100644
index 0000000..a2c6d99
--- /dev/null
+++ b/data.json
@@ -0,0 +1,216 @@
+{
+  "title": "TR",
+  "header": {
+    "image": "https://avatars.githubusercontent.com/u/10585405",
+    "name": "TR"
+  },
+  "sections": [
+    {
+      "title": "SOFTWARE & WEB",
+      "items": [
+        {
+          "name": "Budoney",
+          "image": "",
+          "links": [
+            {
+              "text": "git repo",
+              "url": "https://github.com/TimurRin/budoney"
+            }
+          ],
+          "status": "alpha"
+        },
+        {
+          "name": "CF Version",
+          "image": "img/cinnabar.png",
+          "links": [],
+          "status": "WIP"
+        },
+        {
+          "name": "CF Workfolder",
+          "image": "img/cinnabar.png",
+          "links": [],
+          "status": "WIP"
+        },
+        {
+          "name": "Limelink",
+          "image": "img/limelink.png",
+          "links": [],
+          "status": "WIP"
+        },
+        {
+          "name": "Pastaquiz",
+          "image": "",
+          "links": [
+            {
+              "text": "git repo",
+              "url": "https://github.com/TimurRin/pastaquiz"
+            }
+          ],
+          "status": "alpha"
+        },
+        {
+          "name": "PDF Rush",
+          "image": "",
+          "links": [
+            {
+              "text": "git repo",
+              "url": "https://github.com/TimurRin/pdf-rush"
+            }
+          ],
+          "status": "alpha"
+        },
+        {
+          "name": "Serve Folder",
+          "image": "",
+          "links": [
+            {
+              "text": "git repo",
+              "url": "https://github.com/TimurRin/serve-folder"
+            }
+          ],
+          "status": ""
+        }
+      ]
+    },
+    {
+      "title": "GAMEDEV",
+      "items": [
+        {
+          "name": "ARMAZ MTA",
+          "image": "img/armaz.png",
+          "links": [
+            {
+              "text": "website",
+              "url": "https://armazmta.ru/"
+            }
+          ],
+          "status": ""
+        },
+        {
+          "name": "Wordlya Unleashed",
+          "image": "",
+          "links": [
+            {
+              "text": "git repo",
+              "url": "https://github.com/TimurRin/wordlya-unleashed"
+            }
+          ],
+          "status": "WIP"
+        }
+      ]
+    },
+    {
+      "title": "NODE.JS LIBRARIES",
+      "image": "img/npm.svg",
+      "items": [
+        {
+          "name": "CF Database Migrations",
+          "image": "img/cinnabar.png",
+          "links": [
+            {
+              "text": "git repo",
+              "url": "https://github.com/cinnabar-forge/cf-migrations"
+            },
+            {
+              "text": "npm package",
+              "url": "https://www.npmjs.com/package/@cinnabar-forge/cf-migrations"
+            }
+          ],
+          "status": "alpha"
+        },
+        {
+          "name": "CF ESLint Plugin",
+          "image": "img/cinnabar.png",
+          "links": [
+            {
+              "text": "git repo",
+              "url": "https://github.com/cinnabar-forge/eslint-plugin"
+            },
+            {
+              "text": "npm package",
+              "url": "https://www.npmjs.com/package/@cinnabar-forge/eslint-plugin"
+            }
+          ],
+          "status": "alpha"
+        },
+        {
+          "name": "CF SQLite3 Wrapper",
+          "image": "img/cinnabar.png",
+          "links": [
+            {
+              "text": "git repo",
+              "url": "https://github.com/cinnabar-forge/cf-sqlite3"
+            },
+            {
+              "text": "npm package",
+              "url": "https://www.npmjs.com/package/@cinnabar-forge/cf-sqlite3"
+            }
+          ],
+          "status": "beta"
+        },
+        {
+          "name": "CF Utils",
+          "image": "img/cinnabar.png",
+          "links": [
+            {
+              "text": "git repo",
+              "url": "https://github.com/cinnabar-forge/node-utils"
+            },
+            {
+              "text": "npm package",
+              "url": "https://www.npmjs.com/package/@cinnabar-forge/utils"
+            }
+          ],
+          "status": "alpha"
+        },
+        {
+          "name": "CF Web Framework",
+          "image": "img/cinnabar.png",
+          "links": [],
+          "status": "WIP"
+        }
+      ]
+    },
+    {
+      "title": "CONTACT ME",
+      "items": [
+        {
+          "name": "GitHub",
+          "image": {
+            "path": "img/github.svg",
+            "darkFilter": true
+          },
+          "links": [
+            {
+              "text": "@TimurRin",
+              "url": "https://github.com/TimurRin"
+            }
+          ],
+          "status": ""
+        },
+        {
+          "name": "Telegram",
+          "image": "img/telegram.svg",
+          "links": [
+            {
+              "text": "@TimurRin",
+              "url": "tg://resolve?domain=timurrin"
+            }
+          ],
+          "status": ""
+        },
+        {
+          "name": "NPM",
+          "image": "img/npm.svg",
+          "links": [
+            {
+              "text": "~timurrin",
+              "url": "https://www.npmjs.com/~timurrin"
+            }
+          ],
+          "status": ""
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/index.html b/index.html
deleted file mode 100644
index 80604a6..0000000
--- a/index.html
+++ /dev/null
@@ -1,232 +0,0 @@
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="description" content="TimurRin's showcase of his projects" />
-  <meta name="theme-color" content="#111" />
-  <meta name="title" content="TimurRin" />
-  <meta name="keywords" content="timurrin,tr,nodejs,npm,cinnabar forge,python,java,software,gaming,telegram,github" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>TR</title>
-</head>
-
-<body>
-  <div class="block">
-    <h1 class="vertical"><span><img class="image-circle"
-          src="https://avatars.githubusercontent.com/u/10585405" /></span>TR</h1>
-    <div class="tr section">
-      <h2>SOFTWARE & WEB</h2>
-      <div class="vertical">
-        <span class="bold">Budoney</span><a class="link" href="https://github.com/TimurRin/budoney" />git
-        repo</a><span class="italic small">alpha</span>
-      </div>
-      <div class="vertical">
-        <span><img class="image-circle" src="img/cinnabar.png" /></span><span class="bold">CF Version</span><span
-          class="italic small">WIP</span>
-      </div>
-      <div class="vertical">
-        <span><img class="image-circle" src="img/cinnabar.png" /></span><span class="bold">CF Workfolder</span><span
-          class="italic small">WIP</span>
-      </div>
-      <div class="vertical">
-        <span><img class="image-circle" src="img/limelink.png" /></span><span class="bold">Limelink</span><span
-          class="italic small">WIP</span>
-      </div>
-      <div class="vertical">
-        <span class="bold">Pastaquiz</span><a class="link" href="https://github.com/TimurRin/pastaquiz" />git
-        repo</a><span class="italic small">alpha</span>
-      </div>
-      <div class="vertical">
-        <span class="bold">PDF Rush</span><a class="link" href="https://github.com/TimurRin/pdf-rush" />git
-        repo</a><span class="italic small">alpha</span>
-      </div>
-      <div class="vertical">
-        <span class="bold">Serve Folder</span><a class="link" href="https://github.com/TimurRin/serve-folder" />git
-        repo</a>
-      </div>
-    </div>
-    <div class="tr section">
-      <h2>GAMEDEV</h2>
-      <div class="vertical">
-        <span><img class="image-circle" src="img/armaz.png" /></span><span class="bold">ARMAZ
-          MTA</span><a class="link" href="https://armazmta.ru/" />website</a>
-      </div>
-      <div class="vertical">
-        <span class="bold">Wordlya Unleashed</span><a class="link"
-          href="https://github.com/TimurRin/wordlya-unleashed" />git
-        repo</a><span class="italic small">WIP</span>
-      </div>
-    </div>
-    <div class="tr section">
-      <h2 class="vertical"><span><img class="image-circle" src="img/npm.svg" /></span>NODE.JS LIBRARIES</h2>
-      <div class="vertical">
-        <span><img class="image-circle" src="img/cinnabar.png" /></span><span class="bold">CF Database
-          Migrations</span><a class="link" href="https://github.com/cinnabar-forge/cf-migrations" />git
-        repo</a><span class="dot">•</span><a class="link"
-          href="https://www.npmjs.com/package/@cinnabar-forge/cf-migrations" />npm</a><span
-          class="italic small">alpha</span>
-      </div>
-      <div class="vertical">
-        <span><img class="image-circle" src="img/cinnabar.png" /></span><span class="bold">CF ESLint Plugin</span><a
-          class="link" href="https://github.com/cinnabar-forge/eslint-plugin" />git
-        repo</a><span class="dot">•</span><a class="link"
-          href="https://www.npmjs.com/package/@cinnabar-forge/eslint-plugin" />npm</a><span
-          class="italic small">alpha</span>
-      </div>
-      <div class="vertical">
-        <span><img class="image-circle" src="img/cinnabar.png" /></span><span class="bold">CF SQLite3 Wrapper</span><a
-          class="link" href="https://github.com/cinnabar-forge/cf-sqlite3" />git
-        repo</a><span class="dot">•</span><a class="link"
-          href="https://www.npmjs.com/package/@cinnabar-forge/cf-sqlite3" />npm</a><span
-          class="italic small">beta</span>
-      </div>
-      <div class="vertical">
-        <span><img class="image-circle" src="img/cinnabar.png" /></span><span class="bold">CF Utils</span><a
-          class="link" href="https://github.com/cinnabar-forge/node-utils" />git
-        repo</a><span class="dot">•</span><a class="link"
-          href="https://www.npmjs.com/package/@cinnabar-forge/utils" />npm</a>
-      </div>
-      <div class="vertical">
-        <span><img class="image-circle" src="img/cinnabar.png" /></span><span class="bold">CF Web Framework</span><span
-          class="italic small">WIP</span>
-      </div>
-    </div>
-    <div class="tr section">
-      <h2>CONTACT ME</h2>
-      <div class="vertical">
-        <span><img class="image-circle dark-theme-filter" src="img/github.svg" /></span><span
-          class="bold">GitHub</span><a class="link" href="https://github.com/TimurRin" />@TimurRin</a>
-      </div>
-      <div class="vertical">
-        <span><img class="image-circle" src="img/telegram.svg" /></span><span class="bold">Telegram</span><a
-          class="link" href="tg://resolve?domain=timurrin" />@TimurRin</a>
-      </div>
-      <div class="vertical">
-        <span><img class="image-circle" src="img/npm.svg" /></span><span class="bold">NPM</span><a class="link"
-          href="https://www.npmjs.com/~timurrin" />~timurrin</a>
-      </div>
-    </div>
-  </div>
-</body>
-
-</html>
-
-<style>
-  * {
-    margin: 0;
-    padding: 0;
-  }
-
-  @font-face {
-    font-family: "source-sans-pro";
-    font-style: normal;
-    src: url("fonts/source-sans-pro.ttf");
-  }
-
-  h2 {
-    border-bottom: 1px dotted #901050;
-    margin-bottom: 0.25em;
-  }
-
-  .link {
-    text-decoration: none;
-    color: #901050;
-    padding: 0 0.2em;
-  }
-
-  .link:hover {
-    text-decoration: dotted;
-    background-color: #901050;
-    color: #ececec
-  }
-
-  .block {
-    min-height: 100vh;
-    padding: 2em 0;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    font-family: "source-sans-pro", Arial;
-    overflow: hidden;
-  }
-
-  .tr {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .section {
-    margin-top: 1.5em;
-    font-size: 1.2em;
-  }
-
-  .vertical {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .vertical * {
-    margin-left: 0.05em;
-    margin-right: 0.05em;
-  }
-
-  .dot {
-    margin-left: 0.1em;
-    margin-right: 0.1em;
-    user-select: none;
-  }
-
-  .image-circle {
-    height: 1em;
-    width: 1em;
-    shape-outside: circle();
-    background-clip: content-box;
-    border-radius: 50%;
-    margin-right: 0.15em;
-  }
-
-  .right-space {
-    margin-right: 0.3em;
-  }
-
-  .bold {
-    font-weight: bold;
-  }
-
-  .italic {
-    font-style: italic;
-  }
-
-  .small {
-    font-size: small;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :root {
-      color-scheme: only dark;
-      color: rgba(255, 255, 255, 0.87);
-      background-color: #222;
-    }
-
-    h2 {
-      border-bottom-color: #c9a0b5;
-    }
-
-    .link {
-      color: #bd3a7b;
-    }
-
-    .link:hover {
-      text-decoration: dotted;
-      background-color: #901050;
-      color: #ececec
-    }
-
-    .dark-theme-filter {
-      filter: invert(100%);
-    }
-  }
-</style>
\ No newline at end of file
diff --git a/style.json b/style.json
new file mode 100644
index 0000000..14dbe98
--- /dev/null
+++ b/style.json
@@ -0,0 +1,29 @@
+{
+  "colors": {
+    "primaryColor": "#901050",
+    "linkColor": "#901050",
+    "linkHoverBackgroundColor": "#901050",
+    "linkHoverTextColor": "#ececec",
+    "borderColor": "#901050"
+  },
+  "colorsDark": {
+    "backgroundColor": "#222",
+    "textColor": "rgba(255, 255, 255, 0.87)",
+    "borderColor": "#c9a0b5",
+    "linkColor": "#bd3a7b",
+    "linkHoverBackgroundColor": "#901050",
+    "linkHoverTextColor": "#ececec"
+  },
+  "fontHeaders": {
+    "fontFamily": "\"source-sans-pro\", Arial",
+    "fontWeight": "bold",
+    "fontSize": "1.2em",
+    "fontStyle": "normal"
+  },
+  "fontText": {
+    "fontFamily": "\"source-sans-pro\", Arial",
+    "fontSize": "normal",
+    "fontWeight": "normal",
+    "fontStyle": "italic"
+  }
+}
\ No newline at end of file