# Cyril Krylatov, développeur front-end senior

Référent HTML/CSS/JS. 15 ans d'expérience, dont 12 à piloter le front d'une marketplace e-commerce : design system, performance, accessibilité.

## Stack et méthodes

### Langages et frameworks

- HTML sémantique
- CSS moderne : approche design tokens, defensive CSS, custom properties, container queries…
- Vanilla JavaScript, Stimulus
- Bootstrap 5 en profondeur

### Qualité et process

- Recettage systématique avant mise en production
- Code review du JS écrit par les développeurs back

## Où et depuis quand je le fais

### Août 2019 - maintenant / Développeur front-end, référent front @ [ComeUp](https://comeup.com/) (ex [5euros.com](https://5euros.com/))

#### Référent front-end : 7 ans chez ComeUp, 12 ans sur le produit

- Marketplace de services ; pilotage du codebase front sur la durée
- Refactoring par cycles et changements structurels sans interrompre le delivery
- Seul intervenant sur le HTML et le CSS, mise en place de d’architecture JavaScript
- Code review du JS écrit par les développeurs back avant merge
- [Retour d'expérience détaillé sur mon blog](https://blog.cyrilou.me/blog/2024-10-01-10-ans-a-soccuper-du-front-du-meme-site-comment-ca-va/)

#### Design System interne — conception, implémentation, documentation

- Design system bâti sur Bootstrap 5 : thème Sass unifié (couleurs, typographie, spacing, breakpoints)
- Tokens exposés en [custom properties CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) pour la variation runtime
- Conventions de nommage, composants standardisés à partir des primitives Bootstrap
- Rédaction et maintenance de la doc interne, référence pour toute l'équipe

#### Industrialisation du framework CSS

- Rationalisation de l'arbre d'imports Bootstrap (retrait des modules inutilisés)
- Consolidation des feuilles Sass, découpage par entrées Webpack
- Résultat : un CSS léger, prévisible, sans redondance ni styles ad hoc

#### Sortie progressive de jQuery vers Vanilla JS et Stimulus

- Problème : grâce à l'ES6, [jQuery devenait vraiment superflu](https://youmightnotneedjquery.com/)
- Refactoring continu du legacy JavaScript : suppression des dépendances superflues
- Réécriture en Vanilla JS puis re-structuration via des controllers Stimulus
- Résultat : moins de dépendances, code plus lisible, meilleur parsing, découplage HTML/JS

#### Trois refontes complètes de l'identité visuelle

- Migration du CSS et du HTML à chaque changement d'identité, sans gel du produit
- Chaque refonte consolide le socle : des styles ad hoc au thème Sass structuré, puis au design system actuel

#### Performance et accessibilité, mesurées et non négociables

- Suivi des [Core Web Vitals](https://developers.google.com/search/docs/appearance/core-web-vitals?hl=fr) sur les pages critiques : repaints/reflows, CLS, INP, préchargement raisonné
- Accessibilité : HTML sémantique, navigation clavier, gestion du focus (modales, dropdowns), contrastes vérifiés
- Perf et a11y vérifiées au même titre à chaque évolution front

#### Développement continu du produit

- Intégration régulière de nouvelles pages et de nouveaux composants
- Responsive par défaut
- [Defensive CSS](https://defensivecss.dev/) pour absorber les contenus utilisateurs imprévus

### Janvier 2017 - août 2019 / UI developer @ [BetaSeries](https://betaseries.com/)

- apprentissage de React, côté UI ᕕ( ᐛ )ᕗ,
- refacto de composants Vanilla avec React (liste de films, agenda, épisodes à voir…),
- utilisation du [SDK utilisant Redux](https://github.com/gonetcats/betaseries-api-redux-sdk/) développé pour l'occasion,
- mise en place de CSS Grid à la place de la grille de Bootstrap.

### Septembre 2014 - Janvier 2017 / UI developer et cuisinier de l'humour @ Ouiche Lorraine

#### [5euros.com](https://5euros.com) :

- intégration complète (HTML, CSS, Vanilla, parfois jQuery) de la nouvelle version du site avec Bootstrap et CSS Grid ;
- mise en place d'une stratégie SEO avec une agence dédiée,
- optimisations du front (lazy loading, mise en place de SVG, analyse de la timeline de Chrome…) ;
- tests sur l'UI,
- création de la version mobile,
- participation dans les choix d'UX,
- intégration d'e-mail responsives,
- mise en place de CSS Grid à la place de la grille de Bootstrap.

#### [BetaSeries](https://betaseries.com) :

- mise à plat en CSS d'une très grosse codebase en Less,
- refacto des différents modules du site avec utilisation poussée de Flexbox,
- création de la version mobile,
- création d'un mode nuit avec notamment la mise en place des variables CSS,
- refacto du code legacy dans des templates Twig en modules réutilisables,
- TMA venue des utilisateurs.

### Octobre 2011 - Août 2014 / intégrateur (Magento, WordPress, intégrations en dur) @ [Colorz](http://colorz.fr)

- premiers pas dans BEM et SMACSS,
- apprentissage de jQuery, mootools et Vanilla ;
- apprentissage de l'intégration dans Magento et WordPress,
- création de starter-kit pour Magento,
- refacto de codes legacies.

### Juin 2011 - octobre 2011 / développeur Web junior @ Quatre Vents

- intégration de newsletters B2B faites par des graphistes print (oui),
- création de sites évènementiels (support IE6 / 7, j'ai connu) ;
- mises à jour HTML5 / jQuery du site du groupe,
- mise en place d'une coordination des pôles graphistes / dev pour voir ce qui est techniquement possible ou non de faire,
- différentes bannières flash.

## Et sinon ?

J'aime bien [écrire sur mon blog](http://blog.cyrilou.me/), la [photographie](http://instagram.com/IAmNotCyril) et Lénou, mon chat.

Niveau [équivalent C1](https://www.service-public.gouv.fr/particuliers/vosdroits/F34739) en anglais.

## Envie de me contacter ?

- [cv@cyrilou.me](mailto:cv@cyrilou.me)
- [blog](https://blog.cyrilou.me/)
- [GitHub](https://github.com/CyrilKrylatov)