From eaeadb3128ccc02eb20fac807065b89c28f6a9d9 Mon Sep 17 00:00:00 2001
From: Saenyakorn Siangsanoh <saneyakorn@gmail.com>
Date: Wed, 10 Jan 2024 22:07:30 +0700
Subject: [PATCH] refactor

---
 docs/slidev/pages/evolution/intro.md          |   6 +
 docs/slidev/pages/evolution/web-1.md          |  17 ++
 docs/slidev/pages/evolution/web-2.md          |  18 ++
 docs/slidev/pages/evolution/web-3.md          |  16 ++
 .../pages/impact-we-made/cedt-portal.md       |  11 +
 .../slidev/pages/impact-we-made/cu-get-reg.md |  19 ++
 .../slidev/pages/impact-we-made/cu-pop-bus.md |  17 ++
 .../pages/impact-we-made/sport-complex.md     |  19 ++
 docs/slidev/pages/intro.md                    |   7 +
 docs/slidev/pages/multiple-entries.md         |  27 --
 docs/slidev/pages/speaker/saenyakorn.md       |  16 ++
 docs/slidev/pages/speaker/supakarin.md        |  16 ++
 .../actual-network-scenario.md                |   8 +
 docs/slidev/pages/what-is-browser/cssdom.md   |  22 ++
 docs/slidev/pages/what-is-browser/dom.md      |  24 ++
 docs/slidev/pages/what-is-browser/n-tier.md   |   8 +
 docs/slidev/pages/what-is-browser/parsing.md  |  12 +
 docs/slidev/pages/what-is-browser/scheme.md   |   4 +
 docs/slidev/pages/what-is-browser/what-is.md  |  10 +
 docs/slidev/slides.md                         | 253 +++---------------
 20 files changed, 285 insertions(+), 245 deletions(-)
 create mode 100644 docs/slidev/pages/evolution/intro.md
 create mode 100644 docs/slidev/pages/evolution/web-1.md
 create mode 100644 docs/slidev/pages/evolution/web-2.md
 create mode 100644 docs/slidev/pages/evolution/web-3.md
 create mode 100644 docs/slidev/pages/impact-we-made/cedt-portal.md
 create mode 100644 docs/slidev/pages/impact-we-made/cu-get-reg.md
 create mode 100644 docs/slidev/pages/impact-we-made/cu-pop-bus.md
 create mode 100644 docs/slidev/pages/impact-we-made/sport-complex.md
 create mode 100644 docs/slidev/pages/intro.md
 delete mode 100644 docs/slidev/pages/multiple-entries.md
 create mode 100644 docs/slidev/pages/speaker/saenyakorn.md
 create mode 100644 docs/slidev/pages/speaker/supakarin.md
 create mode 100644 docs/slidev/pages/what-is-browser/actual-network-scenario.md
 create mode 100644 docs/slidev/pages/what-is-browser/cssdom.md
 create mode 100644 docs/slidev/pages/what-is-browser/dom.md
 create mode 100644 docs/slidev/pages/what-is-browser/n-tier.md
 create mode 100644 docs/slidev/pages/what-is-browser/parsing.md
 create mode 100644 docs/slidev/pages/what-is-browser/scheme.md
 create mode 100644 docs/slidev/pages/what-is-browser/what-is.md

diff --git a/docs/slidev/pages/evolution/intro.md b/docs/slidev/pages/evolution/intro.md
new file mode 100644
index 0000000..75d6031
--- /dev/null
+++ b/docs/slidev/pages/evolution/intro.md
@@ -0,0 +1,6 @@
+---
+---
+
+# Web Evolution
+
+<img src="https://www.goodrequest.com/_next/image?url=https%3A%2F%2Fgoodrequest-web.s3.eu-central-1.amazonaws.com%2FHistory_of_web_Web_1_0_3_0_8124a4915c.png&w=3840&q=75" alt="" class="h-[400px]" />
diff --git a/docs/slidev/pages/evolution/web-1.md b/docs/slidev/pages/evolution/web-1.md
new file mode 100644
index 0000000..1509df9
--- /dev/null
+++ b/docs/slidev/pages/evolution/web-1.md
@@ -0,0 +1,17 @@
+---
+---
+
+# Web 1.0
+
+The customer can not edit the content that the website provides which means that **the customer can only read the content**.
+
+### Keyword
+
+- **One-way communication**
+- **Read**
+
+### Example
+
+- News website
+- Wikipedia
+- etc.
diff --git a/docs/slidev/pages/evolution/web-2.md b/docs/slidev/pages/evolution/web-2.md
new file mode 100644
index 0000000..bfad7bb
--- /dev/null
+++ b/docs/slidev/pages/evolution/web-2.md
@@ -0,0 +1,18 @@
+---
+---
+
+# Web 2.0
+
+The customer can interact with the website by **editing the content**. The website will be updated in real-time which leads to the **growth of social media**.
+
+### Keyword
+
+- **Two-way communication**
+- **Read-Write**
+
+### Example
+
+- Facebook
+- Twitter
+- Instagram
+- etc.
diff --git a/docs/slidev/pages/evolution/web-3.md b/docs/slidev/pages/evolution/web-3.md
new file mode 100644
index 0000000..c4ba988
--- /dev/null
+++ b/docs/slidev/pages/evolution/web-3.md
@@ -0,0 +1,16 @@
+---
+---
+
+# Web 3.0
+
+As the internet grows, the amount of data that the website has to handle is increasing. **Web 3.0** is the solution to this problem. It is the **decentralized web** that uses **blockchain** to store data. We might don't want to trust the third party to store our data.
+
+### Keyword
+
+- **Decentralized**
+- **Read-Write-Trust**
+
+### Example
+
+- PancakeSwap
+- Uniswap
diff --git a/docs/slidev/pages/impact-we-made/cedt-portal.md b/docs/slidev/pages/impact-we-made/cedt-portal.md
new file mode 100644
index 0000000..8d1a5fd
--- /dev/null
+++ b/docs/slidev/pages/impact-we-made/cedt-portal.md
@@ -0,0 +1,11 @@
+---
+hideInToc: true
+layout: center
+---
+
+# CEDT Portal Internship
+
+<div class="grid grid-cols-2 gap-2 items-center">
+  <img src="/image/cedt-home.png" alt="cedt-home" width="450">
+  <img src="/image/cedt-fav-pos.png" alt="cedt-home" width="450">
+</div>
diff --git a/docs/slidev/pages/impact-we-made/cu-get-reg.md b/docs/slidev/pages/impact-we-made/cu-get-reg.md
new file mode 100644
index 0000000..ca2d124
--- /dev/null
+++ b/docs/slidev/pages/impact-we-made/cu-get-reg.md
@@ -0,0 +1,19 @@
+---
+hideInToc: true
+layout: center
+---
+
+<div class="grid grid-cols-3 gap-2">
+  <div class="justify-self-center">
+    <a href="https://cugetreg.com">
+        <img src="https://github.com/thinc-org/.github/raw/master/profile/assets/cgr-logo.png">
+    </a>
+  </div>
+
+  <div class="col-span-2">
+    <h1 class="font-bold">CU Get Reg</h1>
+    <p align="center">
+        Have no idea what courses to take? Don't know what this course is about? We got it covered. With CU Get Reg, we put all kinds of course data together so that you don't have to.
+    </p>
+  </div>
+</div>
diff --git a/docs/slidev/pages/impact-we-made/cu-pop-bus.md b/docs/slidev/pages/impact-we-made/cu-pop-bus.md
new file mode 100644
index 0000000..e03b789
--- /dev/null
+++ b/docs/slidev/pages/impact-we-made/cu-pop-bus.md
@@ -0,0 +1,17 @@
+---
+hideInToc: true
+layout: center
+---
+
+<div class="grid grid-cols-3 gap-2">
+  <div class="justify-self-center">
+    <img src="https://github.com/thinc-org/.github/raw/master/profile/assets/cupb-logo.png">
+  </div>
+
+  <div class="col-span-2">
+    <h1 class="font-bold">CU Pop Bus (Deprecated)</h1>
+    <p align="center">
+      Never get lost in Chula again! Chula Pop Bus App helps make navigation through Chulalongkorn University much easier.
+    </p>
+  </div>
+</div>
diff --git a/docs/slidev/pages/impact-we-made/sport-complex.md b/docs/slidev/pages/impact-we-made/sport-complex.md
new file mode 100644
index 0000000..84378d7
--- /dev/null
+++ b/docs/slidev/pages/impact-we-made/sport-complex.md
@@ -0,0 +1,19 @@
+---
+hideInToc: true
+layout: center
+---
+
+<div class="grid grid-cols-3 gap-2">
+  <div class="justify-self-center">
+    <a href="https://book.cusc.chula.ac.th">
+        <img src="https://github.com/thinc-org/.github/raw/master/profile/assets/cusc-logo.png">
+    </a>
+  </div>
+
+  <div class="col-span-2">
+    <h1 class="font-bold">CU Sports Center</h1>
+    <p align="center">
+      Tired of running to the sports center early every day? Now, you can book your court reservations anywhere at anytime.
+    </p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/docs/slidev/pages/intro.md b/docs/slidev/pages/intro.md
new file mode 100644
index 0000000..487e650
--- /dev/null
+++ b/docs/slidev/pages/intro.md
@@ -0,0 +1,7 @@
+---
+layout: statement
+hideInToc: true
+---
+
+<ThincLogo class="size-64"/>
+# Thailand Incubator Club
\ No newline at end of file
diff --git a/docs/slidev/pages/multiple-entries.md b/docs/slidev/pages/multiple-entries.md
deleted file mode 100644
index 5b17510..0000000
--- a/docs/slidev/pages/multiple-entries.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Multiple Entries
-
-You can split your slides.md into multiple files and organize them as you want using the `src` attribute.
-
-#### `slides.md`
-
-```markdown
-# Page 1
-
-Page 2 from main entry.
-
----
-src: ./subpage.md
----
-```
-
-<br>
-
-#### `subpage.md`
-
-```markdown
-# Page 2
-
-Page 2 from another file.
-```
-
-[Learn more](https://sli.dev/guide/syntax.html#multiple-entries)
diff --git a/docs/slidev/pages/speaker/saenyakorn.md b/docs/slidev/pages/speaker/saenyakorn.md
new file mode 100644
index 0000000..b39caec
--- /dev/null
+++ b/docs/slidev/pages/speaker/saenyakorn.md
@@ -0,0 +1,16 @@
+---
+---
+
+<div class="m-auto w-auto h-full flex justify-center items-center flex space-x-8 items-center">
+  <div>
+    <img src="https://avatars.githubusercontent.com/u/33742791?v=4" class="rounded-full size-65" alt="">
+  </div>
+
+  <div>
+    <h1 class="text-2xl font-bold">Saenyakorn Siangsanoh</h1>
+    <div class="text-xl">Thinc. #7, CP 46</div>
+    <div class="text-xl flex items-center"><strong class="mr-2">Software Engineer</strong> At <a style="border-style:none" href="https://softnetics.tech" target="_blank"><Softnetics class="ml-2 w-56 h-auto"/></a></div>
+  </div>
+</div>
+
+<Footer/>
diff --git a/docs/slidev/pages/speaker/supakarin.md b/docs/slidev/pages/speaker/supakarin.md
new file mode 100644
index 0000000..22b969b
--- /dev/null
+++ b/docs/slidev/pages/speaker/supakarin.md
@@ -0,0 +1,16 @@
+---
+---
+
+<div class="m-auto w-auto h-full flex justify-center items-center flex space-x-8 items-center">
+  <div>
+    <img src="https://avatars.githubusercontent.com/u/50145654?v=4" class="rounded-full size-65" alt="">
+  </div>
+
+  <div>
+    <h1 class="text-2xl font-bold">Supakarin Niansupornpun</h1>
+    <div class="text-xl">Thinc. #9, CP 48</div>
+    <div class="text-xl flex items-center slidev-vclick-target"><strong class="mr-2">President</strong> of <a style="border-style:none" href="https://thinc.in.th" target="_blank"><ThincLogo class="ml-2 w-36 h-auto pb-2"/></a></div>
+  </div>
+</div>
+
+<Footer/>
diff --git a/docs/slidev/pages/what-is-browser/actual-network-scenario.md b/docs/slidev/pages/what-is-browser/actual-network-scenario.md
new file mode 100644
index 0000000..3bfd7cc
--- /dev/null
+++ b/docs/slidev/pages/what-is-browser/actual-network-scenario.md
@@ -0,0 +1,8 @@
+---
+---
+
+# Actual network scenario
+
+FYI, you don't have to know all of this. (But nice to know about).
+
+<img src="/assets/actual-network.png" alt="" class="h-[400px]" />
diff --git a/docs/slidev/pages/what-is-browser/cssdom.md b/docs/slidev/pages/what-is-browser/cssdom.md
new file mode 100644
index 0000000..67e6848
--- /dev/null
+++ b/docs/slidev/pages/what-is-browser/cssdom.md
@@ -0,0 +1,22 @@
+---
+---
+
+# Stylesheet (CSS)
+
+Browser will take CSS to construct **CSSOM (CSS Object Model)**.
+
+```css
+h1 {
+  color: red;
+}
+```
+
+# JavaScript (JS)
+
+```js
+function onClick() {
+  alert('Hello World')
+}
+
+document.querySelector('h1').addEventListener('click', onClick)
+```
diff --git a/docs/slidev/pages/what-is-browser/dom.md b/docs/slidev/pages/what-is-browser/dom.md
new file mode 100644
index 0000000..40699f3
--- /dev/null
+++ b/docs/slidev/pages/what-is-browser/dom.md
@@ -0,0 +1,24 @@
+---
+layout: image-right
+image: https://www.w3schools.com/js/pic_htmltree.gif
+---
+
+# After browser get content (DOM)
+
+Browser will take HTML to construct **DOM (Document Object Model)**.
+
+```html {all|6-7}
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link ref="stylesheet" href="LINK" />
+    <script type="text/javascript" src="LINK"></script>
+    <title>Document</title>
+  </head>
+  <body>
+    <h1>Hello World</h1>
+  </body>
+</html>
+```
\ No newline at end of file
diff --git a/docs/slidev/pages/what-is-browser/n-tier.md b/docs/slidev/pages/what-is-browser/n-tier.md
new file mode 100644
index 0000000..3077216
--- /dev/null
+++ b/docs/slidev/pages/what-is-browser/n-tier.md
@@ -0,0 +1,8 @@
+---
+---
+
+# N-tier Architecture
+
+<div class="bg-white">
+  <img src="/assets/architecture.png" alt="" />
+</div>
\ No newline at end of file
diff --git a/docs/slidev/pages/what-is-browser/parsing.md b/docs/slidev/pages/what-is-browser/parsing.md
new file mode 100644
index 0000000..1a26b36
--- /dev/null
+++ b/docs/slidev/pages/what-is-browser/parsing.md
@@ -0,0 +1,12 @@
+---
+layout: image-right
+image: https://miro.medium.com/v2/resize:fit:4800/format:webp/1*ejR8TwuRBqTRDKmAJeltig.png
+---
+
+# HTML, CSS, JS parsing
+
+Reference:
+
+- https://web.dev/articles/howbrowserswork
+- https://web.dev/articles/critical-rendering-path/constructing-the-object-model
+- https://javascript.plainenglish.io/web-performance-understanding-critical-rendering-path-72283caefc1f
diff --git a/docs/slidev/pages/what-is-browser/scheme.md b/docs/slidev/pages/what-is-browser/scheme.md
new file mode 100644
index 0000000..e42bbf5
--- /dev/null
+++ b/docs/slidev/pages/what-is-browser/scheme.md
@@ -0,0 +1,4 @@
+---
+---
+
+# TODO
diff --git a/docs/slidev/pages/what-is-browser/what-is.md b/docs/slidev/pages/what-is-browser/what-is.md
new file mode 100644
index 0000000..9daeda7
--- /dev/null
+++ b/docs/slidev/pages/what-is-browser/what-is.md
@@ -0,0 +1,10 @@
+---
+---
+
+# What is Browser
+
+**Browser** is **application program** that provides a way to look at and interact with all the information on the World Wide Web.
+
+<div class="bg-white">
+  <img src="/assets/browser.png" alt="" />
+</div>
diff --git a/docs/slidev/slides.md b/docs/slidev/slides.md
index 2fdde25..fcabe68 100644
--- a/docs/slidev/slides.md
+++ b/docs/slidev/slides.md
@@ -17,18 +17,11 @@ Basic you need to know before you start your journey.
 
 <Footer />
 
-<!--
-The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
--->
-
 ---
-layout: statement
+src: ./pages/intro.md
 hideInToc: true
 ---
 
-<ThincLogo class="size-64"/>
-# Thailand Incubator Club
-
 ---
 layout: statement
 hideInToc: true
@@ -37,119 +30,35 @@ hideInToc: true
 # Impact we made
 
 ---
+src: ./pages/impact-we-made/cu-pop-bus.md
 hideInToc: true
-layout: center
 ---
 
-
-
-<div class="grid grid-cols-3 gap-2">
-  <div class="justify-self-center">
-    <img src="https://github.com/thinc-org/.github/raw/master/profile/assets/cupb-logo.png">
-  </div>
-
-  <div class="col-span-2">
-    <h1 class="font-bold">CU Pop Bus (Deprecated)</h1>
-    <p align="center">
-      Never get lost in Chula again! Chula Pop Bus App helps make navigation through Chulalongkorn University much easier.
-    </p>
-  </div>
-</div>
-
 ---
+src: ./pages/impact-we-made/sport-complex.md
 hideInToc: true
-layout: center
----
-
-<div class="grid grid-cols-3 gap-2">
-  <div class="justify-self-center">
-    <a href="https://book.cusc.chula.ac.th">
-        <img src="https://github.com/thinc-org/.github/raw/master/profile/assets/cusc-logo.png">
-    </a>
-  </div>
-
-  <div class="col-span-2">
-    <h1 class="font-bold">CU Sports Center</h1>
-    <p align="center">
-      Tired of running to the sports center early every day? Now, you can book your court reservations anywhere at anytime.
-    </p>
-  </div>
-</div>
+---
 
 ---
+src: ./pages/impact-we-made/cu-get-reg.md
 hideInToc: true
-layout: center
 ---
 
-
-<div class="grid grid-cols-3 gap-2">
-  <div class="justify-self-center">
-    <a href="https://cugetreg.com">
-        <img src="https://github.com/thinc-org/.github/raw/master/profile/assets/cgr-logo.png">
-    </a>
-  </div>
-
-  <div class="col-span-2">
-    <h1 class="font-bold">CU Get Reg</h1>
-    <p align="center">
-        Have no idea what courses to take? Don't know what this course is about? We got it covered. With CU Get Reg, we put all kinds of course data together so that you don't have to.
-    </p>
-  </div>
-</div>
-
-
 ---
+src: ./pages/impact-we-made/cedt-portal.md
 hideInToc: true
-layout: center
 ---
 
-# CEDT Portal Internship
-
-<div class="grid grid-cols-2 gap-2 items-center">
-  <img src="/image/cedt-home.png" alt="cedt-home" width="450">
-  <img src="/image/cedt-fav-pos.png" alt="cedt-home" width="450">
-</div>
-
 ---
+src: ./pages/speaker/saenyakorn.md
 hideInToc: true
 ---
 
-# MCV Next Gen
-
 ---
-
-
-<div class="m-auto w-auto h-full flex justify-center items-center flex space-x-8 items-center">
-  <div>
-    <img src="https://avatars.githubusercontent.com/u/33742791?v=4" class="rounded-full size-65" alt="">
-  </div>
-
-  <div>
-    <h1 class="text-2xl font-bold">Saenyakorn Siangsanoh</h1>
-    <div class="text-xl">Thinc. #7, CP 46</div>
-    <div class="text-xl flex items-center"><strong class="mr-2">Software Engineer</strong> At <a style="border-style:none" href="https://softnetics.tech" target="_blank"><Softnetics class="ml-2 w-56 h-auto"/></a></div>
-  </div>
-</div>
-
-<Footer/>
-
-
+src: ./pages/speaker/supakarin.md
+hideInToc: true
 ---
 
-<div class="m-auto w-auto h-full flex justify-center items-center flex space-x-8 items-center">
-  <div>
-    <img src="https://avatars.githubusercontent.com/u/50145654?v=4" class="rounded-full size-65" alt="">
-  </div>
-
-  <div>
-    <h1 class="text-2xl font-bold">Supakarin Niansupornpun</h1>
-    <div class="text-xl">Thinc. #9, CP 48</div>
-    <div class="text-xl flex items-center slidev-vclick-target"><strong class="mr-2">President</strong> of <a style="border-style:none" href="https://thinc.in.th" target="_blank"><ThincLogo class="ml-2 w-36 h-auto pb-2"/></a></div>
-  </div>
-</div>
-
-<Footer/>
-
 ---
 hideInToc: true
 ---
@@ -173,144 +82,52 @@ hideInToc: true
 <Footer/>
 
 ---
-
-# What is Browser
-
-**Browser** is **application program** that provides a way to look at and interact with all the information on the World Wide Web.
-
-<div class="bg-white">
-  <img src="/assets/browser.png" alt="" />
-</div>
-
+src: ./pages/what-is-browser/what-is.md
 ---
 
-# Actual network scenario
-
-FYI, you don't have to know all of this.
-
-<img src="/assets/actual-network.png" alt="" class="h-[400px]" />
-
 ---
-
-# After browser get content (DOM)
-
-Browser will take HTML to construct **DOM (Document Object Model)**.
-
-```html {all|6-7}
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link ref="stylesheet" href="LINK" />
-    <script type="text/javascript" src="LINK"></script>
-    <title>Document</title>
-  </head>
-  <body>
-    <h1>Hello World</h1>
-  </body>
-</html>
-```
-
+src: ./pages/what-is-browser/scheme.md
+hideInToc: true
 ---
 
-# Stylesheet (CSS)
-
-Browser will take CSS to construct **CSSOM (CSS Object Model)**.
-
-```css
-h1 {
-  color: red;
-}
-```
-
-# JavaScript (JS)
-
-```js
-function onClick() {
-  alert("Hello World");
-}
-
-document.querySelector("h1").addEventListener("click", onClick);
-```
-
 ---
-layout: image-right
-image: https://miro.medium.com/v2/resize:fit:4800/format:webp/1*ejR8TwuRBqTRDKmAJeltig.png
+src: ./pages/what-is-browser/actual-network-scenario.md
+hideInToc: true
 ---
 
-# HTML, CSS, JS parsing
-
-Reference: 
-
-- https://web.dev/articles/howbrowserswork
-- https://web.dev/articles/critical-rendering-path/constructing-the-object-model
-- https://javascript.plainenglish.io/web-performance-understanding-critical-rendering-path-72283caefc1f
-
 ---
-
-# N-tier Architecture
-
-<div class="bg-white">
-  <img src="/assets/architecture.png" alt="" />
-</div>
-
+src: ./pages/what-is-browser/dom.md
+hideInToc: true
 ---
 
-# Web Evolution
-
-<img src="https://www.goodrequest.com/_next/image?url=https%3A%2F%2Fgoodrequest-web.s3.eu-central-1.amazonaws.com%2FHistory_of_web_Web_1_0_3_0_8124a4915c.png&w=3840&q=75" alt="" class="h-[400px]" />
-
 ---
-
-# Web 1.0
-
-The customer can not edit the content that the website provides which means that **the customer can only read the content**.
-
-### Keyword
-
-- **One-way communication**
-- **Read**
-
-### Example
-
-- News website
-- Wikipedia
-- etc.
-
+src: ./pages/what-is-browser/cssdom.md
+hideInToc: true
 ---
 
-# Web 2.0
-
-The customer can interact with the website by **editing the content**. The website will be updated in real-time which leads to the **growth of social media**.
-
-### Keyword
-
-- **Two-way communication**
-- **Read-Write**
-
-### Example
-
-- Facebook
-- Twitter
-- Instagram
-- etc.
-
+---
+src: ./pages/what-is-browser/parsing.md
 ---
 
-# Web 3.0
-
-As the internet grows, the amount of data that the website has to handle is increasing. **Web 3.0** is the solution to this problem. It is the **decentralized web** that uses **blockchain** to store data. We might don't want to trust the third party to store our data.
+---
+src: ./pages/what-is-browser/n-tier.md
+---
 
-### Keyword
+---
+src: ./pages/evolution/intro.md
+---
 
-- **Decentralized**
-- **Read-Write-Trust**
+---
+src: ./pages/evolution/web-1.md
+---
 
-### Example
+---
+src: ./pages/evolution/web-2.md
+---
 
-- PancakeSwap
-- Uniswap
+---
+src: ./pages/evolution/web-3.md
+---
 
 ---