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

21
ui/public/index.html
View file

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

22
ui/src/App.vue
View file

@ -7,8 +7,26 @@
</v-app>
</template>
<style>
.troploGradient {
font-weight: 500;background: -webkit-radial-gradient(#0179f3, #0190ea);-webkit-background-clip: text;-webkit-text-fill-color: transparent
.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;
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;

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

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

@ -1,35 +1,63 @@
<template>
<div id="header">
<v-app-bar color="dark" floating app dense>
<v-app-bar-nav-icon v-if="$vuetify.breakpoint.mobile && $store.state.user.username" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<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-toolbar
dark
>
<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-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
floating
color="dark"
app
v-model="sidebar"
v-if="$vuetify.breakpoint.mobile"
expand>
<v-divider></v-divider>
<v-list nav dense>
<v-list>
<v-list>
<v-list-item
v-for="item in items"
:key="item.id"
link
:to="item.path"
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item
v-for="item in items"
:key="item.id"
link
:to="item.path"
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-list>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item
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-navigation-drawer>
</div>
@ -40,10 +68,11 @@ export default {
name: "Header",
data() {
return {
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"}
{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 vuetify from './plugins/vuetify'
import store from './store'
Vue.config.productionTip = false
new Vue({

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

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

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

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

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

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

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

@ -4,7 +4,7 @@
<p class="justify-center text-center text-h4">Projects</p>
<v-row>
<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
:src="getImage(project.internalName)"
></v-img>
@ -55,39 +55,6 @@
</div>
</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>
export default {
name: "Projects",
@ -294,6 +261,12 @@ export default {
name: "Website",
internalName: "troplo-website",
tags: [
{
internalName: "active",
name: "Active",
icon: "mdi-check-circle",
color: "success"
},
{
internalName: "openSource",
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.",
visible: false,
visible: true,
links: [
{
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>
<style scoped>
</style>