Files
portfolio/src/composables/useProjects.ts
T
Mr¤KayJayDee 06172aae62 feat(gallery): ajout d'un modal de galerie et de nouvelles images
- Création du composant GalleryModal pour afficher les images en plein écran avec navigation.
- Ajout de styles CSS pour le modal de galerie.
- Intégration de la logique de gestion de la galerie dans le composable useGallery.
- Ajout de nouvelles images WebP pour le projet FlowBoard.
- Mise à jour des pages Home et ProjectDetail pour utiliser le nouveau composant de galerie.
2025-06-23 00:20:16 +02:00

128 lines
3.8 KiB
TypeScript

import { computed } from 'vue'
import { useI18n } from '@/composables/useI18n'
import type { Project } from '@/types'
// Base project data without translations
const baseProjects: Omit<Project, 'title' | 'description' | 'longDescription'>[] = [
{
id: 'virtual-tour',
image: '@/assets/images/virtualtour.webp',
technologies: ['Vue.js', 'Three.js', 'WebGL', 'Node.js'],
category: 'Web Development',
buttons: [
{
title: 'Visit',
link: 'https://www.lycee-chabanne16.fr/visites/BACSN/index.htm'
}
],
date: '2022'
},
{
id: 'xinko',
image: '@/assets/images/xinko.webp',
technologies: ['Node.js', 'Discord.js', 'MongoDB', 'Express'],
category: 'Bot Development',
featured: true,
buttons: [
{
title: 'Invite',
link: 'https://discord.com/api/oauth2/authorize?client_id=1035571329866407976&permissions=292288982151&scope=applications.commands%20bot'
}
],
date: '2023'
},
{
id: 'image-manipulation',
image: '@/assets/images/dig.webp',
technologies: ['JavaScript', 'Node.js', 'Canvas', 'npm'],
category: 'Open Source',
featured: true,
buttons: [
{
title: 'Repository',
link: 'https://git.mrkayjaydee.xyz/Mr-KayJayDee/discord-image-generation'
},
{
title: 'NPM Package',
link: 'https://www.npmjs.com/package/discord-image-generation'
}
],
date: '2022'
},
{
id: 'primate-web-admin',
image: '@/assets/images/primate.webp',
technologies: ['React', 'TypeScript', 'Node.js', 'Express'],
category: 'Enterprise Software',
date: '2023'
},
{
id: 'instagram-bot',
image: '@/assets/images/instagram.webp',
technologies: ['JavaScript', 'Node.js', 'Instagram API', 'Canvas'],
category: 'Social Media Bot',
buttons: [
{
title: 'Repository',
link: 'https://git.mrkayjaydee.xyz/Mr-KayJayDee/instagram-bot'
}
],
date: '2022'
},
{
id: 'crowdin-status-bot',
image: '@/assets/images/crowdin.webp',
technologies: ['Node.js', 'Discord.js', 'Crowdin API', 'Cron'],
category: 'Automation',
buttons: [
{
title: 'Repository',
link: 'https://git.mrkayjaydee.xyz/Mr-KayJayDee/discord-crowdin-status'
}
],
date: '2023'
},
{
id: 'flowboard',
image: '@/assets/images/flowboard/flowboard_1.webp',
technologies: ['Vue.js', 'Node.js', 'TypeScript', 'MongoDB', 'Express'],
category: 'Web Development',
featured: true,
features: [
'Organize your tasks, projects and ideas by creating thematic boards adapted to your needs',
'Add cards for each task, assign members, set due dates, and track progress at a glance',
'Invite colleagues and teammates to join your boards to work together, share ideas, and coordinate your efforts',
'Keep an overview of the progress of your projects thanks to a simple and intuitive interface',
'Use labels, lists and tables to prioritize tasks, set priorities and keep the overview clear'
],
gallery: [
'@/assets/images/flowboard/flowboard_1.webp',
'@/assets/images/flowboard/flowboard_2.webp',
'@/assets/images/flowboard/flowboard_3.webp',
'@/assets/images/flowboard/flowboard_4.webp'
],
date: '2024'
}
]
export function useProjects() {
const { t } = useI18n()
const projects = computed((): Project[] => {
return baseProjects.map(project => ({
...project,
title: t(`projectData.${project.id}.title`),
description: t(`projectData.${project.id}.description`),
longDescription: t(`projectData.${project.id}.longDescription`),
buttons: project.buttons?.map(button => ({
...button,
title: t(`projectData.${project.id}.buttons.${button.title.toLowerCase()}`, button.title)
})) || []
}))
})
return {
projects: projects
}
}