Add projects

src/views/projects/ProjectCard.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="border rounded-md p-3 px-3 mx-auto my-5 w-full lg:w-2/3 xl:w-1/2">
+        <h3 class="text-2xl font-semibold text-center text-gray-900 dark:text-white">{{ props.title }}</h3>
+        <div class="text-center mb-2">
+            <a v-for="link in props.links" :href="link.url" class="font-mono inline-block hover:underline mx-2">{{ link.label }}</a>
+        </div>
+        <p class="text-lg whitespace-pre-wrap mb-2 text-gray-500 dark:text-gray-400">
+            {{ props.description }}
+        </p>
+        <img :src="props.image" alt="" class="max-w-full max-h-96 mx-auto">
+    </div>
+</template>
+
+
+<script setup lang="ts">
+    import type { PropType } from "vue";
+
+    const props = defineProps({
+        title: String,
+        description: String,
+        links: Object as PropType<{ label: string, url: string }[]>,
+        image: String
+    });
+</script>

src/views/projects/Projects.vue

@@ -1,18 +1,33 @@
 <template>
     <Navbar />
 
-    <main>
-        <div class="container mx-auto">
-            <h1 class="text-5xl font-bold">
-                {{ t("hello") }}
-            </h1>
-        </div>
+    <main class="container mx-auto p-4">
+        <h1 class="text-5xl font-bold text-center mb-5">{{ t("projects") }}</h1>
+        <h2 class="text-3xl text-center mt-10 mb-3">{{ t("wip") }}</h2>
+
+        <Wirefilter />
+
+        <h2 class="text-3xl text-center mt-10 mb-3">{{ t("completed") }}</h2>
+
+        <PandOSplus />
+        <Imaging />
+        <MNKGame />
+        <Platform />
+        <PathfindingVisualizer />
+        <SortingVisualizer />
     </main>
 </template>
 
 
 <script setup lang="ts">
     import Navbar from "@/components/navbar/Navbar.vue";
+    import Wirefilter from "./cards/Wirefilter.vue";
+    import SortingVisualizer from "./cards/SortingVisualizer.vue";
+    import PathfindingVisualizer from "./cards/PathfindingVisualizer.vue";
+    import MNKGame from "./cards/MNKGame.vue";
+    import Imaging from "./cards/Imaging.vue";
+    import Platform from "./cards/Platform.vue";
+    import PandOSplus from "./cards/PandOSplus.vue";
     import { useI18n } from "vue-i18n";
     import locale from "./locale.json";
 

src/views/projects/cards/Imaging.vue

@@ -0,0 +1,28 @@
+<template>
+    <ProjectCard 
+        title="Image deblur" :image="image"
+        :description="t('description')" 
+        :links="[ 
+            { label: 'Repository', url: 'https://github.com/NotXia/imaging' }
+        ]" />
+</template>
+
+
+<script setup lang="ts">
+    import ProjectCard from "../ProjectCard.vue";
+    import { useI18n } from "vue-i18n";
+    import image from "@/assets/projects/imaging.png";
+
+    const { t } = useI18n({ messages: {
+        en: {
+            description:
+                "Project for the Numerical Computing course (University of Bologna, A.Y. 2021-2022).\n" +
+                "Image deblurring solved as a minimization problem."
+        },
+        it: {
+            description:
+                "Progetto per il corso di Calcolo Numerico (Università di Bologna, A.A. 2021-2022).\n" +
+                "Deblurring di immagini risolto come problema di minimizzazione."
+        }
+    } });
+</script>

src/views/projects/cards/MNKGame.vue

@@ -0,0 +1,28 @@
+<template>
+    <ProjectCard 
+        title="MNK Game" :image="image"
+        :description="t('description')" 
+        :links="[ 
+            { label: 'Repository', url: 'https://github.com/NotXia/MNKGame' }
+        ]" />
+</template>
+
+
+<script setup lang="ts">
+    import ProjectCard from "../ProjectCard.vue";
+    import { useI18n } from "vue-i18n";
+    import image from "@/assets/projects/mnkgame.png";
+
+    const { t } = useI18n({ messages: {
+        en: {
+            description:
+                "Project for the Algorithms and Data Structures course (University of Bologna, A.Y. 2020-2021).\n" +
+                "Algorithm able to efficiently play a generalized version of tic-tac-toe."
+        },
+        it: {
+            description:
+                "Progetto per il corso di Algoritmi e Strutture Dati (Università di Bologna, A.A. 2020-2021).\n" +
+                "Algoritmo in grado di giocare in modo efficiente ad una versione generalizzata del tris."
+        }
+    } });
+</script>

src/views/projects/cards/PandOSplus.vue

@@ -0,0 +1,27 @@
+<template>
+    <ProjectCard 
+        title="PandOS+" 
+        :description="t('description')" 
+        :links="[ 
+            { label: 'Repository', url: 'https://github.com/NotXia/pandos-plus' }
+        ]"/>
+</template>
+
+
+<script setup lang="ts">
+    import ProjectCard from "../ProjectCard.vue";
+    import { useI18n } from "vue-i18n";
+
+    const { t } = useI18n({ messages: {
+        en: {
+            description:
+                "Project for the Operating Systems course (University of Bologna, A.Y. 2021-2022).\n" +
+                "Minimal operating system for the MIPS architecture."
+        },
+        it: {
+            description:
+                "Progetto per il corso di Sistemi Operativi (Università di Bologna, A.A. 2021-2022).\n" +
+                "Sistema operativo minimale per architettura MIPS."
+        }
+    } });
+</script>

src/views/projects/cards/PathfindingVisualizer.vue

@@ -0,0 +1,27 @@
+<template>
+    <ProjectCard 
+        title="Pathfinding visualizer" :image="image"
+        :description="t('description')" 
+        :links="[ 
+            { label: 'Repository', url: 'https://github.com/NotXia/pathfinding-visualizer' },
+            { label: 'Demo', url: 'https://notxia.github.io/pathfinding-visualizer/' }
+        ]" />
+</template>
+
+
+<script setup lang="ts">
+    import ProjectCard from "../ProjectCard.vue";
+    import { useI18n } from "vue-i18n";
+    import image from "@/assets/projects/pathfinding-visualizer.png";
+
+    const { t } = useI18n({ messages: {
+        en: {
+            description:
+                "Visualizer for some graph search algorithms."
+        },
+        it: {
+            description:
+                "Visualizzazione di alcuni algoritmi di ricerca su grafi."
+        }
+    } });
+</script>

src/views/projects/cards/Platform.vue

@@ -0,0 +1,28 @@
+<template>
+    <ProjectCard 
+        title="Platform game" :image="image"
+        :description="t('description')" 
+        :links="[ 
+            { label: 'Repository', url: 'https://github.com/NotXia/platform-game' }
+        ]" />
+</template>
+
+
+<script setup lang="ts">
+    import ProjectCard from "../ProjectCard.vue";
+    import { useI18n } from "vue-i18n";
+    import image from "@/assets/projects/platform.png";
+
+    const { t } = useI18n({ messages: {
+        en: {
+            description:
+                "Project for the Programmin course (University of Bologna, A.Y. 2020-2021).\n" +
+                "Text based platform game with randomly generated levels."
+        },
+        it: {
+            description:
+                "Progetto per il corso di Programmazione (Università di Bologna, A.A. 2020-2021).\n" +
+                "Gioco platform su terminale con livelli generati casualmente."
+        }
+    } });
+</script>

src/views/projects/cards/SortingVisualizer.vue

@@ -0,0 +1,27 @@
+<template>
+    <ProjectCard 
+        title="Sorting visualizer" :image="image"
+        :description="t('description')" 
+        :links="[ 
+            { label: 'Repository', url: 'https://github.com/NotXia/sorting-visualizer' },
+            { label: 'Demo', url: 'https://notxia.github.io/sorting-visualizer/' }
+        ]" />
+</template>
+
+
+<script setup lang="ts">
+    import ProjectCard from "../ProjectCard.vue";
+    import { useI18n } from "vue-i18n";
+    import image from "@/assets/projects/sorting-visualizer.png";
+
+    const { t } = useI18n({ messages: {
+        en: {
+            description:
+                "Visualizer for some sorting algorithms."
+        },
+        it: {
+            description:
+                "Visualizzazione di algoritmi di ordinamento."
+        }
+    } });
+</script>

src/views/projects/cards/Wirefilter.vue

@@ -0,0 +1,28 @@
+<template>
+    <ProjectCard 
+        title="Wirefilter" 
+        :description="t('description')" 
+        :links="[ 
+            { label: 'Repository', url: 'https://github.com/NotXia/vdeplug_wirefilter' },
+            { label: 'VirtualSquare', url: 'http://wiki.virtualsquare.org/#!index.md' }
+        ]"/>
+</template>
+
+
+<script setup lang="ts">
+    import ProjectCard from "../ProjectCard.vue";
+    import { useI18n } from "vue-i18n";
+
+    const { t } = useI18n({ messages: {
+        en: {
+            description:
+                "Virtual Distributed Ethernet (VDE) is an open source project that allows to create virtual networks through a set of plugins.\n" +
+                "Wirefilter is a plugin that allows to manipulate packets flow by changing the parameters of the virtual cable"
+        },
+        it: {
+            description:
+                "Virtual Distributed Ethernet (VDE) è un progetto open source che consente di creare reti virtuali tramite l’utilizzo modulare di plugin.\n" +
+                "Wirefilter è un plugin che consente di manipolare il flusso dei pacchetti in transito impostando parametri per il cavo virtuale"
+        }
+    } });
+</script>

src/views/projects/locale.json

@@ -1,8 +1,12 @@
 {
     "en": {
-        "hello": "Hello"
+        "projects": "Projects",
+        "wip": "Currently I'm working on",
+        "completed": "Completed projects"
     },
     "it": {
-        "hello": "Ciao"
+        "projects": "Progetti",
+        "wip": "Attualmente sto lavorando a",
+        "completed": "Progetti completati"
     }
 }