From 24dfc5d0778214f7157391b7291c6e837cecc00a Mon Sep 17 00:00:00 2001 From: Van Leemput Dayron Date: Mon, 12 Jan 2026 16:18:21 +0100 Subject: [PATCH] Add homesync to projects --- frontend/src/App.tsx | 2 + frontend/src/components/HomeSync.tsx | 261 ++++++++++++++++++++++ frontend/src/components/Projects.tsx | 31 ++- frontend/src/contexts/LanguageContext.tsx | 70 ++++++ 4 files changed, 358 insertions(+), 6 deletions(-) create mode 100644 frontend/src/components/HomeSync.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index a5452e3..24128bb 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -7,6 +7,7 @@ import Footer from './components/Footer'; import Policies from './components/Policies'; import TravelMate from './components/TravelMate'; import EraseData from './components/TravelMate/EraseData'; +import HomeSync from './components/HomeSync'; import ScrollToTop from './components/ScrollToTop'; import './styles/main.scss'; @@ -63,6 +64,7 @@ function AppContent() { } /> } /> } /> + } /> } /> diff --git a/frontend/src/components/HomeSync.tsx b/frontend/src/components/HomeSync.tsx new file mode 100644 index 0000000..2c1af63 --- /dev/null +++ b/frontend/src/components/HomeSync.tsx @@ -0,0 +1,261 @@ +import { useEffect } from 'react'; +import { motion } from 'framer-motion'; +import { useLanguage } from '../contexts/LanguageContext'; +import { Smartphone, Calendar, ShoppingCart, Users, Lock, Code, Database } from 'lucide-react'; +// import appIcon from '../assets/app_icon.png'; // Using same icon as placeholder if no specific HomeSync icon + +const itemVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { opacity: 1, y: 0 } +}; + +const FeatureCard = ({ title, icon: Icon, description }: { title: string, icon: any, description: string }) => ( + +
+ +
+

+ {title} +

+

+ {description} +

+ +); + +const HomeSync = () => { + const { t } = useLanguage(); + + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.2 + } + } + }; + + useEffect(() => { + document.title = "Home Sync"; + }, []); + + return ( +
+
+ + + {/* Header Section */} + + {/* Placeholder Icon - ideally this would be a specific Home Sync icon */} + + + + +

+ {t('homesync.page.mainTitle')} +

+

+ {t('homesync.page.subtitle')} +

+ + {/* View Code Button - Placeholder link since none provided, or maybe just remove if not public */} + {/* Assuming no link provided in description, maybe just skip or add a placeholder? + The prompt says "Fais lui une page dédiée" but doesn't explicitly give a repo link. + I'll leave it as a '#', user can update. */ + } + + + {t('homesync.viewCode')} + + + + {/* Description as Intro */} + +

+ "{t('homesync.page.intro')}" +

+ + + {/* Highlights Sections */} + +

{t('homesync.highlights.title')}

+
+ + + + + + +
+ + + {/* Conclusion */} + +

+ {t('homesync.page.conclusion')} +

+ + + {/* Tech Stack */} + +

{t('homesync.tech.title')}

+
+ + {/* Frontend */} +
+

+ {t('homesync.tech.frontend')} +

+
    + {[1, 2].map(i => ( +
  • + {t(`homesync.tech.frontend.${i}`)} +
    • + ))} +
+
+ + {/* Backend */} +
+

+ {t('homesync.tech.backend')} +

+
    + {[1, 2].map(i => ( +
  • + {t(`homesync.tech.backend.${i}`)} +
    • + ))} +
+
+ + {/* API */} +
+

+ {t('homesync.tech.api')} +

+
    + {[1].map(i => ( +
  • + {t(`homesync.tech.api.${i}`)} +
    • + ))} +
+
+ +
+ + + +
+
+ ); +}; + +export default HomeSync; diff --git a/frontend/src/components/Projects.tsx b/frontend/src/components/Projects.tsx index 90247e8..d703f55 100644 --- a/frontend/src/components/Projects.tsx +++ b/frontend/src/components/Projects.tsx @@ -1,5 +1,5 @@ import { motion } from 'framer-motion'; -import { ExternalLink, MapPin, Wine } from 'lucide-react'; +import { ExternalLink, MapPin, Wine, Users } from 'lucide-react'; import { useLanguage } from '../contexts/LanguageContext'; import { Link } from 'react-router-dom'; @@ -23,25 +23,44 @@ const Projects = () => { links: { demo: "/travelmate" }, - image: "/travel-mate-preview.png" // Ajoutez votre image dans le dossier public + image: "/travel-mate-preview.png" + }, + { + id: 4, // New ID for Home Sync + title: t('projects.homeSync.title'), + description: t('projects.homeSync.description'), + status: t('projects.status.personal'), + technologies: ["Flutter", "Firebase", "BLoC"], + features: [ + t('projects.homeSync.feature1'), + t('projects.homeSync.feature2'), + t('projects.homeSync.feature3'), + t('projects.homeSync.feature4') + ], + color: "#8B5CF6", // Purple/Indigo shade for family/sync theme + icon: , // Inherited import or need to add + links: { + demo: "/homesync" + }, + image: "/home-sync-preview.png" // Placeholder }, { id: 3, title: t('projects.shelbys.title'), description: t('projects.shelbys.description'), status: t('projects.status.online'), - technologies: ["React", "Vite", "TailwindCSS", "Framer Motion"], // Inferring stack based on modern standards and user's other projects + technologies: ["React", "Vite", "TailwindCSS", "Framer Motion"], features: [ t('projects.shelbys.feature1'), t('projects.shelbys.feature2'), t('projects.shelbys.feature4') ], - color: "#E91E63", // A distinct color + color: "#E91E63", icon: , links: { demo: "https://shelbys.be" }, - image: "/shelbys-preview.png" // Placeholder, user might need to add this + image: "/shelbys-preview.png" }, { id: 2, @@ -58,7 +77,7 @@ const Projects = () => { color: "#2196F3", icon: , links: { - demo: "https://xeewy.be" // Remplacez par votre lien + demo: "https://xeewy.be" } } ]; diff --git a/frontend/src/contexts/LanguageContext.tsx b/frontend/src/contexts/LanguageContext.tsx index 8ca13c9..f872912 100644 --- a/frontend/src/contexts/LanguageContext.tsx +++ b/frontend/src/contexts/LanguageContext.tsx @@ -79,6 +79,7 @@ const translations = { 'projects.subtitle': 'Découvrez mes réalisations et mes expériences', 'projects.status.available': 'Bientôt disponible sur App Store et Play Store', 'projects.status.current': 'Projet actuel', + 'projects.status.personal': 'Projet personnel', 'projects.status.online': 'En ligne', 'projects.features': 'Fonctionnalités principales :', 'projects.btn.code': 'Code', @@ -100,6 +101,12 @@ const translations = { 'projects.shelbys.feature1': 'Design moderne et immersif', 'projects.shelbys.feature2': 'Présentation du menu', 'projects.shelbys.feature4': 'Informations pratiques', + 'projects.homeSync.title': 'Home Sync', + 'projects.homeSync.description': 'Application de gestion familiale tout-en-un. Synchronisez les calendriers, partagez des listes de courses et gérez votre foyer en toute simplicité.', + 'projects.homeSync.feature1': 'Calendrier familial partagé', + 'projects.homeSync.feature2': 'Listes de courses collaboratives', + 'projects.homeSync.feature3': 'Gestion de foyer simple', + 'projects.homeSync.feature4': 'Synchronisation Google Agenda', // Education 'education.title': 'Formation', @@ -222,6 +229,34 @@ const translations = { 'policies.googleBtn': 'Politique de confidentialité Google', + // Home Sync Page + 'homesync.page.mainTitle': 'Home Sync 👨‍👩‍👧‍👦', + 'homesync.page.subtitle': 'L\'organisateur familial ultime', + 'homesync.page.intro': 'Bienvenue dans Home Sync, l\'application conçue pour simplifier la gestion quotidienne de votre foyer ! Synchronisez vos emplois du temps, gérez des listes de courses partagées et restez organisés, le tout en temps réel. (Projet privé)', + + 'homesync.highlights.title': '✨ Fonctionnalités Principales', + 'homesync.highlight.1.title': 'Calendrier Partagé & Intelligent', + 'homesync.highlight.1.desc': 'Vue centralisée de tous les événements de la famille. Synchronisation Google Agenda bidirectionnelle (import/export) avec indicateurs visuels.', + 'homesync.highlight.2.title': 'Listes de Courses Collaboratives', + 'homesync.highlight.2.desc': 'Ajoutez et cochez des articles en temps réel. Organisation par état et bientôt fonction glisser-déposer pour le parcours en magasin.', + 'homesync.highlight.3.title': 'Gestion de Foyer', + 'homesync.highlight.3.desc': 'Créez un foyer ou rejoignez-en un existant via un ID unique. Gestion simple des profils utilisateurs.', + 'homesync.highlight.4.title': 'Sécurité & Authentification', + 'homesync.highlight.4.desc': 'Connexion sécurisée via Email ou Google. Vos données familiales restent privées et protégées.', + + 'homesync.page.conclusion': 'Reprenez le contrôle de votre organisation familiale avec Home Sync.', + + 'homesync.tech.title': '🛠️ Stack Technique', + 'homesync.tech.frontend': 'Frontend (Flutter)', + 'homesync.tech.frontend.1': 'Interface utilisateur moderne et réactive', + 'homesync.tech.frontend.2': 'Gestion d\'état avec BLoC', + 'homesync.tech.backend': 'Backend / Database (Firebase)', + 'homesync.tech.backend.1': 'Firestore pour les données temps réel', + 'homesync.tech.backend.2': 'Authentication (Email, Google)', + 'homesync.tech.api': 'APIs', + 'homesync.tech.api.1': 'Google Calendar API', + 'homesync.viewCode': 'Code source (Privé)', + // Contact 'contact.title': 'Contactez-moi', 'contact.subtitle': 'Une question, un projet ou simplement envie de discuter ? N\'hésitez pas à me contacter !', @@ -299,6 +334,7 @@ const translations = { 'projects.subtitle': 'Discover my achievements and experiences', 'projects.status.available': 'Coming soon on App Store and Play Store', 'projects.status.current': 'Current project', + 'projects.status.personal': 'Personal project', 'projects.status.online': 'Online', 'projects.features': 'Main features:', 'projects.btn.code': 'Code', @@ -320,6 +356,12 @@ const translations = { 'projects.shelbys.feature1': 'Modern and immersive design', 'projects.shelbys.feature2': 'Menu presentation', 'projects.shelbys.feature4': 'Practical information', + 'projects.homeSync.title': 'Home Sync', + 'projects.homeSync.description': 'All-in-one family management application. Sync calendars, share shopping lists, and manage your household with ease.', + 'projects.homeSync.feature1': 'Shared family calendar', + 'projects.homeSync.feature2': 'Collaborative shopping lists', + 'projects.homeSync.feature3': 'Simple household management', + 'projects.homeSync.feature4': 'Google Calendar synchronization', // Education 'education.title': 'Education', @@ -443,6 +485,34 @@ const translations = { 'policies.googleBtn': 'Google Privacy Policy', + // Home Sync Page + 'homesync.page.mainTitle': 'Home Sync 👨‍👩‍👧‍👦', + 'homesync.page.subtitle': 'The ultimate family organizer', + 'homesync.page.intro': 'Welcome to Home Sync, the app designed to simplify your household\'s daily management! Sync schedules, manage shared shopping lists, and stay organized, all in real-time. (Private Project)', + + 'homesync.highlights.title': '✨ Main Features', + 'homesync.highlight.1.title': 'Shared & Smart Calendar', + 'homesync.highlight.1.desc': 'Centralized view of all family events. Bidirectional Google Calendar synchronization (import/export) with visual indicators.', + 'homesync.highlight.2.title': 'Collaborative Shopping Lists', + 'homesync.highlight.2.desc': 'Add and check off items in real-time. Organized by status and coming soon: drag-and-drop for store routing.', + 'homesync.highlight.3.title': 'Household Management', + 'homesync.highlight.3.desc': 'Create a new household or join an existing one via a unique ID. Simple user profile management.', + 'homesync.highlight.4.title': 'Security & Authentication', + 'homesync.highlight.4.desc': 'Secure login via Email or Google. Your family data remains private and protected.', + + 'homesync.page.conclusion': 'Take back control of your family organization with Home Sync.', + + 'homesync.tech.title': '🛠️ Tech Stack', + 'homesync.tech.frontend': 'Frontend (Flutter)', + 'homesync.tech.frontend.1': 'Modern and responsive user interface', + 'homesync.tech.frontend.2': 'State Management with BLoC', + 'homesync.tech.backend': 'Backend / Database (Firebase)', + 'homesync.tech.backend.1': 'Firestore for real-time data', + 'homesync.tech.backend.2': 'Authentication (Email, Google)', + 'homesync.tech.api': 'APIs', + 'homesync.tech.api.1': 'Google Calendar API', + 'homesync.viewCode': 'Source Code (Private)', + // Contact 'contact.title': 'Contact me', 'contact.subtitle': 'A question, a project or just want to chat? Feel free to contact me!',