Merged PR 32: Guillaume-Modification

Guillaume-Modification Added pictures & text

src/layouts/DefaultLayout.vue

@@ -22,13 +22,13 @@
             <!-- Dropdown Menu Profile/Connection -->
             <v-list style="padding: 0;">
               <v-list-item>
-                <router-link :to="{ name: 'yourprofile' }">
+                <router-link :to="{ name: 'contact' }">
-                  <v-btn class="full-width-btn" flat>Mon profile</v-btn>
+                  <v-btn class="full-width-btn" flat>Connexion</v-btn>
                 </router-link>
               </v-list-item>
-              <v-list-item>
+              <!-- <v-list-item>
-                <v-btn class="full-width-btn" flat>Déconnexion</v-btn>
+                <v-btn class="full-width-btn" flat>Mon profil</v-btn>
-              </v-list-item>
+              </v-list-item>-->
             </v-list>
           </v-menu>
         </v-row>
@@ -43,7 +43,7 @@
           <v-col cols="11" class="d-flex align-center justify-center">
 
             <!-- Logo Top bar -->
-            <img src="/images/hutopymedia/hutopymediafiles/mobilemenulogo.png" class="mobile-header" alt="Logo">
+            <img src="/images/hutopymedia/banners/hutopy.png" class="mobile-header" alt="Logo">
           </v-col>
         </v-row>
       </v-app-bar>
@@ -51,7 +51,7 @@
       <!-- Left-side Menu -->
       <v-navigation-drawer v-model="drawer" temporary>
         <v-list>
-          <v-list-item subtitle="Pascal@hutopy.com" title="Pascal Marchesseault">
+          <v-list-item subtitle="email" title="ANONYME">
             <template v-slot:prepend>
               <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
                 class="mobile-profile-picture mini-profile-picture " alt="Avatar">
@@ -69,10 +69,10 @@
           <RouterLink :to="{ name: 'contact' }">
             <v-list-item prepend-icon="mdi-account-multiple" title="Amis" value="friends"></v-list-item>
           </RouterLink>
-          <v-list-item prepend-icon="mdi-newspaper" title="Contenu" value="content"></v-list-item>
+          <!-- <v-list-item prepend-icon="mdi-newspaper" title="Contenu" value="content"></v-list-item>-->
-          <v-list-item prepend-icon="mdi-wallet" title="Portefeuille" value="wallet"></v-list-item>
+          <!-- <v-list-item prepend-icon="mdi-wallet" title="Portefeuille" value="wallet"></v-list-item>-->
-          <v-list-item style="margin-top: 110%;" prepend-icon="mdi-logout" title="Déconnexion"
+          <!-- <v-list-item style="margin-top: 110%;" prepend-icon="mdi-logout" title="Déconnexion"
-            value="logout"></v-list-item>
+            value="logout"></v-list-item>-->
         </v-list>
       </v-navigation-drawer>
     </v-card>

src/layouts/FooterLayout.vue

@@ -145,6 +145,7 @@ footer a:not(:last-child) {
 
   .hutopy-footer-picture {
     min-width: 200px;
+    margin-left: -15px;
   }
 
 }

src/router/index.js

@@ -23,10 +23,11 @@ const router = createRouter({
       component: HomeView
     },
     {
-      path: '/creatorfolio',
+      path: '/guillaumeaime',
       name: 'creatorfolio',
       component: CreatorFolio
     },
+
     {
       path: '/paymentcompleted',
       name: 'PayementCompleted',

src/views/main/CreatorFolio.vue

@@ -28,14 +28,14 @@
       <!-- Facebook -->
       <v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
         <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.facebook.com/profile.php?id=61556819217561">
+          <a href="https://www.facebook.com/GuillaumeMousseau222">
             <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
               alt="Facebook"></v-img>
           </a>
         </v-col>
         <!-- Instagram -->
         <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.instagram.com/">
+          <a href="https://www.instagram.com/p/C2f-3UnNdfX//">
             <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
               alt="Instagram"></v-img>
           </a>
@@ -46,15 +46,15 @@
             <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
           </v-row>
         </v-col>
-        <!-- X -->
+        <!-- X
         <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
           <a href="https://www.x.com/">
             <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/xblack.png" alt="X"></v-img>
           </a>
-        </v-col>
+        </v-col> -->
         <!-- TikTok -->
         <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.tiktok.com/">
+          <a href="https://www.tiktok.com/@guillaumeaime">
             <v-img class="socialicons-mobile invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
               alt="TikTok"></v-img>
           </a>
@@ -80,9 +80,12 @@
           class="social-icon-group-mobile">
           <v-expansion-panels style="min-width: 320px;">
             <v-col cols="12" offset="-1">
-              <v-expansion-panel class="background-pink" style="color: white;"
+              <v-expansion-panel class="background-pink text-justify" style="color: white;"
-                text="mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
+                text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
-                title="À propos : Ma mission est claire :"></v-expansion-panel>
+                title="À propos : Ma mission est claire :">
+
+
+              </v-expansion-panel>
             </v-col>
           </v-expansion-panels>
         </v-container>
@@ -124,14 +127,15 @@
                         </v-btn>
                       </router-link>
                     </v-list-item>
+
                     <v-list-item>
                       <v-dialog transition="dialog-top-transition" width="auto">
                         <template v-slot:activator="{ props: activatorProps }">
-                          <v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background"
+                          <!-- <v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background"
                             elevation="0" outlined="false">
                             <v-icon left class="mr-4">mdi-wallet</v-icon>
                             <p @click="isActive.value = false">Bourse</p>
-                          </v-btn>
+                          </v-btn>-->
                         </template>
 
                         <!-- Wallet Modale -->
@@ -212,7 +216,7 @@
               </v-container>
             </v-col>
           </v-row>
-          <v-row style="height: 1400px;"></v-row>
+          <v-row style="height: 3000px;"></v-row>
         </v-col>
       </v-col>
 
@@ -241,19 +245,21 @@
                 <v-spacer></v-spacer>
                 <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
                   <v-row>
-                    <a href="https://www.facebook.com/profile.php?id=61556819217561">
+                    <a href="https://www.facebook.com/GuillaumeMousseau222">
                       <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
                         alt="Description image 2">
                     </a>
-                    <a href="https://www.facebook.com/profile.php?id=61556819217561">
+                    <a href="https://www.instagram.com/p/C2f-3UnNdfX/">
                       <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
                         alt="Description image 2">
                     </a>
+                    <!-- x
                     <a href="https://www.facebook.com/profile.php?id=61556819217561">
                       <img class="socialicons" src="/images/hutopymedia/icons/black/xblack.png"
                         alt="Description image 2">
-                    </a>
+                    </a> -->
-                    <a href="https://www.facebook.com/profile.php?id=61556819217561">
+
+                    <a href="https://www.tiktok.com/@guillaumeaime">
                       <img class="socialicons invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
                         alt="Description image 2">
                     </a>
@@ -268,8 +274,8 @@
                   style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
                   <v-expansion-panels style="min-width: 320px;">
                     <v-col cols="12" offset="-1">
-                      <v-expansion-panel class="background-pink" style="color: white;"
+                      <v-expansion-panel class="background-pink text-justify" style="color: white;"
-                        text="mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
+                        text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
                         title="À propos : Ma mission est claire :">
                       </v-expansion-panel>
                     </v-col>
@@ -280,27 +286,26 @@
           </v-container>
         </v-container>
 
-        <!-- Card youtube -->
+
+
+        <!-- Card youtube balado -->
         <v-container>
           <v-card class="flow-menu m-0 youtube-card">
             <!-- Title, date and btn -->
             <v-col>
               <v-row>
-                <v-col>
+                <v-col class="text-center">
                   <h1 class="card-title">
-                    PODCAST #01</h1>
+                    MON PREMIER BALADO</h1>
                 </v-col>
 
-                <v-col class="text-right">
+                <!--<v-col class="text-right">
-                  <!--<v-btn class="btn-card-options" flat tile elevation="0">
+<v-btn class="btn-card-options" flat tile elevation="0">
                     <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
-                  </v-btn>          (a intégrer)   -->
+                  </v-btn>          (a intégrer)
-                </v-col>
+                </v-col> -->
-              </v-row>
-              <v-row>
-                <h1 class="card-date">
-                  10-03-2024</h1>
               </v-row>
+
             </v-col>
 
             <!-- Card core Video/image & text -->
@@ -312,12 +317,28 @@
                   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                   allowfullscreen></iframe>
 
-                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">Ma mission est claire :
+                <!-- Date -->
-                  mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une
+                <v-row class="text-right">
-                  histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de
+                  <v-col>
-                  créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que
+                    <h1 style=" margin-right: 40px; margin-top: 10px">
-                  derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et
+                      24-04-2024
-                  comprises. Et toi, quel est ton objectif pour cette année?</p>
+                    </h1>
+                  </v-col>
+                </v-row>
+
+
+                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">C’est un honneur de vous
+                  présenter
+                  mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront
+                  particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement. Par la suite, je
+                  partage mon itinéraire professionnel peu conventionnel : de mes débuts dans le secteur bovin à travers
+                  le
+                  Canada, à mon poste actuel comme directeur marketing chez Journal Mobile, jusqu'à la direction de mon
+                  agence
+                  créative, Alliés. Enfin, je vous invite à découvrir un autre aspect de ma vie à travers ma page
+                  personnelle,
+                  "Guillaume aime", où je partage tout ce qui me passionne.</p>
+
 
                 <!-- Like dislike commment Section -->
                 <div style="height: 20px;"></div>
@@ -335,6 +356,132 @@
           </v-card>
         </v-container>
 
+        <!-- Card nouvelle boutique -->
+        <v-container>
+          <v-card class="flow-menu m-0 youtube-card">
+            <!-- Title, date and btn -->
+            <v-col>
+              <v-row>
+                <v-col class="text-center">
+                  <h1 class="card-title">
+                    NOUVELLE BOUTIQUE À SAINT-HYACINTHE</h1>
+                </v-col>
+                <!--
+                <v-col class="text-right">
+                 <v-btn class="btn-card-options" flat tile elevation="0">
+                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
+                  </v-btn>          (a intégrer)
+                </v-col>  -->
+              </v-row>
+
+            </v-col>
+
+            <!-- Card core Video/image & text -->
+            <div
+              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
+              <v-container>
+                <v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/nouvelleboutique.jpg"
+                  title="Guillaumem"></v-img>
+
+                <!-- Date -->
+                <v-row class="text-right">
+                  <v-col>
+                    <h1 style=" margin-right: 40px; margin-top: 10px">
+                      23-04-2024
+                    </h1>
+                  </v-col>
+                </v-row>
+
+                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">J’ai découvert une nouvelle
+                  boutique
+                  à St-Hyacinthe qui embrasse exactement ma philosophie derrière la page Guillaume Aime: faire découvrir
+                  le
+                  savoir-faire québécois !
+
+                  J’y ai croisé Carl Vaillancourt, copropriétaire de l’entreprise Espace Karibou au Centre-ville
+                  Saint-Hyacinthe ainsi que mon ami Marc-Olivier Hébert de la Fondation L'effet.
+
+                  Je vous invite à découvrir cette boutique sur la rue Cascade à St-Hyacinthe. Bravo à Karianne Hamel et
+                  Carl
+                  pour ce projet!</p>
+
+                <!-- Like dislike commment Section -->
+                <div style="height: 20px;"></div>
+                <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+
+                <!-- Comments -->
+                <v-text-field style="margin-left: 2%; margin-bottom: 15px;"
+                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
+              </v-container>
+            </div>
+          </v-card>
+        </v-container>
+
+        <!-- Card nouvelle boutique -->
+        <v-container>
+          <v-card class="flow-menu m-0 youtube-card">
+            <!-- Title, date and btn -->
+            <v-col>
+              <v-row>
+                <v-col class="text-center">
+                  <h1 class="card-title">
+                    C'EST PARTI POUR 2024!</h1>
+                </v-col>
+                <!--
+                <v-col class="text-right">
+                 <v-btn class="btn-card-options" flat tile elevation="0">
+                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
+                  </v-btn>          (a intégrer)
+                </v-col>  -->
+              </v-row>
+
+            </v-col>
+
+            <!-- Card core Video/image & text -->
+            <div
+              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
+              <v-container>
+                <v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/cestparti.jpg"
+                  title="Guillaumem"></v-img>
+
+                <!-- Date -->
+                <v-row class="text-right">
+                  <v-col>
+                    <h1 style=" margin-right: 40px; margin-top: 10px">
+                      22-04-2024
+                    </h1>
+                  </v-col>
+                </v-row>
+
+                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">C'est parti pour 2024 ! De
+                  retour au
+                  travail officiellement ce matin afin d'aider les entreprises de la région à rayonner ! Mettre en
+                  lumière les
+                  entrepreneurs et leur unicité, c'est ma passion ! Si jamais tu as besoin d'aide dans ce domaine,
+                  n'hésite
+                  pas à me contacter.</p>
+
+                <!-- Like dislike commment Section -->
+                <div style="height: 20px;"></div>
+                <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+
+                <!-- Comments -->
+                <v-text-field style="margin-left: 2%; margin-bottom: 15px;"
+                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
+              </v-container>
+            </div>
+          </v-card>
+        </v-container>
+
+
       </v-col>
 
       <!-- "Large-Monitor-RightCol" Donation -->
@@ -355,7 +502,7 @@
                 </v-container>
               </v-card>
             </v-container>
-            <v-container style="height: 1600px;">
+            <v-container style="height: 3000px;">
             </v-container>
           </v-col>
           <v-spacer>
@@ -409,7 +556,7 @@ let drawerbottom = false
 let navigationItems = [
   { icon: 'mdi-home', text: 'Accueil', link: 'home' },
   { icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
-  { icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
+  //{ icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
 ];
 </script>
 

src/views/main/HomeView.vue

@@ -182,12 +182,12 @@
 
 
       <!-- They are on the Hutopy section -->
-      <v-row style="margin-top: 40px; margin-bottom: 60px;">
+      <v-row style="margin-top: 20px; margin-bottom: 10px;">
         <v-spacer></v-spacer>
 
         <!-- Subtitle :Ils sont sur Hutopy -->
-        <v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="6" xxl="7">
+        <v-col cols="9" xs="12" sm="12" md="12" lg="10" xl="8" xxl="7">
-          <h1 style=" margin-bottom: 70px; text-align: center;  font-size: 4rem; font-weight: bold; color: #24393c">
+          <h1 style=" margin-bottom: 20px; text-align: center;  font-size: 4rem; font-weight: bold; color: #24393c">
             Ils sont sur Hutopy.</h1>
           <v-spacer></v-spacer>
           <v-col>