1.0.8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "troplo-site",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

public/index.html

@@ -13,7 +13,7 @@
     <meta name="language" content="English">
     <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 href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;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>

src/App.vue

@@ -6,64 +6,7 @@
     </v-main>
   </v-app>
 </template>
-<style>
-.troplo-nav {
-  font-family: "Roboto", sans-serif;
-}
 
-.troplo-header {
-  -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 !important;
-  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;
-  border-color: #151515 !important;
-  color: #ffffff;
-}
-.card {
-  overflow: hidden;
-}
-.theme--dark.v-card {
-  background-color: #151515 !important;
-}
-/* Works on Firefox */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: black #151515;
-}
-
-/* Works on Chrome, Edge, and Safari */
-*::-webkit-scrollbar {
-  width: 12px;
-}
-
-*::-webkit-scrollbar-track {
-  background: #0e0e0e;
-}
-
-*::-webkit-scrollbar-thumb {
-  background-color: #151515;
-  border-radius: 20px;
-  border: 3px solid #151515;
-}
-</style>
 <script>
 import Header from "./components/Header.vue"
 export default {

src/assets/style.css

@@ -0,0 +1,65 @@
+@keyframes gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+.troplo-header {
+    -webkit-font-smoothing: antialiased !important;
+    background: linear-gradient(-45deg, #0179f3, #0190ea) !important;
+    animation: gradient 15s ease infinite;
+}
+.troplo-header-title {
+    -webkit-font-smoothing: antialiased !important;
+    font-weight: 450;
+    elevation: 0 !important;
+    font-size: 15rem;
+    font-style: italic;
+    text-shadow: none !important;
+    color: linear-gradient(#0179f3, #0190ea) !important;
+    -webkit-background-clip: text;
+}
+.troplo-title {
+    font-weight: 500;
+    background: linear-gradient(#0179f3, #0190ea);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.theme--dark.v-sheet {
+    background-color: #151515 !important;
+    border-color: #151515 !important;
+    color: #ffffff;
+}
+.card {
+    overflow: hidden;
+}
+.theme--dark.v-card {
+    background-color: #151515 !important;
+}
+
+/* Works on Firefox */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: black #151515;
+    font-family: "Inter", sans-serif !important;
+}
+
+/* Works on Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+    width: 12px;
+}
+
+*::-webkit-scrollbar-track {
+    background: #0e0e0e;
+}
+
+*::-webkit-scrollbar-thumb {
+    background-color: #151515;
+    border-radius: 20px;
+    border: 3px solid #151515;
+}

src/components/Header.vue

@@ -9,7 +9,7 @@
         class="troplo-title"
         @click="$router.push('/')"
         style="cursor: pointer"
-        >Troplo</v-toolbar-title
+        >Troplo's Website</v-toolbar-title
       >
       <v-spacer></v-spacer>
       <v-list v-if="!$vuetify.breakpoint.mobile">
@@ -81,12 +81,6 @@ export default {
       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" }
       ]
     }

src/main.js

@@ -4,7 +4,7 @@ import router from "./router"
 import vuetify from "./plugins/vuetify"
 import store from "./store"
 import VueMatomo from "vue-matomo"
-
+import "./assets/style.css"
 Vue.config.productionTip = false
 Vue.use(VueMatomo, {
   // Configure your matomo server and site by providing

src/router/index.js

@@ -4,20 +4,28 @@ import VueRouter from "vue-router"
 Vue.use(VueRouter)
 
 const routes = [
+  /*{
+    path: "/",
+    name: "Home",
+    component: () => import(/* webpackChunkName: "home" *//* "../views/Home.vue")
+  },*/
   {
     path: "/",
     name: "Home",
-    component: () => import(/* webpackChunkName: "home" */ "../views/Home.vue")
-  },
-  {
-    path: "/projects",
-    name: "Projects",
     // 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: "projects" */ "../views/Projects.vue")
   },
+  {
+    path: "/projects",
+    name: "Projects",
+    redirect: "/",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+  },
   {
     path: "/contact",
     name: "Contact",

src/views/Contact.vue

@@ -45,8 +45,8 @@ export default {
           id: 2,
           icon: "mdi-matrix",
           title: "Matrix",
-          displayName: "@troplo:troplo.com",
+          displayName: "@troplo:flowinity.com",
-          url: "https://matrix.to/#/@troplo:troplo.com?via=troplo.com"
+          url: "https://matrix.to/#/@troplo:flowinity.com?via=flowinity.com"
         },
         {
           id: 3,

src/views/Projects.vue

@@ -1,11 +1,35 @@
 <template>
   <div id="projects">
-    <v-container>
+    <v-container :fluid="$vuetify.breakpoint.lgAndDown">
+      <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
+          </div>
+          <div
+              v-if="$vuetify.breakpoint.mobile"
+              class="troplo-header-title"
+              style="background: -webkit-radial-gradient(#0179f3, #0190ea)"
+          >
+            T
+          </div>
+        </v-container>
+      </v-card>
       <p class="justify-center text-center text-h4">My Projects</p>
       <v-row>
         <v-col md="3" v-for="(project, index) in getVisible" :key="index">
           <v-card class="rounded-xl troplo-p" elevation="8">
-            <v-img :src="getImage(project.internalName)"></v-img>
+            <v-hover v-slot="{ hover }">
+                <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>
+                        <v-icon large>mdi-open-in-new</v-icon>
+                      </v-overlay>
+                    </v-fade-transition>
+                  </a>
+                </v-img>
+            </v-hover>
 
             <v-card-title>{{ project.name }}</v-card-title>
 
@@ -70,7 +94,7 @@ export default {
   data() {
     return {
       projects: [
-        {
+     /*   {
           id: 1,
           name: "Kaverti",
           internalName: "kaverti",
@@ -99,10 +123,10 @@ export default {
             "A 3D sandbox game, and social avatar platform written in Express and Vue.js.",
           visible: true,
           links: []
-        },
+        },*/
         {
           id: 2,
-          name: "Jays.host",
+          name: "Jet.pics",
           internalName: "proj01",
           tags: [
             {
@@ -131,7 +155,7 @@ export default {
           links: [
             {
               name: "Website",
-              link: "https://jays.host"
+              link: "https://jet.pics"
             }
           ]
         },