Un orgullo haber podido colaborar con Made in Cima, una importante agencia web de Italia.

Gracias a la colaboración con Made In Cima , tuve la oportunidad de desarrollar el frontend de la web www.cosbi.eu. La parte más interesante e inspiradora para mí fue la creación de numerosas animaciones en "Vanilla" Javascript. Para la estructura y aspecto de las páginas utilicé HTML 5.0 y SCSS [Sass], empezando de un design realizado en Adobe XD.

CoSBi (computational and systems biology) es una empresa conjunta entre Microsoft Research y la Universidad de Trento, formada por un grupo de investigadores, desarrolladores y analistas expertos en bioinformática relacionada con la nutrición, farmacología de sistemas y ecología, los cuales han desarrollado un lenguaje de programación llamado Blex, que hace posible simular y modelar sistemas bioquímicos complejos.

Tecnologías

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

La Animación Gráfica

Entre todas las animaciones de CoSBi.eu, la más hermosa pero también más complicada de lograr fue aquella que llamé "Graphics", un entrelazado de líneas y puntos de diferentes logos [© COSBI - Binomi design] que representa las secciones "What we do hacemos" de CoSBi. Para la creación de la animación llamada "Graphics" además de Javascript y clases para el estilo, utilicé la conocida librería 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

El Carrusel

El carrusel, también conocido como Carousel, en el diseño web, consta de varios elementos que se deslizan horizontalmente por la pantalla hasta desaparecer y reaparecer en el lado opuesto. En la página Join Us de CoSBi, el carrusel debía desplazarse automáticamente sin detenerse.

La técnica que utilicé consiste en duplicar cada elemento para que siempre esté visible en el viewport. A pesar de las muchas librerías disponibles para lograr un efecto "carrusel", preferí crear esta animación por mí mismo para reforzar mis conocimientos en el lenguaje 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