diff --git a/assets/css/style.css b/assets/css/style.css index 6634505..299507d 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -38,10 +38,13 @@ --sourceCodePro: "Source Code Pro", monospace; /* border radius*/ --borderRadius: 0px; + /* largeur goutiere*/ + --gutter: 10px; } body { background-color: var(--colorUn); font-family: var(--nanumGothicFont); + position: relative; } main { background-color: var(--colorTrois) @@ -75,6 +78,51 @@ main { /*largeur des sections sur une base de 12 colonnes*/ +.container-1200{ + max-width: 1200px; + margin-left: auto; + margin-right: auto; +} +/*Generation des classes pour la largeur des colonnes selon +les resolutions d'ecrans*/ +/*Desktop*/ + .large-1 { + width: calc(8.3333333333% - 11 * var(--gutter) / 12); + } + .large-2 { + width: calc(16.6666666667% - 5 * var(--gutter) / 6); + } + .large-3 { + width: calc(25% - 3 * var(--gutter) / 4); + } + .large-4 { + width: calc(33.3333333333% - 2 * var(--gutter) / 3); + } + .large-5 { + width: calc(41.6666666667% - 1.4 * var(--gutter) / 2.4); + } + .large-6 { + width: calc(50% - 1 * var(--gutter) / 2); + } + .large-7 { + width: calc(58.3333333333% - 0.7142857143 * var(--gutter) / 1.7142857143); + } + .large-8 { + width: calc(66.6666666667% - 0.5 * var(--gutter) / 1.5); + } + .large-9 { + width: calc(75% - 0.3333333333 * var(--gutter) / 1.3333333333); + } + .large-10 { + width: calc(83.3333333333% - 0.2 * var(--gutter) / 1.2); + } + .large-11 { + width: calc(91.6666666667% - 0.0909090909 * var(--gutter) / 1.0909090909); + } + .large-12 { + width: calc(100% - 0 * var(--gutter) / 1); + } + /* title */ .title-h3 { width: 100%; @@ -82,7 +130,7 @@ main { font-size: 30px; text-transform: uppercase; line-height: 1.2; - padding: 5% 0 5% 0; + padding: 8% 0 8% 0; } .title-h4 { width: 100%; @@ -104,17 +152,23 @@ img { .nav-ul { list-style: none; } + +header { + position: relative; + +} /* nav bar et modale */ .nav-bar { position: fixed; - top:0; + width: 60vw; justify-content: space-between; align-items: center; - padding: 0 2%; + padding: 0 5%; height: 70px; z-index: 2; - background-color: var(--colorDeux); + background-color: var(--colorUn); width: 100%; + } /* link*/ @@ -139,8 +193,8 @@ img { #btn-typo { padding: 7px 3px; border: 1px solid var(--colorTrois); - border-radius: 5px; - background-color: var(--colorDeux); + border-radius: var(--borderRadius); + background-color: var(--colorUn); color: var(--colorTrois); font-size: 12px; width: 120px; @@ -180,15 +234,16 @@ img { /* HERO */ .hero { width: 100%; - height: 100vh; - background: linear-gradient(to bottom right, var(--colorUn), #675d5d); + } /* hero accroche */ .hero__titre { width: 50%; align-content: center; + background: linear-gradient(to bottom right, var(--colorUn), #675d5d); padding: 2%; + height: 100vh; } @@ -222,10 +277,12 @@ img { .hero__images { width: 50%; - height: auto; overflow: hidden; height: 100vh; - +} +.hero__images img{ + width: 100%; + height: auto; } /* .hero__images-img { @@ -245,45 +302,44 @@ img { opacity: 1; } } -/* hero 2 */ -.hero2__images { - width: 50%; - height: 100vh; - overflow: hidden; - filter: sepia(100%) hue-rotate(75deg); -} /* services */ .services { padding: 0% 4.5% 0 4.5%; - color: var(--colorTrois); + gap: var(--gutter); } .services__container { - width: 32%; - margin: 0.5%; - background-color: #00b8bb; border-radius: var(--borderRadius); - padding: 2%; + background-color: var(--colorUn); + color: var(--colorTrois); + } +.services__title-h4 { + font-size: 16px; + font-weight: normal; + margin: 0; + padding: 10%; +} /* projet */ .projet { - padding: 0 4.5% 5% 4.5%; + padding: 0 4.5% 0 4.5%; } .projet__container { - justify-content: center; + justify-content: space-between; + gap: var(--gutter); + margin-bottom: 10px; } .container__card { position: relative; - width: 32%; - height: 300px; border-radius: var(--borderRadius); - margin: 0.5%; overflow: hidden; } .container__card img { border-radius: var(--borderRadius); + width: 100%; + height: auto; } .container__filter-fix { display: flex; @@ -302,23 +358,23 @@ img { padding: 5%; } .container__filter-bgk-1 { - background-color: rgba(4, 107, 43, 0.818); + background-color: rgba(4, 107, 43, 0.8); } .container__filter-bgk-2 { - background-color: rgba(22, 2, 68, 0.778); + background-color: rgba(22, 2, 68, 0.8); } .container__filter-bgk-3 { - background-color: rgba(4, 107, 43, 0.818); + background-color: rgba(4, 107, 43, 0.8); background-image: linear-gradient(to bottom right, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5)); } .container__filter-bgk-4 { - background-color: rgba(157, 7, 50, 0.818); + background-color: rgba(157, 7, 50, 0.8); } .container__filter-bgk-5 { - background-color: rgba(88, 107, 4, 0.818); + background-color: rgba(88, 107, 4, 0.8); } .container__filter-bgk-6 { - background-color: rgba(107, 4, 97, 0.818); + background-color: rgba(107, 4, 97, 0.8); } .container__filter-display { display: none; @@ -337,7 +393,7 @@ img { color: var(--colorTrois); font-size: 40px; padding: 5%; - background-color: rgba(52, 55, 57, 0.837); + background-color: rgba(52, 55, 57, 0.95); } .container__filter-opa-1 { opacity: 0; @@ -364,7 +420,6 @@ img { transition: opacity 0.8s ease; } .container__filter-moove p{ - width: 100%; font-size: 20px; text-align: center; } @@ -383,31 +438,18 @@ img { } /* skills */ .skills { - padding: 4.5%; - background-color: var(--colorDeux); + padding: 0 4.5%; justify-content: space-between; } .skills__title-h3 { color: var(--colorDeux) } -.skills__title-h4 { - background-color: rgba(240, 248, 255, 0.97); - text-align: center; - color: var(--colorDeux); - padding: 2%; - margin:0; - height: 70px; - border-radius: 10px 10px 0 0; -} .skills__contenair { width: 49.5%; - border-radius: var(--borderRadius); - background-color: var(--colorTrois); } .skills__contenair-skills { width: 49.5%; - border-radius: var(--borderRadius); - background-color: var(--colorTrois); + } .skills__title-h5 { margin: 20px 0 0 0; @@ -417,8 +459,6 @@ img { .skills__nav-ul { width: 100%; line-height: 2; - padding: 0 5% 5% 5%; - font-size: 18px; } .skills__nav-li { padding-left: 4%; @@ -427,8 +467,6 @@ img { /* grid */ .container-grid { - - padding: 5%; display: grid; align-items: center; grid-template-columns: 1fr 1fr 1fr 1fr ; @@ -479,14 +517,13 @@ img { padding: 0 4.5% 5% 4.5%; } .about__container { - justify-content: center; + justify-content: space-between; align-items: center; } .about__container-para { width: 45%; line-height: 2; } - .about__container-para>p{ margin-bottom: 20px; } @@ -502,33 +539,32 @@ img { /* PAGE PROJET */ - - /* section slide */ .page-projet { - position: relative; - top:70px; - padding: 4.5%; + padding: 100px 4.5%; } -.pjt-slide { - gap:10px; +.projet__para { + margin-bottom: 20px; } -.pjt-slide__container-img { - width: 300px; +.pjt-slide { + gap: var(--gutter); } + /* section description */ .pjt-description { - justify-content: space-between; - gap:20px; + margin-top:40px; + background-color: var(--colorDeux); } .ptj-description__description { - width: 23%; + padding: 1% 2% ; } .ptj-description__techno { - gap:20px + justify-content: space-around; + gap:20px; } .techno__logo { width: 40px; + height: auto; } @@ -536,7 +572,7 @@ img { /* contact */ .footer { background-color: var(--colorUn); - padding: 2%; + padding: 5% 8%; } .footer__title-h4 { color: var(--colorTrois); diff --git a/assets/images/projets/ms/ms-accueil.png b/assets/images/projets/ms/ms-accueil.png new file mode 100644 index 0000000..8047587 Binary files /dev/null and b/assets/images/projets/ms/ms-accueil.png differ diff --git a/assets/images/projets/ms/ms-cards.png b/assets/images/projets/ms/ms-cards.png new file mode 100644 index 0000000..b9bfe87 Binary files /dev/null and b/assets/images/projets/ms/ms-cards.png differ diff --git a/assets/images/projets/ms/ms-carte.png b/assets/images/projets/ms/ms-carte.png new file mode 100644 index 0000000..3a93b27 Binary files /dev/null and b/assets/images/projets/ms/ms-carte.png differ diff --git a/assets/images/projets/ms/ms-contact.png b/assets/images/projets/ms/ms-contact.png new file mode 100644 index 0000000..742a03a Binary files /dev/null and b/assets/images/projets/ms/ms-contact.png differ diff --git a/assets/images/projets/ms/ms-marques.png b/assets/images/projets/ms/ms-marques.png new file mode 100644 index 0000000..849cb15 Binary files /dev/null and b/assets/images/projets/ms/ms-marques.png differ diff --git a/assets/images/projets/ms/ms-produit.png b/assets/images/projets/ms/ms-produit.png new file mode 100644 index 0000000..db586d4 Binary files /dev/null and b/assets/images/projets/ms/ms-produit.png differ diff --git a/assets/images/projets/projettest/image1.jpeg b/assets/images/projets/projettest/image1.jpeg deleted file mode 100644 index a564523..0000000 Binary files a/assets/images/projets/projettest/image1.jpeg and /dev/null differ diff --git a/assets/images/projets/projettest/image2.jpeg b/assets/images/projets/projettest/image2.jpeg deleted file mode 100644 index e0766aa..0000000 Binary files a/assets/images/projets/projettest/image2.jpeg and /dev/null differ diff --git a/assets/images/projets/projettest/image3.jpeg b/assets/images/projets/projettest/image3.jpeg deleted file mode 100644 index 6e0be4a..0000000 Binary files a/assets/images/projets/projettest/image3.jpeg and /dev/null differ diff --git a/assets/images/projets/projettest/image4.jpeg b/assets/images/projets/projettest/image4.jpeg deleted file mode 100644 index 9b98577..0000000 Binary files a/assets/images/projets/projettest/image4.jpeg and /dev/null differ diff --git a/assets/images/projets/projettest/image5.jpeg b/assets/images/projets/projettest/image5.jpeg deleted file mode 100644 index ce223ae..0000000 Binary files a/assets/images/projets/projettest/image5.jpeg and /dev/null differ diff --git a/assets/images/projets/projettest/image6.jpeg b/assets/images/projets/projettest/image6.jpeg deleted file mode 100644 index 5882098..0000000 Binary files a/assets/images/projets/projettest/image6.jpeg and /dev/null differ diff --git a/assets/images/seo.jpeg b/assets/images/seo.jpeg new file mode 100644 index 0000000..da9f31f Binary files /dev/null and b/assets/images/seo.jpeg differ diff --git a/assets/images/site.jpeg b/assets/images/site.jpeg new file mode 100644 index 0000000..f0c4964 Binary files /dev/null and b/assets/images/site.jpeg differ diff --git a/assets/images/ux.jpeg b/assets/images/ux.jpeg new file mode 100644 index 0000000..92d2bff Binary files /dev/null and b/assets/images/ux.jpeg differ diff --git a/assets/js/projet.js b/assets/js/projet.js new file mode 100644 index 0000000..366d9d1 --- /dev/null +++ b/assets/js/projet.js @@ -0,0 +1,142 @@ +// CHANGEMENT TYPO +document.getElementById("btn-typo").addEventListener("click", changeTypo); +// changement de la typo du site modal +let modal = document.querySelector(".header-modal"); +modal.addEventListener("click", changeTypo); + +/** change typo du site + * @param {*} // pas de parametre + * @return ne retourne rien + */ +function changeTypo() { + // ciblage + let body = document.querySelector("body"); + let btnTypo = document.getElementById("btn-typo"); + // ajout de classe + body.classList.toggle("newTypo"); + btnTypo.classList.toggle("newTypo"); +} + +// MODALE HEADER + +// ouverture et fermeture burger et modale au click +document.querySelector(".hamburger").addEventListener("click", ()=> { + openModal() +}); + +/** ouverture et fermeture burger et modale + * @param {*} // pas de parametre + * @return ne retourne rien + */ +function openModal () { + let modale = document.querySelector(".header-modal"); + modale.classList.toggle("header-modal--is-open"); + let burger = document.querySelector(".header-burger"); + burger.classList.toggle("is-active"); +} + +// AFFICHE TEMPLATE PROJET + +// recupération des données dans l'url +// recuperation de l'url +let urlCurrent = document.location.href; +let urlProjet = document.location.search; +// recuperation des information dans l'URL apres le = +let ref = urlProjet.split("="); +let refProjet= ref[1]; + +// recuperation des données au format json +fetch("./assets/json/projets.json") +.then (response=>{ + return response.json() +}) +.then (response=>{ + templateProjet(response); +}) + +/** selectionne tous les elements d'un projet en fonction de son nom + * + * @param {Objet} data + */ +function categorieProduit (datas) { + // tableau pour recuperer les elements d'un projet + let tabEltProjet = []; + // boucle sur les données json + datas.forEach(projet => { + // projet venant des données json + let nomProjet = projet.refProjet; + // si valeur de la chaine current est inclus dans la chaine du tableau json + if (nomProjet.includes(refProjet)){ + // rempli le tableau avec tous les elements de ce projet + tabEltProjet.push(projet); + // affichage du template projet + console.log (tabEltProjet); + templateProjet (tabEltProjet); + console.log(tabEltProjet[0].images.length); + return tabEltProjet; + } + }); +} +/** creation element DOM pour les images + * @param {Objet} datasProjet les information d'un projet + * @returns {Objet} element du DOM + */ +function templateImages(datasProjet) { + let templateImage =''; + datasProjet[0].images.forEach(image => { + templateImage += `
${image.alt}
` + }); + return templateImage +} +/** creation element DOM pour les logo des techno + * @param {Objet} datasProjet les information d'un projet + * @returns {Objet} element du DOM + */ +function templateTechnos (datasProjet) { + let templateTechno =''; + datasProjet[0].technos.forEach(techno => { + templateTechno += `` + }); + return templateTechno + +} +/** affiche le template projet + * + * @param {array} tabProduitReference + */ +function templateProjet (datasProjet) { + + let data = datasProjet[0]; + template=''; + + template = + ` +

${data.nameProjet}

+

${data.presentationProjet}

+
+ ${templateImages (datasProjet)} +
+
+
+
Contexte
+

${data.contexte}

+
+
+
Mon rôle
+

${data.role}

+
+
+
Technologies utilisées
+ ${templateTechnos (datasProjet)} +
+
+
Commanditaire
+

${data.commanditaire}

+
+
+ ` + // ciblage et creation dom + let projet = document.querySelector(".page-projet"); + projet.innerHTML = template; +} + diff --git a/assets/json/projets.json b/assets/json/projets.json index a482c07..73b3621 100644 --- a/assets/json/projets.json +++ b/assets/json/projets.json @@ -1,39 +1,57 @@ [ { - "nom": "Projet1", + "refProjet": "PO_2024_000001", + "nameProjet": "Men Sportwear", + "presentationProjet": "Boutique de vetements, chaussures et équipement de sport pour homme.", "images": [ { - "adresse": "nomdelimage1", + "name": "ms-accueil.png", "alt": "description" }, { - "adresse": "nomdelimage2", + "name": "ms-marques.png", "alt": "description" }, { - "adresse": "nomdelimage2", + "name": "ms-contact.png", + "alt": "description" + }, + { + "name": "ms-produit.png", + "alt": "description" + }, + { + "name": "ms-cards.png", + "alt": "description" + }, + { + "name": "ms-carte.png", "alt": "description" } ], - "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam inventore saepe perspiciatis eius. Expedita illum illo quas excepturi explicabo porro iste aliquid quisquam, debitis veniam dignissimos delectus, quod necessitatibus provident!", - "role": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam inventore saepe perspiciatis eius. Expedita illum illo quas excepturi explicabo porro iste aliquid quisquam, debitis veniam dignissimos delectus, quod necessitatibus provident!", + "contexte": "Projet réalisé dans le cadre de la formation développeur web et web mobile chez WeBecome", + "role": "Integration de la maquette : HTML et CSS et dynamisation des pages en Java Script.", "technos": [ { - "adresse": "logo-js.png", + "name": "logo-html.png", + "alt": "Logo" + }, + { + "name": "logo-css.png", "alt": "Logo" }, { - "adresse": "logo-js.png", + "name": "logo-js.png", "alt": "Logo" }, { - "adresse": "logo-js.png", + "name": "logo-github.png", "alt": "Logo" } ], - "commanditaire": "Lorem ipsum dolor" + "commanditaire": "Centre e formation WeBecome (Saint Etienne)." } ] \ No newline at end of file diff --git a/index.html b/index.html index aefcbd5..7471fa2 100644 --- a/index.html +++ b/index.html @@ -25,15 +25,16 @@
+ @@ -48,6 +49,7 @@ +
@@ -56,12 +58,12 @@
@@ -84,38 +86,47 @@

Conception
d'applications web ●

-
-

▲ Services

-
+
+

Services

+ +
+
+ +

Creation de sites d'entreprise et de e-commerce.

-
-
-

Forte prise en compte de l'experiences utilisateurs.

+ +
+
+
+

Reponses aux besoins exigents des utilisateurs.

-
-
-

Optimiser le référencement et l'accessibilité.

+ +
+
+
+

Optimisation du référencement et l'accessibilité.

+
-
-

▲ travail recent

+
+

Projets realses

-
- +
+

Men Sportwear

Vente d'arcticles de sport pour homme.

- Voir le site + Voir le site
-
- +
+

4 Elements

Hotels d'exception : Finlande, Thaïlande, Brésil et dans les Île du pacifique.

@@ -123,8 +134,8 @@

▲ travail recent

-
- +
+

Chapeaux Poissons

Quand la dérision rencontre l'absurde

@@ -135,8 +146,8 @@

▲ travail recent

-
- +
+

Application Météo

La météo en temps reel

@@ -144,8 +155,8 @@

▲ travail recent

-
- +
+

Men Sportwear

Vente d'arcticles de sport pour homme

@@ -153,8 +164,8 @@

▲ travail recent

-
- +
+

Men Sportwear

Vente d'arcticles de sport pour homme

@@ -164,9 +175,9 @@

▲ travail recent

-
+
+

Competances et technologies

-

▲ Mes competences

      Design d'interface
      @@ -186,7 +197,6 @@
      Référencement et accessibilité
-

Technologies

@@ -204,8 +214,8 @@

Technologies

-
-

▲ About me

+
+

About me

Ecouter, comprendre, créer.

@@ -223,12 +233,12 @@

Ecouter, comprendre, créer.

diff --git a/projets.html b/projet.html similarity index 59% rename from projets.html rename to projet.html index 58c583f..0f42aae 100644 --- a/projets.html +++ b/projet.html @@ -30,12 +30,12 @@ @@ -58,58 +58,58 @@
-
-

Nom du projet

-
-
-
-
-
-
-
-
-
Déscription
-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam inventore saepe perspiciatis eius. Expedita illum illo quas excepturi explicabo porro iste aliquid quisquam, debitis veniam dignissimos delectus, quod necessitatibus provident!

-
-
-
Mon rôle
-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam inventore saepe perspiciatis eius. Expedita illum illo quas excepturi explicabo porro iste aliquid quisquam, debitis veniam dignissimos delectus, quod necessitatibus provident!

-
-
-
Technologies utilisées
- - - -
-
-
Commanditaire
-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint odio, expedita minima incidunt eius laboriosam nobis illum veniam

-
+
+
+
+ - + \ No newline at end of file