Update 1.home.md

raselshikdar · Oct 5, 2024 · 5bbb10c · 5bbb10c
1 parent 3beb778
commit 5bbb10c
Showing 1 changed file with 79 additions and 49 deletions.
diff --git a/content/pages/1.home.md b/content/pages/1.home.md
@@ -1,20 +1,20 @@
 ---
 title: "Home"
 head.title: ""
-description: "Hey, I'm Rasel Shikdar, a full-stack web developer living in Bangladesh. I'm passionate about building open-source packages in the Vue, Nuxt and Vite ecosystems."
+description: "Hey, I'm Rasel Shikdar, a full-stack web developer living in Bangladesh. I'm passionate about building open-source packages in the Vue, Nuxt, and Vite ecosystems."
 ---
 
 # Rasel Shikdar :i-line-md-coffee-loop
 
 Hey, I am Rasel Shikdar, a front-end developer from Bangladesh.
 
 Core team member of [Anse](https://github.com/anse-app), [OnuUI](https://github.com/onu-ui/onu-ui).<br>
-Creator of [magic-cli](https://github.com/vbs-plus/magic-cli), [za-zi](https://github.com/vbs-plus/zi),  [json-tsc](https://github.com/vbs-plus/json-tsc) and others.<br>
+Creator of [magic-cli](https://github.com/vbs-plus/magic-cli), [za-zi](https://github.com/vbs-plus/zi), [json-tsc](https://github.com/vbs-plus/json-tsc) and others.<br>
 Contributor of [chatgpt-demo](https://github.com/ddiu8081/chatgpt-demo), [UnoCSS](https://github.com/unocss/unocss), [Vitest](https://github.com/vitest-dev/vitest), [Vitesse-nuxt3](https://github.com/antfu/vitesse-nuxt3) and more.
-
-Dreaming up ideas and making them come true is where my passion lies. You can find my [full projects list here](/projects). 
 
-Currently I am focusing on front-end technologies that help people design complex applications to be simpler to use, enabling functionality while optimizing the user experience.
+Dreaming up ideas and making them come true is where my passion lies. You can find my [full projects list here](/projects).
+
+Currently, I am focusing on front-end technologies that help people design complex applications to be simpler to use, enabling functionality while optimizing the user experience.
 
 I love to chase ideas and I spend a lot of time using some great product applications, learning from their successes and using them to inspire my creativity.
 
@@ -26,50 +26,80 @@ If you like my works, you can add [star to my projects](https://github.com/rasel
 
 ---
 
-## Modern Multipurpose Media Embed
-
-<link href="https://vjs.zencdn.net/7.18.1/video-js.css" rel="stylesheet" />
-<script src="https://vjs.zencdn.net/7.18.1/video.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
-
-<div class="video-container">
-  <video id="video-player" class="video-js" controls preload="auto" width="100%" height="auto">
-    <source id="media-source" src="https://www.youtube.com/embed/dQw4w9WgXcQ" type="video/youtube">
-    Your browser does not support the video tag.
-  </video>
-</div>
-
-<script>
-  const video = document.getElementById('video-player');
-  const mediaSource = document.getElementById('media-source');
-
-  // Function to switch media source
-  function updateMediaEmbed(url, type) {
-    mediaSource.src = url;
-    mediaSource.type = type;
-    video.load();
-  }
-
-  // Example usage to switch to YouTube, Facebook, or m3u8 stream
-  // updateMediaEmbed('https://www.youtube.com/embed/dQw4w9WgXcQ', 'video/youtube'); // YouTube
-  // updateMediaEmbed('https://www.facebook.com/plugins/video.php?href=...', 'video/facebook'); // Facebook
-  // updateMediaEmbed('https://example.com/path/to/your/video.m3u8', 'application/x-mpegURL'); // m3u8
+## Dynamic Media Embed
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const videoSrc = ref('https://www.youtube.com/embed/Jh-jPx5ef8g'); // Default YouTube video
+const videoType = ref('video/youtube'); // Default type
+
+const updateMediaSource = (url: string, type: string) => {
+  videoSrc.value = url;
+  videoType.value = type;
+};
 </script>
 
-<style>
-  .video-container {
-    position: relative;
-    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
-    height: 0;
-    overflow: hidden;
-    max-width: 100%;
-  }
-
-  .video-js {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
+<template>
+  <div slide-enter border="~ base rounded-lg rounded" shadow mt-10 flex="~ col gap-2" of-hidden>
+    <div p4 mb--2>
+      <div i-ri-calendar-event-line mr1 />
+      Series of building <a href="https://github.com/nuxt/learn.nuxt.com" target="_blank">Nuxt Playground</a> from scratch.
+      <div class="button-container">
+        <button @click="updateMediaSource('https://www.youtube.com/embed/dQw4w9WgXcQ', 'video/youtube')">Load YouTube Video</button>
+        <button @click="updateMediaSource('https://www.facebook.com/plugins/video.php?href=https://www.facebook.com/your_video_url', 'video/facebook')">Load Facebook Video</button>
+        <button @click="updateMediaSource('https://example.com/path/to/your/video.m3u8', 'application/x-mpegURL')">Load m3u8 Video</button>
+      </div>
+    </div>
+    <div aspect="16/9" relative>
+      <iframe
+        class="aspect-16/9 h-full"
+        :src="videoSrc"
+        title="Video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.button-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.button-container button {
+  flex: 1 1 150px; /* Responsive buttons */
+  padding: 10px;
+  border: none;
+  border-radius: 5px;
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.button-container button:hover {
+  background-color: #0056b3; /* Darker shade on hover */
+}
+
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 </style>