Add Makefile, package.json, and initial configuration for VitePress and Slidev integration

- Introduced a Makefile for streamlined commands related to building, running, and managing presentations.
- Created package.json to define project metadata, dependencies, and scripts for development and testing.
- Added .gitignore entries to exclude build artifacts and temporary files from version control.
- Included playwright.config.mjs for end-to-end testing setup with Playwright.
- Added README.md for project documentation, outlining setup instructions and development guidelines.

portal/.vitepress/components/QrEncode.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { withBase } from 'vitepress'
+import QRCode from 'qrcode'
+
+const props = defineProps<{ path: string }>()
+const canvas = ref<HTMLCanvasElement | null>(null)
+
+const href = computed(() => withBase(props.path))
+
+const displayHost = computed(() => {
+  if (typeof window === 'undefined') return href.value
+  const abs = new URL(href.value, window.location.origin).href
+  return abs.replace(/^https?:\/\//, '')
+})
+
+const fullHref = computed(() => {
+  if (typeof window === 'undefined') return href.value
+  return new URL(href.value, window.location.origin).href
+})
+
+async function draw() {
+  if (!canvas.value || typeof window === 'undefined') return
+  const url = new URL(href.value, window.location.origin).href
+  await QRCode.toCanvas(canvas.value, url, {
+    width: 200,
+    margin: 1,
+    color: { dark: '#0d1115ff', light: '#ffffffff' },
+  })
+}
+
+onMounted(draw)
+watch(href, draw)
+</script>
+
+<template>
+  <div class="qr-deck">
+    <a class="qr-link" :href="href">{{ displayHost }}</a>
+    <div class="qrcode-wrap">
+      <canvas ref="canvas" role="img" :aria-label="`QR code vers ${fullHref}`" />
+    </div>
+  </div>
+</template>