latest

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "jays-host",
+  "name": "troplo-base",
   "version": "1.0.0",
-  "description": "A ShareX photo gallery.",
+  "description": "troplo-base",
   "main": "index.js",
   "scripts": {
     "serve": "nodemon --ignore ./ui/"

ui/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build": "vue-cli-service build --no-clean",
     "lint": "vue-cli-service lint",
     "postinstall": "patch-package"
   },

ui/src/components/Header.vue

@@ -43,7 +43,7 @@ export default {
       items: [
         {id: 1, title: "Home", icon: "mdi-home", path: "/"},
         {id: 2, title: "Projects", icon: "mdi-text-box-multiple", path: "/projects"},
-        {id: 3, title: "Contact", icon: "mdi-mail", path: "/contact"}
+        {id: 3, title: "Contact", icon: "mdi-email", path: "/contact"}
       ]
     }
   },

ui/src/router/index.js

@@ -25,6 +25,22 @@ const routes = [
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "nexus" */ '../views/Nexus.vue')
   },
+  {
+    path: '/contact',
+    name: 'Contact',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "contact" */ '../views/Contact.vue')
+  },
+  {
+    path: '*',
+    name: 'Not Found',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "notFound" */ '../views/NotFound.vue')
+  },
 ]
 
 const router = new VueRouter({

ui/src/store/index.js

@@ -6,6 +6,7 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     site: {
+      name: 'Troplo\'s Website',
       route: ''
     }
   },

ui/src/views/Contact.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <v-container class="justify-center text-center">
+      <p class="text-h4">Contact</p>
+      <v-row>
+        <v-col md="3">
+          <v-card>
+            <v-card-title class="justify-center">Email</v-card-title>
+
+            <v-card-text>
+              <a href="mailto:troplo@troplo.com">troplo@troplo.com</a>
+            </v-card-text>
+          </v-card>
+        </v-col>
+        <v-col md="3">
+          <v-card>
+            <v-card-title class="justify-center">Matrix</v-card-title>
+
+            <v-card-text>
+              <a href="https://matrix.to/#/@troplo:troplo.com?via=troplo.com">@troplo:troplo.com</a>
+            </v-card-text>
+          </v-card>
+        </v-col>
+        <v-col md="3">
+          <v-card>
+            <v-card-title class="justify-center">Discord</v-card-title>
+
+            <v-card-text>
+              Troplo#8495
+            </v-card-text>
+          </v-card>
+        </v-col>
+        <v-col md="3">
+          <v-card>
+            <v-card-title class="justify-center">Twitter</v-card-title>
+
+            <v-card-text>
+              <a href="https://twitter.com/TheTroplo">@TheTroplo</a>
+            </v-card-text>
+          </v-card>
+        </v-col>
+        <v-col md="3">
+          <v-card>
+            <v-card-title class="justify-center">Telegram</v-card-title>
+
+            <v-card-text>
+              <a href="https://t.me/Troplo">@Troplo</a>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Contact"
+}
+</script>
+
+<style scoped>
+
+</style>

ui/src/views/Home.vue

@@ -1,9 +1,20 @@
 <template>
   <div id="home">
-
+    <v-parallax class="troploGradient">
+      <p class="text-h2 normal">asdasd</p>
+    </v-parallax>
   </div>
 </template>
 
+<style>
+.troploGradient {
+  background: -webkit-radial-gradient(#0179f3, #0190ea)
+}
+.normal {
+  font-color: #ffffff
+}
+</style>
+
 <script>
   export default {
     name: 'Home',

ui/src/views/NotFound.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <v-container>
+      <v-card>
+        <v-container class="text-center">
+          <p class="text-h4">Not Found.</p>
+          <p class="subtitle">This route does not exist.</p>
+          <v-btn text @click="$router.push('/')">Go Home</v-btn>
+        </v-container>
+      </v-card>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NotFound"
+}
+</script>
+
+<style scoped>
+
+</style>

ui/src/views/Projects.vue

@@ -1,33 +1,52 @@
 <template>
   <div id="projects">
-    <v-container class="justify-center text-center">
-      <p class="text-h4">Projects</p>
-      <v-row>
-        <v-col v-for="(project, index) in projects" :key="index">
-          <v-card elevation="12">
     <v-container>
-              <center>
+      <p class="justify-center text-center text-h4">Projects</p>
-                <p class="text-h5">{{project.name}}</p>
+      <v-row>
+        <v-col md="3" v-for="(project, index) in projects" :key="index">
+          <v-card>
+            <v-img
+                :src="getImage(project.internalName)"
+            ></v-img>
+
+            <v-card-title>{{project.name}}</v-card-title>
+
+            <v-card-text>
+              <div>{{project.description}}</div>
+            </v-card-text>
+
+            <v-divider class="mx-4"></v-divider>
+
+            <v-card-title>More Information</v-card-title>
+
+            <v-card-text>
+              <v-chip-group
+                  column
+              >
                 <v-chip
-                    class="ma-1"
                     v-for="tag in project.tags"
-                    :key="tag"
+                    :key="tag.id"
                     :color="tag.color"
                 >
                   <v-icon>{{tag.icon}}</v-icon><template v-if="tag.icon">&nbsp;</template>
                   {{tag.name}}
                 </v-chip>
-                <p>{{project.description}}</p>
+              </v-chip-group>
-                <v-card-actions class="justify-center">
+            </v-card-text>
-                  <v-chip rounded color="deep-purple" class="ma-1" v-if="project.links.website">
+
-                    <v-icon>mdi-web</v-icon>&nbsp;Website
+            <v-divider v-if="project.links.length" class="mx-4"></v-divider>
-                  </v-chip>
+
-                  <v-chip rounded color="indigo" class="ma-1" v-if="project.links.git">
+            <v-card-actions>
-                    <v-icon>mdi-git</v-icon>&nbsp;Git Repository
+              <v-btn
-                  </v-chip>
+                  v-for="link in project.links"
+                  :key="link.name"
+                  color="blue"
+                  text
+                  :href="link.link"
+              >
+                {{link.name}}
+              </v-btn>
             </v-card-actions>
-              </center>
-            </v-container>
           </v-card>
         </v-col>
       </v-row>
@@ -90,13 +109,24 @@ export default {
               name: "Open Source",
               icon: "mdi-git"
             },
+            {
+              internalName: "vue",
+              name: "Vue",
+              icon: "mdi-vuejs",
+              color: "#42b883",
+            },
+            {
+              internalName: "express",
+              name: "Express",
+              icon: "mdi-nodejs",
+            },
           ],
-          description: "A 3D sandbox game, and social avatar community written in Express and Vue.js.",
+          description: "A 3D sandbox game, and social avatar platform written in Express and Vue.js.",
           visible: true,
-          links: {
+          links: [{
-            website: "https://kaverti.com",
+            name: "Git Repository",
-            git: "https://git.troplo.com/Kaverti/website"
+            link: "https://git.troplo.com/Kaverti/website"
-          }
+          }],
         },
         {
           id: 2,
@@ -106,27 +136,42 @@ export default {
             {
               internalName: "active",
               name: "Active",
+              icon: "mdi-check-circle",
               color: "success"
             },
             {
               internalName: "freelance",
               name: "Freelance",
+              icon: "mdi-currency-usd"
+            },
+            {
+              internalName: "vue",
+              name: "Vue",
+              icon: "mdi-vuejs",
+              color: "#42b883",
+            },
+            {
+              internalName: "express",
+              name: "Express",
+              icon: "mdi-nodejs",
             },
           ],
           description: "An invite only file uploading service written in Express and Vue.js.",
           visible: true,
-          links: {
+          links: [{
-            website: "https://jays.host"
+            name: "Website",
-          }
+            link: "https://jays.host"
+          }],
         },
         {
           id: 3,
-          name: "Mira",
+          name: "Pinnoto Mira",
           internalName: "mira",
           tags: [
             {
               internalName: "development",
               name: "In Development",
+              icon: "mdi-information",
               color: "info"
             },
             {
@@ -134,15 +179,146 @@ export default {
               name: "Open Source",
               icon: "mdi-git"
             },
+            {
+              internalName: "vue",
+              name: "Vue",
+              icon: "mdi-vuejs",
+              color: "#42b883",
+            },
+            {
+              internalName: "crystal",
+              color: "black",
+              name: "Crystal",
+              icon: "mdi-language-ruby",
+            },
           ],
           description: "EPUB reader written in Crystal and Vue.js.",
           visible: true,
-          links: {
+          links: [{
-            git: "https://github.com/pinnoto/mira"
+            name: "Git Repository",
+            link: "https://github.com/pinnoto/mira"
+          }],
+        },
+        {
+          id: 4,
+          name: "Polytoria",
+          internalName: "polytoria",
+          tags: [
+            {
+              internalName: "development",
+              name: "In Development",
+              icon: "mdi-information",
+              color: "info"
+            },
+            {
+              internalName: "vue",
+              name: "Vue",
+              icon: "mdi-vuejs",
+              color: "#42b883",
+            },
+            {
+              internalName: "adonis",
+              name: "Adonis.JS",
+              icon: "mdi-nodejs",
+            },
+          ],
+          description: "Helping create the brand new website for Polytoria, a 3D sandbox platform.",
+          visible: true,
+          links: [{
+            name: "Website",
+            link: "https://polytoria.com"
+          }],
+        },
+        {
+          id: 5,
+          name: "Pinnoto Berri",
+          internalName: "berri",
+          tags: [
+            {
+              internalName: "development",
+              name: "In Development",
+              icon: "mdi-information",
+              color: "info"
+            },
+            {
+              internalName: "openSource",
+              name: "Open Source",
+              icon: "mdi-git"
+            },
+            {
+              internalName: "vue",
+              name: "Vue",
+              icon: "mdi-vuejs",
+              color: "#42b883",
+            },
+            {
+              internalName: "crystal",
+              color: "black",
+              name: "Crystal",
+              icon: "mdi-language-ruby",
+            },
+          ],
+          description: "Self hostable, and open source file uploading service created to be performant, and modular.\nName not finalized.",
+          visible: true,
+          links: {}
+        },
+        {
+          id: 6,
+          name: "Flowinity",
+          internalName: "flowinity",
+          tags: [
+            {
+              internalName: "development",
+              name: "In Development",
+              icon: "mdi-information",
+              color: "info"
             }
+          ],
+          description: "A tech blog.",
+          visible: true,
+          links: {}
+        },
+        {
+          id: 7,
+          name: "Website",
+          internalName: "troplo-website",
+          tags: [
+            {
+              internalName: "openSource",
+              name: "Open Source",
+              icon: "mdi-git"
+            },
+            {
+              internalName: "vue",
+              name: "Vue",
+              icon: "mdi-vuejs",
+              color: "#42b883",
+            },
+          ],
+          description: "If you want the source code to this website for whatever reason, it is available.",
+          visible: true,
+          links: [
+            {
+              name: "Git Repository",
+              link: "https://git.troplo.com/Troplo/website-new"
+            },
+            {
+              name: "Website",
+              link: "https://troplo.com"
+            },
+          ],
         },
       ]
     }
+  },
+  methods: {
+    getImage(image) {
+      try {
+        return require('../assets/images/' + image + '.png')
+      } catch {
+        return "https://dummyimage.com/1920x1080/151515/ffffff.png&text=" + image
+      }
+    }
   }
 }
 </script>