notxia/notxia.github.io
1
0
Fork 0
mirror of https://github.com/NotXia/notxia.github.io.git synced 2025-12-14 19:01:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Changed projects as tiles

Browse Source
This commit is contained in:
Tian Cheng (Riccardo) Xia
2024-01-12 21:04:42 +01:00
parent 966ff868c9
commit 6e02cb92aa
3 changed files with 28 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/projects/ProjectCard.vue
View File

@ -1,14 +1,18 @@
<template>
<div class="border border-gray-500 dark:border-gray-300 rounded-md p-3 mx-auto w-full lg:w-2/3 xl:w-1/2">
<h3 class="text-2xl font-semibold text-center text-gray-900 dark:text-white">{{ props.title }}</h3>
<h4 v-if="props.subtitle" class="text font-semibold text-center text-gray-700 dark:text-gray-300">{{ props.subtitle }}</h4>
<div class="text-center mb-2">
<a v-for="link in props.links" :href="link.url" class="font-mono inline-block hover:underline mx-2">{{ link.label }}</a>
<div class="w-100 p-5 h-full">
<div class="border border-gray-500 dark:border-gray-300 rounded-md p-3 w-full h-full flex items-center justify-center">
<div class="w-full">
<h3 class="text-2xl font-semibold text-center text-gray-900 dark:text-white">{{ props.title }}</h3>
<h4 v-if="props.subtitle" class="text font-semibold text-center text-gray-700 dark:text-gray-300">{{ props.subtitle }}</h4>
<div class="text-center mb-2">
<a v-for="link in props.links" :href="link.url" class="font-mono inline-block hover:underline mx-2">{{ link.label }}</a>
</div>
<p class="w-full text-lg whitespace-pre-wrap mb-2 text-gray-500 dark:text-gray-400">
<slot></slot>
</p>
<img v-if="props.image" :src="props.image" alt="" class="max-w-full max-h-96 mx-auto">
</div>
</div>
<p class="text-lg whitespace-pre-wrap mb-2 text-gray-500 dark:text-gray-400">
<slot></slot>
</p>
<img :src="props.image" alt="" class="max-w-full max-h-96 mx-auto">
</div>
</template>

2
components/projects/cards/NotXiaGithubio.vue
View File

@ -5,7 +5,7 @@
{ label: 'Repository', url: 'https://github.com/NotXia/notxia.github.io' },
]">
<p v-if="!show_recursive_message">{{ $t('notxia.github.io.description') }}</p>
<p v-if="!show_recursive_message" class="text-center">{{ $t('notxia.github.io.description') }}</p>
<div class="w-full h-72 relative">
<div role="status" v-if="!iframe_loaded && !show_recursive_message" class="absolute top-0 left-0 w-full h-full flex justify-center items-center">

34
pages/projects.vue
View File

@ -4,26 +4,20 @@
<main>
<h1 class="text-5xl font-bold text-center mb-5">{{ $t("projects") }}</h1>
<h2 class="text-3xl text-center mt-10 mb-3">{{ $t("wip") }}</h2>
<div class="[&>*]:my-14 first:[&>*]:mt-8">
<NotXiaGithubio />
</div>
<h2 class="text-3xl text-center mt-10 mb-3">{{ $t("completed") }}</h2>
<div class="[&>*]:my-14 first:[&>*]:mt-8">
<TablutPlayer />
<BScThesis />
<WaveMap />
<Wirefilter />
<TweetAnalysis />
<AnimalHouse />
<PandOSplus />
<Imaging />
<MNKGame />
<Platform />
<PathfindingVisualizer />
<SortingVisualizer />
<div class="grid grid-flow-row-dense grid-cols-12 grid-rows-12 m-auto justify-center [&>*]:px-5 [&>*]:py-5">
<NotXiaGithubio class="col-span-12" />
<TablutPlayer class="lg:col-span-4 row-span-1 col-span-12" />
<BScThesis class="lg:col-span-8 row-span-1 col-span-12" />
<WaveMap class="lg:col-span-4 lg:row-span-2 col-span-12" />
<Wirefilter class="lg:col-span-4 row-span-1 col-span-12" />
<TweetAnalysis class="lg:col-span-8 row-span-1 col-span-12" />
<AnimalHouse class="lg:col-span-6 row-span-1 col-span-12" />
<PandOSplus class="lg:col-span-4 row-span-1 col-span-12" />
<Imaging class="lg:col-span-6 row-span-1 col-span-12" />
<MNKGame class="lg:col-span-4 row-span-1 col-span-12" />
<Platform class="lg:col-span-8 row-span-1 col-span-12" />
<PathfindingVisualizer class="lg:col-span-6 row-span-1 col-span-12" />
<SortingVisualizer class="lg:col-span-6 row-span-1 col-span-12" />
</div>
</main>
</template>