Update portfolio content and remove future projects section
This commit is contained in:
Dayron
196
README.md
196
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
|
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).
|
||||||
- [@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
|
|
||||||
|
|
||||||
## 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
|
## 🛠️ Technologies
|
||||||
export default defineConfig([
|
|
||||||
globalIgnores(['dist']),
|
|
||||||
{
|
|
||||||
files: ['**/*.{ts,tsx}'],
|
|
||||||
extends: [
|
|
||||||
// Other configs...
|
|
||||||
|
|
||||||
// Remove tseslint.configs.recommended and replace with this
|
### Frontend
|
||||||
tseslint.configs.recommendedTypeChecked,
|
- **React 19** - Framework JavaScript moderne
|
||||||
// Alternatively, use this for stricter rules
|
- **TypeScript** - Typage statique pour JavaScript
|
||||||
tseslint.configs.strictTypeChecked,
|
- **Framer Motion** - Animations et transitions fluides
|
||||||
// Optionally, add this for stylistic rules
|
- **CSS3** - Styles modernes avec variables CSS
|
||||||
tseslint.configs.stylisticTypeChecked,
|
- **Lucide React** - Icônes SVG optimisées
|
||||||
|
|
||||||
// Other configs...
|
### Outils de développement
|
||||||
],
|
- **Vite** - Build tool rapide et moderne
|
||||||
languageOptions: {
|
- **ESLint** - Linter pour maintenir la qualité du code
|
||||||
parserOptions: {
|
- **Git** - Contrôle de version
|
||||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
||||||
tsconfigRootDir: import.meta.dirname,
|
## 🚀 Installation et utilisation
|
||||||
},
|
|
||||||
// other options...
|
### 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
|
- `npm run dev` - Démarre le serveur de développement
|
||||||
// eslint.config.js
|
- `npm run build` - Construit l'application pour la production
|
||||||
import reactX from 'eslint-plugin-react-x'
|
- `npm run preview` - Prévisualise la build de production
|
||||||
import reactDom from 'eslint-plugin-react-dom'
|
- `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*
|
||||||
|
|||||||
58
src/App.css
58
src/App.css
@@ -742,60 +742,6 @@ body {
|
|||||||
border-color: var(--primary-hover);
|
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 Section */
|
||||||
.education {
|
.education {
|
||||||
padding: var(--section-padding);
|
padding: var(--section-padding);
|
||||||
@@ -1377,10 +1323,6 @@ body {
|
|||||||
.certifications-grid {
|
.certifications-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.future-projects-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
|
|||||||
@@ -41,22 +41,22 @@ const Contact = () => {
|
|||||||
{
|
{
|
||||||
icon: <Mail size={24} />,
|
icon: <Mail size={24} />,
|
||||||
title: "Email",
|
title: "Email",
|
||||||
content: "dayron.vanleemput@example.com", // Remplacez par votre email
|
content: "dayronvanleemput@gmail.com", // Remplacez par votre email
|
||||||
link: "mailto:dayron.vanleemput@example.com",
|
link: "mailto:dayronvanleemput@gmail.com",
|
||||||
color: "#EA4335"
|
color: "#EA4335"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: <Phone size={24} />,
|
icon: <Phone size={24} />,
|
||||||
title: "Téléphone",
|
title: "Téléphone",
|
||||||
content: "+32 XXX XX XX XX", // Remplacez par votre numéro
|
content: "+32 455 19 47 62", // Remplacez par votre numéro
|
||||||
link: "tel:+32XXXXXXXXX",
|
link: "tel:+32455194762",
|
||||||
color: "#34A853"
|
color: "#34A853"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: <MapPin size={24} />,
|
icon: <MapPin size={24} />,
|
||||||
title: "Localisation",
|
title: "Localisation",
|
||||||
content: "Tournai, Belgique",
|
content: "Ath, Belgique",
|
||||||
link: "https://maps.google.com/?q=Tournai,Belgium",
|
link: "https://maps.google.com/?q=Ath,Belgium",
|
||||||
color: "#4285F4"
|
color: "#4285F4"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
@@ -65,7 +65,7 @@ const Contact = () => {
|
|||||||
{
|
{
|
||||||
icon: <Github size={24} />,
|
icon: <Github size={24} />,
|
||||||
name: "GitHub",
|
name: "GitHub",
|
||||||
url: "https://github.com/dayronvanleemput", // Remplacez par votre profil
|
url: "https://github.com/Dayron-HELHa", // Remplacez par votre profil
|
||||||
color: "#333"
|
color: "#333"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { ExternalLink, Github, Calendar, MapPin } from 'lucide-react';
|
import { ExternalLink, Github, MapPin } from 'lucide-react';
|
||||||
|
|
||||||
const Projects = () => {
|
const Projects = () => {
|
||||||
const projects = [
|
const projects = [
|
||||||
@@ -191,57 +191,6 @@ const Projects = () => {
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
))}
|
))}
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Section des projets futurs */}
|
|
||||||
<motion.div
|
|
||||||
className="future-projects"
|
|
||||||
initial={{ opacity: 0, y: 50 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.3 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
>
|
|
||||||
<h3 className="future-title">Projets à venir</h3>
|
|
||||||
<div className="future-projects-grid">
|
|
||||||
{[
|
|
||||||
{
|
|
||||||
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) => (
|
|
||||||
<motion.div
|
|
||||||
key={index}
|
|
||||||
className="future-project-card"
|
|
||||||
initial={{ opacity: 0, scale: 0.9 }}
|
|
||||||
whileInView={{ opacity: 1, scale: 1 }}
|
|
||||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
||||||
whileHover={{
|
|
||||||
scale: 1.02,
|
|
||||||
y: -2,
|
|
||||||
transition: { duration: 0.2 }
|
|
||||||
}}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
>
|
|
||||||
<div className="future-project-icon">
|
|
||||||
<Calendar size={20} />
|
|
||||||
</div>
|
|
||||||
<h4>{futureProject.title}</h4>
|
|
||||||
<p>{futureProject.description}</p>
|
|
||||||
<span className="future-tech">{futureProject.tech}</span>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user