You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
3.9 KiB
59 lines
3.9 KiB
<script setup>
|
|
import LinkButton from "../LinkButton.vue";
|
|
import RedirectLogo from "../../assets/icons/redirect.svg";
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col h-[75vh] w-full bg-black overflow-hidden relative items-center justify-center sm:px-20 md:px-50 lg:px-60 xl:px-96 px-10">
|
|
<p class="text-6xl font-extrabold text-white pb-8 z-10">JustMusic</p>
|
|
<p class="md:text-xl text-md font-light text-white text-center z-10">
|
|
Avec un ami, j'ai développé l'application justMusic, un réseau social captivant qui combine musique et vie
|
|
quotidienne. Sur cette application, vous êtes invité à poster une "capsule" par jour, composée d'une musique et
|
|
d'un selfie de vous.
|
|
</p>
|
|
<div class="flex scale-90 sm:scale-100 flex-row gap-3 pt-12 flex-wrap items-center justify-center z-10">
|
|
<LinkButton class="text-sm" url="https://www.figma.com/design/DNjFgso8otcul2ApCEHPvm/justMusic?node-id=410-269&t=MLIwBBtJOY57pGE1-1">
|
|
Figma
|
|
<RedirectLogo/>
|
|
</LinkButton>
|
|
<LinkButton class="text-sm" url="https://github.com/WINK3R/justMusic">
|
|
GitHub
|
|
<RedirectLogo/>
|
|
</LinkButton>
|
|
</div>
|
|
<router-link to="/">
|
|
<img src="/images/back-button.png" class="absolute z-10 top-0 left-0 p-10 scale-25 hover:scale-35 ease-in-out transition-all"/>
|
|
</router-link>
|
|
<img src="/images/projects/justmusic/justmusic-banner.png" class="opacity-10 absolute z-0 pointer-events-none h-[75vh] w-full object-cover"/>
|
|
</div>
|
|
<div class="bg-white w-full sm:px-20 md:px-50 lg:px-60 xl:px-80 px-10 py-20 transition-all flex flex-col gap-20 pb-36 items-center relative">
|
|
<img src="/images/projects/justmusic/logo.png" class=" absolute z-0 pointer-events-none w-20 -top-12 left-20 border-white border-2 rounded-lg"/>
|
|
<img src="/images/projects/justmusic/justmusic-banner.png" class="pointer-events-none rounded-md"/>
|
|
<p class="text-xl font-normal text-black">
|
|
JustMusic est un projet passionnant qui m'a beaucoup appris en matière de design et de développement. J'ai conçu
|
|
les maquettes de JustMusic sur Figma, disponibles ci-dessus. Nous avons imaginé un réseau social axé sur la
|
|
musique, permettant de partager avec ses amis et son groupe des morceaux qui nous tiennent à cœur. Accompagné
|
|
d'un selfie pris sur le vif, vous pouvez partager à tout moment de la journée votre moment favori et interagir
|
|
avec les autres utilisateurs.
|
|
</p>
|
|
<div class="flex flox-row w-full justify-between overflow-scroll overflow-y-hidden">
|
|
<img src="/images/projects/justmusic/justmusic-1.png" class="pointer-events-none w-52 object-contain"/>
|
|
<img src="/images/projects/justmusic/justmusic-4.png" class="pointer-events-none w-52 object-contain"/>
|
|
<img src="/images/projects/justmusic/justmusic-2.png" class="pointer-events-none w-52 object-contain"/>
|
|
<img src="/images/projects/justmusic/justmusic-3.png" class="pointer-events-none w-52 object-contain"/>
|
|
</div>
|
|
<p class="text-xl font-normal text-black">
|
|
D'un point de vue technique, nous avons utilisé le framework Flutter pour développer deux applications, une
|
|
pour iOS et une pour Android, à partir d'un seul code source. Nous avons également utilisé Firebase pour la
|
|
gestion des utilisateurs et des données. Enfin, pour trouver les titres musicaux, obtenir leurs informations
|
|
et les lire directement dans l'application, nous avons intégré l'API de Spotify.
|
|
<br/><br/>
|
|
Nous avons publié cette application sur le Google Play Store et espérons, un jour, reprendre le projet pour le
|
|
faire connaître au plus grand nombre.
|
|
</p>
|
|
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FDNjFgso8otcul2ApCEHPvm%2FjustMusic%3Fnode-id%3D410-269%26t%3DMLIwBBtJOY57pGE1-1" allowfullscreen></iframe> </div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |