Modification layout de la page Creator (dynamique)
This commit is contained in:
PascalMarchesseault
44
src/layouts/UserProfile.vue
Normal file
44
src/layouts/UserProfile.vue
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
<!-- Fiche test pour router -->
|
||||||
|
<template>
|
||||||
|
<div v-if="user">
|
||||||
|
<h1>{{ user.name }}</h1>
|
||||||
|
<p>{{ user.bio }}</p>
|
||||||
|
<!-- Afficher plus de contenu utilisateur ici -->
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<p>Utilisateur non trouvé</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
user: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fetchUser();
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'$route.params.username': 'fetchUser'
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fetchUser() {
|
||||||
|
const username = this.$route.params.username;
|
||||||
|
fetch(`https://api.hutopy.ca/users/${username}`)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data) {
|
||||||
|
this.user = data;
|
||||||
|
} else {
|
||||||
|
this.user = null;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.user = null;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -8,151 +8,147 @@ import HelpAndContact from '@/views/tos/HelpAndContact.vue'
|
|||||||
import TermsAndConditions from '@/views/tos/TermsAndConditions.vue'
|
import TermsAndConditions from '@/views/tos/TermsAndConditions.vue'
|
||||||
import Transactions from '@/views/tos/Transactions.vue'
|
import Transactions from '@/views/tos/Transactions.vue'
|
||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import UserProfile from '../layouts/UserProfile.vue'
|
||||||
import LoginView from '../views/LoginView.vue'
|
import LoginView from '../views/LoginView.vue'
|
||||||
import PaymentCompleted from '../views/PayementCompleted.vue'
|
import PaymentCompleted from '../views/PayementCompleted.vue'
|
||||||
import SignupView from '../views/SignupView.vue'
|
import SignupView from '../views/SignupView.vue'
|
||||||
import UserBrowser from '../views/UsersBrowser.vue'
|
|
||||||
import ContactView from '../views/main/ContactView.vue'
|
import ContactView from '../views/main/ContactView.vue'
|
||||||
import CreatorFolio from '../views/main/CreatorFolio.vue'
|
import CreatorFolio from '../views/main/CreatorFolio.vue'
|
||||||
import HomeView from '../views/main/HomeView.vue'
|
import HomeView from '../views/main/HomeView.vue'
|
||||||
|
import UserBrowser from '../views/main/UsersBrowser.vue'
|
||||||
import YourProfile from '../views/main/YourProfile.vue'
|
import YourProfile from '../views/main/YourProfile.vue'
|
||||||
import ChloeBeaugrand from '../views/manualusers/ChloeProfile.vue'
|
import ChloeBeaugrand from '../views/manualusers/ChloeProfile.vue'
|
||||||
import Hutopy from '../views/manualusers/HutopyProfile.vue'
|
import Hutopy from '../views/manualusers/HutopyProfile.vue'
|
||||||
import Leffet from '../views/manualusers/LeffetProfile.vue'
|
import Leffet from '../views/manualusers/LeffetProfile.vue'
|
||||||
import MathieuCaron from '../views/manualusers/MathieuCaron.vue'
|
import MathieuCaron from '../views/manualusers/MathieuCaron.vue'
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'main',
|
||||||
|
component: HomeView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/creatorfolio',
|
||||||
|
name: 'creatorfolio',
|
||||||
|
component: CreatorFolio
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/paymentcompleted',
|
||||||
|
name: 'PayementCompleted',
|
||||||
|
component: PaymentCompleted
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/yourprofile',
|
||||||
|
name: 'yourprofile',
|
||||||
|
component: YourProfile
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/contact',
|
||||||
|
name: 'contact',
|
||||||
|
component: ContactView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/signup',
|
||||||
|
name: 'signup',
|
||||||
|
component: SignupView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'login',
|
||||||
|
component: LoginView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/home',
|
||||||
|
name: 'home',
|
||||||
|
component: HomeView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/helpandcontact',
|
||||||
|
name: 'helpandcontact',
|
||||||
|
component: HelpAndContact
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/termsandconditions',
|
||||||
|
name: 'termsandconditions',
|
||||||
|
component: TermsAndConditions
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/contentpolicy',
|
||||||
|
name: 'contentpolicy',
|
||||||
|
component: ContentPolicy
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/faq',
|
||||||
|
name: 'FAQ',
|
||||||
|
component: FAQ
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/guideforcreators',
|
||||||
|
name: 'guideforcreators',
|
||||||
|
component: GuideForCreators
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/about',
|
||||||
|
name: 'about',
|
||||||
|
component: About
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/transactions',
|
||||||
|
name: 'transactions',
|
||||||
|
component: Transactions
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Hutopy',
|
||||||
|
name: 'Hutopy',
|
||||||
|
component: Hutopy
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Leffet',
|
||||||
|
name: 'Leffet',
|
||||||
|
component: Leffet
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/userbrowser',
|
||||||
|
name: 'userbrowser',
|
||||||
|
component: UserBrowser
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/chloebeaugrand',
|
||||||
|
name: 'chloebeaugrand',
|
||||||
|
component: ChloeBeaugrand
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/guillaumeaime',
|
||||||
|
name: 'guillaumeaime',
|
||||||
|
component: GuillaumeAime
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/mathieucaron',
|
||||||
|
name: 'mathieucaron',
|
||||||
|
component: MathieuCaron
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/arps',
|
||||||
|
name: 'arps',
|
||||||
|
component: ARPS
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/:username',
|
||||||
|
name: 'user-profile',
|
||||||
|
component: UserProfile
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: '/creatorFolio',
|
||||||
|
name: 'creatorFolio',
|
||||||
|
component: CreatorFolio
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(import.meta.env.BASE_URL),
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
routes: [
|
routes,
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
name: 'main',
|
|
||||||
component: HomeView
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/creatorfolio',
|
|
||||||
name: 'creatorfolio',
|
|
||||||
component: CreatorFolio
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: '/paymentcompleted',
|
|
||||||
name: 'PayementCompleted',
|
|
||||||
component: PaymentCompleted
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/yourprofile',
|
|
||||||
name: 'yourprofile',
|
|
||||||
component: YourProfile
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/contact',
|
|
||||||
name: 'contact',
|
|
||||||
component: ContactView
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/signup',
|
|
||||||
name: 'signup',
|
|
||||||
component: SignupView
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/login',
|
|
||||||
name: 'login',
|
|
||||||
component: LoginView
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/home',
|
|
||||||
name: 'home',
|
|
||||||
component: HomeView
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/helpandcontact',
|
|
||||||
name: 'helpandcontact',
|
|
||||||
component: HelpAndContact
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/termsandconditions',
|
|
||||||
name: 'termsandconditions',
|
|
||||||
component: TermsAndConditions
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/contentpolicy',
|
|
||||||
name: 'contentpolicy',
|
|
||||||
component: ContentPolicy
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/faq',
|
|
||||||
name: 'FAQ',
|
|
||||||
component: FAQ
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/guideforcreators',
|
|
||||||
name: 'guideforcreators',
|
|
||||||
component: GuideForCreators
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: '/about',
|
|
||||||
name: 'about',
|
|
||||||
component: About
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: '/transactions',
|
|
||||||
name: 'transactions',
|
|
||||||
component: Transactions
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: '/Hutopy',
|
|
||||||
name: 'Hutopy',
|
|
||||||
component: Hutopy
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: '/Leffet',
|
|
||||||
name: 'Leffet',
|
|
||||||
component: Leffet
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: '/userbrowser',
|
|
||||||
name: 'userbrowser',
|
|
||||||
component: UserBrowser
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: '/chloebeaugrand',
|
|
||||||
name: 'chloebeaugrand',
|
|
||||||
component: ChloeBeaugrand
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: '/guillaumeaime',
|
|
||||||
name: 'guillaumeaime',
|
|
||||||
component: GuillaumeAime
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: '/mathieucaron',
|
|
||||||
name: 'mathieucaron',
|
|
||||||
component: MathieuCaron
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: '/arps',
|
|
||||||
name: 'arps',
|
|
||||||
component: ARPS
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: '/guillaumeaime',
|
|
||||||
name: 'guillaumeaime',
|
|
||||||
component: GuillaumeAime
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
],
|
|
||||||
scrollBehavior(to, from, savedPosition) {
|
scrollBehavior(to, from, savedPosition) {
|
||||||
return { top: 0 };
|
return { top: 0 };
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -109,7 +109,7 @@
|
|||||||
<!-- "Core (Menu / Center / Donation)" -->
|
<!-- "Core (Menu / Center / Donation)" -->
|
||||||
<v-row>
|
<v-row>
|
||||||
<!-- "Menu" -->
|
<!-- "Menu" -->
|
||||||
<v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
|
<v-col cols="2" md="3" lg="3" xl="3" xxl="2" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
|
||||||
<v-col style="margin: 0;">
|
<v-col style="margin: 0;">
|
||||||
<v-row class="Hutopy-menu-sticky-mobile">
|
<v-row class="Hutopy-menu-sticky-mobile">
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
@@ -129,90 +129,6 @@
|
|||||||
</v-btn>
|
</v-btn>
|
||||||
</router-link>
|
</router-link>
|
||||||
</v-list-item>
|
</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"
|
|
||||||
elevation="0" outlined="false">
|
|
||||||
<v-icon left class="mr-4">mdi-wallet</v-icon>
|
|
||||||
<p @click="isActive.value = false">Bourse</p>
|
|
||||||
</v-btn>
|
|
||||||
</template>-->
|
|
||||||
|
|
||||||
<!-- Wallet Modale -->
|
|
||||||
<template v-slot:default="{ isActive }">
|
|
||||||
<v-card style="border-radius: 30px;">
|
|
||||||
<div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
|
|
||||||
<v-icon left size="48">mdi-wallet</v-icon>
|
|
||||||
<v-toolbar title="PORTEFEUILLE"
|
|
||||||
style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
|
|
||||||
</div>
|
|
||||||
<v-card-text class="text-h1 pa-12">
|
|
||||||
<v-row>
|
|
||||||
<v-col>
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="7">
|
|
||||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Balance actuelle</h1>
|
|
||||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Montant reçu</h1>
|
|
||||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Dernier don</h1>
|
|
||||||
</v-col>
|
|
||||||
<v-col>
|
|
||||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
|
|
||||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
|
|
||||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">2024-10-04</h1>
|
|
||||||
<p></p>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
<v-col>
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="8">
|
|
||||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">Dons</h1>
|
|
||||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">Montant retiré</h1>
|
|
||||||
</v-col>
|
|
||||||
<v-col>
|
|
||||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">0</h1>
|
|
||||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">0$</h1>
|
|
||||||
<p></p>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-card-text>
|
|
||||||
|
|
||||||
<v-card-actions class="justify-center">
|
|
||||||
<v-btn text="Fermer" @click="isActive.value = false"></v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
<v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
|
|
||||||
<v-row>
|
|
||||||
<v-col style="margin-right: -2%;" cols="1"
|
|
||||||
class="text-truncate text-center font-weight-bold">#T</v-col>
|
|
||||||
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
|
|
||||||
class="text-truncate text-center font-weight-bold">$</v-col>
|
|
||||||
<v-col cols="2" class="text-truncate text-center font-weight-bold">Date</v-col>
|
|
||||||
<v-col cols="3" class="text-truncate text-center font-weight-bold"
|
|
||||||
style="margin-right: 2%; background-color: #fbccee">Name</v-col>
|
|
||||||
<v-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
<v-card style=" border-radius: 25px; margin-top: .5%; max-height: 450px;">
|
|
||||||
<v-row>
|
|
||||||
<v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
|
|
||||||
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
|
|
||||||
class="text-truncate">10$</v-col>
|
|
||||||
<v-col cols="2" class="text-truncate">20-10-2025</v-col>
|
|
||||||
<v-col cols="3" class="text-truncate"
|
|
||||||
style="margin-right: 2%; background-color: #fbccee">Pascal</v-col>
|
|
||||||
<v-col cols="5" class="text-truncate">Good Job</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-card>
|
|
||||||
</template>
|
|
||||||
</v-dialog>
|
|
||||||
</v-list-item>
|
|
||||||
</v-list>
|
</v-list>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-container>
|
</v-container>
|
||||||
@@ -223,268 +139,154 @@
|
|||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<!-- Profile Info Picture name title & description -->
|
<!-- Profile Info Picture name title & description -->
|
||||||
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
|
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="6" xl="6" xxl="8">
|
||||||
<v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
|
<v-row class="d-flex justify-center align-center">
|
||||||
<v-container>
|
<v-col xl="10" xxl="8">
|
||||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
<v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
|
||||||
<!-- User informations Name & title -->
|
<v-container>
|
||||||
<v-container class="background-profile-container" style="margin-top: -8%;">
|
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||||
<v-row>
|
<!-- User informations Name & title -->
|
||||||
<v-col style="height: 50px;" cols="7" offset="2" class="social-container">
|
<v-container class="background-profile-container" style="margin-top: -8%;">
|
||||||
<h1 class="name-info">{{ name }}</h1>
|
|
||||||
</v-col>
|
|
||||||
<v-col></v-col>
|
|
||||||
</v-row>
|
|
||||||
<v-row>
|
|
||||||
<v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
|
|
||||||
<h1 class="occupation-info">{{ title }}</h1>
|
|
||||||
</v-col>
|
|
||||||
<v-col></v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<!-- User Social Network Links -->
|
|
||||||
<v-row>
|
|
||||||
<v-spacer></v-spacer>
|
|
||||||
<v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
|
|
||||||
<v-row>
|
<v-row>
|
||||||
<a href="https://www.facebook.com/GuillaumeMousseau222">
|
<v-col style="height: 50px;" cols="7" offset="2" class="social-container">
|
||||||
<img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
|
<h1 class="name-info">{{ name }}</h1>
|
||||||
alt="Description image 2">
|
|
||||||
</a>
|
|
||||||
<a href="https://www.instagram.com/p/C2f-3UnNdfX/">
|
|
||||||
<img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
|
|
||||||
alt="Description image 2">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="https://www.tiktok.com/@guillaumeaime">
|
|
||||||
<img class="socialicons invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
|
|
||||||
alt="Description image 2">
|
|
||||||
</a>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
<v-col background-color="primary"></v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<!-- Description -->
|
|
||||||
<v-row>
|
|
||||||
<v-container
|
|
||||||
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 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?"
|
|
||||||
title="À propos : Ma mission est claire :">
|
|
||||||
</v-expansion-panel>
|
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-expansion-panels>
|
<v-col></v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
|
||||||
|
<h1 class="occupation-info">{{ title }}</h1>
|
||||||
|
</v-col>
|
||||||
|
<v-col></v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<!-- User Social Network Links -->
|
||||||
|
<v-row>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
<v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
|
||||||
|
<v-row>
|
||||||
|
<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.instagram.com/p/C2f-3UnNdfX/">
|
||||||
|
<img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
|
||||||
|
alt="Description image 2">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="https://www.tiktok.com/@guillaumeaime">
|
||||||
|
<img class="socialicons invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
|
||||||
|
alt="Description image 2">
|
||||||
|
</a>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
<v-col background-color="primary"></v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<!-- Description -->
|
||||||
|
<v-row>
|
||||||
|
<v-container
|
||||||
|
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 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?"
|
||||||
|
title="À propos : Ma mission est claire :">
|
||||||
|
</v-expansion-panel>
|
||||||
|
</v-col>
|
||||||
|
</v-expansion-panels>
|
||||||
|
</v-container>
|
||||||
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
</v-row>
|
</v-container>
|
||||||
</v-container>
|
</v-container>
|
||||||
</v-container>
|
</v-col>
|
||||||
</v-container>
|
</v-row>
|
||||||
|
|
||||||
|
|
||||||
<PostContentMenu style="margin-top: -30px;"></PostContentMenu>
|
|
||||||
|
|
||||||
|
<v-row class="d-flex justify-center align-center">
|
||||||
|
<v-col xl="10" xxl="8">
|
||||||
|
<PostContentMenu style="margin-top: -30px;"></PostContentMenu>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
<!-- Card youtube balado -->
|
<!-- Card youtube balado -->
|
||||||
<v-container>
|
<v-row class="d-flex justify-center align-center">
|
||||||
<v-card class="flow-menu m-0 youtube-card">
|
<v-col xl="10" xxl="8">
|
||||||
<!-- Title, date and btn -->
|
<v-container>
|
||||||
<v-col>
|
<v-card class="flow-menu m-0 youtube-card">
|
||||||
<v-row>
|
<!-- Title, date and btn -->
|
||||||
<v-col class="text-center">
|
<v-col>
|
||||||
<h1 class="card-title">
|
<v-row>
|
||||||
MON PREMIER BALADO</h1>
|
<v-col class="text-center">
|
||||||
</v-col>
|
<h1 class="card-title">
|
||||||
|
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-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>
|
||||||
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<!-- Card core Video/image & text -->
|
|
||||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
|
|
||||||
<v-container>
|
|
||||||
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
|
|
||||||
src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
|
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
||||||
allowfullscreen></iframe>
|
|
||||||
|
|
||||||
<!-- Date -->
|
|
||||||
<v-row class="text-right">
|
|
||||||
<v-col>
|
|
||||||
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
|
|
||||||
24-04-2024
|
|
||||||
</h1>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
|
|
||||||
<p class="text-justify pa-10" style="margin-bottom: -50px; 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>
|
|
||||||
<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; margin-bottom: -20px"
|
|
||||||
placeholder="Commentaire (Arrive bientôt)"></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">
|
|
||||||
NOUVELLE BOUTIQUE À SAINT-HYACINTHE</h1>
|
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<!--<v-col class="text-right">
|
<!-- Card core Video/image & text -->
|
||||||
<v-btn class="btn-card-options" flat tile elevation="0">
|
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
|
||||||
<v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
|
<v-container>
|
||||||
</v-btn> (a intégrer)
|
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
|
||||||
</v-col> -->
|
src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
|
||||||
</v-row>
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||||
|
allowfullscreen></iframe>
|
||||||
|
|
||||||
</v-col>
|
<!-- Date -->
|
||||||
|
<v-row class="text-right">
|
||||||
<!-- Card core Video/image & text -->
|
<v-col>
|
||||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
|
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
|
||||||
<v-container>
|
24-04-2024
|
||||||
<v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/nouvelleboutique.jpg"
|
</h1>
|
||||||
title="Guillaumem"></v-img>
|
</v-col>
|
||||||
|
</v-row>
|
||||||
<!-- Date -->
|
|
||||||
<v-row class="text-right">
|
|
||||||
<v-col>
|
|
||||||
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
|
|
||||||
24-04-2024
|
|
||||||
</h1>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
|
|
||||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">J’ai découvert une nouvelle
|
<p class="text-justify pa-10" style="margin-bottom: -50px; font-size: 1em">C’est un honneur de vous
|
||||||
boutique
|
présenter
|
||||||
à St-Hyacinthe qui embrasse exactement ma philosophie derrière la page Guillaume Aime: faire découvrir
|
mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront
|
||||||
le
|
particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement. Par la
|
||||||
savoir-faire québécois !
|
suite,
|
||||||
|
je
|
||||||
J’y ai croisé Carl Vaillancourt, copropriétaire de l’entreprise Espace Karibou au Centre-ville
|
partage mon itinéraire professionnel peu conventionnel : de mes débuts dans le secteur bovin à
|
||||||
Saint-Hyacinthe ainsi que mon ami Marc-Olivier Hébert de la Fondation L'effet.
|
travers
|
||||||
|
le
|
||||||
Je vous invite à découvrir cette boutique sur la rue Cascade à St-Hyacinthe. Bravo à Karianne Hamel et
|
Canada, à mon poste actuel comme directeur marketing chez Journal Mobile, jusqu'à la direction de
|
||||||
Carl
|
mon
|
||||||
pour ce projet!</p>
|
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 -->
|
<!-- Like dislike commment Section -->
|
||||||
<div style="height: 20px;"></div>
|
<div style="height: 20px;"></div>
|
||||||
<div
|
<div
|
||||||
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
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; margin-bottom: -20px"
|
||||||
|
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||||
|
</v-container>
|
||||||
</div>
|
</div>
|
||||||
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
</v-card>
|
||||||
</div>
|
</v-container>
|
||||||
|
</v-col>
|
||||||
<!-- Comments -->
|
</v-row>
|
||||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
|
|
||||||
placeholder="Commentaire (Arrive bientôt)"></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%">
|
|
||||||
<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" class="card-date">
|
|
||||||
22-04-2024
|
|
||||||
</h1>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<p class="text-justify pa-10" style="margin-bottom: -6%; 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; margin-bottom: -20px"
|
|
||||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
|
||||||
</v-container>
|
|
||||||
</div>
|
|
||||||
</v-card>
|
|
||||||
</v-container>
|
|
||||||
|
|
||||||
|
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<!-- "Large-Monitor-RightCol" Donation -->
|
<!-- "Large-Monitor-RightCol" Donation -->
|
||||||
<v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
|
<v-col cols="2" md="3" lg="3" xl="2" xxl="2" class="hidden-sm-and-down" hidden-sm-and-up>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col>
|
<v-col>
|
||||||
<v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ; bottom: 0;">
|
<v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ; bottom: 0;">
|
||||||
|
|||||||
@@ -236,7 +236,7 @@
|
|||||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import StripePayment from './StripePayment.vue';
|
import StripePayment from '../StripePayment.vue';
|
||||||
let imageSrc = '/images/usersmedia/HutopyProfile/banners/banner01.png';
|
let imageSrc = '/images/usersmedia/HutopyProfile/banners/banner01.png';
|
||||||
let profilePicture = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
|
let profilePicture = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
|
||||||
let name = 'Hutopy'
|
let name = 'Hutopy'
|
||||||
@@ -3,10 +3,12 @@
|
|||||||
<body style="background-color:#f4f4f4">
|
<body style="background-color:#f4f4f4">
|
||||||
<DefaultLayout></DefaultLayout>
|
<DefaultLayout></DefaultLayout>
|
||||||
|
|
||||||
<v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;"></v-row>
|
<v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;">
|
||||||
|
</v-row>
|
||||||
|
|
||||||
<v-row justify="center">
|
<v-row justify="center">
|
||||||
<v-col cols="12">
|
<v-col cols="12">
|
||||||
|
|
||||||
<v-img class="profile-banner " max-height="375" :src="bannerImageUrl" cover
|
<v-img class="profile-banner " max-height="375" :src="bannerImageUrl" cover
|
||||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||||
</v-col>
|
</v-col>
|
||||||
@@ -38,10 +40,11 @@
|
|||||||
</v-btn>
|
</v-btn>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
|
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
</v-row>
|
</v-row>
|
||||||
<p class="text-center" style="margin-bottom: 10px; font-size: 2rem; font-weight: 600;">{{ userName }}</p>
|
<p class="text-center" style="margin-bottom: 10px; font-size: 2.5rem; font-weight: 600;">User Name</p>
|
||||||
<p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">Informations personnelles</p>
|
<p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">Informations personnelles</p>
|
||||||
|
|
||||||
<v-form>
|
<v-form>
|
||||||
|
|||||||
Reference in New Issue
Block a user