This commit is contained in:
Troplo 2024-09-13 22:04:23 +10:00
parent 9adf6900d6
commit 85aa8ad33d
Signed by: Troplo
GPG key ID: 24001724CDB51342
7 changed files with 233 additions and 125 deletions

View file

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

View file

@ -1,9 +1,24 @@
<template> <template>
<v-app> <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
You might be currently experiencing problems with: v-if="outages.length"
{{outageName}}. 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 }}.
</span>
<v-btn href="https://status.troplo.com" small color="red" text
>Learn more</v-btn
>
</div>
</v-alert> </v-alert>
<Header></Header> <Header></Header>
<router-view /> <router-view />

Binary file not shown.

After

Width:  |  Height:  |  Size: 572 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 489 KiB

BIN
src/assets/images/mira.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

View file

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

View file

@ -1,15 +1,19 @@
<template> <template>
<div id="projects"> <div id="projects">
<v-container :fluid="$vuetify.breakpoint.lgAndDown"> <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> <v-container>
<div v-if="!$vuetify.breakpoint.mobile" class="troplo-header-title"> <div v-if="!$vuetify.breakpoint.mobile" class="troplo-header-title">
Troplo Troplo
</div> </div>
<div <div
v-if="$vuetify.breakpoint.mobile" v-if="$vuetify.breakpoint.mobile"
class="troplo-header-title" class="troplo-header-title"
style="background: -webkit-radial-gradient(#0179f3, #0190ea)" style="background: -webkit-radial-gradient(#0179f3, #0190ea)"
> >
T T
</div> </div>
@ -20,18 +24,27 @@
<v-col lg="3" v-for="(project, index) in getVisible" :key="index"> <v-col lg="3" v-for="(project, index) in getVisible" :key="index">
<v-card class="rounded-xl troplo-p" elevation="8"> <v-card class="rounded-xl troplo-p" elevation="8">
<v-hover v-slot="{ hover }"> <v-hover v-slot="{ hover }">
<v-img :alt="'Image of ' + project.name" :src="getImage(project.internalName)"> <v-img
<a :href="getImage(project.internalName)" target="_blank"> :alt="'Image of ' + project.name"
<v-fade-transition v-if="hover"> :src="getImage(project.internalName)"
<v-overlay absolute> >
<v-icon large>mdi-open-in-new</v-icon> <a :href="getImage(project.internalName)" target="_blank">
</v-overlay> <v-fade-transition v-if="hover">
</v-fade-transition> <v-overlay absolute>
</a> <v-icon large>mdi-open-in-new</v-icon>
</v-img> </v-overlay>
</v-fade-transition>
</a>
</v-img>
</v-hover> </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> <v-card-text>
<span style="white-space: pre-line; overflow-wrap: anywhere">{{ <span style="white-space: pre-line; overflow-wrap: anywhere">{{
@ -94,39 +107,10 @@ export default {
data() { data() {
return { return {
projects: [ 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, id: 2,
name: "Flowinity", name: "Flowinity",
release: "2021",
internalName: "proj01", internalName: "proj01",
tags: [ tags: [
{ {
@ -140,7 +124,8 @@ export default {
name: "Vue", name: "Vue",
icon: "mdi-vuejs", icon: "mdi-vuejs",
color: "#42b883", color: "#42b883",
link: "https://vuejs.org" link: "https://vuejs.org",
textColor: "black"
}, },
{ {
internalName: "vuetify", 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, id: 12,
name: "Colubrina", name: "Colubrina",
@ -193,7 +274,8 @@ export default {
name: "Vue", name: "Vue",
icon: "mdi-vuejs", icon: "mdi-vuejs",
color: "#42b883", color: "#42b883",
link: "https://vuejs.org" link: "https://vuejs.org",
textColor: "black"
}, },
{ {
internalName: "vuetify", internalName: "vuetify",
@ -207,11 +289,12 @@ export default {
name: "Express", name: "Express",
icon: "mdi-nodejs", icon: "mdi-nodejs",
link: "https://expressjs.com" link: "https://expressjs.com"
}, }
], ],
description: 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.", "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, visible: true,
release: "2022",
links: [ links: [
{ {
name: "Website", name: "Website",
@ -227,6 +310,7 @@ export default {
id: 11, id: 11,
name: "BetterCompass", name: "BetterCompass",
internalName: "compass-vue", internalName: "compass-vue",
release: "2022",
tags: [ tags: [
{ {
internalName: "inactive", internalName: "inactive",
@ -239,7 +323,8 @@ export default {
name: "Vue", name: "Vue",
icon: "mdi-vuejs", icon: "mdi-vuejs",
color: "#42b883", color: "#42b883",
link: "https://vuejs.org" link: "https://vuejs.org",
textColor: "black"
}, },
{ {
internalName: "vuetify", internalName: "vuetify",
@ -273,7 +358,9 @@ export default {
id: 14, id: 14,
name: "GeoGuess", name: "GeoGuess",
internalName: "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, visible: true,
links: [ links: [
{ {
@ -301,7 +388,8 @@ export default {
name: "Vue", name: "Vue",
icon: "mdi-vuejs", icon: "mdi-vuejs",
color: "#42b883", color: "#42b883",
link: "https://vuejs.org" link: "https://vuejs.org",
textColor: "black"
}, },
{ {
internalName: "vuetify", internalName: "vuetify",
@ -316,25 +404,27 @@ export default {
icon: "mdi-firebase", icon: "mdi-firebase",
link: "https://firebase.com" link: "https://firebase.com"
} }
], ]
}, },
{ {
id: 3, id: 3,
name: "Mira", name: "Mira",
release: "2021",
internalName: "mira", internalName: "mira",
tags: [ tags: [
{ {
internalName: "active", internalName: "inactive",
name: "Active", name: "Discontinued",
icon: "mdi-check-circle", color: "error",
color: "success" icon: "mdi-alert-circle"
}, },
{ {
internalName: "vue", internalName: "vue",
name: "Vue", name: "Vue",
icon: "mdi-vuejs", icon: "mdi-vuejs",
color: "#42b883", color: "#42b883",
link: "https://vuejs.org" link: "https://vuejs.org",
textColor: "black"
}, },
{ {
internalName: "crystal", internalName: "crystal",
@ -354,16 +444,17 @@ export default {
} }
] ]
}, },
/*{ {
id: 10, id: 10,
name: "Vixlatio", name: "Vixlatio",
internalName: "vixlatio", internalName: "vixlatio",
release: "2022",
tags: [ tags: [
{ {
internalName: "active", internalName: "active",
name: "Active", name: "No longer affiliated",
icon: "mdi-check-circle", icon: "mdi-help-circle",
color: "success" color: "indigo"
}, },
{ {
internalName: "vue", internalName: "vue",
@ -382,49 +473,47 @@ export default {
description: description:
"Developer for Vixlatio, a blazing fast gaming platform that is powered by the creativity of its users.", "Developer for Vixlatio, a blazing fast gaming platform that is powered by the creativity of its users.",
visible: true, 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, id: 13,
name: "Kansas", name: "Kansas",
internalName: "kansas", internalName: "kansas",
release: "2022",
tags: [ tags: [
{ {
internalName: "development-halted", internalName: "development-halted",
@ -437,7 +526,8 @@ export default {
name: "Vue", name: "Vue",
icon: "mdi-vuejs", icon: "mdi-vuejs",
color: "#42b883", color: "#42b883",
link: "https://vuejs.org" link: "https://vuejs.org",
textColor: "black"
}, },
{ {
internalName: "vuetify", internalName: "vuetify",
@ -454,10 +544,10 @@ export default {
} }
], ],
description: description:
"Open source project tracking software written in Vue.js.", "Open source project tracking software written in Vue.js.",
visible: true, visible: true,
links: {} links: {}
},/* } /*
{ {
id: 6, id: 6,
name: "Flowinity", name: "Flowinity",
@ -473,10 +563,11 @@ export default {
description: "A tech blog.", description: "A tech blog.",
visible: true, visible: true,
links: {} links: {}
},*/ },*/,
{ {
id: 7, id: 7,
name: "Troplo's Website", name: "Troplo's Website",
release: "2021",
internalName: "troplo-website", internalName: "troplo-website",
tags: [ tags: [
{ {
@ -490,7 +581,8 @@ export default {
name: "Vue", name: "Vue",
icon: "mdi-vuejs", icon: "mdi-vuejs",
color: "#42b883", color: "#42b883",
link: "https://vuejs.org" link: "https://vuejs.org",
textColor: "black"
}, },
{ {
internalName: "vuetify", internalName: "vuetify",
@ -498,7 +590,7 @@ export default {
icon: "mdi-vuetify", icon: "mdi-vuetify",
link: "https://vuetifyjs.com", link: "https://vuetifyjs.com",
color: "#2196F3" color: "#2196F3"
}, }
], ],
description: "The website you are viewing right now.", description: "The website you are viewing right now.",
visible: true, visible: true,
@ -514,15 +606,16 @@ export default {
] ]
}, },
{ {
id: 8, id: 1,
name: "Psittacus", name: "Kaverti",
internalName: "psittacus", release: "2020",
internalName: "kaverti",
tags: [ tags: [
{ {
internalName: "development-halted", internalName: "inactive",
name: "Halted", name: "Discontinued",
icon: "mdi-pause-octagon", color: "error",
color: "warning" icon: "mdi-alert-circle"
}, },
{ {
internalName: "vue", internalName: "vue",
@ -532,14 +625,14 @@ export default {
link: "https://vuejs.org" 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, visible: true,
links: [] links: []
} }