mirror of
https://github.com/NotXia/notxia.github.io.git
synced 2025-12-14 19:01:51 +01:00
Migration to Nuxt3
This commit is contained in:
100
pages/about.vue
Normal file
100
pages/about.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<Navbar />
|
||||
|
||||
<ScreenCenter>
|
||||
<main>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:justify-between items-center h-full">
|
||||
<div class="text-xl order-2 md:order-1 [&>*>p]:mb-2">
|
||||
<h1 class="text-5xl font-bold mb-5">{{ $t("about me") }}</h1>
|
||||
|
||||
<div v-if="current_locale === 'it'">
|
||||
<p>
|
||||
Mi chiamo
|
||||
<span data-popover-target="popover-name" class="underline decoration-dashed decoration-slate-900/70 dark:decoration-slate-50/70">Xia Tian Cheng</span>,
|
||||
spesso conosciuto come Xia (cognome) o Riccardo.
|
||||
Studio informatica all'Università di Bologna e al momento i miei interessi sono orientati verso l'analisi dati e l'intelligenza artificiale.
|
||||
</p>
|
||||
<p>
|
||||
Oltre a premere tasti sulla tastiera,
|
||||
mi piace leggere,
|
||||
sperimentare in cucina <span class="text-xs">(preferibilmente con un estintore nei paraggi)</span>
|
||||
e giocare a giochi strategici.
|
||||
</p>
|
||||
<p>
|
||||
Secondo <a class="hover:underline italic" href="https://www.16personalities.com">16Personalities</a> sono un
|
||||
<a class="font-mono hover:underline" href="https://www.16personalities.com/profiles/6b57f54bf1242">Architetto (INTJ)</a>.
|
||||
Devo dire che la descrizione è decisamente accurata.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="current_locale === 'en'">
|
||||
<p>
|
||||
My name is
|
||||
<span data-popover-target="popover-name" class="underline decoration-dashed decoration-slate-900/70 dark:decoration-slate-50/70">Xia Tian Cheng</span>,
|
||||
frequently known as Xia (surname) or Richard.
|
||||
I am a computer science student at the University of Bologna and currently my interests are focused on data analysis and artificial intelligence.
|
||||
</p>
|
||||
<p>
|
||||
Aside from pressing keys on a keyboard,
|
||||
I like reading,
|
||||
cooking <span class="text-xs">(preferably with a fire extinguisher nearby)</span>
|
||||
and playing strategic games.
|
||||
</p>
|
||||
<p>
|
||||
According to <a class="hover:underline italic" href="https://www.16personalities.com">16Personalities</a> I'm an
|
||||
<a class="font-mono hover:underline" href="https://www.16personalities.com/profiles/6b57f54bf1242">Architect (INTJ)</a>.
|
||||
I must admit that the description is quite accurate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="order-1 mb-3 ml-0 md:order-2 md:mb-0 md:ml-10">
|
||||
<ProfilePicture />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<p class="text-center text-xl">{{ $t("reading") }}</p>
|
||||
<div class="flex justify-center h-48">
|
||||
<Goodreads />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</ScreenCenter>
|
||||
|
||||
<div data-popover id="popover-name" role="tooltip" class="absolute z-10 invisible inline-block transition-opacity duration-500 opacity-0">
|
||||
<div class="text-lg px-3 py-2 bg-slate-200 dark:bg-slate-800 rounded">
|
||||
夏天成
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { initPopovers } from "flowbite";
|
||||
const { t, locale } = useI18n();
|
||||
const current_locale = ref(locale.value);
|
||||
useHead({ title: t("title_about") });
|
||||
|
||||
const my_age: ComputedRef<number> = computed((): number => {
|
||||
const today = new Date();
|
||||
const birthDate = new Date(2001, 8, 29);
|
||||
const month_diff = today.getMonth() - birthDate.getMonth();
|
||||
let age = today.getFullYear() - birthDate.getFullYear();
|
||||
if (month_diff < 0 ||
|
||||
(month_diff === 0 && today.getDate() < birthDate.getDate())) {
|
||||
age--;
|
||||
}
|
||||
return age;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
initPopovers();
|
||||
});
|
||||
|
||||
watch(locale, () => {
|
||||
current_locale.value = locale.value;
|
||||
});
|
||||
</script>
|
||||
31
pages/contacts.vue
Normal file
31
pages/contacts.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="relative z-10">
|
||||
<Navbar />
|
||||
</div>
|
||||
|
||||
<ScreenCenter>
|
||||
<main>
|
||||
<!-- <h1 class="text-3xl md:text-5xl font-bold text-center mb-5">{{ t("contacts") }}</h1> -->
|
||||
|
||||
<div class="md:flex justify-center">
|
||||
<div>
|
||||
<ContactLink label="tcxia2001@gmail.com" url="mailto:tcxia2001@gmail.com" :icon="mail_icon" alt="E-mail" />
|
||||
<ContactLink label="t.me/notxia" url="https://t.me/notxia" :icon="telegram_icon" alt="Telegram" />
|
||||
<ContactLink label="Panda#9784" url="https://discordapp.com/users/272354672969515009" :icon="discord_icon" alt="Discord" />
|
||||
<ContactLink label="linkedin.com/in/tian-cheng-xia" url="https://www.linkedin.com/in/tian-cheng-xia/" :icon="linkedin_icon" alt="LinkedIn" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</ScreenCenter>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import mail_icon from "@/assets/images/icons/mail.svg";
|
||||
import telegram_icon from "@/assets/images/icons/telegram.svg";
|
||||
import linkedin_icon from "@/assets/images/icons/linkedin.svg";
|
||||
import discord_icon from "@/assets/images/icons/discord.svg";
|
||||
|
||||
const { t } = useI18n();
|
||||
useHead({ title: t("title_contacts") });
|
||||
</script>
|
||||
26
pages/index.vue
Normal file
26
pages/index.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="relative z-10" >
|
||||
<Navbar />
|
||||
</div>
|
||||
|
||||
<ScreenCenter>
|
||||
<main>
|
||||
<div class="block md:flex justify-center items-center">
|
||||
<div class="text-center md:text-left">
|
||||
<p class="text-2xl md:text-3xl font-semibold uppercase">{{ $t("i am a") }}</p>
|
||||
<p class="text-4xl md:text-5xl font-semibold uppercase">{{ $t("cs student") }}</p>
|
||||
<p class="text-xl lowercase">{{ $t("a very accurate description of me") }}</p>
|
||||
</div>
|
||||
|
||||
<div class="w-fit mx-auto mt-5 md:m-0 md:ml-10">
|
||||
<RandomSomething />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</ScreenCenter>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n();
|
||||
useHead({ title: t("title_home") });
|
||||
</script>
|
||||
31
pages/projects.vue
Normal file
31
pages/projects.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<Navbar />
|
||||
|
||||
<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">
|
||||
<Wirefilter />
|
||||
<NotXiaGithubio />
|
||||
</div>
|
||||
|
||||
|
||||
<h2 class="text-3xl text-center mt-10 mb-3">{{ $t("completed") }}</h2>
|
||||
<div class="[&>*]:my-14 first:[&>*]:mt-8">
|
||||
<TweetAnalysis />
|
||||
<AnimalHouse />
|
||||
<PandOSplus />
|
||||
<Imaging />
|
||||
<MNKGame />
|
||||
<Platform />
|
||||
<PathfindingVisualizer />
|
||||
<SortingVisualizer />
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n();
|
||||
useHead({ title: t("title_projects") });
|
||||
</script>
|
||||
40
pages/resume.vue
Normal file
40
pages/resume.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
<div class="flex justify-center items-start mt-2 mb-6">
|
||||
<div class="w-20 mx-5">
|
||||
<a :href="$t('cv_link')" target="_blank">
|
||||
<img src="~/assets/images/icons/pdf.svg" alt="Download" class="h-10 mx-auto dark:invert">
|
||||
<p class="text-sm text-center mt-1">CV</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="w-20 mx-5">
|
||||
<a :href="$t('cv_link_color')" target="_blank">
|
||||
<img src="~/assets/images/icons/pdf.svg" alt="Download" class="h-10 mx-auto dark:invert">
|
||||
<p class="text-sm text-center mt-1">CV<span class="text-xs">, {{ $t("with_colors") }}</span></p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<div class="w-full md:w-2/3 order-1 md:order-2 md:pl-4 [&>*]:mt-8 first:[&>*]:mt-0">
|
||||
<Education />
|
||||
<Certificates />
|
||||
<Work />
|
||||
<Skills />
|
||||
<Other />
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/3 mt-5 md:mt-0 order-2 md:order-1">
|
||||
<ExperienceTimeline />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n();
|
||||
useHead({ title: t("title_resume") });
|
||||
</script>
|
||||
Reference in New Issue
Block a user