Troplo/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

update

Browse source
This commit is contained in:
Troplo 2022-02-04 23:59:48 +11:00
parent f75ffac87f
commit fd3e0f6b36
11 changed files with 186 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ui/public/index.html
View file

@ -1,19 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <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://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"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

22
ui/src/App.vue
View file

@ -7,8 +7,26 @@
</v-app> </v-app>
</template> </template>
<style> <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 { .theme--dark.v-sheet {
background-color: #151515 !important; background-color: #151515 !important;

BIN
ui/src/assets/images/kaverti.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 273 KiB

BIN
ui/src/assets/images/troplo-plex.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.9 MiB

BIN
ui/src/assets/images/troplo-website.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 571 KiB

47
ui/src/components/Header.vue
View file

@ -1,19 +1,41 @@
<template> <template>
<div id="header"> <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-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 <v-navigation-drawer
floating floating
color="dark" color="dark"
app app
v-model="sidebar"
v-if="$vuetify.breakpoint.mobile"
expand> expand>
<v-divider></v-divider> <v-divider></v-divider>
<v-list nav dense> <v-list nav dense>
<v-list>
<v-list>
<v-list-item <v-list-item
v-for="item in items" v-for="item in items"
:key="item.id" :key="item.id"
@ -28,8 +50,14 @@
<v-list-item-title>{{ item.title }}</v-list-item-title> <v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content> </v-list-item-content>
</v-list-item> </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-list>
</v-navigation-drawer> </v-navigation-drawer>
</div> </div>
@ -40,10 +68,11 @@ export default {
name: "Header", name: "Header",
data() { data() {
return { return {
sidebar: false,
items: [ items: [
{id: 1, title: "Home", icon: "mdi-home", path: "/"}, {id: 1, title: "Home", icon: "mdi-home", path: "/"},
{id: 2, title: "Projects", icon: "mdi-text-box-multiple", path: "/projects"}, {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"},
] ]
} }
}, },

1
ui/src/main.js
View file

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

4
ui/src/store/index.js
View file

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

30
ui/src/views/Contact.vue
View file

@ -4,7 +4,9 @@
<p class="text-h4">Contact</p> <p class="text-h4">Contact</p>
<v-row> <v-row>
<v-col md="3"> <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-title class="justify-center">Email</v-card-title>
<v-card-text> <v-card-text>
@ -13,7 +15,9 @@
</v-card> </v-card>
</v-col> </v-col>
<v-col md="3"> <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-title class="justify-center">Matrix</v-card-title>
<v-card-text> <v-card-text>
@ -22,16 +26,22 @@
</v-card> </v-card>
</v-col> </v-col>
<v-col md="3"> <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-title class="justify-center">Discord</v-card-title>
<v-card-text> <v-card-text>
<a href="https://discord.com/users/692259321907773460">
Troplo#8495 Troplo#8495
</a>
</v-card-text> </v-card-text>
</v-card> </v-card>
</v-col> </v-col>
<v-col md="3"> <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-title class="justify-center">Twitter</v-card-title>
<v-card-text> <v-card-text>
@ -40,7 +50,9 @@
</v-card> </v-card>
</v-col> </v-col>
<v-col md="3"> <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-title class="justify-center">Telegram</v-card-title>
<v-card-text> <v-card-text>
@ -49,7 +61,9 @@
</v-card> </v-card>
</v-col> </v-col>
<v-col md="3"> <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-title class="justify-center">GitHub</v-card-title>
<v-card-text> <v-card-text>
@ -58,7 +72,9 @@
</v-card> </v-card>
</v-col> </v-col>
<v-col md="3"> <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-title class="justify-center">Gitea</v-card-title>
<v-card-text> <v-card-text>

23
ui/src/views/Home.vue
View file

@ -1,31 +1,18 @@
<template> <template>
<div id="home"> <div id="home">
<v-container class="text-center"> <v-container class="text-center">
<v-card elevation="12"> <v-card elevation="8" class="troplo-header rounded-xl">
<v-container> <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-container>
</v-card> </v-card>
</v-container> </v-container>
</div> </div>
</template> </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> <script>
export default { export default {
name: 'Home', name: 'Home',
} }
</script> </script>

109
ui/src/views/Projects.vue
View file

@ -4,7 +4,7 @@
<p class="justify-center text-center text-h4">Projects</p> <p class="justify-center text-center text-h4">Projects</p>
<v-row> <v-row>
<v-col md="3" v-for="(project, index) in getVisible" :key="index"> <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 <v-img
:src="getImage(project.internalName)" :src="getImage(project.internalName)"
></v-img> ></v-img>
@ -55,39 +55,6 @@
</div> </div>
</template> </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> <script>
export default { export default {
name: "Projects", name: "Projects",
@ -294,6 +261,12 @@ export default {
name: "Website", name: "Website",
internalName: "troplo-website", internalName: "troplo-website",
tags: [ tags: [
{
internalName: "active",
name: "Active",
icon: "mdi-check-circle",
color: "success"
},
{ {
internalName: "openSource", internalName: "openSource",
name: "Open Source", 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.", description: "If you want the source code to this website for whatever reason, it is available.",
visible: false, visible: true,
links: [ links: [
{ {
name: "Git Repository", 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> </script>
<style scoped>
</style>