From f75ffac87f709afed69f29d7d7804170984cedfd Mon Sep 17 00:00:00 2001
From: Troplo <troplo@troplo.com>
Date: Sat, 6 Nov 2021 00:40:51 +1100
Subject: [PATCH] update

---
 ui/package.json                  |   2 +-
 ui/src/components/HelloWorld.vue | 151 -------------------------------
 ui/src/views/Contact.vue         |  18 ++++
 ui/src/views/Home.vue            |  19 +++-
 ui/src/views/Projects.vue        |  23 ++++-
 5 files changed, 53 insertions(+), 160 deletions(-)
 delete mode 100644 ui/src/components/HelloWorld.vue

diff --git a/ui/package.json b/ui/package.json
index 9810f6f..486cade 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "ui",
+  "name": "troplo-site",
   "version": "1.0.0",
   "private": true,
   "scripts": {
diff --git a/ui/src/components/HelloWorld.vue b/ui/src/components/HelloWorld.vue
deleted file mode 100644
index b04f6bf..0000000
--- a/ui/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <v-container>
-    <v-row class="text-center">
-      <v-col cols="12">
-        <v-img
-          :src="require('../assets/logo.svg')"
-          class="my-3"
-          contain
-          height="200"
-        />
-      </v-col>
-
-      <v-col class="mb-4">
-        <h1 class="display-2 font-weight-bold mb-3">
-          Welcome to Vuetify
-        </h1>
-
-        <p class="subheading font-weight-regular">
-          For help and collaboration with other Vuetify developers,
-          <br>please join our online
-          <a
-            href="https://community.vuetifyjs.com"
-            target="_blank"
-          >Discord Community</a>
-        </p>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          What's next?
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(next, i) in whatsNext"
-            :key="i"
-            :href="next.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ next.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          Important Links
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(link, i) in importantLinks"
-            :key="i"
-            :href="link.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ link.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          Ecosystem
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(eco, i) in ecosystem"
-            :key="i"
-            :href="eco.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ eco.text }}
-          </a>
-        </v-row>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<script>
-  export default {
-    name: 'HelloWorld',
-
-    data: () => ({
-      ecosystem: [
-        {
-          text: 'vuetify-loader',
-          href: 'https://github.com/vuetifyjs/vuetify-loader',
-        },
-        {
-          text: 'github',
-          href: 'https://github.com/vuetifyjs/vuetify',
-        },
-        {
-          text: 'awesome-vuetify',
-          href: 'https://github.com/vuetifyjs/awesome-vuetify',
-        },
-      ],
-      importantLinks: [
-        {
-          text: 'Documentation',
-          href: 'https://vuetifyjs.com',
-        },
-        {
-          text: 'Chat',
-          href: 'https://community.vuetifyjs.com',
-        },
-        {
-          text: 'Made with Vuetify',
-          href: 'https://madewithvuejs.com/vuetify',
-        },
-        {
-          text: 'Twitter',
-          href: 'https://twitter.com/vuetifyjs',
-        },
-        {
-          text: 'Articles',
-          href: 'https://medium.com/vuetify',
-        },
-      ],
-      whatsNext: [
-        {
-          text: 'Explore components',
-          href: 'https://vuetifyjs.com/components/api-explorer',
-        },
-        {
-          text: 'Select a layout',
-          href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
-        },
-        {
-          text: 'Frequently Asked Questions',
-          href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
-        },
-      ],
-    }),
-  }
-</script>
diff --git a/ui/src/views/Contact.vue b/ui/src/views/Contact.vue
index 98ddef9..d1f343f 100644
--- a/ui/src/views/Contact.vue
+++ b/ui/src/views/Contact.vue
@@ -48,6 +48,24 @@
             </v-card-text>
           </v-card>
         </v-col>
+        <v-col md="3">
+          <v-card>
+            <v-card-title class="justify-center">GitHub</v-card-title>
+
+            <v-card-text>
+              <a href="https://github.com/Troplo">Troplo</a>
+            </v-card-text>
+          </v-card>
+        </v-col>
+        <v-col md="3">
+          <v-card>
+            <v-card-title class="justify-center">Gitea</v-card-title>
+
+            <v-card-text>
+              <a href="https://git.troplo.com/Troplo">Troplo</a>
+            </v-card-text>
+          </v-card>
+        </v-col>
       </v-row>
     </v-container>
   </div>
diff --git a/ui/src/views/Home.vue b/ui/src/views/Home.vue
index 93742e5..974b073 100644
--- a/ui/src/views/Home.vue
+++ b/ui/src/views/Home.vue
@@ -1,15 +1,24 @@
 <template>
   <div id="home">
-    <v-parallax class="troploGradient">
-      <p class="text-h2 normal">asdasd</p>
-    </v-parallax>
+    <v-container class="text-center">
+      <v-card elevation="12">
+        <v-container>
+          <p class="troploGradient">Troplo</p>
+          <p class="text-h4">Full-stack web developer.</p>
+        </v-container>
+      </v-card>
+    </v-container>
   </div>
 </template>
 
 <style>
-.troploGradient {
-  background: -webkit-radial-gradient(#0179f3, #0190ea)
+.troploGradient{
+  font-size: 300px;
+  font-style: italic;
+  background:-webkit-radial-gradient(#0179f3, #0190ea);
+  -webkit-background-clip:text
 }
+
 .normal {
   font-color: #ffffff
 }
diff --git a/ui/src/views/Projects.vue b/ui/src/views/Projects.vue
index 9971186..a34718a 100644
--- a/ui/src/views/Projects.vue
+++ b/ui/src/views/Projects.vue
@@ -3,8 +3,8 @@
     <v-container>
       <p class="justify-center text-center text-h4">Projects</p>
       <v-row>
-        <v-col md="3" v-for="(project, index) in projects" :key="index">
-          <v-card>
+        <v-col md="3" v-for="(project, index) in getVisible" :key="index">
+          <v-card elevation="8">
             <v-img
                 :src="getImage(project.internalName)"
             ></v-img>
@@ -26,6 +26,7 @@
                 <v-chip
                     v-for="tag in project.tags"
                     :key="tag.id"
+                    :href="tag.link"
                     :color="tag.color"
                 >
                   <v-icon>{{tag.icon}}</v-icon><template v-if="tag.icon">&nbsp;</template>
@@ -114,11 +115,13 @@ export default {
               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.",
@@ -149,11 +152,13 @@ export default {
               name: "Vue",
               icon: "mdi-vuejs",
               color: "#42b883",
+              link: "https://vuejs.org"
             },
             {
               internalName: "express",
               name: "Express",
               icon: "mdi-nodejs",
+              link: "https://expressjs.com"
             },
           ],
           description: "An invite only file uploading service written in Express and Vue.js.",
@@ -184,12 +189,14 @@ export default {
               name: "Vue",
               icon: "mdi-vuejs",
               color: "#42b883",
+              link: "https://vuejs.org"
             },
             {
               internalName: "crystal",
               color: "black",
               name: "Crystal",
               icon: "mdi-language-ruby",
+              link: "https://crystal-lang.org"
             },
           ],
           description: "EPUB reader written in Crystal and Vue.js.",
@@ -215,11 +222,13 @@ export default {
               name: "Vue",
               icon: "mdi-vuejs",
               color: "#42b883",
+              link: "https://vuejs.org"
             },
             {
               internalName: "adonis",
               name: "Adonis.JS",
               icon: "mdi-nodejs",
+              link: "https://adonisjs.com"
             },
           ],
           description: "Helping create the brand new website for Polytoria, a 3D sandbox platform.",
@@ -250,12 +259,14 @@ export default {
               name: "Vue",
               icon: "mdi-vuejs",
               color: "#42b883",
+              link: "https://vuejs.org"
             },
             {
               internalName: "crystal",
               color: "black",
               name: "Crystal",
               icon: "mdi-language-ruby",
+              link: "https://crystal-lang.org"
             },
           ],
           description: "Self hostable, and open source file uploading service created to be performant, and modular.\nName not finalized.",
@@ -293,10 +304,11 @@ export default {
               name: "Vue",
               icon: "mdi-vuejs",
               color: "#42b883",
+              link: "https://vuejs.org"
             },
           ],
           description: "If you want the source code to this website for whatever reason, it is available.",
-          visible: true,
+          visible: false,
           links: [
             {
               name: "Git Repository",
@@ -311,6 +323,11 @@ export default {
       ]
     }
   },
+  computed: {
+    getVisible() {
+      return this.projects.filter(i => i.visible)
+    }
+  },
   methods: {
     getImage(image) {
       try {