update
This commit is contained in:
parent
f75ffac87f
commit
fd3e0f6b36
11 changed files with 186 additions and 103 deletions
|
|
@ -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>
|
||||
</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>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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
BIN
ui/src/assets/images/kaverti.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
BIN
ui/src/assets/images/troplo-plex.png
Normal file
BIN
ui/src/assets/images/troplo-plex.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
BIN
ui/src/assets/images/troplo-website.png
Normal file
BIN
ui/src/assets/images/troplo-website.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 571 KiB |
|
|
@ -1,19 +1,41 @@
|
|||
<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"
|
||||
|
|
@ -28,8 +50,14 @@
|
|||
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-list>
|
||||
<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"},
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
export default {
|
||||
name: 'Home',
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in a new issue