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

Migration to Nuxt3

Browse Source
This commit is contained in:
Tian Cheng (Riccardo) Xia
2023-04-30 18:36:39 +02:00
parent ed2e1824c5
commit 0480b99865
170 changed files with 13890 additions and 3699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/resume/ActivityParagraph.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<div class="md:ml-2 mt-4">
<div class="flex justify-between">
<h3 class="text-xl font-semibold tracking-wide">{{ props.title }}</h3>
<div class="text-right text-gray-500 dark:text-gray-400">{{ props.right_text }}</div>
</div>
<div class="leading-5 text-gray-500 dark:text-gray-400">{{ props.subtitle }}</div>
<div class="mt-1 whitespace-pre-wrap">
<slot></slot>
</div>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
title: String,
subtitle: String,
right_text: String
});
</script>

100
components/resume/ExperienceTimeline.vue Normal file
View File

@ -0,0 +1,100 @@
<template>
<div class="flex h-full justify-center relative">
<div class="absolute top-0 left-0 w-full">
<div data-tooltip-target="tooltip-future" class="relative w-6 h-2 mx-auto z-50" @mouseover="startArchievementTimer" @mouseleave="stopAchievementTimer">
</div>
<div id="tooltip-future" role="tooltip"
class="absolute z-10 invisible inline-block px-2 py-1 text-xs font-medium transition-opacity duration-1000 rounded-lg opacity-0 tooltip">
{{ $t("future") }}
</div>
</div>
<div class="w-full timeline-height">
<Timeline
:right="[
{
title: $t('diploma'), time_label: '2015 - 2020',
description: $t('aldini'),
start: new Date(2015, september, 1), end: new Date(2020, june, 1)
},
{
title: $t('bs in cs'), time_label: '2020 - 2023',
description: $t('unibo'),
start: new Date(2020, september, 1), end: new Date(), current: true
}
]"
:left="[
{
title: $t('pcto toyota'), time_label: `${$t('m_12')} 2019 | ${$t('m_7')} 2019 | ${$t('m_2')} 2019`,
description: 'Toyota Material Handling Manufacturing Italy',
start: new Date(2019, february, 1), end: new Date(2019, december, 1)
},
{
title: 'CS50’s Introduction to AI with Python', time_label: '2022',
description: 'HarvardX',
start: new Date(2022, september, 1), end: new Date(2022, september, 1)
},
{
title: 'CISCO: IT Essentials', time_label: '2018',
description: 'CISCO Networking Academy',
start: new Date(2018, september, 1), end: new Date(2018, september, 1)
}
]" />
</div>
</div>
<p class="text-center text-xs text-gray-400 dark:text-slate-600">{{ $t("like timelines") }}</p>
</template>
<script setup lang="ts">
import { initTooltips } from "flowbite";
const january = 0, february = 1, march = 2, april = 3, may = 4, june = 5, july = 6, august = 7, september = 8, october = 9, november = 10, december = 11;
onMounted(() => {
initTooltips();
});
let achievement_timer:NodeJS.Timeout|null = null;
function startArchievementTimer() {
achievement_timer = setTimeout(() => {
addFoundEasterEgg('future');
achievement_timer = null;
}, 500);
}
function stopAchievementTimer() {
if (achievement_timer) {
clearTimeout(achievement_timer);
}
}
</script>
<style scoped>
/* Extra small devices */
@media only screen and (max-width: 600px) {
.timeline-height { min-height: 90rem; }
}
/* Small devices */
@media only screen and (min-width: 600px) {
.timeline-height { min-height: 80rem; }
}
/* Medium devices */
@media only screen and (min-width: 768px) {
.timeline-height { min-height: 70rem; }
}
/* Large devices */
@media only screen and (min-width: 992px) {
.timeline-height { min-height: 60rem; }
}
/* Extra large devices */
@media only screen and (min-width: 1200px) {
.timeline-height { min-height: 60rem; }
}
</style>

19
components/resume/ProgrammingLogo.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div class="inline-block">
<div class="flex items-center">
<img :src="props.logo" alt="" :class="`h-5 mr-1 ${props.needInvert ? 'dark:invert' : ''}`">
{{ props.language }}
</div>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
language: String,
logo: String,
needInvert: Boolean
});
</script>

14
components/resume/sections/Certificates.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div>
<h2 class="text-4xl font-bold tracking-wide">{{ $t("certificates") }}</h2>
<ActivityParagraph title="CS50’s Introduction to AI with Python" subtitle="HarvardX" right_text="2022">
<a class="font-mono hover:underline" href="https://certificates.cs50.io/bb09e788-f9da-4055-8645-aba7ef163683.pdf?size=a4">{{ $t("link to certificate") }}</a>
<p>{{ $t("cs50 ai description") }}</p>
</ActivityParagraph>
<ActivityParagraph title="CISCO: IT Essentials" subtitle="CISCO Networking Academy" right_text="2018">
{{ $t("cisco it essentials description") }}
</ActivityParagraph>
</div>
</template>

12
components/resume/sections/Education.vue Normal file
View File

@ -0,0 +1,12 @@
<template>
<div>
<h2 class="text-4xl font-bold tracking-wide">{{ $t("education") }}</h2>
<ActivityParagraph :title="$t('bs in cs')" :subtitle="$t('unibo')" :right_text="`2020 - ${$t('present')}`">
</ActivityParagraph>
<ActivityParagraph :title="$t('diploma')" :subtitle="$t('aldini')" right_text="2015 - 2020">
{{ $t("final degree") }}: 100/100 {{ $t("with honors") }}
</ActivityParagraph>
</div>
</template>

13
components/resume/sections/Other.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<div>
<h2 class="text-4xl font-bold tracking-wide">{{ $t("other") }}</h2>
<ActivityParagraph :title="$t('ois')" :subtitle="$t('aldini')" right_text="2017-18 | 2018-19 | 2019-20">
{{ $t("ois description") }}
</ActivityParagraph>
<ActivityParagraph title="MAST Academy: Expeditions" :subtitle="$t('MAST foundation')" right_text="2018">
{{ $t("MAST expeditions description") }}
</ActivityParagraph>
</div>
</template>

108
components/resume/sections/Skills.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<div class="[&_li]:mr-4">
<h2 class="text-4xl font-bold tracking-wide">{{ $t("skills") }}</h2>
<ActivityParagraph :title="$t('data analysis')">
<ul class="flex flex-wrap items-center">
<li><ProgrammingLogo :logo="python_logo" language="Python" /></li>
<li><ProgrammingLogo :logo="database_logo" language="SQL" needInvert /></li>
<li><ProgrammingLogo :logo="mongo_logo" language="MongoDB" /></li>
</ul>
<ul class="flex flex-wrap items-center">
<li><ProgrammingLogo :logo="numpy_logo" language="Numpy" /></li>
<li><ProgrammingLogo :logo="pandas_logo" language="Pandas" /></li>
</ul>
<ul class="flex flex-wrap items-center">
<li><ProgrammingLogo :logo="matplotlib_logo" language="Matplotlib" /></li>
<li><ProgrammingLogo :logo="seaborn_logo" language="Seaborn" /></li>
</ul>
<ul class="flex flex-wrap items-center">
<li><ProgrammingLogo :logo="scikitlearn_logo" language="Scikit-learn" /></li>
<li><ProgrammingLogo :logo="tensorflow_logo" language="Tensorflow" /></li>
<li><ProgrammingLogo :logo="keras_logo" language="Keras" /></li>
</ul>
<!-- <ul class="flex flex-wrap items-center">
<li><ProgrammingLogo :logo="knime_logo" language="KNIME" /></li>
</ul> -->
</ActivityParagraph>
<ActivityParagraph :title="$t('devops')">
<ul class="flex flex-wrap items-center">
<li><ProgrammingLogo :logo="docker_logo" language="Docker" /></li>
</ul>
<ul class="flex flex-wrap items-center">
<li><ProgrammingLogo :logo="ansible_logo" language="Ansible" /></li>
</ul>
<ul class="flex flex-wrap items-center">
<li><ProgrammingLogo :logo="jenkins_logo" language="Jenkins" /></li>
<li><ProgrammingLogo :logo="gitlab_runners_logo" language="Gitlab Runner" /></li>
<li><ProgrammingLogo :logo="github_actions_logo" language="Github Actions" /></li>
</ul>
</ActivityParagraph>
<ActivityParagraph :title="$t('web development')">
<ul class="flex flex-wrap items-center">
<li><ProgrammingLogo :logo="nodejs_logo" language="NodeJS" /></li>
<li><ProgrammingLogo :logo="php_logo" language="PHP" /></li>
<!-- <li><ProgrammingLogo :logo="nginx_logo" language="Nginx" /></li> -->
</ul>
<ul class="flex flex-wrap items-center">
<li><ProgrammingLogo :logo="react_logo" language="React" /></li>
<li><ProgrammingLogo :logo="vue_logo" language="Vue" /></li>
<li><ProgrammingLogo :logo="nuxt_logo" language="Nuxt" /></li>
</ul>
<!-- <ul class="flex flex-wrap items-center">
<li><ProgrammingLogo :logo="html_logo" language="HTML" /></li>
<li><ProgrammingLogo :logo="css_logo" language="CSS" /></li>
<li><ProgrammingLogo :logo="js_logo" language="Javascript" /></li>
</ul> -->
<!-- <p>Bootstrap Tailwind</p> -->
</ActivityParagraph>
<ActivityParagraph :title="$t('other programming languages')">
<ul class="flex flex-wrap items-center">
<li><ProgrammingLogo :logo="c_logo" language="C" /></li>
<li><ProgrammingLogo :logo="cpp_logo" language="C++" /></li>
<li><ProgrammingLogo :logo="java_logo" language="Java" /></li>
<li><ProgrammingLogo :logo="cpu_logo" language="Assembly x86" needInvert /></li>
</ul>
</ActivityParagraph>
</div>
</template>
<script setup lang="ts">
import nodejs_logo from "@/assets/images/icons/nodejs.svg";
import php_logo from "@/assets/images/icons/php.svg";
import nginx_logo from "@/assets/images/icons/nginx.svg";
import html_logo from "@/assets/images/icons/html.svg";
import css_logo from "@/assets/images/icons/css.svg";
import js_logo from "@/assets/images/icons/js.svg";
import react_logo from "@/assets/images/icons/react.svg";
import vue_logo from "@/assets/images/icons/vue.svg";
import nuxt_logo from "@/assets/images/icons/nuxt.svg";
import docker_logo from "@/assets/images/icons/docker.svg";
import ansible_logo from "@/assets/images/icons/ansible.svg";
import jenkins_logo from "@/assets/images/icons/jenkins.svg";
import gitlab_runners_logo from "@/assets/images/icons/gitlab.svg";
import github_actions_logo from "@/assets/images/icons/github-actions.svg";
import numpy_logo from "@/assets/images/icons/numpy.svg";
import pandas_logo from "@/assets/images/icons/pandas.svg";
import matplotlib_logo from "@/assets/images/icons/matplotlib.svg";
import seaborn_logo from "@/assets/images/icons/seaborn.svg";
import scikitlearn_logo from "@/assets/images/icons/scikitlearn.svg";
import tensorflow_logo from "@/assets/images/icons/tensorflow.svg";
import keras_logo from "@/assets/images/icons/keras.svg";
import knime_logo from "@/assets/images/icons/knime.svg";
import database_logo from "@/assets/images/icons/database.svg";
import mongo_logo from "@/assets/images/icons/mongo.svg";
import c_logo from "@/assets/images/icons/c.svg";
import cpp_logo from "@/assets/images/icons/cpp.svg";
import java_logo from "@/assets/images/icons/java.svg";
import python_logo from "@/assets/images/icons/python.svg";
import cpu_logo from "@/assets/images/icons/cpu.svg";
</script>

10
components/resume/sections/Work.vue Normal file
View File

@ -0,0 +1,10 @@
<template>
<div>
<h2 class="text-4xl font-bold tracking-wide">{{ $t("working experience") }}</h2>
<ActivityParagraph :title="$t('pcto toyota')" subtitle="Toyota Material Handling Manufacturing Italy"
:right_text="`${$t('december')} 2019 | ${$t('july')} 2019 | ${$t('february')} 2019`">
{{ $t("pcto toyota description") }}
</ActivityParagraph>
</div>
</template>