This commit is contained in:
Troplo 2021-11-01 21:23:57 +11:00
parent 2b7b3d0658
commit 2539f257ef
11 changed files with 328 additions and 37 deletions

View file

@ -1,7 +1,7 @@
{
"name": "jays-host",
"name": "troplo-base",
"version": "1.0.0",
"description": "A ShareX photo gallery.",
"description": "troplo-base",
"main": "index.js",
"scripts": {
"serve": "nodemon --ignore ./ui/"

View file

@ -4,7 +4,7 @@
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build": "vue-cli-service build --no-clean",
"lint": "vue-cli-service lint",
"postinstall": "patch-package"
},

Binary file not shown.

After

Width:  |  Height:  |  Size: 328 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 338 KiB

View file

@ -43,7 +43,7 @@ export default {
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-mail", path: "/contact"}
{id: 3, title: "Contact", icon: "mdi-email", path: "/contact"}
]
}
},

View file

@ -25,6 +25,22 @@ const routes = [
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "nexus" */ '../views/Nexus.vue')
},
{
path: '/contact',
name: 'Contact',
// 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: "contact" */ '../views/Contact.vue')
},
{
path: '*',
name: 'Not Found',
// 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: "notFound" */ '../views/NotFound.vue')
},
]
const router = new VueRouter({

View file

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

64
ui/src/views/Contact.vue Normal file
View file

@ -0,0 +1,64 @@
<template>
<div>
<v-container class="justify-center text-center">
<p class="text-h4">Contact</p>
<v-row>
<v-col md="3">
<v-card>
<v-card-title class="justify-center">Email</v-card-title>
<v-card-text>
<a href="mailto:troplo@troplo.com">troplo@troplo.com</a>
</v-card-text>
</v-card>
</v-col>
<v-col md="3">
<v-card>
<v-card-title class="justify-center">Matrix</v-card-title>
<v-card-text>
<a href="https://matrix.to/#/@troplo:troplo.com?via=troplo.com">@troplo:troplo.com</a>
</v-card-text>
</v-card>
</v-col>
<v-col md="3">
<v-card>
<v-card-title class="justify-center">Discord</v-card-title>
<v-card-text>
Troplo#8495
</v-card-text>
</v-card>
</v-col>
<v-col md="3">
<v-card>
<v-card-title class="justify-center">Twitter</v-card-title>
<v-card-text>
<a href="https://twitter.com/TheTroplo">@TheTroplo</a>
</v-card-text>
</v-card>
</v-col>
<v-col md="3">
<v-card>
<v-card-title class="justify-center">Telegram</v-card-title>
<v-card-text>
<a href="https://t.me/Troplo">@Troplo</a>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
name: "Contact"
}
</script>
<style scoped>
</style>

View file

@ -1,9 +1,20 @@
<template>
<div id="home">
<v-parallax class="troploGradient">
<p class="text-h2 normal">asdasd</p>
</v-parallax>
</div>
</template>
<style>
.troploGradient {
background: -webkit-radial-gradient(#0179f3, #0190ea)
}
.normal {
font-color: #ffffff
}
</style>
<script>
export default {
name: 'Home',

23
ui/src/views/NotFound.vue Normal file
View file

@ -0,0 +1,23 @@
<template>
<div>
<v-container>
<v-card>
<v-container class="text-center">
<p class="text-h4">Not Found.</p>
<p class="subtitle">This route does not exist.</p>
<v-btn text @click="$router.push('/')">Go Home</v-btn>
</v-container>
</v-card>
</v-container>
</div>
</template>
<script>
export default {
name: "NotFound"
}
</script>
<style scoped>
</style>

View file

@ -1,33 +1,52 @@
<template>
<div id="projects">
<v-container class="justify-center text-center">
<p class="text-h4">Projects</p>
<v-container>
<p class="justify-center text-center text-h4">Projects</p>
<v-row>
<v-col v-for="(project, index) in projects" :key="index">
<v-card elevation="12">
<v-container>
<center>
<p class="text-h5">{{project.name}}</p>
<v-col md="3" v-for="(project, index) in projects" :key="index">
<v-card>
<v-img
:src="getImage(project.internalName)"
></v-img>
<v-card-title>{{project.name}}</v-card-title>
<v-card-text>
<div>{{project.description}}</div>
</v-card-text>
<v-divider class="mx-4"></v-divider>
<v-card-title>More Information</v-card-title>
<v-card-text>
<v-chip-group
column
>
<v-chip
class="ma-1"
v-for="tag in project.tags"
:key="tag"
:key="tag.id"
:color="tag.color"
>
<v-icon>{{tag.icon}}</v-icon><template v-if="tag.icon">&nbsp;</template>
{{tag.name}}
</v-chip>
<p>{{project.description}}</p>
<v-card-actions class="justify-center">
<v-chip rounded color="deep-purple" class="ma-1" v-if="project.links.website">
<v-icon>mdi-web</v-icon>&nbsp;Website
</v-chip>
<v-chip rounded color="indigo" class="ma-1" v-if="project.links.git">
<v-icon>mdi-git</v-icon>&nbsp;Git Repository
</v-chip>
</v-card-actions>
</center>
</v-container>
</v-chip-group>
</v-card-text>
<v-divider v-if="project.links.length" class="mx-4"></v-divider>
<v-card-actions>
<v-btn
v-for="link in project.links"
:key="link.name"
color="blue"
text
:href="link.link"
>
{{link.name}}
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
@ -90,13 +109,24 @@ export default {
name: "Open Source",
icon: "mdi-git"
},
{
internalName: "vue",
name: "Vue",
icon: "mdi-vuejs",
color: "#42b883",
},
{
internalName: "express",
name: "Express",
icon: "mdi-nodejs",
},
],
description: "A 3D sandbox game, and social avatar community written in Express and Vue.js.",
description: "A 3D sandbox game, and social avatar platform written in Express and Vue.js.",
visible: true,
links: {
website: "https://kaverti.com",
git: "https://git.troplo.com/Kaverti/website"
}
links: [{
name: "Git Repository",
link: "https://git.troplo.com/Kaverti/website"
}],
},
{
id: 2,
@ -106,27 +136,42 @@ export default {
{
internalName: "active",
name: "Active",
icon: "mdi-check-circle",
color: "success"
},
{
internalName: "freelance",
name: "Freelance",
icon: "mdi-currency-usd"
},
{
internalName: "vue",
name: "Vue",
icon: "mdi-vuejs",
color: "#42b883",
},
{
internalName: "express",
name: "Express",
icon: "mdi-nodejs",
},
],
description: "An invite only file uploading service written in Express and Vue.js.",
visible: true,
links: {
website: "https://jays.host"
}
links: [{
name: "Website",
link: "https://jays.host"
}],
},
{
id: 3,
name: "Mira",
name: "Pinnoto Mira",
internalName: "mira",
tags: [
{
internalName: "development",
name: "In Development",
icon: "mdi-information",
color: "info"
},
{
@ -134,15 +179,146 @@ export default {
name: "Open Source",
icon: "mdi-git"
},
{
internalName: "vue",
name: "Vue",
icon: "mdi-vuejs",
color: "#42b883",
},
{
internalName: "crystal",
color: "black",
name: "Crystal",
icon: "mdi-language-ruby",
},
],
description: "EPUB reader written in Crystal and Vue.js.",
visible: true,
links: {
git: "https://github.com/pinnoto/mira"
}
links: [{
name: "Git Repository",
link: "https://github.com/pinnoto/mira"
}],
},
{
id: 4,
name: "Polytoria",
internalName: "polytoria",
tags: [
{
internalName: "development",
name: "In Development",
icon: "mdi-information",
color: "info"
},
{
internalName: "vue",
name: "Vue",
icon: "mdi-vuejs",
color: "#42b883",
},
{
internalName: "adonis",
name: "Adonis.JS",
icon: "mdi-nodejs",
},
],
description: "Helping create the brand new website for Polytoria, a 3D sandbox platform.",
visible: true,
links: [{
name: "Website",
link: "https://polytoria.com"
}],
},
{
id: 5,
name: "Pinnoto Berri",
internalName: "berri",
tags: [
{
internalName: "development",
name: "In Development",
icon: "mdi-information",
color: "info"
},
{
internalName: "openSource",
name: "Open Source",
icon: "mdi-git"
},
{
internalName: "vue",
name: "Vue",
icon: "mdi-vuejs",
color: "#42b883",
},
{
internalName: "crystal",
color: "black",
name: "Crystal",
icon: "mdi-language-ruby",
},
],
description: "Self hostable, and open source file uploading service created to be performant, and modular.\nName not finalized.",
visible: true,
links: {}
},
{
id: 6,
name: "Flowinity",
internalName: "flowinity",
tags: [
{
internalName: "development",
name: "In Development",
icon: "mdi-information",
color: "info"
}
],
description: "A tech blog.",
visible: true,
links: {}
},
{
id: 7,
name: "Website",
internalName: "troplo-website",
tags: [
{
internalName: "openSource",
name: "Open Source",
icon: "mdi-git"
},
{
internalName: "vue",
name: "Vue",
icon: "mdi-vuejs",
color: "#42b883",
},
],
description: "If you want the source code to this website for whatever reason, it is available.",
visible: true,
links: [
{
name: "Git Repository",
link: "https://git.troplo.com/Troplo/website-new"
},
{
name: "Website",
link: "https://troplo.com"
},
],
},
]
}
},
methods: {
getImage(image) {
try {
return require('../assets/images/' + image + '.png')
} catch {
return "https://dummyimage.com/1920x1080/151515/ffffff.png&text=" + image
}
}
}
}
</script>