Fix Project section
This commit is contained in:
+50
-11
@@ -75,26 +75,65 @@ hr::after {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
/* --- Projects --- */
|
||||
.projects {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 25px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.project {
|
||||
background: var(--glass-light);
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 25px;
|
||||
padding: 20px;
|
||||
width: 300px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 25px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.project:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: var(--accent-yellow);
|
||||
.project-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.project img {
|
||||
width: 100%;
|
||||
.project-header img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 15px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
.project-info h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* --- Etiquettes (Tags) --- */
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 50px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
backdrop-filter: blur(5px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.purple-tag {
|
||||
background: rgba(147, 51, 234, 0.2);
|
||||
color: #d8b4fe;
|
||||
}
|
||||
|
||||
.yellow-tag {
|
||||
background: rgba(234, 179, 8, 0.2);
|
||||
color:#fde047;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
|
||||
@@ -36,45 +36,70 @@
|
||||
<a href="https://ko-fi.com/whykioh" target="_blank"><img src="img/ko-fi.png" alt="Ko-fi"></a>
|
||||
</div>
|
||||
<hr>
|
||||
<h1>Mes Projets :</h1>
|
||||
<p>Voici quelques-uns de mes projets :</p>
|
||||
<div class="projects">
|
||||
<div class="project">
|
||||
<a href="https://watchgether.whykioh.fr" target="_blank">
|
||||
<h1>Mes Projets :</h1>
|
||||
<p>Voici quelques-uns de mes projets :</p>
|
||||
<div class="projects">
|
||||
|
||||
<div class="project">
|
||||
<a href="https://watchgether.whykioh.fr" target="_blank" style="text-decoration: none; color: inherit;">
|
||||
<div class="project-header">
|
||||
<img src="img/watchgether.svg" alt="WatchGether">
|
||||
<h2>WatchGether</h2>
|
||||
</a><p class="purple-tag">In Progress</p>
|
||||
<p>
|
||||
WatchGether est une liste de film à regarder en duo, WatchGether analyse et compare les listes du duo pour trouver des films en commun et en rapport avec les thèmes et genre apprécié de chaque utilisateur. Pour l'instant WatchGether n'est utilisable que par moi, mais sera ouvert au public prochainement.
|
||||
</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<a href="https://gamel0ver.whykioh.fr" target="_blank">
|
||||
<div class="project-info">
|
||||
<h2>WatchGether</h2>
|
||||
<span class="tag purple-tag">In Progress</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<p>
|
||||
WatchGether est une liste de film à regarder en duo, WatchGether analyse et compare les listes du duo pour trouver des films en commun et en rapport avec les thèmes et genre apprécié de chaque utilisateur. Pour l'instant WatchGether n'est utilisable que par moi, mais sera ouvert au public prochainement.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="project">
|
||||
<a href="https://gamel0ver.whykioh.fr" target="_blank" style="text-decoration: none; color: inherit;">
|
||||
<div class="project-header">
|
||||
<img src="img/gamel0ver.png" alt="GameL0ver">
|
||||
<h2>GameL0ver</h2>
|
||||
</a><p class="yellow-tag">Coming Soon</p>
|
||||
<p>
|
||||
GameL0ver est un site de rencontre pour les joueurs, il permet de trouver des personnes avec qui jouer, voire même peut être l'amour, à des jeux vidéo en fonction de leurs préférences et de leurs jeux favoris. GameL0ver permet de discuter publiquement et même en privé et intègre un système de match avec des Likes et des Pass. GameL0ver est actuellement en développement et sera bientôt disponible.
|
||||
</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<a href="https://whykioh.fr/blindtube" target="_blank">
|
||||
<div class="project-info">
|
||||
<h2>GameL0ver</h2>
|
||||
<span class="tag yellow-tag">Coming Soon</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<p>
|
||||
GameL0ver est un site de rencontre pour les joueurs, il permet de trouver des personnes avec qui jouer, voire même peut être l'amour, à des jeux vidéo en fonction de leurs préférences et de leurs jeux favoris. GameL0ver permet de discuter publiquement et même en privé et intègre un système de match avec des Likes et des Pass. GameL0ver est actuellement en développement et sera bientôt disponible.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="project">
|
||||
<a href="https://whykioh.fr/blindtube" target="_blank" style="text-decoration: none; color: inherit;">
|
||||
<div class="project-header">
|
||||
<img src="img/BlindTube.png" alt="BlindTube">
|
||||
<h2>BlindTube</h2>
|
||||
</a><p class="purple-tag">In Progress</p>
|
||||
<p>
|
||||
BlindTube est une application de Blind Test pour YouTube Music, elle permet d'effectuer un blind test seul ou à plusieurs en partant de vos playlists YouTube Music. BlindTube est actuellement en développement et sera disponible.
|
||||
</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<a href="https://voj.whykioh.fr" target="_blank">
|
||||
<div class="project-info">
|
||||
<h2>BlindTube</h2>
|
||||
<span class="tag purple-tag">In Progress</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<p>
|
||||
BlindTube est une application de Blind Test pour YouTube Music, elle permet d'effectuer un blind test seul ou à plusieurs en partant de vos playlists YouTube Music. BlindTube est actuellement en développement et sera disponible.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="project">
|
||||
<a href="https://voj.whykioh.fr" target="_blank" style="text-decoration: none; color: inherit;">
|
||||
<div class="project-header">
|
||||
<img src="img/viensonjette.png" alt="Viens On Jette">
|
||||
<h2>Viens On Jette</h2>
|
||||
</a><p class="green-tag">Disponible</p>
|
||||
<p>
|
||||
Viens On Jette est un duo avec mon ami <a href="https://www.youtube.com/@naxo175_" target="_blank">Naxo</a> sur YouTube, nous faisons des vidéos de jeux vidéo, des courts-métrages et d'autres contenus. Regardez dès maintenant !
|
||||
</p>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<h2>Viens On Jette</h2>
|
||||
<span class="tag green-tag">Disponible</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<p>
|
||||
Viens On Jette est un duo avec mon ami <a href="https://www.youtube.com/@naxo175_" target="_blank">Naxo</a> sur YouTube, nous faisons des vidéos de jeux vidéo, des courts-métrages et d'autres contenus. Regardez dès maintenant !
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<h1>Voici la dernière vidéo de <a href="https://www.youtube.com/@whykioh">Whykioh</a> :</h1>
|
||||
<div class="video-container">
|
||||
|
||||
Reference in New Issue
Block a user