1.0.8
This commit is contained in:
parent
6467a02001
commit
282c506af7
10 changed files with 114 additions and 80 deletions
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "troplo-site",
|
||||
"version": "1.0.7",
|
||||
"version": "1.0.8",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
|
|
|
@ -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
57
src/App.vue
|
@ -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 {
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 307 KiB After Width: | Height: | Size: 496 KiB |
65
src/assets/style.css
Normal file
65
src/assets/style.css
Normal 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;
|
||||
}
|
|
@ -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" }
|
||||
]
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -1,11 +1,35 @@
|
|||
<template>
|
||||
<div id="projects">
|
||||
<v-container>
|
||||
<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"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue