This corporate website has been developped for **Pascal Chassoux** and his new business ***Joue-la Simple !***

The goal of this website is to provide a platform **exposing all services** provided by *Joue-la Simple !*, **display several contact forms** (simple contact & quotations) and mainly offer to its clients **a personal user space** allowing them to follow their project progression and letting them access additional contents & other information.

The website's back-office created with **Strapi** allows my client to manage all his projects thanks to these actions:
- Each project's steps update
- Pre formated e-mails sending
- Upload of additional contents (making-of videos, .pdf or audio files, etc...)




jls1.jpg

jls2.jpg

jls3.jpg

jls4.jpg

Ce site corporate a été développé pour le compte de **Pascal Chassoux** et sa nouvelle structure : **Joue-la Simple !**

L'objectif de ce site est d'**exposer l'offre** de *Joue-la Simple !*, proposer des **formulaires de contact & devis** et surtout **fournir au clients un espace privé** dans lequel ces derniers peuvent **consulter l'avancement** de leur projet ainsi que des **contenus additionnels & informations diverses**.

L'interface d'administration créée à l'aide de **Strapi** permet à mon client de gérer tous ses projets à l'aide des actions suivantes :
- Mise à jour de l'avancement de chaque étape
- Envoi d'e-mails pré-formatés au client final
- Mise en ligne de contenus additionnels (vidéos making-of, fichiers .pdf ou audios, etc...)

Joue-la simple !

simple_bar_website.jpg

Site vitrine simple-bar

simple-bar website

I developped a custom theme for **Visual Studio Code**.

This theme's main goal is to provide a dark, readable & clean experience into your favorite code editor.
There is also 7 variants included :

- No bold
- No italic
- No italic & bold
- Flat (no-borders)
- Lite dark
- Lite dark (no-borders)
- Light color scheme

Visit [Night Shift website](https://jean-tinland.github.io/night-shift-demo/) for more info.

You'll find an iTerm2 port of this theme [here](https://github.com/Jean-Tinland/iTerm2-theme-desaturated).

**Installation**

Launch VS Code Quick Open (`⌘+P `or `ctrl+P`), paste the following command, and press `Enter`.

`ext install jean.desaturated`

Or install this theme from the extension panel, search for "_Night Shift theme_".

You can find this theme in the Visual Studio Code Marketplace.

**Support**

As I work mainly with **Javascript**, **Typescript**, **HTML/CSS** & **PHP**, these are for now the only fully supported languages.

Do not hesitate to contact me if you have some suggestions of improvements or language addition requests.

nightshifttheme.jpg

ns_base.jpg

ns_flat.jpg

ns_lite.jpg

ns_lite_flat.jpg

ns_light.jpg

J'ai développé un thème sur-mesure pour **Visual Studio Code**.

L'objectif principal de ce thème est de fournir une expérience sombre, lisible et propre dans votre éditeur de code préféré.
Il y a 7 variantes incluses :

- Sans gras
- Sans d'italique
- Sans italique ni gras
- Sans bordures, en applat
- Version simplifliée (moins de couleurs)
- Version simplifliée sans bordures, en applat
- Version claire

Visitez le [site internet du theme Night Shift](https://jean-tinland.github.io/night-shift-demo/) pour plus d'informations.

Vous trouverez une version pour iTerm2 de ce thème [ici](https://github.com/Jean-Tinland/iTerm2-theme-desatured).

**Installation**

Lancez VS Code "Quick Open" (`⌘+P` ou `ctrl+P`), collez la commande suivante et appuyez sur `Entrée`.

`ext install jean.desatured`

Ou installez ce thème depuis le panneau d'extension en recherchant "_Night Shift theme_".

Vous pouvez trouver ce thème dans la Marketplace Visual Studio Code .

**Support**

Comme je travaille principalement avec **Javascript**, **Typescript**, **HTML/CSS** & **PHP**, ce sont pour l'instant les seuls langages entièrement supportés.

N'hésitez pas à me contacter si vous avez des suggestions d'améliorations ou des demandes d'ajout de languages.

Theme Night Shift

Night Shift theme

An Übersicht status bar widget for yabai.

simple_bar.jpg

L'objectif de cet outil est de faciliter la vie des utilisateurs de macos.

Ce produit s'adresse principalement aux power users notamment à cause de la procédure d'installation peu accessible et surtout à la dépendance sur yabai, logiciel qui instaure une toute nouvelle approche de l'utilisation des fenêtres de vos applications.

Le but de ce widget est de représenter chacun de vos espaces de travail et pour chacun d'entre eux d'afficher toutes les applications ouvertes, afficher le nom du processus courant ainsi que tout un lot de données diverses (heure, date, réseau wifi, etc...).

J'ai également mis en place un site vitrine présentant cet outil.

simple-bar


2ème refonte de mon application de prise de note.

L'objectif était, dans cette version de mon application, de simplifier au maximum l'ensemble des fonctionnalités et de ne conserver que l'essentiel.

Les catégories ont donc disparues au profit d'un simple système d'étiquetage par couleur (à l'instar du Finder de mac OS).

Un éditeur WYSIWYG est toujours présent et implémenté à l'aide de QuillJS

notes1.jpg

notes2.jpg

notes3.jpg

2ème refonte de mon application de prise de note.

L'objectif était, dans cette version de mon application, de simplifier au maximum l'ensemble des fonctionnalités et de ne conserver que l'essentiel.

Les catégories ont donc disparues au profit d'un simple système d'étiquetage par couleur (à l'instar du Finder de mac OS).

Un éditeur WYSIWYG est toujours présent et implémenté à l'aide de QuillJS.

Notes

This website was developed for **Pascal Chassoux, a french director**.

This atypical website **is simply displaying several videos** one under the other with a page dedicated **to an image gallery**.

In order to dress up the video player component I had to build a **custom controls interface**.

**A tailor made back-office** allow the **add/edit and removal** of contents: 
- Videos in each of the website's categories
- Image gallery
- "About" page.

pascalchassoux1.jpg

pascalchassoux2.jpg

pascalchassoux3.jpg

Site vritine réalisée pour le compte de **Pascal Chassoux, un réalisateur Lyonnais**.

Ce site atypique est composé principalement de **vidéos affichées les unes sous les autres**. 

Il m'a donc fallu développer **une interface de contrôle sur mesure** afin de pouvoir habiller le composant qui gère le chargement en streaming des vidéos.

**Une interface d'administration** permet l'ajout, l'édition et la suppression des contenus du site :
- Les vidéos des différentes catégories du site
- La galerie d'images
- La page "A propos"

Portfolio - Pascal Chassoux

I made this website for Emilie Chausy, an interior designer.

It is a wordpress website used to present her activity, her philosophy and her designs.

After delivering the website, I took time to teach her how to use the website so she can add content whenever she needs to. She is now completely autonomous and can further develop her website without my help.

ec_1.jpg

ec_2.jpg

ec_3.jpg

Site internet réalisé pour le compte d'Emilie Chausy, architecte d'intérieur.

Il s'agit un site Wordpress destiné à présenter l'activité, la philosophie & les créations.

En plus de la livraison du site, il m'a fallut former ma cliente à l'utilisation de ce dernier afin qu'elle soit autonome et puisse faire évoluer ce dernier sans interventions de ma part.

EC Archidesigner

I made this website for the **creative agency WOOT** based in Lyon. This business was started by three freelancers.

This website is based on **Wordpress & Divi** and its goal is to promote the owners’ creations and achievements.

The owners wanted a website that was easy to edit so my design revolves around this objective. I had to answer their needs in terms of personalisation of their website (they had a graphic line in mind) while keeping the ease of the editing tools (provided by Divi).

I worked on **integrating several custom-made elements** that were not given by default with Divi (such as an **automated carousel** with the partners’ logos and a **project gallery**).

My mission went further as I had to integrate most of the basic content on the website. I prepared several project templates so they can have a basic shaping when they want to add a project to their website.

To finish my mission and make the website easy to use, I wrote **a whole documentation on how to edit and add content** to the website.

woot_1.jpg

Site internet réalisé pour le compte de **l'agence créative Lyonnaise WOOT** rassemblant 3 auto entrepreneurs.

Ce site réalisé sur la base de **Wordpress & Divi** a pour objectif de promouvoir les réalisations des membres de cette agence.

Toute ma réflexion lors du développement a été guidée par l'idée de rendre le site facilement éditable par ses propriétaires. Il me fallait en effet répondre à leurs attentes quand au niveau de personnalisation de leur site (ces derniers m'ayant fourni une ligne graphique) tout en conservant la facilité d'utilisation des outils d'édition (fournis par Divi).

J'ai donc travaillé à **l'intégration de plusieurs éléments sur-mesure** n'étant pas proposé par Divi par défaut (**carousel de logos partenaires automatisé**, **galerie de projets/aperçus**)

Il m'a également été demandé d'intégrer la plupart des contenus de base du site. J'ai donc préparé plusieurs "templates" de projets permettant d'avoir une mise en forme de base lors de l'ajout d'un nouveau projet au site.

Afin de compléter ma démarche de facilitation de l'utilisation du site, j'ai rédigé tout **une documentation détaillants toutes les démarches d'édition et d'ajout de contenu**.

WOOT

This website was made for Huma.a, a group of DJs from Lyon.

Huma.a is governed by the 1901 law and is DV1’s legacy (the legendary club which closed down in 2016).

In order for Huma.a to be launched, it needed a showcase site. I decided to join this group and develop a simple one page website.

The first version of the website was out very quickly in order to get a good place in terms of referencing. It was developed with a Bootstrap template.

To optimise and lighten the website, I felt it was time to redesign it so I developed it once again, starting from scratch in Septembre 2018, without using any framework. The content loads very fast: only the necessary content loads when clicking on the website and the rest loads as the user scrolls down the page.

The following improvement consisted in developping a Back-Office for the artists and the members. The goal was to give independence to any member so they could change the content whenever they saw fit. All the artists can now edit their respective description (name, info, social network, etc.). They can also modify the description of the group, add events or add their mix. I put in place a system which allows me to manage who gets what rights on the back-office.

The latest improvement consists in adding a small online boutique so Huma.a can sell t-shirts online (via PayPal).

humaa1.jpg

humaa2.jpg

humaa3.jpg

Site internet réalisé pour le compte de l'association Huma.a, un collectif de Dj's Lyonnais.

Huma.a est une association de la loi 1901 issue de l’héritage du mythique DV1, club Lyonnais ayant fermé ses portes en 2016.

Dans l'idée d'accompagner le lancement de l'association, il fallait à cette dernière une vitrine sur le web et c'est à ce niveau là que j'interviens en rejoignant l'association et en prenant en charge le développement d'un site vitrine simple.

La première version de ce site, sortie rapidement afin de se faire une place au niveau du référencement, a été développée à l'aide d'un template Bootstrap.

Pour des raisons d'optimisation surtout pour l'alléger, j'ai donc redéveloppé entièrement le site de zéro (septembre 2018) en oubliant tout type de framework. Le résultat chargeant très rapidement son contenu : uniquement le nécessaire à l'arrivée sur site puis tout le reste lors du déroulement de la page.

L'étape suivant consiste à mettre en place un Back-Office à destination des artistes & membres de l'association. Il s'agit de faire en sorte de rendre les membres plus autonomes vis à vis de moi sur la gestion du contenu de ce site. Les artistes peuvent donc désormais éditer leur présentation respective (nom, description, réseaux sociaux, etc...). Il est également maintenant possible pour les utilisateurs du BO de modifier la description de l'association, d'ajouter des évènements ou encore des mixs. Un système de "droits" permet de gérer les "pouvoirs" de l'utilisateur dans le BO.

Le dernier ajout en date est l'intégration d'une petite boutique en ligne permettant à l'association de vendre ses tee-shirts en ligne (via PayPal). 