little tweak

.drone.yml

@@ -1,13 +1,9 @@
 kind: pipeline
 type: docker
 name: default
+# Cette image va par défault clone le repo (pas besoin de clone manuellement)
 
 steps:
-        - name: Clonage du Repo
-          image: alpine/git
-          commands:
-                  - ls
-                  - pwd
         - name: Installation du package
           image: node
           commands:

.gitignore

@@ -11,3 +11,5 @@ init_script.sh
 .env
 .env_dev
 .env_prod
+.env_test
+.env_test

css/app.css

@@ -95,11 +95,23 @@
 .wp-admin.post-type-portfolio .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.wp-admin.post-type-portfolio .chapter-section)) {
 }
 
+.wp-block-post-title {
+  text-transform: unset;
+  line-height: 1;
+}
+
+.wp-block-post-title:before {
+  content: none;
+}
+
 .wp-admin.post-type-portfolio .is-root-container,
 .portfolio-single{
   margin-left: auto;
   margin-right: auto;
   padding-top: 7rem;
+  /* & + *:not(.simple-screen) {
+		@apply xl:mt-32;
+	} */
 }
 
 .wp-admin.post-type-portfolio .is-root-container h1,
@@ -127,8 +139,8 @@
 	.portfolio-single p,
 	.portfolio-single span {
   font-family: "Montserrat", sans-serif;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
-  line-height: 1.25rem;
+  line-height: 1rem;
   line-height: 1.625;
 }
 
@@ -151,16 +163,200 @@
 
 .wp-admin.post-type-portfolio .is-root-container h2, .portfolio-single h2{
   padding-bottom: 1.5rem;
-  font-size: 3rem;
+  line-height: 2.5rem;
-  line-height: 1;
+  font-weight: 700 !important;
+  font-size: 2.5rem;
 }
 
-.project-card{
+.chapter-section + .peertube-integration{
+  margin-top: 2rem;
+}
+
+.portfolio-archive{
+  padding-top: 8rem !important;
+}
+
+/* @apply bigCaslon; */
+
+.portfolio-archive h1:before, .portfolio-archive h2:before, .portfolio-archive h3:before, .portfolio-archive h4:before, .portfolio-archive h5:before, .portfolio-archive h6:before, .old-projects h1:before, .old-projects h2:before, .old-projects h3:before, .old-projects h4:before, .old-projects h5:before, .old-projects h6:before{
+  --tw-content: none;
+  content: var(--tw-content);
+}
+
+.portfolio-archive p,
+	.portfolio-archive span,
+	.old-projects p,
+	.old-projects span {
+  font-family: "Montserrat", sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  line-height: 1.625;
+}
+
+.portfolio-archive strong, .old-projects strong{
+  font-weight: 600;
+}
+
+.portfolio-project-card{
   margin-left: auto;
   margin-right: auto;
-  max-width: 1440px;
+  padding-left: 3rem;
+  padding-right: 3rem;
+  padding-top: 8rem;
+  max-width: 1800px;
 }
 
+.portfolio-project-card__cover{
+  display: block;
+  overflow: hidden;
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
+  /* &:hover {
+			img {
+				transform: scale(1.02);
+			}
+		} */
+}
+
+.portfolio-project-card__cover img{
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+  mix-blend-mode: multiply;
+  transition: transform 0.3s ease-in-out;
+}
+
+.portfolio-project-card--active .portfolio-project-card__cover:hover img {
+  transform: scale(1.02);
+}
+
+.portfolio-project-card__details{
+  display: grid;
+}
+
+@media (min-width: 782px){
+  .portfolio-project-card__details{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.portfolio-project-card__details .client-name{
+  padding-top: 1rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 400;
+  text-decoration-line: underline;
+  text-underline-offset: 4px;
+}
+
+.portfolio-project-card__details .excerpt{
+  padding-top: 1rem;
+}
+
+.portfolio-project-card__details .excerpt h3{
+  font-size: 1.25rem;
+  /* @apply bigCaslon text-4xl; */
+  /* @apply bigCaslon text-4xl; */
+}
+
+.portfolio-project-card__details .excerpt p{
+  margin-bottom: 0px;
+  padding-bottom: 0px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
+}
+
+.portfolio-project-card__details .terms{
+  display: flex;
+  gap: 0.5rem;
+}
+
+.portfolio-project-card .cta--read-project{
+  margin-top: 1.5rem;
+  margin-bottom: 0px;
+  display: block;
+  width: -moz-fit-content;
+  width: fit-content;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.portfolio-project-card .cta--read-project:hover{
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.portfolio-project-card .cta--read-project {
+  box-sizing: content-box;
+  transition: all 0.3s ease-in-out;
+  text-decoration: none;
+}
+
+/* background-color: #34113F; */
+
+/* background-color: #0033DA; */
+
+.portfolio-project-card .cta--read-project span{
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.4s ease-in-out;
+  margin-right: 0px;
+}
+
+.portfolio-project-card .cta--read-project img{
+  position: absolute;
+  right: 1.5rem;
+  height: 1.5rem;
+  width: 1.5rem;
+  --tw-translate-x: -2rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  opacity: 0;
+  filter: invert(1);
+}
+
+.portfolio-project-card .cta--read-project:hover{
+  /* background-color: #0033DA; */
+  --tw-bg-opacity: 1;
+  background-color: rgb(233 25 105 / var(--tw-bg-opacity, 1));
+}
+
+.portfolio-project-card .cta--read-project:hover span{
+  margin-right: 2rem;
+}
+
+.portfolio-project-card .cta--read-project:hover img{
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  opacity: 1;
+  transition: opacity .6s ease-in-out, translate 0.4s ease-in-out;
+}
+
+/* $couleur = array(
+	'web' => '#1CC7C7',
+	'print' => '#C14FE3',
+	'motiondesign' => '#21D5F5',
+	'video' => '#21D5F5',
+); */
+
 .portfolio-header{
   position: relative;
   width: 100vw !important;
@@ -176,8 +372,6 @@
   inset: 0px;
   height: 100% !important;
   width: 100%;
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
   -o-object-fit: cover;
      object-fit: cover;
   z-index: -1;
@@ -202,8 +396,6 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
   font-size: 0.75rem;
   line-height: 1rem;
 }
@@ -215,6 +407,7 @@
 }
 
 .portfolio-header .client-logo{
+  position: relative;
   margin-left: auto;
   margin-right: auto;
   margin-top: 3rem;
@@ -237,8 +430,6 @@
   text-align: center;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
 .gallery-website-screens{
@@ -289,6 +480,15 @@
   flex-wrap: nowrap;
 }
 
+.gallery-website-screens ul.is-mobile-capture{
+  gap: 6rem;
+}
+
+.gallery-website-screens ul.is-mobile-capture img{
+  max-width: 15rem;
+  border-radius: 1.5rem;
+}
+
 .gallery-website-screens ul{
   max-width: 1800px;
 }
@@ -299,6 +499,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  padding-left: 3rem;
+  padding-right: 3rem;
 }
 
 @media (min-width: 1440px){
@@ -322,11 +524,9 @@
   margin-right: auto;
 }
 
-@media (min-width: 1280px){
+/* & + *:not(.simple-screen) {
-  .chapter-section + *:not(.simple-screen){
+		@apply xl:mt-32;
-    margin-top: 8rem;
+	} */
-  }
-}
 
 .chapter-section--right{
   flex-direction: row-reverse;
@@ -334,19 +534,18 @@
 
 .chapter-section__content {
   flex-shrink: 0;
+  max-width: 32rem;
 }
 
 .chapter-section__content p{
+  max-width: 24rem;
   --tw-text-opacity: 1;
   color: rgb(82 82 82 / var(--tw-text-opacity, 1));
 }
 
-.chapter-section__innerblocks{
+/* @apply max-w-xl; */
-  max-width: 36rem;
-}
 
-.chapter-section__innerblocks p{
+.chapter-section__innerblocks p {
-  max-width: 28rem;
 }
 
 .chapter-section__cover{
@@ -396,12 +595,69 @@
   width: 100%;
 }
 
+.simple-screen--large{
+  padding: 6rem;
+}
+
 .simple-screen--large img{
   height: auto;
   width: 100%;
   max-width: 1440px;
 }
 
+.simple-screen--white{
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.peertube-integration{
+  display: flex;
+  width: 100%;
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
+  padding-left: 2rem;
+  padding-right: 2rem;
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+@media (min-width: 782px){
+  .peertube-integration{
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+}
+
+@media (min-width: 1280px){
+  .peertube-integration{
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
+}
+
+.peertube-integration iframe{
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (min-width: 960px){
+  .peertube-integration iframe{
+    max-width: 80vw;
+  }
+}
+
+@media (min-width: 1280px){
+  .peertube-integration iframe{
+    max-width: 60vw;
+  }
+}
+
+.peertube-integration iframe {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 16/9;
+}
+
 .case-button{
   margin-top: 1.5rem;
   display: block;

images/graphic-assets/arrow-see-project.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" width="53.1" height="29.1" viewBox="0 0 53.1 29.1">
+  <g id="Calque_1-2" data-name="Calque 1">
+    <path d="M53.1,13.1c-.2,0-15.4-4.9-15.9-13.1l-3,.2c.3,6,6.1,10.3,11.1,12.9H0v3h45.3c-4.9,2.6-10.7,6.9-11.1,12.9l3,.2c.5-8.2,15.7-13,15.9-13.1l-.4-1.4.4-1.4Z"/>
+  </g>
+</svg>

includes/post-types.php

@@ -26,14 +26,15 @@ function cpt_customer()
 	register_post_type(
 		'portfolio',
 		array(
-			'label' => __('Portfolio'),
+			'label' => __('Projets'),
-			'singular_label' => __('Portfolio'),
+			'singular_label' => __('Projets'),
 			'public' => true,
 			'menu_icon'           => 'dashicons-forms',
 			'show_ui' => true,
 			'hierarchical' => false,
 			'supports' => array('title', 'thumbnail', 'editor', 'excerpt', 'custom-fields', 'revisions', 'page-attributes'),
 			'show_in_rest'       => true, // Active l'éditeur de blocs (Gutenberg).
+			'rewrite' => array('slug' => 'projets'),
 
 		)
 	);
@@ -43,3 +44,42 @@ add_action('init', 'cpt_customer');
 function my_custom_post_type() {}
 
 add_action('init', 'my_custom_post_type');
+
+
+
+
+/* ----------------------------------------------------------------------
+	DÉCLARATION DES COLONNES CUSTOM DANS LA LISTE DES POSTS ARTISANS
+ ------------------------------------------------------------------------*/
+
+// ****  AJOUT DES COLONNES
+function deligraph_projets_add_acf_posts_columns($columns)
+{
+	global $current_screen;
+
+
+	$customColumns = array(
+		'client' => 'Client',
+	);
+	$new_admin_col_arrays = array_slice($columns, 0, 2, true) + $customColumns +  array_slice($columns, 2, count($columns) - 2, true);
+	return array_merge($new_admin_col_arrays);
+}
+add_filter('manage_portfolio_posts_columns', 'deligraph_projets_add_acf_posts_columns');
+
+
+
+/* ----------------------------------------------------------------------
+	GESTION DE LA VALEUR DE CHAQUE COLONNE
+ ------------------------------------------------------------------------*/
+function deligraph_projets_handle_posts_custom_columns($column)
+{
+
+	$post_id = get_the_ID();
+
+	if ($column == 'client') {
+		$client = get_field('client_name', $post_id);
+		if (!$client) return;
+		echo $client;
+	}
+}
+add_action('manage_portfolio_posts_custom_column', 'deligraph_projets_handle_posts_custom_columns', 10, 2);

resources/css/app.css

@@ -5,13 +5,14 @@
 @import "./base/font.css";
 @import "./editor/editor.css";
 
-@import "./portfolio/single-portfolio.css";
+@import "./pages/single-portfolio.css";
-@import "./pages/portfolio.css";
+@import "./pages/archive-portfolio.css";
 
 @import "./blocks/portfolio-header.css";
 @import "./blocks/gallery-website-screens.css";
 @import "./blocks/chapter-section.css";
 @import "./blocks/simple-screen.css";
+@import "./blocks/peertube-integration.css";
 
 .case-button {
 	@apply w-fit bg-red-500 px-6 py-2 rounded-full text-white block mt-6;

resources/css/blocks/chapter-section.css

@@ -1,26 +1,26 @@
 .chapter-section {
-	@apply flex items-center justify-center  2xl:gap-12 !my-0;
+	@apply flex items-center justify-center  2xl:gap-12 !my-0 px-12;
 	/* min-height: 80vh; */
 	@apply xl:pt-32;
 
 	@apply mx-auto;
 
-	& + *:not(.simple-screen) {
+	/* & + *:not(.simple-screen) {
 		@apply xl:mt-32;
-	}
+	} */
 	&--right {
 		@apply flex-row-reverse;
 	}
 	&__content {
 		flex-shrink: 0;
+		@apply max-w-lg;
 		p {
-			@apply text-neutral-600;
+			@apply text-neutral-600 max-w-sm;
 		}
 	}
 	&__innerblocks {
-		@apply max-w-xl;
+		/* @apply max-w-xl; */
 		p {
-			@apply max-w-md;
 		}
 	}
 	&__cover {

resources/css/blocks/gallery-website-screens.css

@@ -9,6 +9,12 @@
 		&.is-flex {
 			@apply flex flex-nowrap;
 		}
+		&.is-mobile-capture {
+			@apply gap-24;
+			img {
+				@apply rounded-3xl max-w-60;
+			}
+		}
 
 		max-width: 1800px;
 	}

resources/css/blocks/peertube-integration.css

@@ -0,0 +1,13 @@
+.peertube-integration {
+	@apply w-full flex px-8 md:px-12 xl:px-24 py-12 bg-neutral-100;
+
+	iframe {
+		@apply mx-auto;
+
+		@apply lg:max-w-[80vw] xl:max-w-[60vw];
+
+		width: 100%;
+		height: auto;
+		aspect-ratio: 16/9;
+	}
+}

resources/css/blocks/portfolio-header.css

@@ -6,7 +6,7 @@
 	dispay: block;
 
 	&__cover {
-		@apply absolute inset-0 bg-red-400 w-full !h-full object-cover;
+		@apply absolute inset-0 w-full !h-full object-cover;
 		z-index: -1;
 	}
 
@@ -19,7 +19,7 @@
 	}
 
 	&__heading-infos {
-		@apply flex items-center justify-between text-white;
+		@apply flex items-center justify-between;
 		@apply text-xs;
 		.project-type {
 			@apply my-0 leading-relaxed;
@@ -27,10 +27,10 @@
 	}
 
 	.client-logo {
-		@apply w-72 h-auto object-contain object-center mx-auto block my-12;
+		@apply w-72 h-auto object-contain object-center mx-auto block my-12 relative;
 	}
 
 	&__innerblocks {
-		@apply mx-auto max-w-lg text-white p-8 rounded-lg text-center text-sm;
+		@apply mx-auto max-w-lg  p-8 rounded-lg text-center text-sm;
 	}
 }

resources/css/blocks/simple-screen.css

@@ -10,8 +10,12 @@
 		}
 	}
 	&--large {
+		@apply p-24;
 		img {
 			@apply w-full max-w-screen-2xl h-auto;
 		}
 	}
+	&--white {
+		@apply py-0;
+	}
 }

resources/css/editor/editor.css

@@ -7,4 +7,10 @@
 		@apply alignfull px-32;
 	}
 }
-
+.wp-block-post-title {
+	text-transform: unset;
+	@apply leading-none;
+	&:before {
+		content: none;
+	}
+}

resources/css/pages/archive-portfolio.css

@@ -0,0 +1,123 @@
+.portfolio-archive {
+	@apply !pt-32;
+}
+.portfolio-archive,
+.old-projects {
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		/* @apply bigCaslon; */
+		&:before {
+			@apply content-none;
+		}
+	}
+
+	p,
+	span {
+		font-family: "Montserrat", sans-serif;
+		@apply text-sm leading-relaxed;
+	}
+	strong {
+		@apply font-semibold;
+	}
+}
+
+.portfolio-project-card {
+	@apply mx-auto px-12 pt-32;
+	max-width: 1800px;
+
+	&__cover {
+		@apply bg-neutral-100 block overflow-hidden;
+		img {
+			@apply mix-blend-multiply object-cover object-center w-full;
+			transition: transform 0.3s ease-in-out;
+		}
+		/* &:hover {
+			img {
+				transform: scale(1.02);
+			}
+		} */
+	}
+	&--active {
+		.portfolio-project-card__cover:hover {
+			img {
+				transform: scale(1.02);
+			}
+		}
+	}
+	&__details {
+		@apply grid   md:grid-cols-2;
+
+		.client-name {
+			@apply pt-4 text-lg font-normal underline underline-offset-4;
+		}
+		.excerpt {
+			@apply pt-4;
+			h3 {
+				@apply text-xl;
+				/* @apply bigCaslon text-4xl; */
+				/* @apply bigCaslon text-4xl; */
+			}
+			p {
+				@apply text-sm text-neutral-500 pb-0 mb-0;
+			}
+		}
+		.terms {
+			@apply flex gap-2;
+		}
+	}
+	.cta--read-project {
+		@apply text-sm block text-white mt-6 mb-0 w-fit ;
+		@apply py-3 px-5 hover:px-6 relative rounded-full bg-neutral-900 flex items-center justify-center;
+		box-sizing: content-box;
+		transition: all 0.3s ease-in-out;
+		text-decoration: none;
+		
+
+		/* background-color: #34113F; */
+		/* background-color: #0033DA; */
+
+
+		span{
+			@apply text-xs font-medium;
+			text-decoration: none;
+			transition: all 0.4s ease-in-out;
+			@apply mr-0;
+		}
+
+		img {
+			@apply w-6 h-6 opacity-0  absolute right-6 -translate-x-8;
+			filter: invert(1);
+		}
+		&:hover{
+			/* background-color: #0033DA; */
+		@apply bg-deli-pink;
+
+		span{
+			@apply mr-8;
+		}
+		img{
+			@apply opacity-100 translate-x-0;
+			transition: opacity .6s ease-in-out, translate 0.4s ease-in-out;
+		}
+		}
+		
+
+
+
+	
+
+	}
+}
+
+
+
+/* $couleur = array(
+	'web' => '#1CC7C7',
+	'print' => '#C14FE3',
+	'motiondesign' => '#21D5F5',
+	'video' => '#21D5F5',
+); */

resources/css/pages/portfolio.css

@@ -1,5 +0,0 @@
-.project-card {
-	@apply max-w-screen-2xl mx-auto;
-}
-
-

resources/css/pages/single-portfolio.css

@@ -17,7 +17,7 @@
 	p,
 	span {
 		font-family: "Montserrat", sans-serif;
-		@apply text-sm leading-relaxed;
+		@apply text-xs leading-relaxed;
 	}
 	strong {
 		@apply font-semibold;
@@ -29,6 +29,14 @@
 	}
 
 	h2 {
-		@apply text-5xl pb-6;
+		@apply text-4xl pb-6 !font-bold;
+		font-size: 2.5rem;
 	}
+	/* & + *:not(.simple-screen) {
+		@apply xl:mt-32;
+	} */
+}
+
+.chapter-section + .peertube-integration {
+	@apply mt-8;
 }

templates/template-portfolio.php

@@ -5,30 +5,9 @@ Template Name: Portfolio
 get_header();
 
 $currentPageId = get_the_ID();
-
-
 ?>
-<div class="container">
-    <div class="row">
-        <div class="col-lg-12 accroche">
-            <h1><?php echo get_field('nom_de_la_page'); ?></h1>
-        </div>
-        <div class="offset-lg-8 col-lg-1">
-            <div class="circleTop"></div>
-        </div>
-        <div class="col-12">
-            <div class="button-group">
-                <button class="tout is-checked" data-target="*">tout</button>
-                <button class="web" data-target=".web">web</button>
-                <button class="print" data-target=".print">print</button>
-                <button class="video" data-target=".video">vidéo</button>
-                <button class="motiondesign" data-target=".motiondesign">motion design</button>
-            </div>
-        </div>
-    </div>
-</div>
 
-<section class="projects-overview">
+<section class="portfolio-archive projects-overview">
 
     <?php
     $args = array(
@@ -41,178 +20,85 @@ $currentPageId = get_the_ID();
             <?php
             $projectThumbnailUrl = get_the_post_thumbnail_url($portfolio_post->ID, 'full');
             $projectPermLink = get_the_permalink($portfolio_post->ID);
+            $excerpt = get_the_excerpt();
+            $clientName = get_field('client_name', $portfolio_post->ID);
+            $terms = get_the_terms($portfolio_post->ID, 'project_type');
 
             ?>
-            <div class="project-card">
+            <div class="portfolio-project-card portfolio-project-card--active">
-                <a href="<?php echo $projectPermLink ?>">
+                <a class="portfolio-project-card__cover" href="<?php echo $projectPermLink ?>">
                     <img src="<?php echo $projectThumbnailUrl ?>" alt="">
+
                 </a>
-                <h2><?php the_title(); ?></h2>
+                <div class="portfolio-project-card__details">
-                <p><?php the_content(); ?></p>
+                    <div>
-                <a href="<?php the_permalink(); ?>">Voir le projet</a>
+                        <h2 class="client-name"><?php echo $clientName ?></h2>
+                        <div class="terms">
+                            <?php foreach ($terms as $term): ?>
+                                <span>#<?php echo $term->name ?></span>
+                            <?php endforeach; ?>
+                        </div>
+                    </div>
+
+                    <div class='excerpt'>
+                        <h3><?php the_title(); ?></h3>
+                        <p><?php echo $excerpt ?></p>
+                        <a class="cta--read-project" href="<?php the_permalink(); ?>">
+                            <span>Voir le projet</span>
+                        <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/graphic-assets/arrow-see-project.svg" alt="Voir le projet">
+                        </a>
+                    </div>
+                </div>
+
             </div>
         <?php endwhile; ?>
     <?php endif; ?>
 </section>
 
-<section class="old-project container">
+<section class="old-projects ">
     <?php
     $portfolio_beta = get_field('portfolio_beta', $currentPageId);
-
-    $cat_colors = array(
-        'web' => '#1CC7C7',
-        'print' => '#C14FE3',
-        'motiondesign' => '#21D5F5',
-        'video' => '#21D5F5',
-    );
-    ?>
-
-    <?php
-    $project_id = $portfolio_post->ID;
-    $projectUrl = get_permalink($project_id);
-    $thumbnailUrl = get_the_post_thumbnail_url($project_id, 'full');
-    $mobileThumbnailUrl = get_the_post_thumbnail_url($project_id, 'full');
-    $projectDescription = get_field('project_description', $project_id);
-
-    $pousseBoule = 'offset-lg-8';
-    $projectType = 'web';
-    $projectTitle = get_the_title($project_id);
-    $clientName = get_field('client_name', $project_id);
-
-    $currentProjectColor = $cat_colors[$projectType];
-
-    $mouse = $categorie === 'video' ? 'Mouseactive' : null;
-    $i = 3;
-    $ballOffset = $i === 1 ? 'offset-lg-4' : ($i === 2 ? 'offset-lg-4' : 'offset-lg-8');
-    ?>
-
-
-    <?php
-    // check if the repeater field has rows of data
-    $couleur = array(
-        'web' => '#1CC7C7',
-        'print' => '#C14FE3',
-        'motiondesign' => '#21D5F5',
-        'video' => '#21D5F5',
-    );
-    $i = 1;
-    $compteurBoule = 1;
-    $compteurVideo = 1;
     ?>
 
     <?php foreach ($portfolio_beta as $portfolio_project): ?>
         <?php
-
+        $image = get_sub_field('image_du_projet');
+        $imageMobile = get_sub_field('image_du_projet_mobile');
         $projectName =   $portfolio_project['nom_du_projet'];
         $clientName =   $portfolio_project['nom_du_client'];
         $projectDescription =   $portfolio_project['description_du_projet'];
-        $image = $portfolio_project['image_du_projet'];
+        $projectThumbnail = $portfolio_project['image_du_projet'];
         $imageMobile = $portfolio_project['image_du_projet_mobile'];
         $categorie = $portfolio_project['categorie_du_projet'];
-        $mouse = 'Mousenonactif';
-        $valeur = $categorie['value'];
-
-
-
-        // COMPTEUR BOULE
-        if ($compteurBoule == 1):
-        elseif ($compteurBoule == 2):
-            $pousseBoule = 'offset-lg-4';
-        elseif ($compteurBoule == 3):
-            $pousseBoule = 'offset-lg-8';
-            $compteurBoule = 1;
-        endif;
-        // FIN COMPTEUR BOULE
-
-        // COMPTEUR VIDEO ET MOUSE VIDEO
-        if ($categorie['value'] === 'video'):
-            $mouse = 'Mouseactive';
-        endif;
-        // FIN COMPTEUR VIDEO ET FIN MOUSE VIDEO
-        // LIEN VIDEO VIDE
-        $lienvideo =  $portfolio_project['url_de_la_video'];
-
-        // FIN LIEN VIDEO VIDE
         ?>
-        <div class="col-12 element-item grid-sizer <?php echo $categorie['value']; ?>" data-category="transition">
-            <div class="row">
 
-                <div class="<?php echo $pousseBoule; ?> col-lg-1">
+        <div class="portfolio-project-card portfolio-project-card--inactive">
-                    <div style="background-color: <?php echo $cat_colors[$valeur]; ?>" class="circleTop"></div>
+            <div class="portfolio-project-card__cover" href="<?php echo $projectPermLink ?>">
-                </div>
+                <!-- <img src="<?php echo $projectThumbnailUrl ?>" alt=""> -->
-                <div class="col-12 <?php
+                <img class="large <?php echo $mouse; ?>" src="<?php echo $projectThumbnail['url']; ?>" alt="<?php echo $projectThumbnail['alt'] ?>">
-                                    if ($categorie['value'] === 'video'):
-                                        echo ("openSlickModal-" . $compteurVideo);
-                                    endif;
-                                    if (empty($lienvideo)) {
-                                        echo ' clickno';
-                                    }
-                                    ?>">
-                    <img class="large <?php echo $mouse; ?>" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>">
                 <img class="mobile" src="<?php echo $imageMobile['url']; ?>" alt="<?php echo $imageMobile['alt'] ?>">
             </div>
-                <?php
+            <div class="portfolio-project-card__details">
-                if ($i % 2 == 0):
+                <div>
-                ?>
+                    <h2 class="client-name"><?php echo $clientName ?></h2>
-                    <div style="color: <?php echo $cat_colors[$valeur]; ?>" class="col-lg-4">
+                    <div class="terms">
-                        <div style="background-color: <?php echo $cat_colors[$valeur]; ?>" class="barre"></div>
+                        <?php if (isset($categorie['value'])): ?>
-                        <h3><?php echo  $projectName  ?></h3>
+                            <span>#<?php echo $categorie['value'] ?></span>
-                        <p class="client"><?php echo $clientName ?></p>
+                        <?php endif; ?>
+                    </div>
+                </div>
+
+                <div class='excerpt'>
+                    <h3><?php echo $projectName ?></h3>
+                    <p><?php echo $projectDescription ?></p>
                 </div>
-                    <div class="col-lg-4 contenu"><?php echo $projectDescription ?></div>
-                <?php
-                else:
-                ?>
-                    <div style="color: <?php echo $cat_colors[$valeur]; ?>" class="offset-lg-4 col-lg-4">
-                        <div style="background-color: <?php echo $cat_colors[$valeur]; ?>" class="barre"></div>
-                        <h3><?php echo  $projectName  ?></h3>
-                        <p class="client"><?php echo $clientName ?></p>
             </div>
-                    <div class="col-lg-4 contenu"><?php echo $projectDescription ?></div>
-                <?php
-                endif;
-                ?>
 
         </div>
-        </div>
-        <?php if ($categorie['value'] === 'video'): ?>
-            <div id="video-portfolio-<?php echo $compteurVideo; ?>" class="slickModal">
-                <div class="slickWindow">
-                    <!-- Your popup content -->
-                    <iframe id="myVideo" src="<?php echo get_sub_field('url_de_la_video'); ?>" frameborder="0" allowfullscreen>
-                    </iframe>
-                    <!-- / Your popup content -->
-                </div>
-            </div>
-        <?php
-            $compteurVideo++;
-        endif;
 
-        $i++;
-        $compteurBoule++;
-        ?>
     <?php endforeach; ?>
 
-
     </div>
-    <div class="row">
-        <div class="col-12">
-            <div class="circleEnd"></div>
-        </div>
-    </div>
-    </div>
-
-
-
-
-
-
-
-
-
-
 </section>
 
-
-
 <?php get_footer(); ?>