add details views
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
parent
11289b890e
commit
c027cc92d6
|
After Width: | Height: | Size: 549 B |
|
After Width: | Height: | Size: 306 KiB |
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 197 KiB |
|
After Width: | Height: | Size: 209 KiB |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 417 KiB |
|
After Width: | Height: | Size: 2.3 MiB |
|
After Width: | Height: | Size: 796 KiB |
|
After Width: | Height: | Size: 3.9 MiB |
|
After Width: | Height: | Size: 4.9 MiB |
|
After Width: | Height: | Size: 6.1 MiB |
|
After Width: | Height: | Size: 729 KiB |
|
After Width: | Height: | Size: 520 KiB |
|
After Width: | Height: | Size: 153 KiB |
|
After Width: | Height: | Size: 210 KiB |
|
After Width: | Height: | Size: 3.8 MiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 3.8 MiB |
|
After Width: | Height: | Size: 386 KiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 195 KiB |
|
After Width: | Height: | Size: 544 KiB |
|
After Width: | Height: | Size: 410 KiB |
|
After Width: | Height: | Size: 408 KiB |
@ -0,0 +1,58 @@
|
||||
<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 px-96">
|
||||
<p class="text-6xl font-extrabold text-white pb-8 z-10">Allin</p>
|
||||
<p class="text-xl font-light text-white text-center z-10">
|
||||
J'ai participé au développement du projet Allin, une application mobile multiplateforme
|
||||
permettant de parier sur des événements de la vie quotidienne ou sportifs. Vous pouvez ajouter des amis
|
||||
et les défier pour remporter leurs Allcoins !
|
||||
</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/GRTGdZFMUXb58lV48F3tC1/ALLIN!?node-id=0-1&t=QbWaiVCjjO9nhUx8-1">
|
||||
Figma
|
||||
<RedirectLogo/>
|
||||
</LinkButton>
|
||||
<LinkButton class="text-sm" url="https://codefirst.iut.uca.fr/git/AllDev">
|
||||
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/allin/allin-banner.png" class="opacity-10 absolute z-0 pointer-events-none"/>
|
||||
</div>
|
||||
<div class="bg-white w-full px-80 py-20 transition-all flex flex-col gap-20 pb-36 items-center relative">
|
||||
<img src="/images/projects/allin/logo.png" class=" absolute z-0 pointer-events-none w-20 -top-12 left-20"/>
|
||||
|
||||
<img src="/images/projects/allin/allin-banner.png" class="pointer-events-none rounded-md"/>
|
||||
<p class="text-xl font-normal text-black">
|
||||
Allin est un projet qui m'a permis de découvrir le développement mobile et de mettre en pratique une véritable
|
||||
gestion de projet agile. Nous avons commencé par élaborer un backlog comprenant nos idées et les fonctionnalités
|
||||
que nous souhaitions implémenter. Ensuite, nous avons créé des maquettes sur Figma, disponibles ci-dessus,
|
||||
pour visualiser l'application et la rendre plus concrète. Avec l'aide d'un enseignant, nous avons mis en place
|
||||
un suivi de projet agile avec des sprints de deux semaines.
|
||||
</p>
|
||||
<div class="flex flox-row w-full justify-between overflow-hidden">
|
||||
<img src="/images/projects/allin/allin-1.png" class="pointer-events-none w-52 object-contain"/>
|
||||
<img src="/images/projects/allin/allin-4.png" class="pointer-events-none w-52 object-contain"/>
|
||||
<img src="/images/projects/allin/allin-2.png" class="pointer-events-none w-52 object-contain"/>
|
||||
<img src="/images/projects/allin/allin-3.png" class="pointer-events-none w-52 object-contain"/>
|
||||
</div>
|
||||
<p class="text-xl font-normal text-black">
|
||||
J'ai principalement travaillé sur l'application mobile native iOS en Swift. J'ai également contribué à
|
||||
l'élaboration du modèle et au développement de l'API, réalisée avec Ktor.
|
||||
<br/><br/>
|
||||
Ce projet nous a permis de nous familiariser avec les technologies mobiles natives et de travailler en équipe sur
|
||||
un projet de longue durée.
|
||||
</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%2FGRTGdZFMUXb58lV48F3tC1%2FALLIN!%3Fnode-id%3D0-1%26t%3DQbWaiVCjjO9nhUx8-1" allowfullscreen></iframe>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,58 @@
|
||||
<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 px-96">
|
||||
<p class="text-6xl font-extrabold text-white pb-8 z-10">Compagnon</p>
|
||||
<p class="text-xl font-light text-white text-center z-10">
|
||||
Compagnon est une application web qui vous assiste dans toutes sortes de tâches. Que ce soit pour noter des idées,
|
||||
enregistrer et générer des mots de passe, organiser vos photos ou planifier vos voyages, Compagnon est là pour
|
||||
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/p2VVeZuwBhhK5BBQ7hdzur/Untitled?node-id=0-1&t=3xQJCJCjjKSzQwIx-1">
|
||||
Figma
|
||||
<RedirectLogo/>
|
||||
</LinkButton>
|
||||
<LinkButton class="text-sm" url="https://github.com/WINK3R/Compagnon">
|
||||
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/compagnon/compagnon-banner.png" class="opacity-5 absolute z-0 pointer-events-none"/>
|
||||
</div>
|
||||
<div class="bg-white w-full px-80 py-20 transition-all flex flex-col gap-20 pb-36 items-center">
|
||||
<img src="/images/projects/compagnon/compagnon-banner.png" class="pointer-events-none rounded-md"/>
|
||||
<p class="text-xl font-normal text-black">
|
||||
Compagnon est une application web réalisée avec le framework Vue et le framework CSS Tailwind. J'ai conçu les
|
||||
maquettes de Compagnon sur Figma, disponibles ci-dessus. J'ai imaginé une application permettant de stocker des
|
||||
informations personnelles, des photos, des notes, des mots de passe et des voyages. J'ai également intégré une
|
||||
fonctionnalité de génération de mots de passe sécurisés.
|
||||
</p>
|
||||
<div class="flex flox-row w-full justify-between overflow-hidden gap-3">
|
||||
<img src="/images/projects/compagnon/compagnon-1.png" class="pointer-events-none w-1/2 object-contain"/>
|
||||
<img src="/images/projects/compagnon/compagnon-4.png" class="pointer-events-none w-1/2 object-contain"/>
|
||||
</div>
|
||||
<div class="flex flox-row w-full justify-between overflow-hidden gap-3">
|
||||
<img src="/images/projects/compagnon/compagnon-2.png" class="pointer-events-none w-1/2 object-contain"/>
|
||||
<img src="/images/projects/compagnon/compagnon-3.png" class="pointer-events-none w-1/2 object-contain"/>
|
||||
</div>
|
||||
<p class="text-xl font-normal text-black">
|
||||
La gestion des données se fait grâce à l'API de Firebase, qui permet de stocker les informations de l'utilisateur
|
||||
dans une base de données non structurée. J'ai également utilisé l'API de Firebase pour l'authentification via
|
||||
Twitter et Google.
|
||||
<br/><br/>
|
||||
Ce projet n'est pas encore terminé, mais je continue de le développer pour ajouter de nouvelles fonctionnalités
|
||||
et j'espère le voir un jour en production.
|
||||
</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%2Fp2VVeZuwBhhK5BBQ7hdzur%2FUntitled%3Fnode-id%3D0-1%26t%3D3xQJCJCjjKSzQwIx-1" allowfullscreen></iframe>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,59 @@
|
||||
<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 px-96">
|
||||
<p class="text-6xl font-extrabold text-white pb-8 z-10">JustMusic</p>
|
||||
<p class="text-xl 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"/>
|
||||
</div>
|
||||
<div class="bg-white w-full px-80 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-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>
|
||||
@ -0,0 +1,59 @@
|
||||
<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 px-96">
|
||||
<p class="text-6xl font-extrabold text-white pb-8 z-10">MovieFinder</p>
|
||||
<p class="text-xl font-light text-white text-center z-10">J'ai développé l'application MovieFinder pour permettre
|
||||
la découverte des films tendance et des sorties en salle à travers le monde entier. Inspirée par les applications
|
||||
de rencontres, MovieFinder vous permet de "liker" ou de rejeter des films et séries tendances.</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/dbTIviWlglo4boYu1hTJ1e/MovieFinder?node-id=0-1&t=h8xSFDiYYhF3n8aC-1">
|
||||
Figma
|
||||
<RedirectLogo/>
|
||||
</LinkButton>
|
||||
<LinkButton class="text-sm" url="https://github.com/WINK3R/MovieFinder">
|
||||
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/moviefinder/movie-finder-banner.png" class="opacity-10 absolute z-0 pointer-events-none"/>
|
||||
</div>
|
||||
<div class="bg-white w-full px-80 py-20 transition-all flex flex-col gap-20 pb-36 items-center relative">
|
||||
<img src="/images/projects/moviefinder/logo.png" class=" absolute z-0 pointer-events-none w-20 -top-12 left-20"/>
|
||||
|
||||
<img src="/images/projects/moviefinder/banner-1.png" class="pointer-events-none rounded-md"/>
|
||||
<p class="text-xl font-normal text-black">
|
||||
Durant ma deuxième année de BUT informatique, j'ai développé une application de découverte de films appelée
|
||||
MovieFinder dans le cadre de mes cours de React Native. Inspirée des applications de rencontres, MovieFinder vous
|
||||
permet de swiper 20 films par jour pour ne plus jamais manquer un film tendance. Vous pouvez également consulter
|
||||
les détails de chaque film, incluant le synopsis, la bande-annonce, les acteurs principaux et leur popularité,
|
||||
ainsi que des recommandations de films similaires et des commentaires d'internautes.
|
||||
</p>
|
||||
<div class="flex flox-row w-full justify-between overflow-hidden">
|
||||
<img src="/images/projects/moviefinder/moviefinder-1.png" class="pointer-events-none w-52 object-contain"/>
|
||||
<img src="/images/projects/moviefinder/moviefinder-2.png" class="pointer-events-none w-52 object-contain"/>
|
||||
<img src="/images/projects/moviefinder/moviefinder-3.png" class="pointer-events-none w-52 object-contain"/>
|
||||
<img src="/images/projects/moviefinder/moviefinder-4.png" class="pointer-events-none w-52 object-contain"/>
|
||||
</div>
|
||||
<p class="text-xl font-normal text-black">
|
||||
D'un point de vue technique, j'ai conçu les maquettes de MovieFinder sur Figma, disponibles ci-dessous.
|
||||
J'ai ensuite développé le front-end de l'application en React Native et le back-end en TypeScript.
|
||||
Pour disposer d'une base de données riche en films, j'ai utilisé l'API publique de TMDB, qui fournit toutes
|
||||
les informations nécessaires sur les films.
|
||||
<br/><br/>
|
||||
Pour ajouter un défi supplémentaire, j'ai également créé une API en C# qui stocke les identifiants des films
|
||||
que je recommande aux utilisateurs, en affichant un petit bandeau "Coup de cœur" sur les cartes correspondantes.
|
||||
</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%2FdbTIviWlglo4boYu1hTJ1e%2FMovieFinder%3Fnode-id%3D0-1%26t%3D1XHL4yfxBtaLVg8f-1" allowfullscreen></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in new issue