diff --git a/README.md b/README.md index d2e7761..82161b6 100644 --- a/README.md +++ b/README.md @@ -1,73 +1,153 @@ -# React + TypeScript + Vite +# 🌟 Portfolio Personnel - Dayron Van Leemput -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +Site web personnel moderne et responsive développé avec React, TypeScript et Framer Motion. Présentation complète de mon profil d'étudiant en Technologies de l'Informatique à la HELHa de Tournai. -Currently, two official plugins are available: +## 🎯 À propos -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +Ce portfolio présente mon parcours, mes compétences et mes projets en tant qu'étudiant en 3ème année de Technologies de l'Informatique. Il met en avant ma passion pour le développement mobile (Flutter/Dart) et le développement web moderne (React/TypeScript). -## React Compiler +## ✨ Fonctionnalités -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). +- 🎨 **Design moderne** : Interface élégante et professionnelle +- 🌙 **Mode sombre/clair** : Basculement automatique selon les préférences système +- 📱 **Responsive** : Optimisé pour tous les appareils (mobile, tablette, desktop) +- 🎪 **Animations fluides** : Powered by Framer Motion +- ⚡ **Performance** : Optimisé pour des chargements rapides +- ♿ **Accessibilité** : Respecte les standards WCAG -## Expanding the ESLint configuration +## 🏗️ Sections -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: +- **🏠 Hero** - Présentation principale avec CTA +- **👨‍💻 À propos** - Mon histoire et ma passion +- **🛠️ Compétences** - Technologies avec barres de progression animées +- **🚀 Projets** - Travel Mate et projets à venir +- **🎓 Formation** - Parcours à la HELHa et objectifs d'apprentissage +- **📞 Contact** - Formulaire et informations de contact -```js -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... +## 🛠️ Technologies - // Remove tseslint.configs.recommended and replace with this - tseslint.configs.recommendedTypeChecked, - // Alternatively, use this for stricter rules - tseslint.configs.strictTypeChecked, - // Optionally, add this for stylistic rules - tseslint.configs.stylisticTypeChecked, +### Frontend +- **React 19** - Framework JavaScript moderne +- **TypeScript** - Typage statique pour JavaScript +- **Framer Motion** - Animations et transitions fluides +- **CSS3** - Styles modernes avec variables CSS +- **Lucide React** - Icônes SVG optimisées - // Other configs... - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) +### Outils de développement +- **Vite** - Build tool rapide et moderne +- **ESLint** - Linter pour maintenir la qualité du code +- **Git** - Contrôle de version + +## 🚀 Installation et utilisation + +### Prérequis +- Node.js (version 18 ou supérieure) +- npm ou yarn + +### Installation + +```bash +# Cloner le repository +git clone https://github.com/Dayron-HELHa/xeewy.eu.git +cd xeewy.eu + +# Installer les dépendances +npm install + +# Démarrer le serveur de développement +npm run dev + +# Construire pour la production +npm run build + +# Prévisualiser la build de production +npm run preview ``` -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: +### Scripts disponibles -```js -// eslint.config.js -import reactX from 'eslint-plugin-react-x' -import reactDom from 'eslint-plugin-react-dom' +- `npm run dev` - Démarre le serveur de développement +- `npm run build` - Construit l'application pour la production +- `npm run preview` - Prévisualise la build de production +- `npm run lint` - Exécute ESLint pour vérifier la qualité du code + +## 📂 Structure du projet -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... - // Enable lint rules for React - reactX.configs['recommended-typescript'], - // Enable lint rules for React DOM - reactDom.configs.recommended, - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) ``` +src/ +├── components/ # Composants React +│ ├── Header.tsx # Navigation principale +│ ├── Hero.tsx # Section d'accueil +│ ├── About.tsx # Section à propos +│ ├── Skills.tsx # Compétences techniques +│ ├── Projects.tsx # Portfolio de projets +│ ├── Education.tsx # Formation et apprentissage +│ └── Contact.tsx # Formulaire de contact +├── App.tsx # Composant principal +├── main.tsx # Point d'entrée React +├── App.css # Styles principaux +└── index.css # Styles globaux +``` + +## 🎨 Personnalisation + +### Couleurs et thèmes +Les variables CSS dans `src/index.css` et `src/App.css` permettent de personnaliser facilement : +- Palette de couleurs +- Espacements +- Typographie +- Effets d'ombre +- Transitions + +### Contenu +Pour personnaliser le contenu : +1. **Informations personnelles** : Modifiez les données dans chaque composant +2. **Projets** : Ajoutez vos projets dans `Projects.tsx` +3. **Compétences** : Mettez à jour les technologies dans `Skills.tsx` +4. **CV** : Remplacez `public/cv-dayron-van-leemput.pdf` + +## 🚀 Déploiement + +### Netlify +```bash +npm run build +# Déployez le dossier 'dist' sur Netlify +``` + +### Vercel +```bash +npm run build +# Connectez votre repo GitHub à Vercel +``` + +### GitHub Pages +```bash +npm run build +# Configurez GitHub Pages pour utiliser le dossier 'dist' +``` + +## 🤝 Contribution + +Ce portfolio est personnel, mais les suggestions d'amélioration sont les bienvenues ! + +1. Fork le projet +2. Créez une branche feature (`git checkout -b feature/amélioration`) +3. Commitez vos changements (`git commit -m 'Add: nouvelle fonctionnalité'`) +4. Push vers la branche (`git push origin feature/amélioration`) +5. Ouvrez une Pull Request + +## 📄 Licence + +Ce projet est sous licence MIT. Voir le fichier `LICENSE` pour plus de détails. + +## 📞 Contact + +**Dayron Van Leemput** +- 🎓 Étudiant en Technologies de l'Informatique - HELHa Tournai +- 💼 [LinkedIn](https://linkedin.com/in/dayronvanleemput) +- 🐱 [GitHub](https://github.com/dayronvanleemput) +- 📧 Email : dayron.vanleemput@example.com + +--- + +*Développé avec ❤️ par Dayron Van Leemput - Novembre 2025* diff --git a/src/App.css b/src/App.css index b6d739d..cd5bfd6 100644 --- a/src/App.css +++ b/src/App.css @@ -742,60 +742,6 @@ body { border-color: var(--primary-hover); } -.future-projects { - text-align: center; -} - -.future-title { - font-size: 1.5rem; - font-weight: 700; - margin-bottom: 32px; - color: var(--text-primary); -} - -.future-projects-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 20px; -} - -.future-project-card { - background: var(--bg-primary); - padding: 24px; - border-radius: var(--border-radius); - border: 2px solid var(--border-color); - transition: all var(--transition-normal); -} - -.future-project-card:hover { - border-color: var(--primary-color); - transform: translateY(-2px); -} - -.future-project-icon { - color: var(--primary-color); - margin-bottom: 12px; -} - -.future-project-card h4 { - font-size: 1rem; - font-weight: 600; - margin-bottom: 8px; - color: var(--text-primary); -} - -.future-project-card p { - font-size: 0.875rem; - color: var(--text-secondary); - margin-bottom: 12px; -} - -.future-tech { - font-size: 0.75rem; - color: var(--text-muted); - font-weight: 500; -} - /* Education Section */ .education { padding: var(--section-padding); @@ -1377,10 +1323,6 @@ body { .certifications-grid { grid-template-columns: 1fr; } - - .future-projects-grid { - grid-template-columns: 1fr; - } } @media (max-width: 480px) { diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx index 682a00e..f24c501 100644 --- a/src/components/Contact.tsx +++ b/src/components/Contact.tsx @@ -41,22 +41,22 @@ const Contact = () => { { icon: , title: "Email", - content: "dayron.vanleemput@example.com", // Remplacez par votre email - link: "mailto:dayron.vanleemput@example.com", + content: "dayronvanleemput@gmail.com", // Remplacez par votre email + link: "mailto:dayronvanleemput@gmail.com", color: "#EA4335" }, { icon: , title: "Téléphone", - content: "+32 XXX XX XX XX", // Remplacez par votre numéro - link: "tel:+32XXXXXXXXX", + content: "+32 455 19 47 62", // Remplacez par votre numéro + link: "tel:+32455194762", color: "#34A853" }, { icon: , title: "Localisation", - content: "Tournai, Belgique", - link: "https://maps.google.com/?q=Tournai,Belgium", + content: "Ath, Belgique", + link: "https://maps.google.com/?q=Ath,Belgium", color: "#4285F4" } ]; @@ -65,7 +65,7 @@ const Contact = () => { { icon: , name: "GitHub", - url: "https://github.com/dayronvanleemput", // Remplacez par votre profil + url: "https://github.com/Dayron-HELHa", // Remplacez par votre profil color: "#333" }, { diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx index a6584fb..c33c43e 100644 --- a/src/components/Projects.tsx +++ b/src/components/Projects.tsx @@ -1,5 +1,5 @@ import { motion } from 'framer-motion'; -import { ExternalLink, Github, Calendar, MapPin } from 'lucide-react'; +import { ExternalLink, Github, MapPin } from 'lucide-react'; const Projects = () => { const projects = [ @@ -191,57 +191,6 @@ const Projects = () => { ))} - - {/* Section des projets futurs */} - -

Projets à venir

-
- {[ - { - title: "Application de gestion de tâches", - description: "Une app de productivité avec synchronisation cloud", - tech: "Flutter • Firebase • Bloc" - }, - { - title: "API REST e-commerce", - description: "Backend complet pour application e-commerce", - tech: "Java • Spring Boot • PostgreSQL" - }, - { - title: "Dashboard analytique", - description: "Interface web pour visualiser des données", - tech: "React • D3.js • TypeScript" - } - ].map((futureProject, index) => ( - -
- -
-

{futureProject.title}

-

{futureProject.description}

- {futureProject.tech} - - ))} -
- );