Skip to content

Commit

Permalink
Update web timeline
Browse files Browse the repository at this point in the history
  • Loading branch information
@feove
feove committed Jun 24, 2024
1 parent 5ac5321 commit 21a6acb
Show file tree
Hide file tree
Showing 2 changed files with 265 additions and 165 deletions.
185 changes: 94 additions & 91 deletions index/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,41 +170,53 @@ <h2>Mai/juin :</h2>
Réalisation du Site Web
</div>
<!------------------------------------------------------------------------------------------------------------------------- -->

<section class="timeline">
<div class="timeline-start-circle"></div>
<div class="container">
<!-- Repeat timeline-item blocks as needed -->
<div class="timeline-item">
<div class="timeline-img"></div>
<div class="timeline-content js--fadeInLeft">
<h2>Title</h2>
<div class="date">1 MAY 2016</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
<a class="bnt-more a-style" href="javascript:void(0)">More</a>
</div>
</div>
<div class="timeline-item">
<div class="timeline-img"></div>
<div class="timeline-content js--fadeInLeft">
<h2>Title</h2>
<div class="date">1 MAY 2016</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
<a class="bnt-more a-style" href="javascript:void(0)">More</a>
</div>
</div>
<div class="timeline-item">
<div class="timeline-img"></div>
<div class="timeline-content js--fadeInLeft">
<h2>Title</h2>
<div class="date">1 MAY 2016</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
<a class="bnt-more a-style" href="javascript:void(0)">More</a>
</div>
</div>
<!-- Add more timeline-item blocks as needed -->
</div>
</section>
<section class="timeline">
<div class="timeline-start-circle">Start</div>

<div class="timeline-item">
<div class="timeline-circle"></div>
<div class="date date--right">Octobre 2023</div>
<div class="timeline-content js--fadeInLeft">
<img src="../media/GithubContent.png" class="timeline-img">
<h2>Title</h2>
<p>C'est à ce mois que j'ai initié un repository sur GitHub pour héberger le site web de Treashunt.</p>
<a class="bnt-more a-style" href="javascript:void(0)">More</a>
</div>
</div>

<div class="timeline-item">
<div class="timeline-circle"></div>
<div class="date date--left">Janvier 2023</div>
<div class="timeline-content js--fadeInRight">
<img src="../media/prototypeWebsite.png" class="timeline-img">
<h2>Title</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>
<a class="bnt-more a-style" href="javascript:void(0)">More</a>
</div>
</div>

<div class="timeline-item">
<div class="timeline-circle"></div>
<div class="date date--right">Mars 2023</div>
<div class="timeline-content js--fadeInLeft">
<img src="../media/gif-website.gif" class="timeline-img">
<h2>Title</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>
<a class="bnt-more a-style" href="javascript:void(0)">More</a>
</div>
</div>

<div class="timeline-item">
<div class="timeline-circle"></div>
<div class="date date--left">Juin 2023</div>
<div class="timeline-content js--fadeInRight">
<img src="../media/HomePage.png" class="timeline-img">
<h2>Title</h2>
<p>J'ai amélioré la page d'accueil afin de la rendre plus simple et moderne à l'aide de nouveau effet fait en javascript</p>
<a class="bnt-more a-style" href="javascript:void(0)">More</a>
</div>
</div>
</section>

<!------------------------------------------------------------------------------------------------------------------------- -->
</div>
Expand Down Expand Up @@ -273,62 +285,53 @@ <h2>Title</h2>


</script>
<script src="https://unpkg.com/scrollreveal"></script>
<script>
$(function(){

window.sr = ScrollReveal();

if ($(window).width() < 768) {

if ($('.timeline-content').hasClass('js--fadeInLeft')) {
$('.timeline-content').removeClass('js--fadeInLeft').addClass('js--fadeInRight');
}

sr.reveal('.js--fadeInRight', {
origin: 'right',
distance: '300px',
easing: 'ease-in-out',
duration: 800,
});

} else {

sr.reveal('.js--fadeInLeft', {
origin: 'left',
distance: '300px',
easing: 'ease-in-out',
duration: 800,
});

sr.reveal('.js--fadeInRight', {
origin: 'right',
distance: '300px',
easing: 'ease-in-out',
duration: 800,
});

}

sr.reveal('.js--fadeInLeft', {
origin: 'left',
distance: '300px',
easing: 'ease-in-out',
duration: 800,
});

sr.reveal('.js--fadeInRight', {
origin: 'right',
distance: '300px',
easing: 'ease-in-out',
duration: 800,
});


});

</script>

<script src="https://unpkg.com/scrollreveal"></script>
<script>
$(function() {

window.sr = ScrollReveal();


$('.timeline-item').each(function() {
var timelineContent = $(this).find('.timeline-content');
var timelineDate = $(this).find('.date');

if ($(this).index() % 2 === 0) {
timelineContent.addClass('js--fadeInRight');
} else {
timelineContent.addClass('js--fadeInLeft');
}


sr.reveal(timelineContent, {
origin: timelineContent.hasClass('js--fadeInLeft') ? 'right' : 'left',
distance: '300px',
easing: 'ease-in-out',
duration: 800,
beforeReveal: function(domEl) {
$(domEl).closest('.timeline-item').find('.date').css('opacity', 1);
}
});


sr.reveal(timelineDate, {
delay: 200,
easing: 'ease-in-out',
duration: 600,
opacity: 0,
scale: 0,
beforeReveal: function(domEl) {
$(domEl).css({
'opacity': 1,
'transform': 'scale(1)'
});
}
});
});
});
</script>





Expand Down
Loading

0 comments on commit 21a6acb

Please sign in to comment.