update
This commit is contained in:
parent
2539f257ef
commit
f75ffac87f
5 changed files with 53 additions and 160 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name": "ui",
|
"name": "troplo-site",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
||||||
|
|
@ -1,151 +0,0 @@
|
||||||
<template>
|
|
||||||
<v-container>
|
|
||||||
<v-row class="text-center">
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-img
|
|
||||||
:src="require('../assets/logo.svg')"
|
|
||||||
class="my-3"
|
|
||||||
contain
|
|
||||||
height="200"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col class="mb-4">
|
|
||||||
<h1 class="display-2 font-weight-bold mb-3">
|
|
||||||
Welcome to Vuetify
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="subheading font-weight-regular">
|
|
||||||
For help and collaboration with other Vuetify developers,
|
|
||||||
<br>please join our online
|
|
||||||
<a
|
|
||||||
href="https://community.vuetifyjs.com"
|
|
||||||
target="_blank"
|
|
||||||
>Discord Community</a>
|
|
||||||
</p>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
class="mb-5"
|
|
||||||
cols="12"
|
|
||||||
>
|
|
||||||
<h2 class="headline font-weight-bold mb-3">
|
|
||||||
What's next?
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<v-row justify="center">
|
|
||||||
<a
|
|
||||||
v-for="(next, i) in whatsNext"
|
|
||||||
:key="i"
|
|
||||||
:href="next.href"
|
|
||||||
class="subheading mx-3"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{{ next.text }}
|
|
||||||
</a>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
class="mb-5"
|
|
||||||
cols="12"
|
|
||||||
>
|
|
||||||
<h2 class="headline font-weight-bold mb-3">
|
|
||||||
Important Links
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<v-row justify="center">
|
|
||||||
<a
|
|
||||||
v-for="(link, i) in importantLinks"
|
|
||||||
:key="i"
|
|
||||||
:href="link.href"
|
|
||||||
class="subheading mx-3"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{{ link.text }}
|
|
||||||
</a>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
class="mb-5"
|
|
||||||
cols="12"
|
|
||||||
>
|
|
||||||
<h2 class="headline font-weight-bold mb-3">
|
|
||||||
Ecosystem
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<v-row justify="center">
|
|
||||||
<a
|
|
||||||
v-for="(eco, i) in ecosystem"
|
|
||||||
:key="i"
|
|
||||||
:href="eco.href"
|
|
||||||
class="subheading mx-3"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{{ eco.text }}
|
|
||||||
</a>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'HelloWorld',
|
|
||||||
|
|
||||||
data: () => ({
|
|
||||||
ecosystem: [
|
|
||||||
{
|
|
||||||
text: 'vuetify-loader',
|
|
||||||
href: 'https://github.com/vuetifyjs/vuetify-loader',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'github',
|
|
||||||
href: 'https://github.com/vuetifyjs/vuetify',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'awesome-vuetify',
|
|
||||||
href: 'https://github.com/vuetifyjs/awesome-vuetify',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
importantLinks: [
|
|
||||||
{
|
|
||||||
text: 'Documentation',
|
|
||||||
href: 'https://vuetifyjs.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Chat',
|
|
||||||
href: 'https://community.vuetifyjs.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Made with Vuetify',
|
|
||||||
href: 'https://madewithvuejs.com/vuetify',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Twitter',
|
|
||||||
href: 'https://twitter.com/vuetifyjs',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Articles',
|
|
||||||
href: 'https://medium.com/vuetify',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
whatsNext: [
|
|
||||||
{
|
|
||||||
text: 'Explore components',
|
|
||||||
href: 'https://vuetifyjs.com/components/api-explorer',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Select a layout',
|
|
||||||
href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Frequently Asked Questions',
|
|
||||||
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -48,6 +48,24 @@
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
<v-col md="3">
|
||||||
|
<v-card>
|
||||||
|
<v-card-title class="justify-center">GitHub</v-card-title>
|
||||||
|
|
||||||
|
<v-card-text>
|
||||||
|
<a href="https://github.com/Troplo">Troplo</a>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
<v-col md="3">
|
||||||
|
<v-card>
|
||||||
|
<v-card-title class="justify-center">Gitea</v-card-title>
|
||||||
|
|
||||||
|
<v-card-text>
|
||||||
|
<a href="https://git.troplo.com/Troplo">Troplo</a>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,24 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="home">
|
<div id="home">
|
||||||
<v-parallax class="troploGradient">
|
<v-container class="text-center">
|
||||||
<p class="text-h2 normal">asdasd</p>
|
<v-card elevation="12">
|
||||||
</v-parallax>
|
<v-container>
|
||||||
|
<p class="troploGradient">Troplo</p>
|
||||||
|
<p class="text-h4">Full-stack web developer.</p>
|
||||||
|
</v-container>
|
||||||
|
</v-card>
|
||||||
|
</v-container>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.troploGradient {
|
.troploGradient{
|
||||||
background: -webkit-radial-gradient(#0179f3, #0190ea)
|
font-size: 300px;
|
||||||
|
font-style: italic;
|
||||||
|
background:-webkit-radial-gradient(#0179f3, #0190ea);
|
||||||
|
-webkit-background-clip:text
|
||||||
}
|
}
|
||||||
|
|
||||||
.normal {
|
.normal {
|
||||||
font-color: #ffffff
|
font-color: #ffffff
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@
|
||||||
<v-container>
|
<v-container>
|
||||||
<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 projects" :key="index">
|
<v-col md="3" v-for="(project, index) in getVisible" :key="index">
|
||||||
<v-card>
|
<v-card elevation="8">
|
||||||
<v-img
|
<v-img
|
||||||
:src="getImage(project.internalName)"
|
:src="getImage(project.internalName)"
|
||||||
></v-img>
|
></v-img>
|
||||||
|
|
@ -26,6 +26,7 @@
|
||||||
<v-chip
|
<v-chip
|
||||||
v-for="tag in project.tags"
|
v-for="tag in project.tags"
|
||||||
:key="tag.id"
|
:key="tag.id"
|
||||||
|
:href="tag.link"
|
||||||
:color="tag.color"
|
:color="tag.color"
|
||||||
>
|
>
|
||||||
<v-icon>{{tag.icon}}</v-icon><template v-if="tag.icon"> </template>
|
<v-icon>{{tag.icon}}</v-icon><template v-if="tag.icon"> </template>
|
||||||
|
|
@ -114,11 +115,13 @@ export default {
|
||||||
name: "Vue",
|
name: "Vue",
|
||||||
icon: "mdi-vuejs",
|
icon: "mdi-vuejs",
|
||||||
color: "#42b883",
|
color: "#42b883",
|
||||||
|
link: "https://vuejs.org"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
internalName: "express",
|
internalName: "express",
|
||||||
name: "Express",
|
name: "Express",
|
||||||
icon: "mdi-nodejs",
|
icon: "mdi-nodejs",
|
||||||
|
link: "https://expressjs.com"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
description: "A 3D sandbox game, and social avatar platform written in Express and Vue.js.",
|
description: "A 3D sandbox game, and social avatar platform written in Express and Vue.js.",
|
||||||
|
|
@ -149,11 +152,13 @@ export default {
|
||||||
name: "Vue",
|
name: "Vue",
|
||||||
icon: "mdi-vuejs",
|
icon: "mdi-vuejs",
|
||||||
color: "#42b883",
|
color: "#42b883",
|
||||||
|
link: "https://vuejs.org"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
internalName: "express",
|
internalName: "express",
|
||||||
name: "Express",
|
name: "Express",
|
||||||
icon: "mdi-nodejs",
|
icon: "mdi-nodejs",
|
||||||
|
link: "https://expressjs.com"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
description: "An invite only file uploading service written in Express and Vue.js.",
|
description: "An invite only file uploading service written in Express and Vue.js.",
|
||||||
|
|
@ -184,12 +189,14 @@ export default {
|
||||||
name: "Vue",
|
name: "Vue",
|
||||||
icon: "mdi-vuejs",
|
icon: "mdi-vuejs",
|
||||||
color: "#42b883",
|
color: "#42b883",
|
||||||
|
link: "https://vuejs.org"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
internalName: "crystal",
|
internalName: "crystal",
|
||||||
color: "black",
|
color: "black",
|
||||||
name: "Crystal",
|
name: "Crystal",
|
||||||
icon: "mdi-language-ruby",
|
icon: "mdi-language-ruby",
|
||||||
|
link: "https://crystal-lang.org"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
description: "EPUB reader written in Crystal and Vue.js.",
|
description: "EPUB reader written in Crystal and Vue.js.",
|
||||||
|
|
@ -215,11 +222,13 @@ export default {
|
||||||
name: "Vue",
|
name: "Vue",
|
||||||
icon: "mdi-vuejs",
|
icon: "mdi-vuejs",
|
||||||
color: "#42b883",
|
color: "#42b883",
|
||||||
|
link: "https://vuejs.org"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
internalName: "adonis",
|
internalName: "adonis",
|
||||||
name: "Adonis.JS",
|
name: "Adonis.JS",
|
||||||
icon: "mdi-nodejs",
|
icon: "mdi-nodejs",
|
||||||
|
link: "https://adonisjs.com"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
description: "Helping create the brand new website for Polytoria, a 3D sandbox platform.",
|
description: "Helping create the brand new website for Polytoria, a 3D sandbox platform.",
|
||||||
|
|
@ -250,12 +259,14 @@ export default {
|
||||||
name: "Vue",
|
name: "Vue",
|
||||||
icon: "mdi-vuejs",
|
icon: "mdi-vuejs",
|
||||||
color: "#42b883",
|
color: "#42b883",
|
||||||
|
link: "https://vuejs.org"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
internalName: "crystal",
|
internalName: "crystal",
|
||||||
color: "black",
|
color: "black",
|
||||||
name: "Crystal",
|
name: "Crystal",
|
||||||
icon: "mdi-language-ruby",
|
icon: "mdi-language-ruby",
|
||||||
|
link: "https://crystal-lang.org"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
description: "Self hostable, and open source file uploading service created to be performant, and modular.\nName not finalized.",
|
description: "Self hostable, and open source file uploading service created to be performant, and modular.\nName not finalized.",
|
||||||
|
|
@ -293,10 +304,11 @@ export default {
|
||||||
name: "Vue",
|
name: "Vue",
|
||||||
icon: "mdi-vuejs",
|
icon: "mdi-vuejs",
|
||||||
color: "#42b883",
|
color: "#42b883",
|
||||||
|
link: "https://vuejs.org"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
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: true,
|
visible: false,
|
||||||
links: [
|
links: [
|
||||||
{
|
{
|
||||||
name: "Git Repository",
|
name: "Git Repository",
|
||||||
|
|
@ -311,6 +323,11 @@ export default {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
getVisible() {
|
||||||
|
return this.projects.filter(i => i.visible)
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getImage(image) {
|
getImage(image) {
|
||||||
try {
|
try {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue