06172aae62
- 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.
128 lines
3.8 KiB
TypeScript
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
|
|
}
|
|
}
|