diff --git a/static/css/sections/skills.css b/static/css/sections/skills.css index 211da14..374d3c6 100644 --- a/static/css/sections/skills.css +++ b/static/css/sections/skills.css @@ -19,7 +19,6 @@ .skills-section .card { margin-top: 0.5rem; margin-bottom: 0.5rem; - height: 100%; } .skills-section .card .card-body { diff --git a/static/js/home.js b/static/js/home.js index 91fc725..fe93469 100644 --- a/static/js/home.js +++ b/static/js/home.js @@ -63,6 +63,28 @@ var projectCards; } } + // ==================== Adjust height of the skills card ============= + function adjustSkillCardsHeight() { + if (!isMobile) { // no need to adjust height for mobile devices + // primary skills + var skillCards = document.getElementById("primary-skills"); + if (skillCards != null) { + var cardElems = skillCards.getElementsByClassName("card"); + var maxHeight = 0; + for (let i = 0; i < cardElems.length; i++) { + if (cardElems.item(i).clientHeight > maxHeight) { + maxHeight = cardElems.item(i).clientHeight; + } + } + for (let i = 0; i < cardElems.length; i++) { + cardElems.item(i).setAttribute("style", "min-height: " + maxHeight + "px;"); + } + } + } + } + $(window).on("load", function () { + adjustSkillCardsHeight(); + }); // ================== Project cards ===================== // Add click action on project category selector buttons @@ -309,17 +331,17 @@ var projectCards; this.parentElement.classList.toggle("col-sm-12"); if (this.children["SmallImage"].hasAttribute("active")) { let mainLogo = this.children["LargeImage"].getAttribute("Style"); - this.children["LargeImage"].setAttribute("active", true); + this.children["LargeImage"].setAttribute("active",true); this.children["SmallImage"].removeAttribute("active"); this.setAttribute("Style", mainLogo); } else { let mainLogo = this.children["SmallImage"].getAttribute("Style"); - this.children["SmallImage"].setAttribute("active", true); + this.children["SmallImage"].setAttribute("active",true); this.children["LargeImage"].removeAttribute("active"); this.setAttribute("Style", mainLogo); } - + if (this.children["caption"] != undefined) { this.children["caption"].classList.toggle("hidden"); }