feat: 📝 Updated the ReadMe.md for this branch.

.gitlab-ci.yml

@@ -0,0 +1,12 @@
+# Move / rename the content files into the 'public' folder for GitLab Pages
+# Artifacts contents of 'public' for Pages
+# Deploy pages publicly in GitLab
+
+pages:
+  stage: deploy
+  script: echo "hi 👋"
+  artifacts:
+    paths:
+      - public
+  only:
+    - pages

README.FR-fr.md

@@ -1,26 +0,0 @@
-# Open Sand Glass One
-
-Prototype d'une apparence de *One* qui utilise le flou d'arrière plan, des jeux de transparences, des ombres et des angles arrondies, un peu a la façon d'un thème MacOS.  
-
-Le travaille vise a valoriser le thème pour renforcer le sentiment d'appropriation de l'utilisateur, et de réduire les autres décorations de l'interface afin de l'épurer et de valoriser le contenu.  
-
-![Illutration d'un fil de nouveauté sur One](public/Timeline_idle.One.v01.png)
-Exemple de fil de nouveauté avec un thème *Nénuphares*. On observe l'arrière plan flou, les angles arrondies pour la pluparts des éléments et le corps de la page qui remplacent les bordures.  
-
-![Illustration d'un fil de nouveauté avec les boutons de filtrage sur One](public/Timeline_with_filter.One.v01.png)
-Exemple de fil de nouveauté avec le thème *Forêt*. On observe que le système de filtrage du fil est devenue une carte et s'est développé pour faire apparaitre tout les filtres disponibles. Chaques filtres indique son status activé ou non par un code visuel utilisant  un arrière plan coloré ou transparent, un texte blanc ou gris, et un contour lorsque le bouton est désactivé.  
-
-![Illustration de la page Mes Applis](public/MyApps.One.v01.png)
-Exemple de page Mes Applis ave le thème *Automne*. La barre de recherche est allégée et centrée pour correspondre à la largeur de la grille des applications.  
-
-![Illutration d'un fil de nouveauté](public/Timeline_idle.Neo.v01.png)  
-Exemple de fil de nouveauté avec le thème Neo. Celui-ci repends certains codes modifiés pour alléger l'apparence du site.
-
-<figure class="video_container">
-    <video controls="true" allowfullscreen="false" loop="true" disablePictureInPicture="true">
-        <source src="pub/Filter_All.one.mp4" type="video/mp4">
-        <a href="pub/Filter_All.one.mp4">Animation au survol de la zone de filtre</a>
-    </video>
-</figure>
-
-Exemple d'animation. Sur le thème One, le filtre est fortement effacée pour laisser place aux notifications. Son existance est mise en avant lorsque le curseur ou le focus est donné à l'élément pour montrer les possibilités d'interactions.  

README.md

@@ -1,30 +1,10 @@
 # Open Sand One
 
-This is a visual rework of the One ENT website, that rely on back drop blur, opacity, shadows and border radiuses in CSS. It is mostly inspired by iOS 14 aesthetic and overrides the default website theme (via the xStyle extension)
+> This repository serve resources and examples for my Behance portfolio.
 
-We reduced a lot of decoration to simplify the design language and emphases the content, and highlighted the website wallpaper − which is customisable by a predefined selection of vector illustrations − in order to enhance the feel of cosiness. 
+You are on the `pages` branch. This branch hold assets and public ressources, and the `gitlab-ci.yml` pipeline to host pages. The following pages are served:
 
-![Illustration of the Timeline webpage with the water lily theme.](public/Timeline_idle.One.v01.png)
+- https://khosmon.gitlab.io/Open-Sand-One/juxtaposejs/one.html
+- https://khosmon.gitlab.io/Open-Sand-One/juxtaposejs/neo.html
 
-Illustration of the Timeline webpage with the *water lily* theme. Most of the content borders has been removed, background made translucent and blurry. 
-
-![Illustration of the Timeline webpage with the Wood theme.](public/Timeline_with_filter.One.v01.png)
-
-Illustration of the Timeline webpage with the *Wood* theme. The filter list has been revamped to looks like a card when expanded and allow the toggle of switches. Each filters shows if it's activated by using a re-enforced visual code. 
-
-![Illustration of the My Apps webpage with the Fall theme.](public/MyApps.One.v01.png)
-
-Illustration of the My Apps webpage with the *Fall* theme. The search bar has been lightened and justified to the width of the app grid.
-
-![Illutration of the Timeline webpage ](public/Timeline_idle.Neo.v01.png)  
-
-Illustration of the Timeline web page for the Neo ENT. Neo has been adressed for 
-
-<figure class="video_container">
-    <video controls="true" allowfullscreen="false" loop="true" disablePictureInPicture="true">
-        <source src="public/Filter_All.one.mp4" type="video/mp4">
-        <a href="public/Filter_All.one.mp4">Animation au survol de la zone de filtre</a>
-    </video>
-</figure>
-
-Exemple d'animation. Sur le thème One, le filtre est fortement effacée pour laisser place aux notifications. Son existance est mise en avant lorsque le curseur ou le focus est donné à l'élément pour montrer les possibilités d'interactions.  
+There is also the photoshop templates to render them.

public/juxtaposejs/neo.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Juxtapose Neo, before and after</title>
+</head>
+<body>
+    <div class="juxtapose" data-animate="true">
+        <img src="Timeline_with_filter.Neo.before.1.png" alt="An image of the actual implementation" data-label="before">
+        <img src="Timeline_with_filter.Neo.after.1.png" alt="An image of my prototype implementation" data-label="after">
+    </div>
+
+    <script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
+</body>
+</html>

public/juxtaposejs/one.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Juxtapose One, before and after</title>
+</head>
+<body>
+    <div class="juxtapose" data-animate="true">
+        <img src="Timeline_with_filter.One.before.1.png" alt="An image of the actual implementation" data-label="before">
+        <img src="Timeline_with_filter.One.after.1.png" alt="An image of my prototype implementation" data-label="after">
+    </div>
+
+    <script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
+</body>
+</html>

xstyle.css

@@ -1,139 +0,0 @@
-@-moz-document domain("recette.opendigitaleducation.com") {
-	@keyframes rotate {
-		0% {
-			transform: rotate3d(0, 1, 0, 0deg);
-		}
-		100% {
-			transform: rotate3d(0, 1, 0, 360deg);
-		}
-	}
-	i.loading {
-		/*content: '';
-		color: rgba(0, 0, 0, 0);*/
-		background-image: url("https://recette.opendigitaleducation.com/assets/themes/cg771d/img/icons/proud.png");
-		background-size: auto;
-	}
-	body {
-		font-family: Calibri, sans-serif;
-	}
-	h1,
-	h1 a,
-	nav.horizontal a,
-	.navbar .welcome-message {
-		font-family: KGJune, sans-serif;
-	}
-	nav.horizontal a {
-		font-size: 14pt;
-	}
-	h1,
-	h1 a {
-		font-weight: bolder;
-		font-size: 18pt;
-	}
-	.widgets h1 {
-		font-family: "Rancho", sans-serif;
-	}
-	.container section.main {
-		backdrop-filter: blur(30px);
-		background: rgba(255, 255, 255, 0.66) !important;
-		border-radius: 24px 24px 0 0 !important;
-	}
-	.navbar {
-		backdrop-filter: blur(30px);
-		background-image: linear-gradient( rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.66)) !important;
-	}
-	ul.icons-tabs {
-		top: 30px;
-	}
-	div[ng-include="template.containers.main"] > input[type=search] {
-		margin: auto;
-		width: 90%;
-		/* margin: 0 50px; */
-		border: none;
-		border-bottom: 1px solid darkgrey;
-		background: none;
-		/* padding: 0 50px; */
-		float: none;
-	}
-	.notification {
-		border-top: none !important;
-		border-bottom: none !important;
-		border-right: none !important;
-		border-left-width: 14px !important;
-		border-radius: 12px;
-		background: rgba(255, 255, 255, 0.80);
-	}
-	.widgets .news,
-	.qwant,
-	.qwant-junior,
-	.mood-widget,
-	.dicodelazone,
-	.widgets .recorder--audio,
-	.birthday {
-		border: none;
-		border-radius: 12px;
-	}
-	.widgets h1 {
-		border-radius: 12px 12px 0 0 !important;
-		text-align: center;
-	}
-	.widgets .news .new {
-		border-radius: 0 0 12px 12px;
-	}
-	div:not(.simple-notifications) > .notification i.sticker.app::before {
-		text-shadow: none;
-	}
-	.drop-down-block {
-		padding: 10px;
-		border-radius: 12px;
-		/*transition: background-color 500ms linear, margin 500ms linear;*/
-		transition: background-color 100ms cubic-bezier(0.22, 0.61, 0.36, 1);
-		margin-bottom: 30px;
-	}
-	.drop-down-block:hover {
-		background: rgba(255, 255, 255, 0.66);
-	}
-	.drop-down-block.slided {
-		background: rgba(255, 255, 255, 0.66);
-		/*margin-bottom: 30px;*/
-	}
-	.drop-down-label,
-	.drop-down-label:hover {
-		border: none !important;
-		margin-bottom: 0 !important;
-	}
-	.drop-down-block .drop-down-label + .drop-down-info {
-		top: 0;
-		padding: 1.5em;
-	}
-	.chip {
-		transition: all 100ms cubic-bezier(0.22, 0.61, 0.36, 1);
-		background: none;
-		box-shadow: 0px 0px 0px 1px darkgray !important;
-		text-shadow: none !important;
-	}
-	.chip *,
-	.chip > i {
-		color: gray !important;
-	}
-	/*.chip:hover {
-		box-shadow: 0px 0px 0px 2px white !important;
-	}*/
-	.chip.selected,
-	div:not(.simple-notifications) > .notification i.sticker.app {
-		box-shadow: none !important;
-	}
-	.chip.selected > * {
-		color: white !important;
-	}
-	.chip.multiselect {
-		box-shadow: none !important;
-	}
-	.chip.multiselect * {
-		color: white !important;
-	}
-  	nav.horizontal > a i::before,
-	nav.horizontal popover > a i::before{
-		color: #2a9cc8 !important;
-	}
-}