https://github.com/mel-turham/tesla-home-clone
https://github.com/mel-turham/tesla-home-clone
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mel-turham/tesla-home-clone
- Owner: Mel-Turham
- Created: 2024-01-15T15:37:34.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-02-21T00:21:40.000Z (over 2 years ago)
- Last Synced: 2025-06-15T08:53:39.803Z (about 1 year ago)
- Language: SCSS
- Homepage: https://teslaui-mel-turhams-projects.vercel.app
- Size: 13.2 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tesla Home Clone
Un clone de la page d’accueil de **Tesla**, réalisé dans le cadre de mon apprentissage de **React**, **Vite.js** et **SCSS**.
L’objectif n’était pas de créer un site 100% identique, mais de reproduire l’expérience visuelle et d’apprendre à structurer un projet moderne avec React.
---
## Fonctionnalités principales
- 🎬 **Sections animées** : Hero, modèles de voitures, panneaux solaires, etc.
- 📱 **Design responsive** : adapté aux mobiles, tablettes et desktops.
- 🎨 **SCSS modulaire** : variables, mixins et organisation inspirée de BEM.
- 🧩 **Composants réutilisables** : boutons, layout, navigation.
- 🌙 **Effets interactifs** : hover avec soulignement fluide façon Tesla.
---
## Stack technique
- ⚛️ **React 18** avec **Vite.js** (build ultra rapide)
- 🎨 **SCSS** pour la gestion des styles (variables, mixins, partials)
- 🖼️ **BEM methodology** pour garder un code clair et maintenable
---
## Objectifs pédagogiques
Ce projet m’a permis de :
- Comprendre la **structure d’un projet React/Vite**
- Expérimenter une **architecture SCSS propre et réutilisable**
- Apprendre à créer des **animations CSS fluides** (scale, hover underline)
- Approfondir la **composition de composants** et les **props** en React
- Travailler avec des **assets statiques** (images, backgrounds)
---
## 🚀 Lancer le projet en local
```bash
# Cloner le repo
git clone https://github.com/Mel-Turham/tesla-home-clone.git
# Installer les dépendances
npm install
# Lancer le serveur de développement
npm run dev
```
Le projet sera disponible sur [http://localhost:5173](http://localhost:5173).
---
## 📝 Conclusion
Ceci est un **projet d’apprentissage** qui m’a permis de pratiquer React, Vite.js et SCSS tout en recréant une expérience proche du site officiel de Tesla.
Une excellente base pour continuer à progresser vers des projets plus complexes 🚀