Skip to content

Commit

Permalink
improvements
Browse files Browse the repository at this point in the history 
scrollup
  • Loading branch information
@emmanpbarrameda
emmanpbarrameda committed Jun 22, 2024
1 parent 88d7475 commit deede8a
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 63 deletions.
19 changes: 17 additions & 2 deletions assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -841,6 +841,21 @@ header {
}


/*==================== CERTIFICATE ====================*/

.certificate-description {
text-align: center;
margin-bottom: 8px !important;
}

.certificate-description p {
font-size: 16px;
font-weight: bold;
margin: 0;
}




/*==================== GALLERY ====================*/

Expand Down Expand Up @@ -1715,7 +1730,7 @@ header {
/* Styles for mobile and tablet views */
@media screen and (max-width: 768px) {
.scrollup {
right: 6.5rem;
right: 3.5rem;
}

.show-scroll {
Expand Down Expand Up @@ -1783,7 +1798,7 @@ header {
/* Styles for mobile and tablet views */
@media screen and (max-width: 768px) {
.scrolldown {
right: 6.5rem;
right: 3.5rem;
}

.show-scrolldown {
Expand Down
16 changes: 13 additions & 3 deletions assets/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const name1 = "Student";
const name2 = "Programmer";
const name1 = "Backend Developer";
const name2 = "Student Leader";
const name3 = "Freelancer";
const name4 = "Desktop Developer";
const name4 = "Aspiring Software Engineer";

let val = 0;
let currentName = name1;
Expand Down Expand Up @@ -335,6 +335,16 @@ updateSwiperOptions();
// Update Swiper options on window resize
window.addEventListener('resize', updateSwiperOptions);

// Update description text based on active slide
gallerySwiper.on('slideChange', function () {
const activeSlide = gallerySwiper.slides[gallerySwiper.activeIndex];
const description = activeSlide.getAttribute('data-description');
document.getElementById('certificate-description-text').textContent = description;
});

// Set initial description text
document.getElementById('certificate-description-text').textContent = gallerySwiper.slides[gallerySwiper.activeIndex].getAttribute('data-description');



/*
Expand Down
121 changes: 63 additions & 58 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,108 +351,113 @@ <h2 class="section__title">About Me</h2>

<section class="certificates section">
<h2 class="section__title">Certificates</h2>
<span class="section__subtitle">Showcasing my achievements</span>
<span class="section__subtitle">Showcasing my awards and certificates</span>

<!-- Top text description -->
<div class="certificate-description section__subtitle">
<p id="certificate-description-text">BEST IN ICT Certificate</p>
</div>

<!-- Slider main container -->
<div class="swiper-container gallery__container">

<!-- Additional required wrapper -->
<div class="swiper-wrapper gallery__swiper">

<!-- Slides -->
<div class="swiper-slide gallery__slide">
<div class="swiper-slide gallery__slide" data-description="BEST IN ICT Certificate">
<img src="assets/img/certs/cert-best-in-ict.jpeg" alt="SHS BEST IN ICT Certificate">
<!-- VIEW BUTTON -->
<div class="gallery__slide-content">
<a href="https://raw.githubusercontent.com/emmanpbarrameda/emmanpbarrameda.github.io/main/assets/img/certs/cert-best-in-ict.jpeg"
target="_blank" class="button button--flex button--super--small gallery__button">View<i class="uil uil-focus button__icon_large"></i>
</a>
</div>
</div>

<div class="swiper-slide gallery__slide" data-description="BEST IN RESEARCH Certificate (SHS Thesis)">
<img src="assets/img/certs/cert-best-thesis.jpeg" alt="BEST IN RESEARCH Certificate (SHS Thesis)">
<!-- VIEW BUTTON -->
<div class="gallery__slide-content">
<a href="https://raw.githubusercontent.com/emmanpbarrameda/emmanpbarrameda.github.io/main/assets/img/certs/cert-best-thesis.jpeg"
target="_blank" class="button button--flex button--super--small gallery__button">View<i class="uil uil-focus button__icon_large"></i>
</a>
</div>
</div>

<div class="swiper-slide gallery__slide" data-description="SHS WITH HONOR Certificate">
<img src="assets/img/certs/cert-with-honor-shs.jpeg" alt="SHS WITH HONOR Certificate">
<!-- VIEW BUTTON -->
<div class="gallery__slide-content">
<a href="https://raw.githubusercontent.com/emmanpbarrameda/emmanpbarrameda.github.io/main/assets/img/certs/cert-with-honor-shs.jpeg"
target="_blank" class="button button--flex button--super--small gallery__button">View<i class="uil uil-focus button__icon_large"></i>
</a>
</div>
</div>

<div class="swiper-slide gallery__slide" data-description="GreatLearning Java OOP Certificate">
<img src="assets/img/certs_courses/java.jpg" alt="Java OOP Certificate">
<!-- VIEW BUTTON -->
<div class="gallery__slide-content">
<a href="https://dtmvamahs40ux.cloudfront.net/ComplementaryCourseCertificate/2671818/original/Emmanuel_P._Barrameda20230601-69-hnnkzq.jpg"
target="_blank" class="button button--flex button--super--small gallery__button">View<i class="uil uil-focus button__icon_large"></i>
</a>
</div>
target="_blank" class="button button--flex button--super--small gallery__button">View<i class="uil uil-focus button__icon_large"></i>
</a>
</div>
</div>

<div class="swiper-slide gallery__slide">
<div class="swiper-slide gallery__slide" data-description="GreatLearning C++ Certificate">
<img src="assets/img/certs_courses/cpp.jpg" alt="C++ Certificate">
<!-- VIEW BUTTON -->
<div class="gallery__slide-content">
<a href="https://dtmvamahs40ux.cloudfront.net/ComplementaryCourseCertificate/2758132/original/Emmanuel_P._Barrameda20230616-67-cklws3.jpg"
target="_blank" class="button button--flex button--super--small gallery__button">View<i class="uil uil-focus button__icon_large"></i>
</a>
target="_blank" class="button button--flex button--super--small gallery__button">View<i class="uil uil-focus button__icon_large"></i>
</a>
</div>
</div>

<div class="swiper-slide gallery__slide">
<div class="swiper-slide gallery__slide" data-description="GreatLearning C Certificate">
<img src="assets/img/certs_courses/c.jpg" alt="C Certificate">
<!-- VIEW BUTTON -->
<div class="gallery__slide-content">
<a href="https://dtmvamahs40ux.cloudfront.net/ComplementaryCourseCertificate/2712113/original/Emmanuel_P._Barrameda20230608-69-11pvoxy.jpg"
target="_blank" class="button button--flex button--super--small gallery__button">View<i class="uil uil-focus button__icon_large"></i>
</a>
</div>
target="_blank" class="button button--flex button--super--small gallery__button">View<i class="uil uil-focus button__icon_large"></i>
</a>
</div>
</div>

<div class="swiper-slide gallery__slide">
<div class="swiper-slide gallery__slide" data-description="GreatLearning HTML Certificate">
<img src="assets/img/certs_courses/html.jpg" alt="HTML Certificate">
<!-- VIEW BUTTON -->
<div class="gallery__slide-content">
<a href="https://dtmvamahs40ux.cloudfront.net/ComplementaryCourseCertificate/2668187/original/Emmanuel_P._Barrameda20230531-69-du93b5.jpg"
target="_blank" class="button button--flex button--super--small gallery__button">View<i class="uil uil-focus button__icon_large"></i>
</a>
</div>
</div>

<div class="swiper-slide gallery__slide">
<img src="assets/img/certs/cert-best-in-ict.jpeg" alt="SHS BEST IN ICT Certificate">
<!-- VIEW BUTTON -->
<div class="gallery__slide-content">
<a href="https://raw.githubusercontent.com/emmanpbarrameda/emmanpbarrameda.github.io/main/assets/img/certs/cert-best-in-ict.jpeg"
target="_blank" class="button button--flex button--super--small gallery__button">View<i class="uil uil-focus button__icon_large"></i>
</a>
</div>
</div>

<div class="swiper-slide gallery__slide">
<img src="assets/img/certs/cert-with-honor-shs.jpeg" alt="SHS WITH HONOR Certificate">
<!-- VIEW BUTTON -->
<div class="gallery__slide-content">
<a href="https://raw.githubusercontent.com/emmanpbarrameda/emmanpbarrameda.github.io/main/assets/img/certs/cert-with-honor-shs.jpeg"
target="_blank" class="button button--flex button--super--small gallery__button">View<i class="uil uil-focus button__icon_large"></i>
</a>
</div>
</div>
target="_blank" class="button button--flex button--super--small gallery__button">View<i class="uil uil-focus button__icon_large"></i>
</a>
</div>
</div>

<div class="swiper-slide gallery__slide">
<img src="assets/img/certs/cert-best-thesis.jpeg" alt="SHS BEST IN RESEARCH Certificate">
<!-- VIEW BUTTON -->
<div class="gallery__slide-content">
<a href="https://raw.githubusercontent.com/emmanpbarrameda/emmanpbarrameda.github.io/main/assets/img/certs/cert-best-thesis.jpeg"
target="_blank" class="button button--flex button--super--small gallery__button">View<i class="uil uil-focus button__icon_large"></i>
</a>
</div>
</div>

<div class="swiper-slide gallery__slide">
<div class="swiper-slide gallery__slide" data-description="TechTogether Project Team Certificate">
<img src="assets/img/certs/cert-tech-together.jpg" alt="COLLEGE TechTogether Certificate">
<!-- VIEW BUTTON -->
<div class="gallery__slide-content">
<a href="https://raw.githubusercontent.com/emmanpbarrameda/emmanpbarrameda.github.io/main/assets/img/certs/cert-tech-together.jpg"
target="_blank" class="button button--flex button--super--small gallery__button">View<i class="uil uil-focus button__icon_large"></i>
</a>
</div>
</div>



target="_blank" class="button button--flex button--super--small gallery__button">View<i class="uil uil-focus button__icon_large"></i>
</a>
</div>
</div>
</div>

<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

<!-- Add Pagination -->
<div class="swiper-pagination gallery__pagination"></div>

</div>
</section>


</section>






Expand Down

0 comments on commit deede8a

Please sign in to comment.