Jonathan Levaillant Web Designer & Intégrateur

Bienvenue sur mon portfolio.
Je me présente, Jonathan Levaillant, Web Designer & Intégrateur basé à Paris.

À travers ce site, je vous présenterai mes compétences, mon parcours ainsi que mes principales créations graphiques et intégrations.

Ce portfolio a été réalisé en HTML5, CSS orienté objet (OOCSS) sans CMS.
Bonne visite !

Ilove CSS BEM, OOCSS Vertical Rythm Flex, CSS3 Selectors

Mes formations

Aujourd'hui spécialiste dans le domaine du Web Design et du développement Front-End, j'ai débuté en tant que développeur Back-End avec un DUT "Informatique Répartie et Réseaux" puis une licence "Intégrateur Réseaux locaux et Services".

Après ma licence, j'ai suivi une formation de graphiste, intégrateur à l'Ecole Multimédia ce qui m'a permis d'améliorer et de mettre en application mes compétences dans le domaine du web (HTML, CSS, JavaScript, Web Design).

Mes compétences

Au quotidien j'utilise les nouvelles méthodologies d'intégration (design atomique, intégration modulaire OOCSS, méthodologie BEM, design fluide en "em") ainsi que les dernières recommandations en matière de Web Design (grilles, rythme vertical, mobile first).

J'ai également un intérêt marqué pour le futur du CSS en matière de 3D, de nouveaux modèles de grilles (flexbox) et de CSS4 (sélecteurs parents, fonctions element() et filter(), variables).

Mes réalisations web

Les projets les plus récents ont été réalisés au sein du Groupe Pratique (spécialiste de la vie pratique sur Internet qui comptabilise 8 millions de visiteurs chaque mois). Il s'agit de refontes "from scratch" (étude marketing, Web Design, intégration HTML / CSS, responsive et optimisation SEO). Ces projets durent entre 6 mois et 8 mois, de l'étude marketing à la mise en production.

id2sorties.com

Web

Site concurrent de TimeOut proposant des idées de sorties géolocalisées en France.

En collaboration avec l'équipe marketing, j'ai réalisé le design et l'intégration des principales pages et modules en prenant compte de fortes contraintes SEO et commerciales, notamment pour la gestion des emplacements publicitaires.

L'intégration a été réalisée sans CMS, en CSS orienté objet (OOCSS) / BEM.

Chaque module ou objet est conçu indépendamment des autres, ce qui présente trois avantages majeurs :

  • Le code est plus facilement maintenable: le fait de modifier un module n'a aucune répercussion sur le reste de la page.
  • Le comportement responsive peut être géré pour chaque module.
  • Le code est plus léger.
Page d'accueil des idées de sorties
Version mobile des idées de sorties
Web

Site proposant des guides et des actualités journalières.

L'équipe de développement et moi même avons été confronté à différentes problématiques sur ce projet, notamment pour la gestion de l'affichage des milliers d'images existantes. L'utilisation de l'attribut "srcset" nous aura été d'une grande aide pour pallier à cette difficulté.

De plus, les articles ayant des formats très différents les uns des autres (recettes de cuisine, actualités, guides, modèles de lettres, etc.), le CSS devait être extrêmement modulable.

Page d'accueil des guides pratiques
Version mobile des guides pratiques
Web

Le 118000 est un annuaire en ligne, le principal concurrent des Pages Jaunes.

Ce fut mon premier projet au sein du Groupe Pratique. Avec l'équipe de développement, nous avons procédé à la mise à niveau du site aussi bien graphiquement qu'en terme de référencement SEO.

L'optimisation SEO est la problématique la plus importante pour un annuaire. De ce fait, j'ai pu parfaire mes connaissances dans ce domaine grâce à la relecture de mon code par un expert en Web Marketing.

Page d'accueil de l'annuaire 118000
Version mobile de l'annuaire 118000
Code

Ce projet personnel est l'une de mes démos techniques publiées sur Codepen.
Je me suis lancé le défi de reproduire et d'animer un iPhone 5 en CSS 3D sans utiliser d'images ou de JavaScript.

Démo technique d'un iPhone 5 en CSS 3D

Finger on the Pulse

Web

Portail communautaire américain de sondages en ligne.
Web Design et intégration HTML / CSS via un CMS Java Liferay.

Page d'accueil du portail Finger on the Pulse

... Et bien d’autres

Dans mon ancienne société Toluna (fournisseur de solutions d'enquêtes en ligne pour des instituts de sondages), j'ai pu réaliser de nombreux portails via un CMS Java Liferay. J'étais en charge du Web Design et de l'intégration HTML / CSS. Vous pourrez trouver quelques-uns de mes travaux dans le slider responsive ci-dessous, réalisé en full CSS !
  • The Sandbox

    Portail consommateur américain pour Carter's et OshKosh (Mode et vêtements pour enfants).

    The Sandbox

  • The Macca's Playground

    Portail consommateur australien pour McDonald’s (Suggestions et discussions autour des produits McDonald's).

    The Macca's Playground

  • Shoppers Perspective Community

    Portail communautaire américain pour SPC (Shopping, épicerie).

    Shoppers Perspective Community

  • H2Opinion

    Portail consommateur américain pour Hint Water (Habitudes de consommation autour des boissons aromatisées).

    H2Opinion

  • City of Ryde

    Portail communautaire australien pour la zone d'administration locale Ryde au nord-ouest de Sydney (Qualité de vie, services, etc.).

    City of Ryde

  • Condé Nast

    Portail consommateur américain pour l'éditeur de presse Condé Nast détenant entre autres Vogue, GQ et Vanity Fair.

    Condé Nast

  • Sita Ricerca

    Portail communautaire italien pour Sita Ricerca (Discussions sur l'influence de la mode dans le monde).

    Sita Ricerca

  • Military Shopper Community

    Portail communautaire américain pour MSC (Discussions autour des habitudes de consommation des familles de militaires).

    Military Shopper Community

  • Aviva

    Portail consommateur anglais pour Aviva (Assurance auto, habitation, santé, assurance vie).

    Aviva