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

1.0.8

Browse source
This commit is contained in:
Troplo 2022-06-30 20:56:10 +10:00
parent 6467a02001
commit 282c506af7
10 changed files with 114 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "troplo-site",
"version": "1.0.7",
"version": "1.0.8",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",

2
public/index.html
View file

@ -13,7 +13,7 @@
<meta name="language" content="English">
<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 href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;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>

57
src/App.vue
View file

@ -6,64 +6,7 @@
</v-main>
</v-app>
</template>
<style>
.troplo-nav {
font-family: "Roboto", sans-serif;
}
.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 !important;
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;
border-color: #151515 !important;
color: #ffffff;
}
.card {
overflow: hidden;
}
.theme--dark.v-card {
background-color: #151515 !important;
}
/* Works on Firefox */
* {
scrollbar-width: thin;
scrollbar-color: black #151515;
}
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: #0e0e0e;
}
*::-webkit-scrollbar-thumb {
background-color: #151515;
border-radius: 20px;
border: 3px solid #151515;
}
</style>
<script>
import Header from "./components/Header.vue"
export default {

BIN
src/assets/images/compass-vue.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 307 KiB

After

Width:  |  Height:  |  Size: 496 KiB

65
src/assets/style.css Normal file
View file

@ -0,0 +1,65 @@
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.troplo-header {
-webkit-font-smoothing: antialiased !important;
background: linear-gradient(-45deg, #0179f3, #0190ea) !important;
animation: gradient 15s ease infinite;
}
.troplo-header-title {
-webkit-font-smoothing: antialiased !important;
font-weight: 450;
elevation: 0 !important;
font-size: 15rem;
font-style: italic;
text-shadow: none !important;
color: linear-gradient(#0179f3, #0190ea) !important;
-webkit-background-clip: text;
}
.troplo-title {
font-weight: 500;
background: linear-gradient(#0179f3, #0190ea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.theme--dark.v-sheet {
background-color: #151515 !important;
border-color: #151515 !important;
color: #ffffff;
}
.card {
overflow: hidden;
}
.theme--dark.v-card {
background-color: #151515 !important;
}
/* Works on Firefox */
* {
scrollbar-width: thin;
scrollbar-color: black #151515;
font-family: "Inter", sans-serif !important;
}
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: #0e0e0e;
}
*::-webkit-scrollbar-thumb {
background-color: #151515;
border-radius: 20px;
border: 3px solid #151515;
}

8
src/components/Header.vue
View file

@ -9,7 +9,7 @@
class="troplo-title"
@click="$router.push('/')"
style="cursor: pointer"
>Troplo</v-toolbar-title
>Troplo's Website</v-toolbar-title
>
<v-spacer></v-spacer>
<v-list v-if="!$vuetify.breakpoint.mobile">
@ -81,12 +81,6 @@ export default {
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" }
]
}

2
src/main.js
View file

@ -4,7 +4,7 @@ import router from "./router"
import vuetify from "./plugins/vuetify"
import store from "./store"
import VueMatomo from "vue-matomo"
import "./assets/style.css"
Vue.config.productionTip = false
Vue.use(VueMatomo, {
// Configure your matomo server and site by providing

18
src/router/index.js
View file

@ -4,20 +4,28 @@ import VueRouter from "vue-router"
Vue.use(VueRouter)
const routes = [
/*{
path: "/",
name: "Home",
component: () => import(/* webpackChunkName: "home" *//* "../views/Home.vue")
},*/
{
path: "/",
name: "Home",
component: () => import(/* webpackChunkName: "home" */ "../views/Home.vue")
},
{
path: "/projects",
name: "Projects",
// 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: "projects" */ "../views/Projects.vue")
},
{
path: "/projects",
name: "Projects",
redirect: "/",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
},
{
path: "/contact",
name: "Contact",

4
src/views/Contact.vue
View file

@ -45,8 +45,8 @@ export default {
id: 2,
icon: "mdi-matrix",
title: "Matrix",
displayName: "@troplo:troplo.com",
url: "https://matrix.to/#/@troplo:troplo.com?via=troplo.com"
displayName: "@troplo:flowinity.com",
url: "https://matrix.to/#/@troplo:flowinity.com?via=flowinity.com"
},
{
id: 3,

34
src/views/Projects.vue
View file

@ -1,11 +1,35 @@
<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-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)"
>
T
</div>
</v-container>
</v-card>
<p class="justify-center text-center text-h4">My Projects</p>
<v-row>
<v-col md="3" v-for="(project, index) in getVisible" :key="index">
<v-card class="rounded-xl troplo-p" elevation="8">
<v-img :src="getImage(project.internalName)"></v-img>
<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-hover>
<v-card-title>{{ project.name }}</v-card-title>
@ -70,7 +94,7 @@ export default {
data() {
return {
projects: [
{
/* {
id: 1,
name: "Kaverti",
internalName: "kaverti",
@ -99,10 +123,10 @@ export default {
"A 3D sandbox game, and social avatar platform written in Express and Vue.js.",
visible: true,
links: []
},
},*/
{
id: 2,
name: "Jays.host",
name: "Jet.pics",
internalName: "proj01",
tags: [
{
@ -131,7 +155,7 @@ export default {
links: [
{
name: "Website",
link: "https://jays.host"
link: "https://jet.pics"
}
]
},