Skip to content

Commit

Permalink
friends
Browse files Browse the repository at this point in the history
  • Loading branch information
@feove
feove committed Jun 18, 2024
1 parent 0a14e4f commit ae5fe17
Show file tree
Hide file tree
Showing 6 changed files with 336 additions and 45 deletions.
75 changes: 63 additions & 12 deletions index/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
height: 500vh;
height: 800vh;
top: 0;
margin-top: 0;
padding-top: 0;
Expand All @@ -38,7 +38,39 @@
</head>
<body>
<div class="sec">
<div class="repertory">Réalisation de Treashunt</div>

<div class="repertory">Notre épique</div>
<div class="friends-box">
<div class="friend-item">
<h3>Paul Vogeleisen</h3>
<div class="friend-content">
<img src="../media/paul.jpg" alt="Paul Vogeleisen">
</div>
</div>
<div class="friend-item">
<h3>Léo Sibour</h3>
<div class="friend-content">
<img src="../media/leo.jpg" alt="Léo Sibour">
</div>
</div>
<div class="friend-item">
<h3>Cyril Kholer</h3>
<div class="friend-content">
<img src="../media/cyril.jpg" alt="Cyril Kholer">
</div>
</div>
<div class="friend-item">
<h3>Baptiste Marx</h3>
<div class="friend-content">
<img src="../media/baptiste.jpg" alt="Baptiste Marx">
</div>
</div>
</div>




<div class="repertory" style="margin-top: -25%;">Réalisation de Treashunt</div>
<div class="process-wrapper">
<div id="progress-bar-container">
<ul>
Expand Down Expand Up @@ -75,47 +107,53 @@ <h2>10 fevrier à 0h51</h2>
</div>
</div>
</div>
<div class="repertory">Réalisation du Site Web</div>
<div class="repertory" style="margin-top:4%;">Réalisation du Site Web</div>
<div class="timeline">
<div class="timeline-item">

<div class="timeline-item" style="margin-top: -5%;">
<div class="timeline-circle" style="margin-top: 10%;"></div>
<div class="timeline-content">
<h2>Octobre 2023</h2>
<h2 style="color: rgb(217, 217, 217);">Octobre 2023</h2>
<p>C'est à ce mois que j'ai initié un repository sur GitHub pour héberger le site web de Treashunt.</p>
</div>
<div class="timeline-image">
<img src="../media/GithubContent.png" alt="Image Octobre">
<img src="../media/GithubContent.png" style="width: 115%; height: auto; margin-right: 8%;" alt="Image Octobre">
</div>
</div>
<div class="timeline-item">
<div class="timeline-circle"></div>
<div class="timeline-content">
<h2>Janvier 2023</h2>
<h2 style="color: rgb(217, 217, 217);">Janvier 2023</h2>
<p>J'ai presque terminé la première version de la page d'accueil entièrement réalisée en HTML/CSS. Cette approche m'a permis d'acquérir une compréhension approfondie des bases du développement web.</p>
</div>
<div class="timeline-image">
<img src="../media/prototypeWebsite.png" alt="Image Janvier">
<img src="../media/prototypeWebsite.png" style="width: 140%; height: auto; margin-left: 32%;" id="janvier" alt="Image Janvier">
</div>
</div>
<div class="timeline-item">
<div class="timeline-circle"></div>
<div class="timeline-content">
<h2>Mars 2023</h2>
<h2 style="color: rgb(217, 217, 217);">Mars 2023</h2>
<p>J'ai intégré mon premier effet parallax à la section "À propos" sans l'utilisation de bibliothèques JavaScript externes. Cela a nécessité la mise en place de gestionnaires d'événements et de transitions CSS pour créer un effet de défilement fluide.</p>
</div>
<div class="timeline-image">
<img src="../media/gif-website.gif" alt="Image Mars">
<img src="../media/gif-website.gif" style="width: 115%; height: auto; margin-right: 8%;" alt="Image Mars">
</div>
</div>
<div class="timeline-item">
<div class="timeline-circle"></div>
<div class="timeline-content">
<h2>Juin 2023</h2>
<h2 style="color: rgb(217, 217, 217);">Juin 2023</h2>
<p>J'ai amélioré la page d'accueil en ajoutant un effet parallax et une animation GIF. L'animation a été entièrement créée à l'aide de clés d'animation CSS, ce qui a permis d'ajouter une dimension visuelle dynamique tout en maintenant la légèreté de la page.</p>
</div>
<div class="timeline-image">
<img src="../media/runner.png" alt="Image Juin">
<img src="../media/runner.png" style="width: 120%; height: auto; margin-left: 30%;" alt="Image Juin">
</div>
</div>
<div class="timeline-bar"></div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
Expand Down Expand Up @@ -161,6 +199,19 @@ <h2>Juin 2023</h2>
});
}
});

// Animation des cercles de la timeline
window.addEventListener('scroll', () => {
const circles = document.querySelectorAll('.timeline-circle');
circles.forEach(circle => {
const rect = circle.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
circle.classList.add('active');
} else {
circle.classList.remove('active');
}
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
</body>
Expand Down
Binary file added media/baptiste.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added media/cyril.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added media/leo.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added media/paul.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit ae5fe17

Please sign in to comment.