slides update1

slides/datastar/slides.md

@@ -350,9 +350,9 @@ This shows up when you click the slide:
 
 <v-click>
 
-The <span v-mark.red="3"><code>v-mark</code> directive</span>
+The <span v-mark.box.blue="3"><code>v-mark</code> directive</span>
 also allows you to add
-<span v-mark.circle.orange="4">inline marks</span>
+<span v-mark.circle.green="5">inline marks</span>
 , powered by [Rough Notation](https://roughnotation.com/):
 
 ```html
@@ -466,8 +466,46 @@ $$ {1|3|all}
 \nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\varepsilon_0\frac{\partial\vec{E}}{\partial t}
 \end{aligned}
 $$
+---
+
+
+
+$$ {1|2|3|4|5|6|7|all}
+\begin{aligned}
+N &= R_* \cdot f_p \cdot n_e \cdot f_l \cdot f_i \cdot f_c \cdot L \\
+R_* &= \text{rate of star formation} \\
+f_p &= \text{fraction of stars with planets} \\
+n_e &= \text{number of habitable planets per star} \\
+f_l &= \text{fraction where life develops} \\
+f_i &= \text{fraction where intelligent life evolves} \\
+f_c &= \text{fraction that develops detectable technology} \\
+L &= \text{length of time civilizations are detectable}
+\end{aligned}
+$$
 
 [Learn more](https://sli.dev/features/latex)
+---
+class: text-center
+---
+## The "Drake" Formular of Webtechnologies
+
+$$ {1|all|1}
+\begin{aligned}
+N_w &= D_b \cdot L_b \cdot F_b \cdot P_t \cdot F_f \cdot S_m \cdot C_{ss} \cdot C_l \cdot H_p  \\
+\\
+N_w &= \text{Total Possible Tech Stacks} \\
+D_b &= \text{databases (PostgreSQL, MongoDB, MySQL...)} \\
+L_b &= \text{backend languages (Node.js, Python, Go...)} \\
+F_b &= \text{backend frameworks (Express, Django, FastAPI...)} \\
+P_t &= \text{transport protocols (REST, GraphQL, gRPC...)} \\
+F_f &= \text{frontend frameworks (React, Vue, Svelte...)} \\
+S_m &= \text{state management (Redux, Zustand, Pinia...)} \\
+C_{ss} &= \text{CSS frameworks (Tailwind, UnoCSS, Bootstrap...)} \\
+C_l &= \text{component libraries (shadcn, MUI, Ant Design...)} \\
+H_p &= \text{hosting platforms (Vercel, AWS, VPS...)} \\
+\end{aligned}
+$$
+
 
 ---
 
@@ -546,6 +584,29 @@ database "MySql" {
 </div>
 
 Learn more: [Mermaid Diagrams](https://sli.dev/features/mermaid) and [PlantUML Diagrams](https://sli.dev/features/plantuml)
+---
+class: text-center
+---
+
+# The Journey
+
+<v-click>
+
+In the beginning, there was chaos...
+
+</v-click>
+
+<v-click>
+
+<span class="text-green-500 font-bold">But then a hero emerged!</span>
+
+</v-click>
+
+<v-click>
+
+And everything changed.
+
+</v-click>
 
 ---
 foo: bar
@@ -576,7 +637,7 @@ Double-click on the draggable elements to edit their positions.
 </v-drag>
 ```
 
-<v-drag pos="663,206,261,_,-15">
+<v-drag pos="612,86,261,_,180">
   <div text-center text-3xl border border-main rounded>
     Double-click me!
   </div>
@@ -590,7 +651,7 @@ Double-click on the draggable elements to edit their positions.
 <v-drag-arrow two-way />
 ```
 
-<v-drag-arrow pos="67,452,253,46" two-way op70 />
+<v-drag-arrow pos="128,123,639,336" two-way op70 />
 
 ---
 src: ./pages/imported-slides.md