For our 2019 greetings, we have created an **interactive greeting card** that you can find on our website at this address: [2019.agence-belle-epoque.fr](https://2019.agence-belle- epoque.fr)!

We carried out this digital experience in about ten days, in parallel with our client projects. We pushed the experience to the maximum compared to the time we had to release it before the end of January ⏱️

## Behind the scenes of the making

This small experiment was carried out with the following technologies:

* [Vue.js](https://vuejs.org/): to structure our code
* [three.js](https://threejs.org/) to manage 3D in webGl
* [GreenSock](https://greensock.com/) to make some of the animations and transitions

The tools and graphic elements were modeled in 3D with [Blender](https://www.blender.org/).

We have implemented multilingualism with the [i18n](https://www.npmjs.com/package/i18n) library that we also use on our React.js projects.

For deployment, we used [Now](https://zeit.co/now) which is very convenient and powerful. We can do an article on it if you're interested.

**PS**: we hope you enjoyed this experience. Would you be interested in learning more about certain animations and features? Don't hesitate to ask us, if we can help you or if you want us to help you with your projects ✌️ 

2019 interactive WebGL greeting card 

Discover a model of our animated interactive office! You can interact on the scene with the different elements of the decor; the coffee machine, the light… To share our know-how in design and interactions, we have put this interactive experience online on Codepen.io. The code is directly available on the Codepen. To carry out this project, we used SVG, the Greensock library and a touch of CSS.

<iframe style="width: 100%;" title="Interactive SVG Workspace from Paris" src="//codepen.io/belleepoque/embed/preview/eNeyog/?height=409&amp;theme-id=0&amp;default-tab=html,result" width="300" height="409" frameborder="no" scrolling="no" allowfullscreen="allowfullscreen"><br />
See the Pen <a href="https://codepen.io/belleepoque/pen/eNeyog/">Interactive SVG Workspace from Paris</a> by Belle Epoque<br />
(<a href="https://codepen.io/belleepoque">@belleepoque</a>) on <a href="https://codepen.io">CodePen</a>.<br />
</iframe>

This little creation was broadly shared, which delighted us.
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Interactive SVG Workspace from Paris <a href="http://t.co/ucHH3pJyLJ">http://t. co/ucHH3pJyLJ</a> by Belle Epoque <a href="https://twitter.com/_Belle_Epoque?ref_src=twsrc%5Etfw">@_Belle_Epoque</a> <a href="http://t.co /TaasbTSaZW">pic.twitter.com/TaasbTSaZW</a></p>&mdash; CSS Design Awards (@cssdesignawards) <a href="https://twitter.com/cssdesignawards/status/614529988419653632?ref_src=twsrc%5Etfw">June 26, 2015</a></blockquote> <script async src= "https://platform.twitter.com/widgets.js" charset="utf-8"></script> 


Animated interactive desktop in SVG 

Webinar is an English term that translates into French as webinar or web seminar. This is an **online conference** in which Internet users participate remotely. The webinar can be viewed live or delayed. It is a communication tool that can be used internally or externally by companies. The webinar can allow you to sell your products, hold question and answer sessions, create real online conferences on your sector...

In this episode, I welcome Gilles Bertaux, co-founder and CEO of **Livestorm which is a simple webinar tool available directly in the browser**. Gilles tells us about the **webinar and video streaming market**. He also tells us about the various marketing techniques put in place to conquer an international market and support regular and organic growth. We are also talking about Livestorm's choice to offer a tool only in the browser without going through native applications. Gilles also shares his journey with us as well as the genesis of Livestorm.

<iframe src="https://player.pippa.io/5c0d44edf2332a327f7a7b54/episodes/livestorm?theme=default&amp;latest=1" width="100%" height="110px" frameborder="0"></iframe>

Some interesting links mentioned in the podcast:

* [WebRTC](https://webrtc.org/)
* [Amplitude](https://amplitude.com/)
* [Attribution](https://www.attributionapp.com/)
* [Segment](https://segment.com/)
* [Ruby On Rails](https://rubyonrails.org/)
* [Vue.js](https://vuejs.org/)
* [Action Cable](https://guides.rubyonrails.org/action_cable_overview.html)
* [Capistrano](https://capistranorb.com/)
* [Intercom](https://www.intercom.com/)
* [Growth Makers Podcast](https://growthmakers.fr/57-definir-sa-north-star-metric-gilles-bertaux-livestorm/)
* [Klaxoon Meeting](https://klaxoon.com/fr/)

You can follow Gilles and Livestorm on all these links:

* [Gilles Bertaux's Twitter](https://twitter.com/gillesbertaux)
* [Livestorm's Twitter](https://twitter.com/livestormapp)
* [LinkedIn of Livestorm](https://www.linkedin.com/company/livestorm/) 

Understanding everything about the webinar market, with Gilles Bertaux 

We received our new business cards in letterpress. The rendering is magnificent. For printing, we called on the Riverside workshop in Bordeaux.

If you want to stand out, we really recommend Letterpress.

Our cards

In this episode, I share with you my discussion with Thomas Firh and Nicolas Legras who co-founded in 2012 **the independent magazine Les Others**. 

Les Others is a **digital and paper media for outdoor and travel lovers**. It is distinguished by graceful photos, high quality stories that take us on a journey and very immersive podcasts! Thomas and Nicolas explain to us in this podcast their adventures to create from scratch an independent magazine in the very complicated press market. I discuss their backgrounds and the actions put in place to carry out this project. We also talk about the difficulties they encountered as well as their worlds and their values. 
It is both inspiring and rich in teachings.

**_Listen to this episode on all your podcast applications and in particular:_**

<iframe src="https://player.pippa.io/5c0d44edf2332a327f7a7b54/episodes/les-others?theme=default&amp;latest=1" width="100%" height="110px" frameborder="0"></iframe>  
Ecouter directement dans le player


## Un magazine papier original et esthétique

À l’heure du tout numérique, Les Others à fait le choix de **proposer un magazine papier** qui offre une expérience de lecture différente que l’écran.  La publication papier est semestrielle et bilingue, à mi-chemin entre un journal de bord et un livre d’art.

Le volume 1 a été financé par une campagne de crowdfounding sur KisKisBankBank en 2015. Aujourd’hui, ils en sont à la 8e édition et du chemin a été parcouru depuis le premier épisode comme ils nous l’expliquent dans le podcast.

Dans chacun de leur magazine, **Les Others apportent une attention toute particulière à la qualité du papier, la mise en page, les photos, la direction artistique et bien entendu au contenu** ! Tiré à 10 000 exemplaires, chaque magazine est traité de manière unique et ils font en sorte de se renouveler constamment pour surprendre le lecteur et le faire voyager. Vous pouvez vous procurer les magazines directement sur leur [Shop](https://fr.store.lesothers.com/).

![](https://admin.agence-belle-epoque.fr/wp-content/uploads/2019/02/les-others-magazine-papier-mise-en-page.jpg)

Les Others a aussi été sélectionné dans les **[8 meilleurs magazines d’aventure et d’outdoor](https://gearpatrol.com/2019/01/22/best-boutique-adventure-magazines/)** au monde par Gear Patronal, récompensant ainsi la qualité du magazine. On retrouve à leurs côtés d’autres superbes magazines comme The surfer’s journal, Another Escape…

## Le podcast “Les Baladeurs”

<div>

![](https://admin.agence-belle-epoque.fr/wp-content/uploads/2019/02/les-baladeurs-podcast-les-others.jpg)Les Others propose un super podcast qui se nomme “Les Baladeurs”, un joli nom pour vivre une **expérience auditive unique du voyage**. Je vous invite vraiment à découvrir ce podcast d’une grande qualité de production et qui change de tous les autres. Vous pouvez retrouver le podcast “Les Baladeurs” sur toutes les grandes plateformes de podcast, comme [Apple Podcast](https://itunes.apple.com/fr/podcast/1-face-%C3%A0-face-polaire-par-j%C3%A9r%C3%A9mie-villet/id1388330691?i=1000412129021). J’ai particulièrement apprécié le 12e épisode : [Mission d’urgence avec Jean François Clevoy](http://www.lesothers.com/les-baladeurs-episode-12-hubble-clervoy/). Je vous invite à l’écouter, si comme moi vous êtes passionné par l’espace et les voyages.

<div>

## Une responsabilité écologique

Les Others est aussi **très impliqué dans la responsabilité écologique**. En 2017, ils ont rejoint l’association [1% for the Planet](https://www.onepercentfortheplanet.org), qui encourage les entreprises à reverser 1% de leur chiffre d’affaires à des associations qui protègent l’environnement. Ils s’investissent également dans de nombreux événements. Ils abordent directement dans le magazine ces sujets ; comme les effets néfastes des réseaux sociaux sur l’environnement et présentent de nouvelles initiatives écologiques, telles que du « rewilding ». Ils mettent en avant des associations et les aident à se faire connaître, comme par exemple avec cet article : [À la rencontre de 3 associations qui luttent pour l’environnement, au pied du Mont-Blanc](https://www.lesothers.com/associations-mont-blanc-patagonia/)

Quelques liens intéressants cités dans le podcast :

*   [Gear Patrol – The 8 Best Outdoor Adventure Magazines](https://gearpatrol.com/2019/01/22/best-boutique-adventure-magazines/)
*   [Kinfolk](https://kinfolk.com/)
*   [Cereal Magazine](https://readcereal.com/)
*   [Desillusion Magazine](http://dslmag.com/)
*   [1% for the Planet](https://www.onepercentfortheplanet.org)
*   [KissKissBankBank](https://www.kisskissbankbank.com/)
*   [Penninghen – École d’arts graphiques‎](https://www.penninghen.fr/)

Vous pouvez suivre Les Others :

*   [Site internet](http://www.lesothers.com/)
*   [Shop](https://fr.store.lesothers.com/)
*   [Facebook](https://www.facebook.com/LesOthers)
*   [Instagram](https://www.instagram.com/lesothers/)
*   [Podcast Les Baladeurs](https://itunes.apple.com/fr/podcast/les-baladeurs/id1388330691?mt=2)
*   [Les Others Studio](http://lesothers.studio/)
*   [S’abonner à la newsletter Les Others](http://www.lesothers.com/newsletter/)

**PS** : Si vous aimez ce podcast, et que vous souhaitez que d’autres le découvrent, je vous encourage à vous abonner, à laisser une note et un commentaire sur votre application. Merci à tous pour votre soutien.

Les Others Magazine, an adventurous story with Thomas Firh & Nicolas Legras 

Today, I share with you my discussion with Bruno Simon who is **lead developer at Immersive Garden**. Immersive Garden is a digital production studio regularly awarded for the high quality of its achievements. In particular, they received the distinction of studio of the year in 2017 by Awwwards and CSS Design Awards. These are two sites that reward the best web achievements. 

<iframe src="https://player.pippa.io/5c0d44edf2332a327f7a7b54/episodes/lead-developpeur-creatif-immersive-garden-bruno-simon?theme=default&amp;latest=1" width="100%" height="110px" frameborder="0"></iframe>


Avec Bruno, on discute des projets sur lesquels il a travaillé à Immersive Garden comme le site **Orano**, ou **The New Mobile Workflow**. Ils nous expliquent certaines techniques qu’il a pu utiliser sur les sites qu’il a développé.

Il revient aussi sur comment, il s’est formé à des technologies avancées comme le WebGl. Il nous explique aussi les frameworks javaScript qu’il utilise comme Vue.js.

On discute aussi de sa vision de la formation, car il donne des cours à l’école web Hetic. Bruno souhaite **“créer des vocations”**.

Pour améliorer les cours qu’il dispense, il a développé [Keppler](https://brunosimon.github.io/keppler/). Un outil qui permet de **partager son code en temps réel**.

![](https://admin.agence-belle-epoque.fr/wp-content/uploads/2019/01/kepler-projet-bruno-simon.jpg)

C’est un épisode très intéressant et très riche qui je l’espère vous plaira. Je vous laisse le découvrir.

Quelques liens cités dans le podcast :

*   [Logiciel de 3D gratuit Blender](https://www.blender.org/)
*   [Immersive Garden](https://immersive-g.com/)
*   [Hetic](http://hetic.net)
*   [Conférence Grow](https://www.grow.paris/fr/)
*   [Orano](https://www.orano.group/experience/innovation/en)
*   [The Hunt for the Cheshire Cat by HiddenCity](https://cheshirecat.inthehiddencity.com/)
*   [The New Mobile Workforce](https://www.thenewmobileworkforce.com/)
*   [kepler](https://brunosimon.github.io/keppler/)
*   [https://bruno-simon.com/grow/matcaps/](https://bruno-simon.com/grow/matcaps/)
*   [https://bruno-simon.com/grow/images-3d/](https://bruno-simon.com/grow/images-3d/)

Vous pouvez suivre Bruno :

*   Twitter [@bruno_simon](https://twitter.com/bruno_simon)
*   [Githgub](https://github.com/brunosimon/)
*   [LinkedIn](https://www.linkedin.com/in/simonbruno77/)

**PS :  **Pensez à vous abonner sur [Apple Podcast](https://itunes.apple.com/fr/podcast/les-nouveaux-artisans/id1447046356?mt=2) et à mettre 5 étoiles. N’hésitez pas à me donner votre avis sur cet épisode également.

Discover the profession of creative developer with Bruno Simon 

In today's episode, I talk with Clara Rua about the profession of product designer and how to give an identity to your product. We discuss her career and experiences abroad, particularly in China. 

<iframe src="https://player.pippa.io/5c0d44edf2332a327f7a7b54/episodes/decouvrir-metier-product-designer?theme=default&amp;latest=1" width="100%" height="110px" frameborder="0"></iframe>


Avec Clara on parle de son expérience de product designer chez [Slite](https://slite.com/). Slite est une application de prise de note collaborative. Clara nous partage leurs process, les outils qu’ils utilisent et leurs visions.

![](https://admin.agence-belle-epoque.fr/wp-content/uploads/2019/01/slite-design.jpg)

Aujourd’hui, avec le nombre d’acteurs importants sur les différents secteurs du web, il est essentiel que son site ou son application se distingue. Créer un produit unique et mémorable est essentiel. Cela passe par les différentes composantes design que le product designer doit intégrer et prendre en considération.

Quelques liens intéressants cités dans le podcast :

*   [Neverbland](http://neverbland.com/)
*   [Agence Me](https://www.agence-me.com)
*   [Fred et Farid](https://ffcreative.com/)
*   [Balderdash](http://balderdash.co/)
*   [Strapi](https://strapi.io/)
*   [Slack](https://slack.com/intl/fr-fr/)
*   [Figma](http://figma.com)
*   [InVision](https://www.invisionapp.com/)
*   [Framer](https://framer.com/)
*   [Brand Deck](https://branding.cards/)
*   [Y Combinator](https://www.ycombinator.com/)

Suivre Clara Rua :

*   [Linkedin](https://www.linkedin.com/in/clararua/?originalSubdomain=fr)
*   [Twitter](https://twitter.com/clara_rua)
*   [Dribbble](https://dribbble.com/clara_rua)

**PS** : J’aimerai savoir si la longueur du podcast vous convient ou si vous préférez plus court ?

Discover the profession of Product Designer with Clara Rua 

In this first episode, I welcome Vincent Le Vern, artistic director and founder of the Sunrise Over Sea photo journal that he keeps with his partner Carole Guillou. 
Vincent started as a Geographer and he is totally self-taught. With Vincent, we talk about his career, how he managed to get to work on the web when he was not from this environment at all. 
Before working with on the web, he also started by doing print design. He also tells us about his universe, his inspirations, and his daily life in the Landes region.

We work together at Belle Epoque and we have completed many projects together.

You can listen to this podcast on Apple Podcast, Spotify…

The episode is also available directly here with the player below:

<iframe src="https://player.pippa.io/5c0d44edf2332a327f7a7b54/episodes/interview-vincent-le-vern?theme=default&amp;latest=1" width="100%" height="110px" frameborder="0 "></iframe>

If you want to know more about his work and his style, you can visit the very inspiring Instagram of [Sunrise Over Sea](https://www.instagram.com/sunrise_over_sea/). 

Discover the profession of artistic director with Vincent Le Vern 

In this podcast, I share my discussion with Timothée Roussilhe who is a creative developer. He works in New York at Squarespace.
Squarespace is a tool for creating online sites and e-commerce sites. Squarespace offers a large number of templates that you can customize and adapt.
  
Timothée is a creative developer who does design and front-end development.
  
Timothée shares his experience with us as a developer in the United States. He tells us about life in New York, his journey, his daily life, his inspirations and of course his work as a developer.
  
Timothée works in the “Creative” department at Squarespace and in the “in-house” team. He mainly takes care of the main site squarespace.com and also of additional sites: career site, blog and micro experience sites. He has worked on the sites below:

Alongside his work at Squarespace, he also experiments on personal projects. He shares with us his processes and his way of creating animated websites.

Timothée also gives us his recipe for how he managed to be a creative developer and his vision of creative development.
  
Some interesting links mentioned in the podcast:

-Squarespace
- Stink Studios
-Atlassian
- Circle Ci
- GatsbyJs
- DDB
- Hetic
- New Land
-Tavano Vincent
- Amazon CloudFront
-ARIA

You can follow Timothée on the following links:

-Portfolio
- Github
-Twitter
- Dribbling
-Behance
-Instagram

Discovering a creative developer on the other side of the Atlantic, with Timothée Roussilhe

Our untold stories, behind the scenes of our projects and ideas related to communication. If you're already a fan or just looking for inspiration, subscribe to our newsletter to be kept up to date with everything worth sharing.

Graphic looks & digital briefs.