update

ui/public/index.html

@@ -6,6 +6,9 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
 </head>

ui/src/App.vue

@@ -7,8 +7,26 @@
   </v-app>
 </template>
 <style>
-.troploGradient {
+.troplo-header {
-  font-weight: 500;background: -webkit-radial-gradient(#0179f3, #0190ea);-webkit-background-clip: text;-webkit-text-fill-color: transparent
+  -webkit-font-smoothing: antialiased !important;
+  background: -webkit-radial-gradient(#0179f3, #0190ea) !important;
+}
+.troplo-header-title {
+  -webkit-font-smoothing: antialiased !important;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 450;
+  elevation: 0 !important;
+  font-size: 15rem;
+  font-style: italic;
+  text-shadow: none !important;
+  color: -webkit-radial-gradient(#0179f3, #0190ea) !important;
+  -webkit-background-clip: text
+}
+.troplo-title {
+  font-weight: 500;
+  background: -webkit-radial-gradient(#0179f3, #0190ea);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent
 }
 .theme--dark.v-sheet {
   background-color: #151515 !important;

ui/src/components/Header.vue

@@ -1,19 +1,41 @@
 <template>
   <div id="header">
-    <v-app-bar color="dark" floating app dense>
+    <v-toolbar
-      <v-app-bar-nav-icon v-if="$vuetify.breakpoint.mobile && $store.state.user.username" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+        dark
-      <v-toolbar-title>{{$store.state.site.route}}<v-app-bar-nav-icon disabled v-if="$store.state.site.release !== 'prod'">{{$store.state.site.release}}</v-app-bar-nav-icon></v-toolbar-title>
+    >
+      <v-app-bar-nav-icon @click.stop="sidebar = !sidebar" v-if="$vuetify.breakpoint.mobile"></v-app-bar-nav-icon>
+      <v-toolbar-title class="troplo-title" @click="$router.push('/')" style="cursor: pointer">Troplo</v-toolbar-title>
       <v-spacer></v-spacer>
-    </v-app-bar>
+      <v-list v-if="!$vuetify.breakpoint.mobile">
+        <v-btn
+            text
+            v-for="(item) in items"
+            :key="item.id"
+            :to="item.path"
+            :disabled="item.disabled"
+        >
+          <v-list-item-title>{{ item.title }}</v-list-item-title>
+        </v-btn>
+        <v-btn
+            v-if="false"
+            text
+            @click="$vuetify.theme.dark = !$vuetify.theme.dark"
+        >
+          <v-list-item-title>
+            <v-icon>{{ $vuetify.theme.dark ? 'mdi-lightbulb-on' : 'mdi-lightbulb-outline' }}</v-icon>
+          </v-list-item-title>
+        </v-btn>
+      </v-list>
+    </v-toolbar>
     <v-navigation-drawer
         floating
         color="dark"
         app
+        v-model="sidebar"
+        v-if="$vuetify.breakpoint.mobile"
         expand>
       <v-divider></v-divider>
       <v-list nav dense>
-        <v-list>
-          <v-list>
         <v-list-item
             v-for="item in items"
             :key="item.id"
@@ -28,8 +50,14 @@
             <v-list-item-title>{{ item.title }}</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
-          </v-list>
+        <v-list-item
-        </v-list>
+            link
+            @click="$vuetify.theme.dark = !$vuetify.theme.dark"
+        >
+          <v-list-item-icon>
+            <v-icon>{{ $vuetify.theme.dark ? 'mdi-lightbulb-on' : 'mdi-lightbulb-outline' }}</v-icon>
+          </v-list-item-icon>
+        </v-list-item>
       </v-list>
     </v-navigation-drawer>
   </div>
@@ -40,10 +68,11 @@ export default {
   name: "Header",
   data() {
     return {
+      sidebar: false,
       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-email", path: "/contact"}
+        {id: 3, title: "Contact", icon: "mdi-email", path: "/contact"},
       ]
     }
   },

ui/src/main.js

@@ -4,7 +4,6 @@ import './registerServiceWorker'
 import router from './router'
 import vuetify from './plugins/vuetify'
 import store from './store'
-
 Vue.config.productionTip = false
 
 new Vue({

ui/src/store/index.js

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

ui/src/views/Contact.vue

@@ -4,7 +4,9 @@
       <p class="text-h4">Contact</p>
       <v-row>
         <v-col md="3">
-          <v-card>
+          <v-card class="rounded-xl" elevation="8">
+            <br>
+            <v-icon>mdi-email</v-icon>
             <v-card-title class="justify-center">Email</v-card-title>
 
             <v-card-text>
@@ -13,7 +15,9 @@
           </v-card>
         </v-col>
         <v-col md="3">
-          <v-card>
+          <v-card class="rounded-xl" elevation="8">
+            <br>
+            <v-icon>mdi-matrix</v-icon>
             <v-card-title class="justify-center">Matrix</v-card-title>
 
             <v-card-text>
@@ -22,16 +26,22 @@
           </v-card>
         </v-col>
         <v-col md="3">
-          <v-card>
+          <v-card class="rounded-xl" elevation="8">
+            <br>
+            <v-icon>mdi-discord</v-icon>
             <v-card-title class="justify-center">Discord</v-card-title>
 
             <v-card-text>
+              <a href="https://discord.com/users/692259321907773460">
                 Troplo#8495
+              </a>
             </v-card-text>
           </v-card>
         </v-col>
         <v-col md="3">
-          <v-card>
+          <v-card class="rounded-xl" elevation="8">
+            <br>
+            <v-icon>mdi-twitter</v-icon>
             <v-card-title class="justify-center">Twitter</v-card-title>
 
             <v-card-text>
@@ -40,7 +50,9 @@
           </v-card>
         </v-col>
         <v-col md="3">
-          <v-card>
+          <v-card class="rounded-xl" elevation="8">
+            <br>
+            <v-icon>mdi-send</v-icon>
             <v-card-title class="justify-center">Telegram</v-card-title>
 
             <v-card-text>
@@ -49,7 +61,9 @@
           </v-card>
         </v-col>
         <v-col md="3">
-          <v-card>
+          <v-card class="rounded-xl" elevation="8">
+            <br>
+            <v-icon>mdi-github</v-icon>
             <v-card-title class="justify-center">GitHub</v-card-title>
 
             <v-card-text>
@@ -58,7 +72,9 @@
           </v-card>
         </v-col>
         <v-col md="3">
-          <v-card>
+          <v-card class="rounded-xl" elevation="8">
+            <br>
+            <v-icon>mdi-tea</v-icon>
             <v-card-title class="justify-center">Gitea</v-card-title>
 
             <v-card-text>

ui/src/views/Home.vue

@@ -1,29 +1,16 @@
 <template>
   <div id="home">
     <v-container class="text-center">
-      <v-card elevation="12">
+      <v-card elevation="8" class="troplo-header rounded-xl">
         <v-container>
-          <p class="troploGradient">Troplo</p>
+          <div v-if="!$vuetify.breakpoint.mobile" class="troplo-header-title">Troplo</div>
-          <p class="text-h4">Full-stack web developer.</p>
+          <div v-if="$vuetify.breakpoint.mobile" class="troplo-header-title" style="background: -webkit-radial-gradient(#0179f3, #0190ea);">T</div>
         </v-container>
       </v-card>
     </v-container>
   </div>
 </template>
 
-<style>
-.troploGradient{
-  font-size: 300px;
-  font-style: italic;
-  background:-webkit-radial-gradient(#0179f3, #0190ea);
-  -webkit-background-clip:text
-}
-
-.normal {
-  font-color: #ffffff
-}
-</style>
-
 <script>
 export default {
   name: 'Home',

ui/src/views/Projects.vue

@@ -4,7 +4,7 @@
       <p class="justify-center text-center text-h4">Projects</p>
       <v-row>
         <v-col md="3" v-for="(project, index) in getVisible" :key="index">
-          <v-card elevation="8">
+          <v-card class="rounded-xl" elevation="8">
             <v-img
                 :src="getImage(project.internalName)"
             ></v-img>
@@ -55,39 +55,6 @@
   </div>
 </template>
 
-<style>
-.blob {
-  border-radius: 50%;
-  margin: 6px;
-  height: 20px;
-  width: 20px;
-  transform: scale(1);
-}
-
-.blob.green {
-  background: rgba(51, 217, 178, 1);
-  box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
-  animation: pulse-green 1.3s infinite;
-}
-
-@keyframes pulse-green {
-  0% {
-    transform: scale(1);
-    box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
-  }
-
-  70% {
-    transform: scale(1);
-    box-shadow: 0 0 0 5px rgba(51, 217, 178, 0);
-  }
-
-  100% {
-    transform: scale(1);
-    box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
-  }
-}
-</style>
-
 <script>
 export default {
   name: "Projects",
@@ -294,6 +261,12 @@ export default {
           name: "Website",
           internalName: "troplo-website",
           tags: [
+            {
+              internalName: "active",
+              name: "Active",
+              icon: "mdi-check-circle",
+              color: "success"
+            },
             {
               internalName: "openSource",
               name: "Open Source",
@@ -308,7 +281,7 @@ export default {
             },
           ],
           description: "If you want the source code to this website for whatever reason, it is available.",
-          visible: false,
+          visible: true,
           links: [
             {
               name: "Git Repository",
@@ -320,6 +293,68 @@ export default {
             },
           ],
         },
+        {
+          id: 8,
+          name: "Pinnoto Psittacus",
+          internalName: "psittacus",
+          tags: [
+            {
+              internalName: "development",
+              name: "In Development",
+              icon: "mdi-information",
+              color: "info"
+            },
+            {
+              internalName: "vue",
+              name: "Vue",
+              icon: "mdi-vuejs",
+              color: "#42b883",
+              link: "https://vuejs.org"
+            },
+            {
+              internalName: "tauri",
+              name: "Tauri",
+              icon: "mdi-infinity",
+              color: "#24c8db",
+              link: "https://tauri.studio"
+            },
+          ],
+          description: "IDE. Coming soon.",
+          visible: true,
+          links: []
+        },
+        {
+          id: 9,
+          name: "TroploPlex",
+          internalName: "troplo-plex",
+          tags: [
+            {
+              internalName: "active",
+              name: "Active",
+              icon: "mdi-check-circle",
+              color: "success"
+            },
+            {
+              internalName: "openSource",
+              name: "Open Source",
+              icon: "mdi-git"
+            },
+            {
+              internalName: "express",
+              name: "Express",
+              icon: "mdi-nodejs",
+              link: "https://expresjs.com"
+            },
+          ],
+          description: "TroploPlex is a reimplementation of the myPlex API.",
+          visible: true,
+          links: [
+            {
+              name: "Git Repository",
+              link: "https://git.troplo.com/Troplo/Plex"
+            }
+          ],
+        },
       ]
     }
   },
@@ -339,7 +374,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>