Une fierté d'avoir pu collaborer avec Made in Cima, une importante agence web italienne.

Grâce à la collaboration avec Made In Cima , j'ai eu l'opportunité de développer le Front-end de l'application web www.cosbi.eu . Le côté le plus intéressante et le plus inspirant a été la création de nombreuses animations en "Vanilla" Javascript . En ce qui concerne la structure des pages et son apparence j'ai utilisé HTML 5.0 et SCSS [Sass] , à partir d'un design réalisé avec Adobe XD.

CoSBi (computational and systems biology) est une coentreprise entre Microsoft Research et l'Université de Trente , formé par un groupe de chercheurs, développeurs et analystes experts en bioinformatique liée à la nutrition, la pharmacologie des systèmes et l'écologie, qui ont développé un langage de programmation appelé Blex, qui permet de simuler et de modéliser des systèmes biochimiques complexes.

Technologies

  • HTML 5.0
  • PHP
  • SCSS [Sass]
  • Vanilla Javascript
  • Swiper JS
  • Git [Bitbucket]
  • Adobe XD

L'Animation Graphique

Parmi toutes les animations sur CoSBi.eu, la plus belle mais aussi la plus difficile à réaliser a été celle-ci que j'ai appelé "Graphics", un entrelacement de lignes et de points de différents logos [© COSBI - Binomi design] qui représentait les sections "What we do" de CoSBi. Pour la création de l'animation appelée "Graphics" outre à Javascript et des classes pour le style, j'ai utilisé l'assez connue librairie Swiper JS .

  • Scientia extractionis

    Officiis beatae eius quasi similique facilis repudiandae optio maxime neque nemo minima, cum provident quidem deserunt ullam debitis accusamus possimus nulla velit rerum autem impedit, illo ex dolorem harum. Cum placeat, pariatur, odio neque, recusandae id esse rerum minus officiis quaerat eligendi dolores ut architecto

    Lege plus
  • Indicium integrationem

    Quaerat dolores non distinctio, culpa at temporibus nesciunt voluptate. Dicta qui porro, neque sint hic quos nisi ducimus expedita assumenda officiis explicabo facilis magni velit veritatis culpa placeat nam veniam. Odit blanditiis a delectus ipsum itaque quo quae sint

    Lege plus
  • Biologa idem

    Possimus deserunt beatae recusandae officiis consequuntur natus odio nulla in dolore! Nulla vero labore similique tenetur maiores! Ullam illum neque iusto debitis! Consectetur laboriosam enim nesciunt vel illum, consequatur omnis tempore quisquam? Error quam deserunt omnis ea explicabo

    Lege plus
  • Via integrationem

    Ex in, dolorem dicta unde voluptatem illum harum eius deserunt! Quas reprehenderit natus blanditiis beatae alias rem quod possimus, fugit dolorum itaque. Et praesentium dolorum temporibus doloremque porro vero quasi debitis consectetur, illum

    Lege plus
  • Examplum & simulae

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aliquam harum, non nihil qui nesciunt, sapiente suscipit obcaecati, commodi porro soluta cumque aperiam corporis dolorem! Consectetur nam assumenda deserunt ad Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, qui error perspiciatis veritatis

    Lege plus

Le Carrousel

Le carrousel, également connu sous le nom de Carousel, dans la conception Web, se compose de plusieurs éléments qui glissent horizontalement dans la zone d'affichage jusqu'à qu'ils disparaissent et réapparaissent du côté opposé. Sur la page Join Us de CoSBi , le carrousel devait défiler automatiquement sans s'arrêter.

La technique que j'ai utilisée consiste à dupliquer chaque élément afin qu'il soit toujours visible dans le viewport. Malgré les nombreuses librairies disponibles pour réaliser un effet "carrousel", j'ai préféré créer cette animation par moi-même pour renforcer mes connaissances en JavaScript.

Hamburguer icon Globe icon Closing icon Contrast icon Facebook icon Instagram icon Linkedin icon Dribble icon Behance icon Linkedin icon Right arrow icon Left arrow icon