This commit is contained in:
Troplo 2021-11-06 00:40:51 +11:00
parent 2539f257ef
commit f75ffac87f
5 changed files with 53 additions and 160 deletions

View file

@ -1,5 +1,5 @@
{
"name": "ui",
"name": "troplo-site",
"version": "1.0.0",
"private": true,
"scripts": {

View file

@ -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>

View file

@ -48,6 +48,24 @@
</v-card-text>
</v-card>
</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-container>
</div>

View file

@ -1,15 +1,24 @@
<template>
<div id="home">
<v-parallax class="troploGradient">
<p class="text-h2 normal">asdasd</p>
</v-parallax>
<v-container class="text-center">
<v-card elevation="12">
<v-container>
<p class="troploGradient">Troplo</p>
<p class="text-h4">Full-stack web developer.</p>
</v-container>
</v-card>
</v-container>
</div>
</template>
<style>
.troploGradient {
background: -webkit-radial-gradient(#0179f3, #0190ea)
.troploGradient{
font-size: 300px;
font-style: italic;
background:-webkit-radial-gradient(#0179f3, #0190ea);
-webkit-background-clip:text
}
.normal {
font-color: #ffffff
}

View file

@ -3,8 +3,8 @@
<v-container>
<p class="justify-center text-center text-h4">Projects</p>
<v-row>
<v-col md="3" v-for="(project, index) in projects" :key="index">
<v-card>
<v-col md="3" v-for="(project, index) in getVisible" :key="index">
<v-card elevation="8">
<v-img
:src="getImage(project.internalName)"
></v-img>
@ -26,6 +26,7 @@
<v-chip
v-for="tag in project.tags"
:key="tag.id"
:href="tag.link"
:color="tag.color"
>
<v-icon>{{tag.icon}}</v-icon><template v-if="tag.icon">&nbsp;</template>
@ -114,11 +115,13 @@ export default {
name: "Vue",
icon: "mdi-vuejs",
color: "#42b883",
link: "https://vuejs.org"
},
{
internalName: "express",
name: "Express",
icon: "mdi-nodejs",
link: "https://expressjs.com"
},
],
description: "A 3D sandbox game, and social avatar platform written in Express and Vue.js.",
@ -149,11 +152,13 @@ export default {
name: "Vue",
icon: "mdi-vuejs",
color: "#42b883",
link: "https://vuejs.org"
},
{
internalName: "express",
name: "Express",
icon: "mdi-nodejs",
link: "https://expressjs.com"
},
],
description: "An invite only file uploading service written in Express and Vue.js.",
@ -184,12 +189,14 @@ export default {
name: "Vue",
icon: "mdi-vuejs",
color: "#42b883",
link: "https://vuejs.org"
},
{
internalName: "crystal",
color: "black",
name: "Crystal",
icon: "mdi-language-ruby",
link: "https://crystal-lang.org"
},
],
description: "EPUB reader written in Crystal and Vue.js.",
@ -215,11 +222,13 @@ export default {
name: "Vue",
icon: "mdi-vuejs",
color: "#42b883",
link: "https://vuejs.org"
},
{
internalName: "adonis",
name: "Adonis.JS",
icon: "mdi-nodejs",
link: "https://adonisjs.com"
},
],
description: "Helping create the brand new website for Polytoria, a 3D sandbox platform.",
@ -250,12 +259,14 @@ export default {
name: "Vue",
icon: "mdi-vuejs",
color: "#42b883",
link: "https://vuejs.org"
},
{
internalName: "crystal",
color: "black",
name: "Crystal",
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.",
@ -293,10 +304,11 @@ export default {
name: "Vue",
icon: "mdi-vuejs",
color: "#42b883",
link: "https://vuejs.org"
},
],
description: "If you want the source code to this website for whatever reason, it is available.",
visible: true,
visible: false,
links: [
{
name: "Git Repository",
@ -311,6 +323,11 @@ export default {
]
}
},
computed: {
getVisible() {
return this.projects.filter(i => i.visible)
}
},
methods: {
getImage(image) {
try {