Technology of Card Item in Projects . .

erlankurnia · Dec 5, 2024 · d1af812 · d1af812
1 parent 5a820bc
commit d1af812
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 21 deletions.
diff --git a/public/data_user.json b/public/data_user.json
@@ -280,7 +280,7 @@
 				"technologies": [
 					"TypeScript",
 					"Vue.js",
-					"CSS",
+					"CSS3",
 					"Tailwind CSS",
 					"Markdown-It",
 					"Highlight.js"
@@ -304,7 +304,7 @@
 				"features": [],
 				"technologies": [
 					"HTML5",
-					"CSS"
+					"CSS3"
 				],
 				"tags": [
 					"html5",
@@ -388,7 +388,7 @@
 				"technologies": [
 					"PHP",
 					"Laravel 8",
-					"CSS",
+					"CSS3",
 					"Tailwind CSS",
 					"PostgreSQL"
 				],

diff --git a/src/components/CardItemComponent.vue b/src/components/CardItemComponent.vue
@@ -1,31 +1,40 @@
 <template>
     <component is=""></component>
     <RouterLink :to="'' + url"
-        class="grid grid-rows-[auto,auto,auto,52px] w-auto h-auto p-3 transition duration-200 scale-100 rounded-lg group hover:shadow-lg hover:lan-glass-effect hover:scale-105"
+        class="grid grid-rows-[auto,auto,auto,auto,52px] grid-cols-1 w-auto h-auto p-3 transition duration-200 scale-100 rounded-lg group hover:shadow-lg hover:lan-glass-effect hover:scale-105"
         :class="{
             'bg-tertiary dark:bg-tertiaryDark': !(reverseTheme ?? false),
             'bg-quaternary dark:bg-quaternaryDark': (reverseTheme ?? false),
         }">
-        <div v-if="imagesPath" class="overflow-hidden rounded-md shadow-md">
-            <img v-for="(img, index) in (typeof imagesPath === 'string' ? [imagesPath] : imagesPath)" :key="index"
-                :src="img" :alt="title" :class="{ 'w-full': img != null && img.length > 5 }" />
+        <div class="overflow-hidden rounded-md" :class="{ 'shadow-md': imagesPath }">
+            <template v-if="imagesPath">
+                <img v-for="(img, index) in (typeof imagesPath === 'string' ? [imagesPath] : imagesPath)" :key="index"
+                    :src="img" :alt="title" :class="{ 'w-full': img != null && img.length > 5 }" />
+            </template>
         </div>
 
         <div
-            class="row-start-2 text-lg font-semibold text-center text-dark dark:text-light group-hover:text-primary dark:group-hover:text-primaryDark">
-            <h3 class="mt-5 mb-3" v-html="title"></h3>
+            class="text-lg font-semibold text-center text-dark dark:text-light group-hover:text-primary dark:group-hover:text-primaryDark">
+            <h3 class="mb-3" :class="{ 'mt-5': imagesPath }" v-html="title"></h3>
         </div>
 
-        <p class="row-start-3 text-[10px] text-center lan-section-desc lg:text-xs" v-html="shortDesc"></p>
+        <p class="text-xs leading-tight text-center lan-section-desc lg:text-[13px]" v-html="shortDesc"></p>
 
-        <div v-if="urlDemo || urlRepo" class="grid w-full h-auto grid-cols-2 row-start-4 gap-2 pt-4">
+        <div v-if="technologies && technologies.length > 0" class="flex flex-wrap justify-center gap-1 pt-4">
+            <div v-for="(tech, index) of technologies" :key="index"
+                class="w-auto h-6 px-2 py-1 text-xs rounded-full bg-secondary/10 dark:bg-secondaryDark/10"
+                v-html="tech">
+            </div>
+        </div>
+
+        <div class="grid w-full h-auto grid-cols-2 gap-2 pt-4">
             <a v-if="urlDemo" :href="urlDemo" @click.stop target="_blank"
                 class="flex flex-row items-center justify-center flex-grow gap-2 py-1 lan-button-secondary">
                 View
                 <NewTabIcon class="w-auto h-4"></NewTabIcon>
             </a>
             <div v-else
-                class="flex items-center justify-center px-2 text-[11px] text-center font-normal text-secondary/50 dark:text-secondaryDark/50">
+                class="flex items-center leading-tight justify-center px-2 text-[11px] text-center font-normal rounded-full border-2 border-secondary/50 dark:border-secondaryDark/50 text-secondary/50 dark:text-secondaryDark/50">
                 Live not available
             </div>
 
@@ -37,14 +46,14 @@
                 </Icon>
             </a>
             <div v-else
-                class="flex items-center justify-center px-2 text-[11px] text-center font-normal text-secondary/50 dark:text-secondaryDark/50">
+                class="flex items-center leading-tight justify-center px-2 text-[11px] text-center font-normal rounded-full border-2 border-secondary/50 dark:border-secondaryDark/50 text-secondary/50 dark:text-secondaryDark/50">
                 Repository is restricted
             </div>
         </div>
-        <div v-else
+        <!-- <div v-else
             class="flex items-center justify-center row-start-4 px-2 pt-3 pb-1 text-[11px] text-center font-normal text-secondary/50 dark:text-secondaryDark/50">
             Live and Repository are not available
-        </div>
+        </div> -->
     </RouterLink>
 </template>
 
@@ -61,6 +70,8 @@ const props = defineProps<{
     urlDemo?: string,
     urlRepo?: string,
     reverseTheme?: boolean,
+    tags?: string[],
+    technologies?: string[],
 }>();
 
 const shortDesc = computed(() => {

diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
@@ -11,7 +11,7 @@
                     <slot name="header"></slot>
 
                     <button type="button"
-                        class="absolute flex items-center justify-center p-1 font-bold bg-transparent border-2 rounded-full cursor-pointer top-4 right-6 lan-text-danger"
+                        class="absolute items-center justify-center hidden p-1 font-bold bg-transparent border-2 rounded-full cursor-pointer md:flex top-4 right-6 lan-text-danger"
                         @click="onCloseModal()">
                         <CloseIcon class="w-auto h-5"></CloseIcon>
                     </button>
@@ -31,11 +31,11 @@
                 <section class="relative flex items-center justify-center min-h-16">
                     <div class="absolute top-0 border-b-[2px] border-quaternary dark:border-quaternaryDark w-full h-px">
                     </div>
-                    <!-- <button type="button"
-                        class="p-2 m-3 text-xl font-bold bg-transparent border-2 rounded-full cursor-pointer lan-text-danger"
+                    <button type="button"
+                        class="block p-2 m-3 text-xl font-bold bg-transparent border-2 rounded-full cursor-pointer md:hidden lan-text-danger"
                         @click="onCloseModal()">
                         <CloseIcon class="w-auto h-6"></CloseIcon>
-                    </button> -->
+                    </button>
                 </section>
                 <!-- Modal Footer -->
             </div>

diff --git a/src/components/ProjectListComponent.vue b/src/components/ProjectListComponent.vue
@@ -5,7 +5,8 @@
             <CardItemComponent v-for="proj in computedProjectList" :key="proj.slug ?? proj.id"
                 :id="'project-' + proj.id" :title="proj.title" :description="proj.description"
                 :imagesPath="proj.imagesDir" :url="`${route.meta.url.project}/${proj.slug ?? proj.id}`"
-                :urlDemo="proj.url" :urlRepo="proj.repo" :reverseTheme="reverseTheme"></CardItemComponent>
+                :urlDemo="proj.url" :urlRepo="proj.repo" :tags="proj.tags" :technologies="proj.technologies"
+                :reverseTheme="reverseTheme"></CardItemComponent>
         </transition-group>
     </section>
 </template>

diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
@@ -14,7 +14,7 @@
                         class="text-sm font-light text-secondary dark:text-secondaryDark md:text-base"
                         v-html="data.portfolio.description"></p>
                 </div>
-                <div class="w-full px-3 mb-8 text-center sm:px-6">
+                <div class="w-full px-0 mb-8 text-center 2xl:px-6">
                     <div class="relative w-full max-w-[848px] mx-auto">
                         <input type="search" class="w-full px-8 text-center lan-textfield-primary"
                             v-model="searchKeyword">