1st post-dep comit. improv imgs-vids. @hl@AA

Ambratolm · Jan 18, 2025 · 0e6eeec · 0e6eeec
1 parent 22dda5e
commit 0e6eeec
Show file tree

Hide file tree

Showing 22 changed files with 58 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,46 @@
     <title>Ambratolm</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app">
+      <div id="app-loading">
+        <h1>Ambratolm</h1>
+        <p>⏳ Loading...</p>
+      </div>
+    </div>
+    <style>
+      #app-loading {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-family: Arial, sans-serif;
+        font-size: 1.5rem;
+        font-style: italic;
+        z-index: 9999;
+        background-color: black;
+        color: white;
+      }
+      #app-loading * {
+        margin: 0;
+        animation: loading 1.5s infinite;
+      }
+      @keyframes loading {
+        0% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.5;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+    </style>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/src/assets/data/posts.yml b/src/assets/data/posts.yml
@@ -11,11 +11,12 @@
   icon: fas fa-newspaper
   content: ⏳ Working on this Website...
 #----------------------------------------------------------------------------------------------------
-- name: ambratolm-io
+- name: aleafw2d
   title: ALEAFW 2D 🦅
   date: October, 2024
   icon: fas fa-newspaper
   content: ⏳ Working on a 2D action side-scrolling platformer game framework for Unity engine...
+  video: aleafw2d
 #----------------------------------------------------------------------------------------------------
 - name: flower-in-pain-v1.1
   title: Flower in Pain Version 1.1

diff --git a/src/assets/images/works/program/ambratolm-softwares.gif b/src/assets/images/works/program/ambratolm-softwares.gif
diff --git a/src/assets/images/works/program/ambratolm-softwares.jpg b/src/assets/images/works/program/ambratolm-softwares.jpg
diff --git a/src/assets/images/works/video/live-action-films.gif b/src/assets/images/works/video/live-action-films.gif
diff --git a/src/assets/images/works/video/live-action-films.jpg b/src/assets/images/works/video/live-action-films.jpg
diff --git a/src/assets/videos/categories/_category.mp4 b/src/assets/videos/categories/_category.mp4
diff --git a/src/assets/videos/categories/audio.mp4 b/src/assets/videos/categories/audio.mp4
diff --git a/src/assets/videos/categories/document.mp4 b/src/assets/videos/categories/document.mp4
diff --git a/src/assets/videos/categories/game.mp4 b/src/assets/videos/categories/game.mp4
diff --git a/src/assets/videos/categories/image.mp4 b/src/assets/videos/categories/image.mp4
diff --git a/src/assets/videos/categories/program.mp4 b/src/assets/videos/categories/program.mp4
diff --git a/src/assets/videos/categories/video.mp4 b/src/assets/videos/categories/video.mp4
diff --git a/src/assets/videos/empty.mp4 b/src/assets/videos/empty.mp4
diff --git a/src/assets/videos/error.mp4 b/src/assets/videos/error.mp4
diff --git a/src/assets/videos/placeholder-400x300-muted.mp4 b/src/assets/videos/placeholder-400x300-muted.mp4
diff --git a/src/assets/videos/placeholder-400x300.mp4 b/src/assets/videos/placeholder-400x300.mp4
diff --git a/src/assets/videos/intro.mp4 → src/assets/videos/posts/_post.mp4 b/src/assets/videos/intro.mp4 → src/assets/videos/posts/_post.mp4
diff --git a/src/assets/videos/posts/aleafw2d.mp4 b/src/assets/videos/posts/aleafw2d.mp4
diff --git a/src/components/DataPostCard.vue b/src/components/DataPostCard.vue
@@ -39,6 +39,11 @@ defineProps({
           <p class="lead mb-0">
             {{ post?.content }}
           </p>
+          <div v-if="post?.video" class="mt-2 me-3">
+            <video :src="post?.video" width="100%" height="100%" controls>
+              <a :href="post?.video">Download {{ post?.name }} video</a>
+            </video>
+          </div>
           <div v-if="post?.embed" class="mt-2 me-3">
             <div class="card position-relative" style="padding: 75% 0 0 0">
               <iframe

diff --git a/src/modules/assets.js b/src/modules/assets.js
@@ -21,12 +21,12 @@ const VIDEOS = getDocuments(importCollection("videos"), {
 //----------------------------------------------------------------------------------------------------
 DATA.works = (() => {
   const works = flattenObjectToArray(DATA.works, 2);
-  const worksImages = flattenObject(IMAGES.works, 2);
+  const workImages = flattenObject(IMAGES.works, 2);
   const { categories, languages } = DATA;
   for (const work of works) {
     work.categories = resolveKeys(work.categories, categories);
     work.languages = resolveKeys(work.languages, languages);
-    work.image = worksImages[work.image] || worksImages["_work"];
+    work.image = workImages[work.image] || workImages["_work"];
   }
   return works;
 })();
@@ -39,6 +39,14 @@ DATA.profiles = (() => {
   }
   return profiles;
 })();
+DATA.posts = (() => {
+  const posts = DATA.posts;
+  const postVideos = flattenObject(VIDEOS.posts, 2);
+  for (const post of posts) {
+    if (post.video) post.video = postVideos[post.video] || postVideos["_post"];
+  }
+  return posts;
+})();
 export { DATA, IMAGES, VIDEOS };
 
 //----------------------------------------------------------------------------------------------------

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -11,7 +11,7 @@ const postsStore = usePostsStore();
 const randomWorks = ref();
 randomizeWorks();
 function randomizeWorks() {
-  randomWorks.value = worksStore.getRandomItems(12);
+  randomWorks.value = worksStore.getRandomItems(4);
 }
 
 const { pause, resume } = useIntervalFn(