Update some UI, add portfolio interfaces, payment gateway icons . .

README.md

@@ -8,7 +8,7 @@
 - TypeScript
 - Tailwind CSS
 - Markdown-It
-- highlight.js
+- Highlight.js
 
 ## Attributions
 

public/data_user.json

@@ -264,8 +264,8 @@
 		}
 	},
 	"portfolio": {
-		"title": "Can't Learn All The <span class=\"text-primary dark:text-primaryDark\">Technology</span>",
-		"description": "There are many abilities that I can't do, so learning has no end.<br>Some of the technologies I'm studying.",
+		"title": "",
+		"description": "Here you'll find a showcase of my diverse and successful projects.<br>Each reflecting my dedication, versatility, and technical prowess.",
 		"source": {
 			"url": "https://github.com/krlan2789/apps-link",
 			"type": "github",
@@ -280,6 +280,7 @@
 				"imagesDir": "",
 				"description": "",
 				"url": "",
+				"repo": "",
 				"features": [],
 				"technologies": []
 			}

src/components/PortfolioComponent.vue

@@ -1,5 +1,5 @@
 <template>
-	<section id="portfolio" :class="['pt-24 pb-16 max-lg:min-h-screen', $attrs.class]">
+	<section id="portfolio" :class="['pt-24 max-lg:min-h-screen', $attrs.class]">
 		<div class="container">
 			<div class="w-full p-4">
 				<div class="max-w-xl mx-auto mb-8 text-center">
@@ -14,8 +14,10 @@
 					</p>
 				</div>
 			</div>
+
+			<!-- Project List -->
 			<div
-				class="grid justify-center w-full grid-cols-1 sm:gap-2 sm:grid-cols-2 2xl:gap-6 lg:grid-cols-3 2xl:grid-cols-4 2xl:mx-auto">
+				class="grid justify-center w-full grid-cols-1 gap-6 md:grid-cols-2 md:gap-8 2xl:grid-cols-3 2xl:gap-6 2xl:mx-auto">
 				<transition name="slide-up" v-for="(port, index) in portfolio" :key="projectKey + index" appear>
 					<RouterLink to="" :id="projectShow + port.id"
 						class="w-auto h-auto p-3 transition duration-200 scale-100 bg-transparent rounded-lg group hover:bg-tertiary dark:hover:bg-tertiaryDark hover:shadow-lg hover:lan-glass-effect hover:scale-105"
@@ -33,7 +35,7 @@
 						</div>
 						<p class="text-xs lan-section-desc lg:text-sm" v-html="port.description"></p>
 						<div class="flex flex-row w-full h-auto gap-2 pt-4">
-							<a :href="`${route.meta.project}/${port.slug}`" target="_blank"
+							<a :href="`${route.meta.url.project}/${port.slug}`" 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>
@@ -49,16 +51,20 @@
 					</RouterLink>
 				</transition>
 			</div>
+			<!-- Project List -->
 		</div>
+
+		<NextPageComponent label="See All Projects" :path="route.meta.url.projects" class="mt-16"></NextPageComponent>
 	</section>
 </template>
 
 <script setup lang="ts">
-import { inject, onUnmounted, ref } from "vue";
+import { inject, onMounted, onUnmounted, ref } from "vue";
 import { RouterLink, useRoute } from "vue-router";
 import Icon from "./icons/Icon.vue";
 import NewTabIcon from "./icons/NewTabIcon.vue";
 import DataUserSymbol from "@/helper/symbols/DataUserSymbol";
+import NextPageComponent from "./NextPageComponent.vue";
 
 const route = useRoute();
 const projectHide = 'portfolio-project-hide-';
@@ -127,7 +133,9 @@ const onScroll = () => {
 		portfolio.value[a].isVisible = status;
 	}
 };
-window.addEventListener("scroll", onScroll);
+onMounted(() => {
+	window.addEventListener("scroll", onScroll);
+});
 onUnmounted(() => {
 	window.removeEventListener("scroll", onScroll);
 });

src/components/icons/Icon.vue

@@ -29,6 +29,7 @@ const icons = {
 	mariadb: ["mariadb"],
 	mysql: ["mysql"],
 	maxst: ["maxst", "maxstar"],
+	midtrans: ["midtrans"],
 	nodejs: ["nodejs", "node"],
 	onesignal: ["onesignal"],
 	php: ["php"],
@@ -45,6 +46,7 @@ const icons = {
 	postman: ["postman"],
 	python: ["python", "py"],
 	xampp: ["xampp"],
+	xendit: ["xendit"],
 	zoho: ["zoho"],
 	notion: ["notion"],
 	swift: ["swift"],

src/components/icons/svg/Midtrans.svg.vue

@@ -0,0 +1,32 @@
+<template>
+    <svg id="Layer_1" data-name="Layer 1" class="w-full h-auto p-1 fill-current aspect-auto"
+        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.42 59.793">
+        <title>Midtrans</title>
+        <path class="cls-1"
+            d="M3.959,48.243A3.958,3.958,0,0,1,0,44.285v-28.8a3.959,3.959,0,1,1,7.917,0v28.8A3.958,3.958,0,0,1,3.959,48.243Z" />
+        <path class="cls-2"
+            d="M51.461,48.243A3.958,3.958,0,0,1,47.5,44.285V15.508a3.959,3.959,0,1,1,7.917,0V44.285A3.959,3.959,0,0,1,51.461,48.243Z" />
+        <path class="cls-3"
+            d="M27.71,59.793a3.96,3.96,0,0,1-3.959-3.959V3.959a3.959,3.959,0,1,1,7.917,0V55.834A3.959,3.959,0,0,1,27.71,59.793Z" />
+    </svg>
+</template>
+
+<style scoped>
+.cls-1 {
+    fill: #9ddcf9;
+}
+
+.cls-1,
+.cls-2,
+.cls-3 {
+    fill-rule: evenodd;
+}
+
+.cls-2 {
+    fill: #00acdb;
+}
+
+.cls-3 {
+    fill: #0256a7;
+}
+</style>

src/components/icons/svg/Xendit.svg.vue

@@ -0,0 +1,28 @@
+<template>
+	<svg version="1.1" id="Layer_1" class="w-full h-auto -m-2 fill-current scale-[1.2] aspect-auto"
+		xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+		viewBox="0 0 260.9 286.7" xml:space="preserve">
+		<title>Xendit</title>
+		<g>
+			<g>
+				<polygon class="st0"
+					points="138.8,56.3 90.1,56.3 39.9,143.4 90.1,230.4 100,213.3 59.7,143.4 100,73.5 128.8,73.5 		" />
+				<polygon class="st1" points="104.5,115.4 114.4,98.3 100,73.5 90.1,90.7 		" />
+				<polygon class="st1" points="160.9,73.5 170.8,90.7 100,213.3 90.1,196.1 		" />
+				<polygon class="st0"
+					points="122.2,230.4 132,213.2 160.9,213.2 201.2,143.4 160.9,73.5 170.8,56.3 221,143.4 170.8,230.4 		" />
+				<polygon class="st1" points="156.2,171 146.3,188.1 160.9,213.2 170.8,196.3 		" />
+			</g>
+		</g>
+	</svg>
+</template>
+
+<style scoped type="text/css">
+.st0 {
+	fill: #446CB3;
+}
+
+.st1 {
+	fill: #D24D57;
+}
+</style>

src/helper/interfaces/IDataUser.ts

@@ -6,6 +6,7 @@ import type IUserEquipment from "./IUserEquipment";
 import type INotebook from "./INotebook";
 import type IReference from "./IReference";
 import type IAbility from "./IAbility";
+import type { IPortfolio } from "./IPortfolio";
 
 export default interface IDataUser {
     navbarBrand: string;
@@ -18,6 +19,7 @@ export default interface IDataUser {
     profile: IUserProfile;
     history: IUserHistory;
     ability: IAbility;
+    portfolio: IPortfolio;
     equipment: { hardware?: IUserEquipment, software?: IUserEquipment };
     notebook: INotebook;
     reference: IReference;

src/helper/interfaces/IPortfolio.ts

@@ -0,0 +1,9 @@
+import type IGreetings from "./IGreetings";
+import type IProjectInfo from "./IProjectInfo";
+import type ISourceContent from "./ISourceContent";
+
+export interface IPortfolio extends IGreetings {
+    rootDir: string;
+    source?: ISourceContent;
+    projects?: IProjectInfo[];
+}

src/helper/interfaces/IProjectInfo.ts

@@ -0,0 +1,12 @@
+export default interface IProjectInfo {
+    id: number;
+    title: string;
+    description: string;
+    date: string;
+    slug?: string;
+    imagesDir?: string;
+    url?: string;
+    repo?: string;
+    features: string[];
+    technologies: string[];
+}

src/router/index.ts

@@ -7,6 +7,7 @@ import NoteView from "../views/NoteView.vue";
 import NotFoundView from "../views/NotFoundView.vue";
 import CMSView from "../views/CMSView.vue";
 import urls from "./urls";
+import ProjectsView from "@/views/ProjectsView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -44,7 +45,7 @@ const router = createRouter({
     {
       path: urls.projects + "/:filter?",
       name: "projects",
-      component: NotFoundView,
+      component: ProjectsView,
       meta: { url: urls, hideNavbar: false },
     },
     {

src/views/NotesView.vue

@@ -8,14 +8,15 @@
 
 			<!-- Articles -->
 			<div class="flex flex-wrap">
-				<div class="w-full mb-8 text-center" v-if="data.notebook.title">
-					<h2 class="lan-section-subtitle" v-html="data.notebook.title"></h2>
-					<p class="font-medium text-md text-secondary dark:text-secondaryDark md:text-lg"
-						v-if="data.notebook.description" v-html="data.notebook.description"></p>
+				<div class="w-full mb-8 text-center" v-if="data.notebook">
+					<h2 v-if="data.notebook.title" class="lan-section-subtitle" v-html="data.notebook.title"></h2>
+					<p v-if="data.notebook.description"
+						class="text-sm font-light text-secondary dark:text-secondaryDark md:text-base"
+						v-html="data.notebook.description"></p>
 				</div>
-				<div class="w-full mb-8 px-3 sm:px-6 text-center">
+				<div class="w-full px-3 mb-8 text-center sm:px-6">
 					<div class="relative w-full max-w-[848px] mx-auto">
-						<input type="search" class="lan-textfield-primary text-center px-8 w-full"
+						<input type="search" class="w-full px-8 text-center lan-textfield-primary"
 							v-model="searchKeyword">
 						<SearchIcon class="absolute size-6 top-3 bottom-3 left-2 text-primary dark:text-primaryDark">
 						</SearchIcon>
@@ -57,7 +58,7 @@ import SearchIcon from "@/components/icons/SearchIcon.vue";
 import type INote from "@/helper/interfaces/INote";
 import Dictionary from "@/helper/interfaces/Dictionary";
 
-const listNotes = new Dictionary<INote>();
+const notesList = new Dictionary<INote>();
 
 const route = useRoute()
 const data = inject(DataUserSymbol);
@@ -79,16 +80,16 @@ watchEffect(() => {
 		});
 		data.value.notebook.notes.reverse();
 
-		listNotes.clear();
+		notesList.clear();
 		for (let note of data.value.notebook.notes) {
 			const key = `${note.title}_${note.description}_${note.topics.join(' ')}_${note.date}`.toLowerCase();
-			listNotes.add(key, note);
+			notesList.add(key, note);
 		}
 	}
 });
 
 const computedListNotes = computed(() => {
-	return listNotes.filter((key: string, value: INote) => key.includes(searchKeyword.value.toLowerCase()));
+	return notesList.filter((key: string, value: INote) => key.includes(searchKeyword.value.toLowerCase()));
 })
 
 const notesHead = useHead({