From d4850be6cde066e5be203cde4bdae8cdacfa1bde Mon Sep 17 00:00:00 2001
From: ludelanier <lucas.delanier@etu.uca.fr>
Date: Sat, 8 Jun 2024 22:18:50 +0200
Subject: [PATCH] responsive design

---
 src/components/views/AllinView.vue       | 10 +++++-----
 src/components/views/CompagnonView.vue   |  8 ++++----
 src/components/views/JustMusicView.vue   | 10 +++++-----
 src/components/views/MovieFinderView.vue | 10 +++++-----
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/views/AllinView.vue b/src/components/views/AllinView.vue
index 0ea958b..6791ea1 100644
--- a/src/components/views/AllinView.vue
+++ b/src/components/views/AllinView.vue
@@ -4,9 +4,9 @@ import RedirectLogo from "../../assets/icons/redirect.svg";
 </script>
 
 <template>
-  <div class="flex flex-col h-[75vh] w-full bg-black overflow-hidden relative items-center justify-center px-96">
+  <div class="flex flex-col h-[75vh] w-full bg-black overflow-hidden relative items-center justify-center sm:px-20 md:px-50 lg:px-60 xl:px-96 px-10">
     <p class="text-6xl font-extrabold text-white pb-8 z-10">Allin</p>
-    <p class="text-xl font-light text-white text-center z-10">
+    <p class=" md:text-xl text-md font-light text-white text-center z-10">
       J'ai participé au développement du projet Allin, une application mobile multiplateforme
       permettant de parier sur des événements de la vie quotidienne ou sportifs. Vous pouvez ajouter des amis
       et les défier pour remporter leurs Allcoins !
@@ -24,9 +24,9 @@ import RedirectLogo from "../../assets/icons/redirect.svg";
     <router-link to="/">
       <img src="/images/back-button.png" class="absolute z-10 top-0 left-0 p-10 scale-25 hover:scale-35 ease-in-out transition-all"/>
     </router-link>
-    <img src="/images/projects/allin/allin-banner.png" class="opacity-10 absolute z-0 pointer-events-none"/>
+    <img src="/images/projects/allin/allin-banner.png" class="opacity-10 absolute z-0 pointer-events-none h-[75vh] w-full object-cover"/>
   </div>
-  <div class="bg-white w-full px-80 py-20 transition-all flex flex-col gap-20 pb-36 items-center relative">
+  <div class="bg-white w-full sm:px-20 md:px-50 lg:px-60 xl:px-80 px-10 py-20 transition-all flex flex-col gap-20 pb-36 items-center relative">
     <img src="/images/projects/allin/logo.png" class=" absolute z-0 pointer-events-none w-20 -top-12 left-20"/>
 
     <img src="/images/projects/allin/allin-banner.png" class="pointer-events-none rounded-md"/>
@@ -37,7 +37,7 @@ import RedirectLogo from "../../assets/icons/redirect.svg";
       pour visualiser l'application et la rendre plus concrète. Avec l'aide d'un enseignant, nous avons mis en place
       un suivi de projet agile avec des sprints de deux semaines.
     </p>
-    <div class="flex flox-row w-full justify-between overflow-hidden">
+    <div class="flex flox-row w-full justify-between overflow-scroll overflow-y-hidden">
       <img src="/images/projects/allin/allin-1.png" class="pointer-events-none w-52 object-contain"/>
       <img src="/images/projects/allin/allin-4.png" class="pointer-events-none w-52 object-contain"/>
       <img src="/images/projects/allin/allin-2.png" class="pointer-events-none w-52 object-contain"/>
diff --git a/src/components/views/CompagnonView.vue b/src/components/views/CompagnonView.vue
index 1aa2268..53f1156 100644
--- a/src/components/views/CompagnonView.vue
+++ b/src/components/views/CompagnonView.vue
@@ -4,9 +4,9 @@ import RedirectLogo from "../../assets/icons/redirect.svg";
 </script>
 
 <template>
-  <div class="flex flex-col h-[75vh] w-full bg-black overflow-hidden relative items-center justify-center px-96">
+  <div class="flex flex-col h-[75vh] w-full bg-black overflow-hidden relative items-center justify-center sm:px-20 md:px-50 lg:px-60 xl:px-96 px-10">
     <p class="text-6xl font-extrabold text-white pb-8 z-10">Compagnon</p>
-    <p class="text-xl font-light text-white text-center z-10">
+    <p class=" md:text-xl text-md font-light text-white text-center z-10">
       Compagnon est une application web qui vous assiste dans toutes sortes de tâches. Que ce soit pour noter des idées,
       enregistrer et générer des mots de passe, organiser vos photos ou planifier vos voyages, Compagnon est là pour
       vous.
@@ -24,9 +24,9 @@ import RedirectLogo from "../../assets/icons/redirect.svg";
     <router-link to="/">
       <img src="/images/back-button.png" class="absolute z-10 top-0 left-0 p-10 scale-25 hover:scale-35 ease-in-out transition-all"/>
     </router-link>
-    <img src="/images/projects/compagnon/compagnon-banner.png" class="opacity-5 absolute z-0 pointer-events-none"/>
+    <img src="/images/projects/compagnon/compagnon-banner.png" class="opacity-5 absolute z-0 pointer-events-none h-[75vh] w-full object-cover"/>
   </div>
-  <div class="bg-white w-full px-80 py-20 transition-all flex flex-col gap-20 pb-36 items-center">
+  <div class="bg-white w-full sm:px-20 md:px-50 lg:px-60 xl:px-80 px-10 py-20 transition-all flex flex-col gap-20 pb-36 items-center relative">
     <img src="/images/projects/compagnon/compagnon-banner.png" class="pointer-events-none rounded-md"/>
     <p class="text-xl font-normal text-black">
       Compagnon est une application web réalisée avec le framework Vue et le framework CSS Tailwind. J'ai conçu les
diff --git a/src/components/views/JustMusicView.vue b/src/components/views/JustMusicView.vue
index a069ba7..178800c 100644
--- a/src/components/views/JustMusicView.vue
+++ b/src/components/views/JustMusicView.vue
@@ -4,9 +4,9 @@ import RedirectLogo from "../../assets/icons/redirect.svg";
 </script>
 
 <template>
-  <div class="flex flex-col h-[75vh] w-full bg-black overflow-hidden relative items-center justify-center px-96">
+  <div class="flex flex-col h-[75vh] w-full bg-black overflow-hidden relative items-center justify-center sm:px-20 md:px-50 lg:px-60 xl:px-96 px-10">
     <p class="text-6xl font-extrabold text-white pb-8 z-10">JustMusic</p>
-    <p class="text-xl font-light text-white text-center z-10">
+    <p class="md:text-xl text-md font-light text-white text-center z-10">
       Avec un ami, j'ai développé l'application justMusic, un réseau social captivant qui combine musique et vie
       quotidienne. Sur cette application, vous êtes invité à poster une "capsule" par jour, composée d'une musique et
       d'un selfie de vous.
@@ -24,9 +24,9 @@ import RedirectLogo from "../../assets/icons/redirect.svg";
     <router-link to="/">
       <img src="/images/back-button.png" class="absolute z-10 top-0 left-0 p-10 scale-25 hover:scale-35 ease-in-out transition-all"/>
     </router-link>
-    <img src="/images/projects/justmusic/justmusic-banner.png" class="opacity-10 absolute z-0 pointer-events-none"/>
+    <img src="/images/projects/justmusic/justmusic-banner.png" class="opacity-10 absolute z-0 pointer-events-none h-[75vh] w-full object-cover"/>
   </div>
-  <div class="bg-white w-full px-80 py-20 transition-all flex flex-col gap-20 pb-36 items-center relative">
+  <div class="bg-white w-full sm:px-20 md:px-50 lg:px-60 xl:px-80 px-10 py-20 transition-all flex flex-col gap-20 pb-36 items-center relative">
     <img src="/images/projects/justmusic/logo.png" class=" absolute z-0 pointer-events-none w-20 -top-12 left-20 border-white border-2 rounded-lg"/>
     <img src="/images/projects/justmusic/justmusic-banner.png" class="pointer-events-none rounded-md"/>
     <p class="text-xl font-normal text-black">
@@ -36,7 +36,7 @@ import RedirectLogo from "../../assets/icons/redirect.svg";
       d'un selfie pris sur le vif, vous pouvez partager à tout moment de la journée votre moment favori et interagir
       avec les autres utilisateurs.
     </p>
-    <div class="flex flox-row w-full justify-between overflow-hidden">
+    <div class="flex flox-row w-full justify-between overflow-scroll overflow-y-hidden">
       <img src="/images/projects/justmusic/justmusic-1.png" class="pointer-events-none w-52 object-contain"/>
       <img src="/images/projects/justmusic/justmusic-4.png" class="pointer-events-none w-52 object-contain"/>
       <img src="/images/projects/justmusic/justmusic-2.png" class="pointer-events-none w-52 object-contain"/>
diff --git a/src/components/views/MovieFinderView.vue b/src/components/views/MovieFinderView.vue
index cb89c13..d3c19e0 100644
--- a/src/components/views/MovieFinderView.vue
+++ b/src/components/views/MovieFinderView.vue
@@ -4,9 +4,9 @@ import RedirectLogo from "../../assets/icons/redirect.svg";
 </script>
 
 <template>
-  <div class="flex flex-col h-[75vh] w-full bg-black overflow-hidden relative items-center justify-center px-96">
+  <div class="flex flex-col h-[75vh] w-full bg-black overflow-hidden relative items-center justify-center sm:px-20 md:px-50 lg:px-60 xl:px-96 px-10">
     <p class="text-6xl font-extrabold text-white pb-8 z-10">MovieFinder</p>
-    <p class="text-xl font-light text-white text-center z-10">J'ai développé l'application MovieFinder pour permettre
+    <p class=" md:text-xl text-md font-light text-white text-center z-10">
       la découverte des films tendance et des sorties en salle à travers le monde entier. Inspirée par les applications
       de rencontres, MovieFinder vous permet de "liker" ou de rejeter des films et séries tendances.</p>
     <div class="flex scale-90 sm:scale-100 flex-row gap-3 pt-12 flex-wrap items-center justify-center z-10">
@@ -22,9 +22,9 @@ import RedirectLogo from "../../assets/icons/redirect.svg";
     <router-link to="/">
       <img src="/images/back-button.png" class="absolute z-10 top-0 left-0 p-10 scale-25 hover:scale-35 ease-in-out transition-all"/>
     </router-link>
-    <img src="/images/projects/moviefinder/movie-finder-banner.png" class="opacity-10 absolute z-0 pointer-events-none"/>
+    <img src="/images/projects/moviefinder/movie-finder-banner.png" class="opacity-10 absolute z-0 pointer-events-none h-[75vh] w-full object-cover"/>
   </div>
-  <div class="bg-white w-full px-80 py-20 transition-all flex flex-col gap-20 pb-36 items-center relative">
+  <div class="bg-white w-full sm:px-20 md:px-50 lg:px-60 xl:px-80 px-10 py-20 transition-all flex flex-col gap-20 pb-36 items-center relative">
     <img src="/images/projects/moviefinder/logo.png" class=" absolute z-0 pointer-events-none w-20 -top-12 left-20"/>
 
     <img src="/images/projects/moviefinder/banner-1.png" class="pointer-events-none rounded-md"/>
@@ -35,7 +35,7 @@ import RedirectLogo from "../../assets/icons/redirect.svg";
       les détails de chaque film, incluant le synopsis, la bande-annonce, les acteurs principaux et leur popularité,
       ainsi que des recommandations de films similaires et des commentaires d'internautes.
     </p>
-    <div class="flex flox-row w-full justify-between overflow-hidden">
+    <div class="flex flox-row w-full justify-between overflow-scroll overflow-y-hidden">
       <img src="/images/projects/moviefinder/moviefinder-1.png" class="pointer-events-none w-52 object-contain"/>
       <img src="/images/projects/moviefinder/moviefinder-2.png" class="pointer-events-none w-52 object-contain"/>
       <img src="/images/projects/moviefinder/moviefinder-3.png" class="pointer-events-none w-52 object-contain"/>