1.0.15

package.json

@@ -1,6 +1,6 @@
 {
   "name": "troplo-site",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "private": true,
   "scripts": {
     "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",

src/App.vue

@@ -1,9 +1,24 @@
 <template>
   <v-app>
-    <v-main v-if="outages.length">
+    <v-main>
-      <v-alert class="mb-0 p-0" text color="red" :value="true" tile icon="mdi-alert-circle">
+      <v-alert
+        v-if="outages.length"
+        class="mb-0 p-0"
+        text
+        color="red"
+        :value="true"
+        tile
+        icon="mdi-alert-circle"
+      >
+        <div class="d-flex justify-space-between align-center justify-center">
+          <span>
             You might be currently experiencing problems with:
-        {{outageName}}.
+            {{ outageName }}.
+          </span>
+          <v-btn href="https://status.troplo.com" small color="red" text
+            >Learn more</v-btn
+          >
+        </div>
       </v-alert>
       <Header></Header>
       <router-view />

src/views/Contact.vue

@@ -14,7 +14,7 @@
           <v-card class="rounded-xl" elevation="8">
             <br />
             <v-icon v-if="contact.icon">{{ contact.icon }}</v-icon>
-            <FlowinityLogo style="width:24px" v-else/>
+            <FlowinityLogo style="width: 24px" v-else />
             <v-card-title class="justify-center">{{
               contact.title
             }}</v-card-title>
@@ -62,7 +62,7 @@ export default {
           id: 3,
           icon: "mdi-discord",
           title: "Discord",
-          displayName: "Troplo#8495",
+          displayName: "@troplo",
           url: "https://discord.com/users/692259321907773460"
         },
         {

src/views/Projects.vue

@@ -1,7 +1,11 @@
 <template>
   <div id="projects">
     <v-container :fluid="$vuetify.breakpoint.lgAndDown">
-      <v-card elevation="8" class="troplo-header rounded-xl text-center" v-if="false">
+      <v-card
+        elevation="8"
+        class="troplo-header rounded-xl text-center"
+        v-if="false"
+      >
         <v-container>
           <div v-if="!$vuetify.breakpoint.mobile" class="troplo-header-title">
             Troplo
@@ -20,7 +24,10 @@
         <v-col lg="3" v-for="(project, index) in getVisible" :key="index">
           <v-card class="rounded-xl troplo-p" elevation="8">
             <v-hover v-slot="{ hover }">
-                <v-img :alt="'Image of ' + project.name" :src="getImage(project.internalName)">
+              <v-img
+                :alt="'Image of ' + project.name"
+                :src="getImage(project.internalName)"
+              >
                 <a :href="getImage(project.internalName)" target="_blank">
                   <v-fade-transition v-if="hover">
                     <v-overlay absolute>
@@ -31,7 +38,13 @@
               </v-img>
             </v-hover>
 
-            <v-card-title>{{ project.name }}</v-card-title>
+            <v-card-title
+              >{{ project.name }}
+              <v-chip v-if="project.release" outlined class="ml-2" small>
+                <v-icon size="18" class="mr-1 ml-n1">mdi-clock</v-icon>
+                {{ project.release }}
+              </v-chip></v-card-title
+            >
 
             <v-card-text>
               <span style="white-space: pre-line; overflow-wrap: anywhere">{{
@@ -94,39 +107,10 @@ export default {
   data() {
     return {
       projects: [
-     /*   {
-          id: 1,
-          name: "Kaverti",
-          internalName: "kaverti",
-          tags: [
-            {
-              internalName: "inactive",
-              name: "Discontinued",
-              color: "error",
-              icon: "mdi-alert-circle"
-            },
-            {
-              internalName: "vue",
-              name: "Vue",
-              icon: "mdi-vuejs",
-              color: "#42b883",
-              link: "https://vuejs.org"
-            },
-            {
-              internalName: "express",
-              name: "Express",
-              icon: "mdi-nodejs",
-              link: "https://expressjs.com"
-            }
-          ],
-          description:
-            "A 3D sandbox game, and social avatar platform written in Express and Vue.js.",
-          visible: true,
-          links: []
-        },*/
         {
           id: 2,
           name: "Flowinity",
+          release: "2021",
           internalName: "proj01",
           tags: [
             {
@@ -140,7 +124,8 @@ export default {
               name: "Vue",
               icon: "mdi-vuejs",
               color: "#42b883",
-              link: "https://vuejs.org"
+              link: "https://vuejs.org",
+              textColor: "black"
             },
             {
               internalName: "vuetify",
@@ -177,6 +162,102 @@ export default {
             }
           ]
         },
+        {
+          id: 13,
+          name: "FlowForms",
+          release: "2024",
+          internalName: "flowforms",
+          tags: [
+            {
+              internalName: "active",
+              name: "Active",
+              icon: "mdi-check-circle",
+              color: "success"
+            },
+            {
+              internalName: "vue",
+              name: "Vue",
+              icon: "mdi-vuejs",
+              color: "#42b883",
+              link: "https://vuejs.org",
+              textColor: "black"
+            },
+            {
+              internalName: "vuetify",
+              name: "Vuetify",
+              icon: "mdi-vuetify",
+              link: "https://vuetifyjs.com",
+              color: "#2196F3"
+            },
+            {
+              internalName: "graphql",
+              name: "GraphQL",
+              icon: "mdi-graphql",
+              link: "https://graphql.org"
+            },
+            {
+              internalName: "typescript",
+              name: "TypeScript",
+              icon: "mdi-language-typescript",
+              link: "https://typescriptlang.org",
+              color: "#007acc"
+            }
+          ],
+          description: "The free flow chart form builder.",
+          visible: true,
+          links: [
+            {
+              name: "Website",
+              link: "https://flowforms.com"
+            },
+            {
+              name: "GitHub",
+              link: "https://github.com/Troplo/FlowForms"
+            }
+          ]
+        },
+        {
+          id: 14,
+          name: "Flowinity for Android",
+          release: "2023",
+          internalName: "flowinity-android",
+          tags: [
+            {
+              internalName: "active",
+              name: "Active",
+              icon: "mdi-check-circle",
+              color: "success"
+            },
+            {
+              internalName: "android",
+              name: "Android",
+              icon: "mdi-android",
+              link: "https://android.com",
+              color: "#3ddc84",
+              textColor: "black"
+            },
+            {
+              internalName: "kotlin",
+              name: "Kotlin",
+              icon: "mdi-language-kotlin",
+              link: "https://kotlinlang.org",
+              color: "#E24462"
+            }
+          ],
+          description:
+            "The versatile online social and collaborative platform for Android.",
+          visible: true,
+          links: [
+            {
+              name: "Google Play",
+              link: "https://play.google.com/store/apps/details?id=com.troplo.privateuploader"
+            },
+            {
+              name: "GitHub",
+              link: "https://github.com/Flowinity/Android"
+            }
+          ]
+        },
         {
           id: 12,
           name: "Colubrina",
@@ -193,7 +274,8 @@ export default {
               name: "Vue",
               icon: "mdi-vuejs",
               color: "#42b883",
-              link: "https://vuejs.org"
+              link: "https://vuejs.org",
+              textColor: "black"
             },
             {
               internalName: "vuetify",
@@ -207,11 +289,12 @@ export default {
               name: "Express",
               icon: "mdi-nodejs",
               link: "https://expressjs.com"
-            },
+            }
           ],
           description:
             "NOTE: Colubrina is now part of Flowinity as Flowinity Communications.\n\nColubrina - a simple open source chat platform written in Vue, Vuetify, NodeJS, and Socket.io.",
           visible: true,
+          release: "2022",
           links: [
             {
               name: "Website",
@@ -227,6 +310,7 @@ export default {
           id: 11,
           name: "BetterCompass",
           internalName: "compass-vue",
+          release: "2022",
           tags: [
             {
               internalName: "inactive",
@@ -239,7 +323,8 @@ export default {
               name: "Vue",
               icon: "mdi-vuejs",
               color: "#42b883",
-              link: "https://vuejs.org"
+              link: "https://vuejs.org",
+              textColor: "black"
             },
             {
               internalName: "vuetify",
@@ -273,7 +358,9 @@ export default {
           id: 14,
           name: "GeoGuess",
           internalName: "geoguess",
-          description: "Contributed changes & fixes to the open source geography game GeoGuess.",
+          release: "2022",
+          description:
+            "Contributed changes & fixes to the open source geography game GeoGuess.",
           visible: true,
           links: [
             {
@@ -301,7 +388,8 @@ export default {
               name: "Vue",
               icon: "mdi-vuejs",
               color: "#42b883",
-              link: "https://vuejs.org"
+              link: "https://vuejs.org",
+              textColor: "black"
             },
             {
               internalName: "vuetify",
@@ -316,25 +404,27 @@ export default {
               icon: "mdi-firebase",
               link: "https://firebase.com"
             }
-          ],
+          ]
         },
         {
           id: 3,
           name: "Mira",
+          release: "2021",
           internalName: "mira",
           tags: [
             {
-              internalName: "active",
+              internalName: "inactive",
-              name: "Active",
+              name: "Discontinued",
-              icon: "mdi-check-circle",
+              color: "error",
-              color: "success"
+              icon: "mdi-alert-circle"
             },
             {
               internalName: "vue",
               name: "Vue",
               icon: "mdi-vuejs",
               color: "#42b883",
-              link: "https://vuejs.org"
+              link: "https://vuejs.org",
+              textColor: "black"
             },
             {
               internalName: "crystal",
@@ -354,16 +444,17 @@ export default {
             }
           ]
         },
-        /*{
+        {
           id: 10,
           name: "Vixlatio",
           internalName: "vixlatio",
+          release: "2022",
           tags: [
             {
               internalName: "active",
-              name: "Active",
+              name: "No longer affiliated",
-              icon: "mdi-check-circle",
+              icon: "mdi-help-circle",
-              color: "success"
+              color: "indigo"
             },
             {
               internalName: "vue",
@@ -382,49 +473,47 @@ export default {
           description:
             "Developer for Vixlatio, a blazing fast gaming platform that is powered by the creativity of its users.",
           visible: true,
-          links: [
+          links: []
-            {
-              name: "Website",
-              link: "https://vixlatio.com"
-            }
-          ]
-        },*/
-        {
-          id: 5,
-          name: "Berri",
-          internalName: "berri",
-          tags: [
-            {
-              internalName: "development-halted",
-              name: "Halted",
-              icon: "mdi-pause-octagon",
-              color: "warning"
-            },
-            {
-              internalName: "vue",
-              name: "Vue",
-              icon: "mdi-vuejs",
-              color: "#42b883",
-              link: "https://vuejs.org"
-            },
-            {
-              internalName: "crystal",
-              color: "white",
-              name: "Crystal",
-              textColor: "black",
-              icon: "crystal",
-              link: "https://crystal-lang.org"
-            }
-          ],
-          description:
-            "Open source file hosting service which aims to be performant, and modular.\nName not finalized.",
-          visible: true,
-          links: {}
         },
+        // {
+        //   id: 5,
+        //   name: "Berri",
+        //   release: "2021",
+        //   internalName: "berri",
+        //   tags: [
+        //     {
+        //       internalName: "development-halted",
+        //       name: "Halted",
+        //       icon: "mdi-pause-octagon",
+        //       color: "warning"
+        //     },
+        //     {
+        //       internalName: "vue",
+        //       name: "Vue",
+        //       icon: "mdi-vuejs",
+        //       color: "#42b883",
+        //       link: "https://vuejs.org",
+        //       textColor: "black"
+        //     },
+        //     {
+        //       internalName: "crystal",
+        //       color: "white",
+        //       name: "Crystal",
+        //       textColor: "black",
+        //       icon: "crystal",
+        //       link: "https://crystal-lang.org"
+        //     }
+        //   ],
+        //   description:
+        //     "Open source file hosting service which aims to be performant, and modular.\nName not finalized.",
+        //   visible: true,
+        //   links: {}
+        // },
         {
           id: 13,
           name: "Kansas",
           internalName: "kansas",
+          release: "2022",
           tags: [
             {
               internalName: "development-halted",
@@ -437,7 +526,8 @@ export default {
               name: "Vue",
               icon: "mdi-vuejs",
               color: "#42b883",
-              link: "https://vuejs.org"
+              link: "https://vuejs.org",
+              textColor: "black"
             },
             {
               internalName: "vuetify",
@@ -457,7 +547,7 @@ export default {
             "Open source project tracking software written in Vue.js.",
           visible: true,
           links: {}
-        },/*
+        } /*
         {
           id: 6,
           name: "Flowinity",
@@ -473,10 +563,11 @@ export default {
           description: "A tech blog.",
           visible: true,
           links: {}
-        },*/
+        },*/,
         {
           id: 7,
           name: "Troplo's Website",
+          release: "2021",
           internalName: "troplo-website",
           tags: [
             {
@@ -490,7 +581,8 @@ export default {
               name: "Vue",
               icon: "mdi-vuejs",
               color: "#42b883",
-              link: "https://vuejs.org"
+              link: "https://vuejs.org",
+              textColor: "black"
             },
             {
               internalName: "vuetify",
@@ -498,7 +590,7 @@ export default {
               icon: "mdi-vuetify",
               link: "https://vuetifyjs.com",
               color: "#2196F3"
-            },
+            }
           ],
           description: "The website you are viewing right now.",
           visible: true,
@@ -514,15 +606,16 @@ export default {
           ]
         },
         {
-          id: 8,
+          id: 1,
-          name: "Psittacus",
+          name: "Kaverti",
-          internalName: "psittacus",
+          release: "2020",
+          internalName: "kaverti",
           tags: [
             {
-              internalName: "development-halted",
+              internalName: "inactive",
-              name: "Halted",
+              name: "Discontinued",
-              icon: "mdi-pause-octagon",
+              color: "error",
-              color: "warning"
+              icon: "mdi-alert-circle"
             },
             {
               internalName: "vue",
@@ -532,14 +625,14 @@ export default {
               link: "https://vuejs.org"
             },
             {
-              internalName: "tauri",
+              internalName: "express",
-              name: "Tauri",
+              name: "Express",
-              icon: "mdi-infinity",
+              icon: "mdi-nodejs",
-              color: "#24c8db",
+              link: "https://expressjs.com"
-              link: "https://tauri.studio"
             }
           ],
-          description: "Code editor. Coming soon.",
+          description:
+            "A 3D sandbox game, and social avatar platform written in Express and Vue.js.",
           visible: true,
           links: []
         }