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",
"version": "1.0.14",
"version": "1.0.15",
"private": true,
"scripts": {
"serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",

View file

@ -1,9 +1,24 @@
<template>
<v-app>
<v-main v-if="outages.length">
<v-alert class="mb-0 p-0" text color="red" :value="true" tile icon="mdi-alert-circle">
You might be currently experiencing problems with:
{{outageName}}.
<v-main>
<v-alert
v-if="outages.length"
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>
<Header></Header>
<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">
<br />
<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">{{
contact.title
}}</v-card-title>
@ -62,7 +62,7 @@ export default {
id: 3,
icon: "mdi-discord",
title: "Discord",
displayName: "Troplo#8495",
displayName: "@troplo",
url: "https://discord.com/users/692259321907773460"
},
{

View file

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