About me

Technologies

Rails, View Component, HTML (HAML), CSS (Bootstrap, SCSS), JavaScript (Turbo, Stimulus, Lit), tooling (Webpack)

Caption.Ed

Component system to structure the UI and its future development

To provide structure the software's UI and help abstract the complexity of some front-end patterns, I created a set of components relying on View Component and Tailwind. From generic UI component (link/buttons, forms, data tables...) to "business" ones rendering information specific to the application, they presented a mix of levels of abstraction:

• markup: ad-hoc HTML and/or composition with other components
• CSS: app-wide classes or component specific ones
• JavaScript: light JavaScript enhancement with Stimulus to full-JS component with Preact

Rails, View Component, HTML (ERB), CSS (Tailwind, BEM), JavaScript (Turbo, Stimulus, Preact), tooling (Webpack)

Stornaway

Development of a graph editor to facilitate the creation of interactive video.

Aside from general styling, I mostly got involved with the implementation of the graph editor. It allows creators to map the stories they're building: which scenes make part of the story, which options viewers can take at the end of the scenes and how that affects the scene they're led to. They can then upload the video for each scene and export their story to play in the app's interactive video player.

This included:

• Prototyping for feasibility the extra features to be added to the graph library (JointJS/RappidJS)
• Collaborating with the back-end developers on the architecture for storing and loading the graph
• Integrating the graph edition with Rails forms for editing the node's data
• Implementing specialised form controls (tabs, file upload, colour picking)
• Updates to the existing code for the interactive player
• Developing a web extension to automate integration with YouTube Studio

Rails, HTML (HAML), CSS (Bootstrap, SASS, SCSS), JavaScript (RappidJS), tooling (Webpack)

Big Clean Switch

Development of a "block editor" to help create variations of a green energy supplier switching form

To help Big Clean Switch customize the journey their users go through when looking for a new green energy provider, I helped:

• implement a "block editor" that lets them organise pre-set fields into different steps and pick a theme of colours matching their commercial partner,
• export the resulting form to integrate on their Wordpress site or 3rd party, ensuring minimal bloat (though use of vanilla JS and bespoke CSS) and preventing styles leaking in.

This involved:

• Semantic implementation of various form control components
• Responsive styling of the form with CSS
• Building JavaScript navigation through the step and form fields behaviour (error handling, conditional visibility, adapting values to choices...)
• Offering styling options (theme switching)
• Collaborating to the architecture for handling form's saves, rendering and submission
• Allowing embedding of the form on the marketing site, as well as 3rd parties

Rails, HTML (HAML), CSS (SASS, PostCSS), JavaScript (Vanilla), tooling (Webpack)

Patternbank

Development of a block editor to facilitate the creation of content pages to alongside ecommerce site.

To help Patternbank publish content next to their ecommerce site, I helped implement a "block editor" that allows to build pages through a combination of configurable sections. Due to high importance of visuals for this site, particular attention had to be paid to:

• image responsiveness and performance (lazy loading, srcset, responsive backgrounds)
• providing a variety of responsive layouts for each section
• offering styling options (typography, colours, component variants)
• allowing accessible fluid typography
• providing control for heading levels

On a more technical level, this project included:

• Making a client-side only prototype with Vue to quickly explore the concept
• Collaborating, both on design and implementation, with the backend developers for storing and loading the content
• Implementing components and the page rendering
• Styling the components with CSS
• Integrating a Vue editor to pick sections and configure their options with Rails form in the admin

Rails, HTML (HAML), CSS (SASS, PostCSS), JavaScript (Vue, Vanilla), tooling (Webpack)

Personal site

Explore static site generation, internationalisation and steady writing.

Starting back from scratch, I rebuilt this website using a static site generator, implementing features to publish both in English and French. The whole process is documented through blog posts, from the JavaScript implementing the features to the CSS patterns used for the styles, as well as accessibility fundamentals.

JavaScript (NodeJS), Metalsmith, HTML, CSS, Markdown

To/Fro

Volunteer collaboration to an app that coordinates Knowle West Alliance volunteers who support isolated people during the Covid-19 crisis.

I took part to the EUvsVirus hackathon to kickstart the project and continued growing the project afterwards. Due to the small scale of the team, I got involved in most areas of the build: setting up the front-end build process, implementing Django templates and their styling using Bootstrap, but also using Django's ORM to query the necessary data or customizing Django admin, authentication and emails.

Django, HTML, CSS (Bootstrap, SASS), JavaScript (jQuery), tooling (Parcel)