https://github.com/cut0x/portfolio

Code source de mon portfolio
https://github.com/cut0x/portfolio

config css html javasript portfolio website

Last synced: 5 months ago
JSON representation

Code source de mon portfolio

• Host: GitHub
• URL: https://github.com/cut0x/portfolio
• Owner: Cut0x
• Created: 2025-06-01T00:57:55.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-12-17T16:57:26.000Z (6 months ago)
• Last Synced: 2025-12-21T03:28:21.305Z (6 months ago)
• Topics: config, css, html, javasript, portfolio, website
• Language: PHP
• Homepage: https://valloic.dev
• Size: 7.88 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 📁 Structure du Projet Portfolio

```

portfolio/

│

├── index.php                    # Page d'accueil

├── contact.php                  # Page de contact

├── projects.php                 # Page tous les projets

├── about.php                    # Page à propos

├── config.php                   # Configuration

│

├── discord/

│   ├── login.php               # Authentification Discord

│   ├── callback.php            # Callback OAuth

│   └── logout.php              # Déconnexion

│

├── src/

│   ├── css/

│   │   └── styles.css          # Styles avec dégradés bleu/violet

│   │

│   ├── js/

│   │   └── three-background.js # Cubes 3D flottants Three.js

│   │

│   ├── imgs/

│   │   └── logo.png            # Logo du site

│   │

│   ├── utils/

│   │   ├── database.php        # Classe Database

│   │   └── functions.php       # Fonctions utilitaires

│   │

│   └── includes/

│       └── layout/

│           └── landing.php     # Template principal avec Three.js

│

├── admin/

│   └── panel.php               # Panel admin (à créer)

│

├── vendor/                      # Dépendances Composer

│   └── autoload.php

│

├── composer.json                # Configuration Composer

└── schema.sql                   # Structure de la base de données

```

## 🚀 Installation

### 1. Configuration de la base de données

```bash

mysql -u root -p < schema.sql

```

### 2. Installation de PHPMailer via Composer

```bash

composer require phpmailer/phpmailer

```

### 3. Configuration dans `config.php`

Modifiez les paramètres selon votre environnement :

- Base de données (DB_HOST, DB_NAME, DB_USER, DB_PASS)

- Discord OAuth (CLIENT_ID, CLIENT_SECRET)

- ADMIN_DISCORD_ID

### 4. Configuration PHPMailer dans `contact.php`

Remplacez dans la section PHPMailer :

```php

$mail->Host = 'smtp.gmail.com';

$mail->Username = 'votre-email@gmail.com';

$mail->Password = 'votre-mot-de-passe-app';

```

Pour Gmail, créez un mot de passe d'application :

1. Allez dans votre compte Google

2. Sécurité → Mots de passe des applications

3. Créez un nouveau mot de passe pour l'application

## ✨ Fonctionnalités

### 🎨 Design

- **Cubes 3D flottants** avec Three.js

- **Dégradés bleu/violet** (#6366f1, #8b5cf6, #3b82f6, #9333ea)

- **Glassmorphism** sur la navbar

- **Animations fluides** et parallax

- **Responsive** parfait sur tous les appareils

### 🔐 Authentification

- **Discord OAuth** pour se connecter

- **Sessions sécurisées** en base de données

- **Panel admin** pour gérer le contenu

### 📧 Contact

- **Formulaire de contact** avec validation

- **Sauvegarde en BDD** de tous les messages

- **Envoi d'email** via PHPMailer

- **Panel admin** pour consulter les messages

### 📊 Base de données

- **site_settings** : Paramètres du site

- **projects** : Gestion des projets

- **posts** : Articles de blog

- **contact_messages** : Messages de contact

- **user_sessions** : Sessions utilisateurs

- **project_categories** : Catégories de projets

- **site_stats** : Statistiques du site

## 🔧 Fichiers créés

### ✅ Complétés

1. **schema.sql** - Structure BDD complète avec table contact_messages

2. **styles.css** - Design moderne avec dégradés bleu/violet

3. **three-background.js** - Cubes 3D flottants animés

4. **landing.php** - Template avec Three.js et responsive corrigé

5. **contact.php** - Page de contact avec PHPMailer

6. **index.php** - Page d'accueil avec toutes les sections

### 📝 À créer (optionnel)

- `projects.php` - Liste complète des projets

- `about.php` - Page à propos

- `post.php` - Affichage d'un article

- `admin/panel.php` - Panel d'administration

## 🎯 Points clés

### Three.js - Cubes 3D

- 25 cubes flottants avec couleurs dégradées

- Animation de rotation continue

- Mouvement flottant sinusoïdal

- Pulsation de l'opacité

- Réaction au mouvement de la souris

- Performance optimisée

### Responsive navbar

- **Corrigé** : Toggle fonctionne parfaitement

- Fermeture au clic extérieur

- Fermeture au clic sur lien

- Animations fluides

- Glassmorphism préservé

### Dégradés bleu/violet

- Variables CSS cohérentes

- Utilisation dans tous les éléments

- Animations de gradient

- Effets de glow et shadows

## 📱 Responsive

- ✅ Desktop (1920px+)

- ✅ Laptop (1366px)

- ✅ Tablet (768px)

- ✅ Mobile (480px)

- ✅ Small Mobile (320px)

## 🎨 Palette de couleurs

```css

--primary: #6366f1;      /* Indigo */

--blue: #3b82f6;         /* Bleu */

--secondary: #8b5cf6;    /* Violet */

--purple: #9333ea;       /* Purple */

--accent: #a855f7;       /* Violet clair */

```

## 🔒 Sécurité

- Préparation des requêtes SQL (PDO)

- Échappement HTML (htmlspecialchars)

- Validation des emails (filter_var)

- Protection CSRF (à ajouter en production)

- Sessions sécurisées avec tokens

- Nettoyage automatique des sessions expirées