refactor: svg wrapper components in subfolder & all usage same

Author: toddeTV

components/InternetFoundationSvg.vue renamed to components/SvgWrapper/InternetFoundationSvg.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useNav } from '@slidev/client'
 import { computed } from 'vue'
-import SvgElementFilter from './SvgElementFilter.vue'
+import SvgElementFilter from '../SvgElementFilter.vue'
 import mySvgContent from '/assets/excalidraw-drawings/internet-foundation_light.svg?raw'
 
 const { clicks } = useNav()

components/WhatIsTheWeb.vue renamed to components/SvgWrapper/WhatIsTheWebSvg.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useNav } from '@slidev/client'
 import { computed } from 'vue'
-import SvgElementFilter from './SvgElementFilter.vue'
+import SvgElementFilter from '../SvgElementFilter.vue'
 import mySvgContent from '/assets/excalidraw-drawings/Web-Mindmap_light.svg?raw'
 
 const { clicks } = useNav()
@@ -15,12 +15,9 @@ const elementsToShow = computed<number[] | 'all'>(() => {
 </script>
 
 <template>
-  <div class="flex justify-center">
-    <SvgElementFilter
-      class="h-[90%] -mt-10"
-      :display-indices="elementsToShow"
-      svg-class="h-full"
-      :svg-content="mySvgContent"
-    />
-  </div>
+  <SvgElementFilter
+    :display-indices="elementsToShow"
+    svg-class="w-full"
+    :svg-content="mySvgContent"
+  />
 </template>

content/need-for-portfolio.md

@@ -2,70 +2,4 @@
 layout: basic
 ---
 
-# Why 3D in the Web?
-
-it is interactive against an static image
-
-# Website Structure
-
-- Frontend, interpreted by the Browser/Client, has UI & UX
-  - HTML
-  - CSS
-  - JavaScript (here APIs)
-    - TypeScript
-- Backend, interpreted by the Server, no UI
-  many languages possible, depends on the Interpreter on the Server, e.g.
-  - JavaScript
-    - TypeScript
-  - Java
-    - Kotlin
-  - Python
-  - PHP
-
-# What do I need for my Portfolio?
-
-- Domain
-- Server
-  - Self-Hosted
-    - Service-Oriented
-    - (v)Root
-  - Cloud (e.g. Cloudflare, GitHub Pages, Vercel, Netlify, etc.)
-- CMS for changing data with an editor like approach: both static & dynamic data
-  - headless CMS vs TODO
-- Program yourself: Do not code anymore in plain HTML or PHP, use Metaframeworks
-- Integrations: e.g. outsource your search, add a shop, etc.
-
---
-
-Think about the structure:
-
-Static Data vs Dynamic Data
-Long living Data vs Short Living Data
-Your Data at Build vs Data in Production
-
-left: build, right: database
-
---
-
-Also think about:
-What data can be shipped to the client and what not?
-
---
-
-# 3D in the Web
-
-- Renderer: WebGL
-- Libraries: ThreeJS
-- Format: gltf/glb (gcode) <- copy existing slide?
-
-benchy 3D example
-
---
-
-example portfolio showroom
-game showcase zlig
-
---
-
-AI
-https://lmarena.ai/
+# foo

content/what-is-the-web.md

@@ -4,7 +4,9 @@ layout: basic
 
 # What is the Web?
 
-<WhatIsTheWeb />
+<div class="w-full flex justify-center -mt-25">
+  <WhatIsTheWebSvg class="w-full" />
+</div>
 
 <!-- dummy only to force the click count on this slide manually -->
 <div v-click="1" />