components/BlogStatBox.vue

@@ -58,3 +58,9 @@ const prettyDate = latestDate.format("DD MMM YYYY");
     </HomeStatBox>
   </div>
 </template>
+
+<style scoped>
+h2 {
+  overflow-wrap: break-word;
+}
+</style>

components/ProjectCard.vue

@@ -23,7 +23,7 @@ const imgUrl = `url(/assets/images/projects/${project.img ?? ""})`;
       <div class="card-text h-full bg-white p-4 pt-2">
         <div>
           <h3 class="m-0">{{ project.name }}</h3>
-          <div class="flex gap-1 items-center">
+          <div class="flex gap-1 items-center flex-nowrap">
             <img
               class="h-5 w-5 m-0"
               :src="`/assets/images/langs/${lang}.svg`"

components/StoryStatBox.vue

@@ -52,8 +52,10 @@ const prettyDate = latestDate.format("DD MMM YYYY");
         </template>
       </ContentRenderer>
       -->
-      <p class="excerpt text-gray-600 dark:text-gray-300 text-base m-0 mt-5">
+      <p
-        {{ latest.description }} …
+        class="excerpt text-gray-600 dark:text-gray-300 text-base m-0 mt-5 text-ellipsis"
+      >
+        {{ latest.description }} ...
       </p>
     </HomeStatBox>
   </div>
@@ -61,6 +63,6 @@ const prettyDate = latestDate.format("DD MMM YYYY");
 
 <style scoped>
 h2 {
-  word-break: break-all;
+  overflow-wrap: break-word;
 }
 </style>