Projeto pessoal

• Visão Geral
  • O desafio
  • Captura de tela
  • Links
• Meu processo
  • Construído com
  • O que aprendi
  • Desenvolvimento contínuo
• Autor
• Agradecimentos

Site responsivo, com background fixo, estilizado com efeito neon nos botões, onde as imagens se sobrepoem umas as outras (efeito palaralax) com uso de API de música incorporando faixas apartir do serviço de straming Spotify

Os usuários devem ser capazes de:

• acessar faixas de músicas atravéz de um player incorporado (acessando apartir de um browser onde o site spotfy foi logado)
• visualizar estado de foco dos botões com efeito neon
• ver as imagens de fundo trocando ao rolar o site
• visualizar layouts adequados em cada tamanho de tela (mobile, desktop, tablet)

• URL do site ao vivo: (https://lighthearted-sprite-219367.netlify.app/)

Demorei cerca de 20h de trabalho para concluir o desafio

• Marcação HTML5 semântica
• Propriedades personalizadas de CSS
• Flexbox
• Grade CSS
• Uso de API - Spotify - player de música streaming
• Uso de API swiperJS

-Aprendi sobre a utilização de API e sobre a estilização após incorporação. Bem como a criação de efeito neon nos elementos de interação.

<section>
   <iframe
    style="border-radius: 12px"
    src="https://open.spotify.com/embed/playlist/37i9dQZF1DX2oU49YwtXI2?utm_source=generator"
    width="100%"
    height="380"
    frameborder="0"
    allowfullscreen=""
    allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
    loading="lazy"
   ></iframe>
  </section>

• Aprendi sobre a responsividade do swiper

const swiper = new Swiper('.swiper', {
 speed: 400,
 spaceBetween: 10,
 slidesPerView: 5,
 loop: true,
 autoplay: {
  delay: 2000,
 },
 breakpoints: {
  320: {
   slidesPerView: 2,
   spaceBetween: 10,
   loop: true,
   autoplay: {
    delay: 2000,
   },
  },
  480: {
   slidesPerView: 3,
   spaceBetween: 10,
   loop: true,
   autoplay: {
    delay: 2000,
   },
  },
  640: {
   slidesPerView: 5,
   spaceBetween: 40,
   loop: true,
   autoplay: {
    delay: 2000,
   },
  },
 },
});

Para o futuro vou aprofundar em utilização de layouts diferenciados e o uso de outros apis uteis no dia dia.

• URL no front mentor: (https://www.frontendmentor.io/profile/KatyaPalheta)
• Linkedin: (www.linkedin.com/in/katyapalheta)

Agradeço a Alura, escola de programação, por ter sido minha fonte de conhecimento e minha amiga na trajetória de crescimento pessoal. Aos membros da comunidade Code, mentoria que está moldando minha mente para o mercado de trabalho.