getsu7 · getsu7 · Nov 4, 2024 · Jun 5, 2024 · Jun 25, 2024 · Jun 25, 2024
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.idea
+node_modules
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "tabWidth": 4,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 120,
+  "endOfLine": "auto"
+}
diff --git a/404.html b/404.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="fr">
+    <head>
+        <title>Page non trouvée</title>
+        <meta charset="utf-8" />
+        <meta http-equiv="refresh" content="5;url=/" />
+    </head>
+    <body>
+        <h1>Page non trouvée</h1>
+        <p>Vous serez redirigé vers la page d'accueil dans 5 secondes...</p>
+    </body>
+</html>
diff --git a/README.md b/README.md
@@ -1,6 +1,47 @@
-# Base de code du projet P6 - Parcours Front-end
+![logo-fisheye](assets/images/logo.png "Titre de l'image").
 
-## Démarrer le projet
+Ce projet vise à moderniser un site web destiné aux photographes freelances, en le transformant d'un site statique en une plateforme dynamique et interactive pour présenter les portfolios des photographes et faciliter les contacts avec des clients potentiels. Ce site permet aux photographes, de mettre en valeur leur travail et de recevoir des demandes pour des événements ou des tirages.
 
-Rien à installer ici, il suffit d'ouvrir le fichier `index.html`.
+## 🔥 Lancer le Projet
 
+1. Cloner le dépôt sur votre machine locale.
+2. Ouvrir le projet dans votre éditeur de code.
+3. Lancer le fichier `index.html` à l'aide d'un serveur de développement web comme **Live Server**.
+
+## 🎯 Objectif du Projet
+
+Le site actuel, conçu il y a plus de dix ans, est obsolète et nécessite une refonte complète pour :
+- Moderniser le design et l'expérience utilisateur.
+- Passer d'un site statique à un site dynamique.
+- Faciliter la gestion et la présentation des galeries des photographes.
+
+
+## 📕 Pages et Fonctionnalités
+
+### 1. Page d'Accueil
+La page d'accueil propose un aperçu de tous les photographes disponibles :
+- **Liste des Photographes** : Chaque photographe est présenté avec son nom, son slogan, sa localisation, son tarif horaire, et une image miniature de son choix.
+- **Navigation vers la Page du Photographe** : En cliquant sur la vignette d'un photographe, l'utilisateur est redirigé vers une page individuelle dédiée.
+
+### 2. Page du Photographe
+Chaque photographe possède une page dédiée générée dynamiquement contenant :
+- **Galerie Multimédia** :
+    - Une galerie affichant les photos et vidéos du photographe.
+    - Les vidéos apparaissent avec une image miniature.
+- **Interactions avec les Médias** :
+    - Chaque média dispose d'un titre et d'un compteur de likes.
+    - Les utilisateurs peuvent liker chaque média, incrémentant ainsi le nombre de likes total du photographe.
+    - Les médias peuvent être triés par **popularité** ou par **titre**.
+- **Affichage en Lightbox** :
+    - En cliquant sur un média, celui-ci s'ouvre dans une lightbox.
+    - Une croix permet de fermer la lightbox, et des boutons de navigation permettent de passer d'un média à l'autre.
+    - La navigation peut également se faire avec les touches fléchées du clavier.
+- **Bouton de Contact** :
+    - Un bouton permettant de contacter le photographe via un formulaire de contact.
+    - Ce formulaire apparaît dans une modale et comprend des champs pour le nom, l'adresse électronique et le message.
+    - Actuellement, le contenu du formulaire est affiché dans la console à des fins de test ; l'envoi réel des messages sera implémenté ultérieurement.
+
+## 👩‍💻 Technologies Utilisées
+
+- **HTML/CSS/JavaScript** pour la structure de base, le style et l'interactivité du site.
+- **JavaScript dynamique** pour la génération de contenu et les interactions (like, lightbox, tri, etc.).
diff --git a/assets/icons/back-arrow.png b/assets/icons/back-arrow.png
diff --git a/assets/icons/close.svg b/assets/icons/close.svg
diff --git a/assets/icons/like-dark.png b/assets/icons/like-dark.png
diff --git a/assets/icons/like.png b/assets/icons/like.png
diff --git a/assets/icons/next-arrow.png b/assets/icons/next-arrow.png
diff --git a/assets/medias/Animals_Majesty.jpg b/assets/medias/Animals_Majesty.jpg
diff --git a/assets/medias/Animals_Puppiness.mp4 b/assets/medias/Animals_Puppiness.mp4
diff --git a/assets/medias/Animals_Rainbow.jpg b/assets/medias/Animals_Rainbow.jpg
diff --git a/assets/medias/Animals_Wild_Horses_in_the_mountains.mp4 b/assets/medias/Animals_Wild_Horses_in_the_mountains.mp4
diff --git a/assets/medias/Architecture_Connected_Curves.jpg b/assets/medias/Architecture_Connected_Curves.jpg
diff --git a/assets/medias/Architecture_Contrast.jpg b/assets/medias/Architecture_Contrast.jpg
diff --git a/assets/medias/Architecture_Corner_Room.jpg b/assets/medias/Architecture_Corner_Room.jpg
diff --git a/assets/medias/Architecture_Cross_Bar.jpg b/assets/medias/Architecture_Cross_Bar.jpg
diff --git a/assets/medias/Architecture_Dome.jpg b/assets/medias/Architecture_Dome.jpg
diff --git a/assets/medias/Architecture_Horseshoe.jpg b/assets/medias/Architecture_Horseshoe.jpg
diff --git a/assets/medias/Architecture_On_a_hill.jpg b/assets/medias/Architecture_On_a_hill.jpg
diff --git a/assets/medias/Architecture_Water_on_Modern.jpg b/assets/medias/Architecture_Water_on_Modern.jpg
diff --git a/assets/medias/Architecture_White_Light.jpg b/assets/medias/Architecture_White_Light.jpg
diff --git a/assets/medias/Architecture_coverr_circle_empty_highway_in_buenos_aires_587740985637.mp4 b/assets/medias/Architecture_coverr_circle_empty_highway_in_buenos_aires_587740985637.mp4
diff --git a/assets/medias/Art_Mine.jpg b/assets/medias/Art_Mine.jpg
diff --git a/assets/medias/Art_Purple_light.jpg b/assets/medias/Art_Purple_light.jpg
diff --git a/assets/medias/Art_Triangle_Man.jpg b/assets/medias/Art_Triangle_Man.jpg
diff --git a/assets/medias/Art_Wooden_Horse_Sculpture.mp4 b/assets/medias/Art_Wooden_Horse_Sculpture.mp4
diff --git a/assets/medias/Event_18thAnniversary.jpg b/assets/medias/Event_18thAnniversary.jpg
diff --git a/assets/medias/Event_BenevidesWedding.jpg b/assets/medias/Event_BenevidesWedding.jpg
diff --git a/assets/medias/Event_Emcee.jpg b/assets/medias/Event_Emcee.jpg
diff --git a/assets/medias/Event_KeyboardCheck.jpg b/assets/medias/Event_KeyboardCheck.jpg
diff --git a/assets/medias/Event_PintoWedding.jpg b/assets/medias/Event_PintoWedding.jpg
diff --git a/assets/medias/Event_ProductPitch.jpg b/assets/medias/Event_ProductPitch.jpg
diff --git a/assets/medias/Event_SeasideWedding.jpg b/assets/medias/Event_SeasideWedding.jpg
diff --git a/assets/medias/Event_Sparklers.jpg b/assets/medias/Event_Sparklers.jpg
diff --git a/assets/medias/Event_VentureConference.jpg b/assets/medias/Event_VentureConference.jpg
diff --git a/assets/medias/Event_WeddingGazebo.jpg b/assets/medias/Event_WeddingGazebo.jpg
diff --git a/assets/medias/Fashion_Melody_Red_on_Stripes.jpg b/assets/medias/Fashion_Melody_Red_on_Stripes.jpg
diff --git a/assets/medias/Fashion_Pattern_on_Pattern.jpg b/assets/medias/Fashion_Pattern_on_Pattern.jpg
diff --git a/assets/medias/Fashion_Urban_Jungle.jpg b/assets/medias/Fashion_Urban_Jungle.jpg
diff --git a/assets/medias/Fashion_Wings.jpg b/assets/medias/Fashion_Wings.jpg
diff --git a/assets/medias/Fashion_Yellow_Beach.jpg b/assets/medias/Fashion_Yellow_Beach.jpg
diff --git a/assets/medias/Portrait_AfternoonBreak.jpg b/assets/medias/Portrait_AfternoonBreak.jpg
diff --git a/assets/medias/Portrait_Alexandra.jpg b/assets/medias/Portrait_Alexandra.jpg
diff --git a/assets/medias/Portrait_Background.jpg b/assets/medias/Portrait_Background.jpg
diff --git a/assets/medias/Portrait_Nora.jpg b/assets/medias/Portrait_Nora.jpg
diff --git a/assets/medias/Portrait_Shaw.jpg b/assets/medias/Portrait_Shaw.jpg
diff --git a/assets/medias/Portrait_Sunkissed.jpg b/assets/medias/Portrait_Sunkissed.jpg
diff --git a/assets/medias/Portrait_Wednesday.jpg b/assets/medias/Portrait_Wednesday.jpg
diff --git a/assets/medias/Sport_2000_with_8.jpg b/assets/medias/Sport_2000_with_8.jpg
diff --git a/assets/medias/Sport_Butterfly.jpg b/assets/medias/Sport_Butterfly.jpg
diff --git a/assets/medias/Sport_Jump.jpg b/assets/medias/Sport_Jump.jpg
diff --git a/assets/medias/Sport_Next_Hold.jpg b/assets/medias/Sport_Next_Hold.jpg
diff --git a/assets/medias/Sport_Race_End.jpg b/assets/medias/Sport_Race_End.jpg
diff --git a/assets/medias/Sport_Sky_Cross.jpg b/assets/medias/Sport_Sky_Cross.jpg
diff --git a/assets/medias/Sport_Tricks_in_the_air.mp4 b/assets/medias/Sport_Tricks_in_the_air.mp4
diff --git a/assets/medias/Travel_Adventure_Door.jpg b/assets/medias/Travel_Adventure_Door.jpg
diff --git a/assets/medias/Travel_Bike_and_Stair.jpg b/assets/medias/Travel_Bike_and_Stair.jpg
diff --git a/assets/medias/Travel_Boat_Wanderer.jpg b/assets/medias/Travel_Boat_Wanderer.jpg
diff --git a/assets/medias/Travel_Bridge_into_Forest.jpg b/assets/medias/Travel_Bridge_into_Forest.jpg
diff --git a/assets/medias/Travel_HillsideColor.jpg b/assets/medias/Travel_HillsideColor.jpg
diff --git a/assets/medias/Travel_Lonesome.jpg b/assets/medias/Travel_Lonesome.jpg
diff --git a/assets/medias/Travel_On_the_Road.jpg b/assets/medias/Travel_On_the_Road.jpg
diff --git a/assets/medias/Travel_OpenMountain.jpg b/assets/medias/Travel_OpenMountain.jpg
diff --git a/assets/medias/Travel_Outdoor_Baths.jpg b/assets/medias/Travel_Outdoor_Baths.jpg
diff --git a/assets/medias/Travel_Road_into_Hill.jpg b/assets/medias/Travel_Road_into_Hill.jpg
diff --git a/assets/medias/Travel_Rock_Mountains.mp4 b/assets/medias/Travel_Rock_Mountains.mp4
diff --git a/assets/medias/Travel_SunsetonCanals.jpg b/assets/medias/Travel_SunsetonCanals.jpg
diff --git a/assets/medias/Travel_Tower.jpg b/assets/medias/Travel_Tower.jpg
diff --git a/assets/medias/sport_water_tunnel.jpg b/assets/medias/sport_water_tunnel.jpg
diff --git a/assets/photographers/EllieRoseWilkens.jpg b/assets/photographers/EllieRoseWilkens.jpg
diff --git a/assets/photographers/MarcelNikolic.jpg b/assets/photographers/MarcelNikolic.jpg
diff --git a/assets/photographers/MimiKeel.jpg b/assets/photographers/MimiKeel.jpg
diff --git a/assets/photographers/NabeelBradford.jpg b/assets/photographers/NabeelBradford.jpg
diff --git a/assets/photographers/RhodeDubois.jpg b/assets/photographers/RhodeDubois.jpg
diff --git a/assets/photographers/TracyGalindo.jpg b/assets/photographers/TracyGalindo.jpg
diff --git a/css/lightbox.css b/css/lightbox.css
@@ -0,0 +1,73 @@
+#light-box {
+  position: fixed;
+  display: none;
+  z-index: 10;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: 100vw;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+}
+
+.light-box__modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 3em;
+  overflow: hidden;
+  height: fit-content;
+}
+
+.light-box__right-side {
+  display: flex;
+  top: 0;
+  margin-top: 0;
+  position: relative;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 83vh;
+}
+
+img.light-box__close-button {
+  filter: invert(17%) sepia(21%) saturate(7440%) hue-rotate(346deg) brightness(98%) contrast(93%);
+  align-self: flex-start;
+  position: fixed;
+  cursor: pointer;
+}
+
+img.light-box__next-arrow {
+  cursor: pointer;
+  margin: auto 0;
+}
+
+img.light-box__back-arrow {
+  cursor: pointer;
+  margin: auto 0;
+}
+
+.light-box__content img {
+  max-width: 80vw;
+  max-height: 80vh;
+  -webkit-box-shadow: 5px 0 3px 0 rgba(0, 0, 0, 0.61);
+  box-shadow: 5px 0 3px 0 rgba(0, 0, 0, 0.61);
+  border-radius: 5px;
+}
+
+.light-box__content h3 {
+  font-size: 24px;
+  font-weight: 400;
+  text-align: left;
+  color: #901c1c;
+}
+
+.light-box__content video {
+  width: 100%;
+  height: 80vh;
+  object-fit: cover;
+  border-radius: 5px;
+  -webkit-box-shadow: 5px 0 3px 0 rgba(0, 0, 0, 0.61);
+  box-shadow: 5px 0 3px 0 rgba(0, 0, 0, 0.61);
+}