mirror of
https://github.com/ArthurDanjou/artsite.git
synced 2026-02-03 05:31:44 +01:00
Refactor: Split portfolio to projects and writings sections, and update content structure
- Renamed 'portfolio' collection to 'projects' in content configuration. - Introduced a new 'writings' collection with corresponding schema. - Updated README to reflect changes in content structure and navigation. - Removed the old portfolio page and added new pages for projects and writings. - Added multiple new project and writing markdown files with relevant content. - Updated license year to 2025. - Enhanced AppHeader for new navigation links. - Improved ProseImg component styling.
This commit is contained in:
124
app/pages/projects/[slug].vue
Normal file
124
app/pages/projects/[slug].vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<script lang="ts" setup>
|
||||
const route = useRoute()
|
||||
const { data: project } = await useAsyncData(`projects/${route.params.slug}`, () =>
|
||||
queryCollection('projects').path(`/projects/${route.params.slug}`).first())
|
||||
|
||||
const { locale } = useI18n()
|
||||
const { t } = useI18n({
|
||||
useScope: 'local',
|
||||
})
|
||||
|
||||
useSeoMeta({
|
||||
title: project.value?.title,
|
||||
description: project.value?.description,
|
||||
author: 'Arthur Danjou',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main v-if="project">
|
||||
<div class="flex">
|
||||
<NuxtLinkLocale
|
||||
class="flex items-center gap-2 mb-8 group text-sm hover:text-black dark:hover:text-white duration-300"
|
||||
to="/projects"
|
||||
>
|
||||
<UIcon
|
||||
class="group-hover:-translate-x-1 transform duration-300"
|
||||
name="i-ph-arrow-left-duotone"
|
||||
size="20"
|
||||
/>
|
||||
{{ t('back') }}
|
||||
</NuxtLinkLocale>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="flex items-end justify-between gap-2 flex-wrap">
|
||||
<h1
|
||||
class="font-bold text-3xl text-black dark:text-white"
|
||||
>
|
||||
{{ project.title }}
|
||||
</h1>
|
||||
<div
|
||||
class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
|
||||
>
|
||||
<UIcon name="ph:calendar-duotone" size="16" />
|
||||
<p>{{ useDateFormat(project.publishedAt, 'DD MMMM YYYY').value }} </p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-2 text-base">
|
||||
{{ project.description }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="project.cover"
|
||||
class="w-full rounded-md my-8"
|
||||
>
|
||||
<ProseImg
|
||||
:src="`/projects/${project.cover}`"
|
||||
label="Project cover"
|
||||
/>
|
||||
</div>
|
||||
<USeparator
|
||||
class="my-4"
|
||||
icon="i-ph-pencil-line-duotone"
|
||||
/>
|
||||
<UAlert
|
||||
v-if="locale !== 'en'"
|
||||
:description="t('alert.description')"
|
||||
:title="t('alert.title')"
|
||||
class="mb-8"
|
||||
color="red"
|
||||
icon="i-ph-warning-duotone"
|
||||
variant="outline"
|
||||
/>
|
||||
<ContentRenderer
|
||||
:value="project"
|
||||
class="!max-w-none prose dark:prose-invert"
|
||||
/>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.prose h2 a,
|
||||
.prose h3 a,
|
||||
.prose h4 a {
|
||||
@apply no-underline;
|
||||
}
|
||||
|
||||
.prose img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.katex-html {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"alert": {
|
||||
"title": "Translations alert!",
|
||||
"description": "Due to time constraints, all article translations will be available only in English. Thank you for your understanding."
|
||||
},
|
||||
"back": "Go back"
|
||||
},
|
||||
"fr": {
|
||||
"alert": {
|
||||
"title": "Attentions aux traductions!",
|
||||
"description": "Par soucis de temps, toutes les traductions des articles seront disponibles uniquement en anglais. Merci de votre compréhension."
|
||||
},
|
||||
"back": "Retourner en arrière"
|
||||
},
|
||||
"es": {
|
||||
"alert": {
|
||||
"title": "Cuidado con las traducciones!",
|
||||
"description": " Por problemas de tiempo, los artículos solo están disponibles en inglés. Gracias por vuestra comprensión.ug ñeóicula."
|
||||
},
|
||||
"back": "Volver atrás"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
92
app/pages/projects/index.vue
Normal file
92
app/pages/projects/index.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<script setup lang="ts">
|
||||
import { TAGS } from '~~/types'
|
||||
|
||||
const { t } = useI18n({
|
||||
useScope: 'local',
|
||||
})
|
||||
useSeoMeta({
|
||||
title: 'My Projects',
|
||||
description: t('description'),
|
||||
})
|
||||
|
||||
const { data: projects } = await useAsyncData('all-projects', () => {
|
||||
return queryCollection('projects')
|
||||
.order('publishedAt', 'DESC')
|
||||
.all()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="space-y-12">
|
||||
<AppTitle
|
||||
:description="t('description')"
|
||||
:title="t('title')"
|
||||
/>
|
||||
<ul class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<NuxtLink
|
||||
v-for="(project, id) in projects"
|
||||
:key="id"
|
||||
:to="project.path"
|
||||
>
|
||||
<li
|
||||
class="flex flex-col justify-between h-full border p-4 border-neutral-200 rounded-md hover:border-neutral-500 dark:border-neutral-800 dark:hover:border-neutral-600 duration-300"
|
||||
>
|
||||
<article class="space-y-2">
|
||||
<div
|
||||
class="flex flex-col gap-2"
|
||||
>
|
||||
<h1 class="font-bold text-lg text-black dark:text-white">
|
||||
{{ project.title }}
|
||||
</h1>
|
||||
<h3 class="text-md text-neutral-500 dark:text-neutral-400">
|
||||
{{ project.description }}
|
||||
</h3>
|
||||
</div>
|
||||
</article>
|
||||
<div class="flex items-center justify-between gap-2 mt-4">
|
||||
<div
|
||||
class="text-sm text-neutral-500 flex items-center gap-1"
|
||||
>
|
||||
<UIcon name="ph:calendar-duotone" size="16" />
|
||||
<p>{{ useDateFormat(project.publishedAt, 'DD MMMM YYYY').value }} </p>
|
||||
</div>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<ClientOnly>
|
||||
<UBadge
|
||||
v-for="tag in project.tags.sort((a: any, b: any) => a.localeCompare(b))"
|
||||
:key="tag"
|
||||
:color="TAGS.find(color => color.label.toLowerCase() === tag)?.color as any"
|
||||
variant="soft"
|
||||
size="sm"
|
||||
class="rounded-full"
|
||||
>
|
||||
<div class="flex gap-1 items-center">
|
||||
<UIcon :name="TAGS.find(icon => icon.label.toLowerCase() === tag)?.icon || ''" size="16" />
|
||||
<p>{{ TAGS.find(color => color.label.toLowerCase() === tag)?.label }}</p>
|
||||
</div>
|
||||
</UBadge>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</NuxtLink>
|
||||
</ul>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"title": "All my projects I have worked on, both academic and personal",
|
||||
"description": "A collection of my projects using R, Python, or web development technologies. These projects span various domains, including data analysis, machine learning, and web applications, showcasing my skills in coding, problem-solving, and project development."
|
||||
},
|
||||
"fr": {
|
||||
"title": "Tous mes projets auxquels j'ai travaillé, académiques et personnels",
|
||||
"description": "Une collection de mes projets réalisés en R, Python, ou en développement web. Ces projets couvrent divers domaines, y compris l'analyse de données, l'apprentissage automatique et les applications web, mettant en avant mes compétences en codage, résolution de problèmes et développement de projets."
|
||||
},
|
||||
"es": {
|
||||
"title": "Todos mis proyectos en los que he trabajado, académicos y personales",
|
||||
"description": "Una colección de mis proyectos realizados en R, Python o tecnologías de desarrollo web. Estos proyectos abarcan diversos campos, como análisis de datos, aprendizaje automático y aplicaciones web, mostrando mis habilidades en programación, resolución de problemas y desarrollo de proyectos."
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
Reference in New Issue
Block a user