refactor

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]" />

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.

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.

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

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>

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>

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>

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>

docs/slidev/pages/intro.md

@@ -0,0 +1,7 @@
+---
+layout: statement
+hideInToc: true
+---
+
+<ThincLogo class="size-64"/>
+# Thailand Incubator Club

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/>

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/>

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]" />

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)
+```

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>
+```

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>

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

docs/slidev/pages/what-is-browser/scheme.md

@@ -0,0 +1,4 @@
+---
+---
+
+# TODO

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>