working on the skills (commiting to see if the

font-awesome icon is shown on the server)

assets/css/style.css

@@ -758,6 +758,36 @@ section {
 /*--------------------------------------------------------------
 # My Skills
 --------------------------------------------------------------*/
+.skills #skills-filters {
+  list-style: none;
+  margin-bottom: 20px;
+}
+
+.skills #skills-filters li {
+  cursor: pointer;
+  display: inline-block;
+  margin: 0 10px 10px 10px;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 7px 10px;
+  text-transform: uppercase;
+  color: var(--text-color);
+  transition: all 0.3s ease-in-out;
+  border: 2px solid var(--border);
+}
+
+.skills #skills-filters li:hover,
+.skills #skills-filters li.filter-active {
+  color: #f3a200;
+  border-color: var(--highlight);
+}
+
+.skills .skill-item {
+  display: flex;
+  align-items: stretch;
+}
+
 .skills .icon-box {
   padding: 30px;
   position: relative;
@@ -769,11 +799,19 @@ section {
   border: 1px solid var(--border);
 }
 
+.skills .icon-box p {
+  text-align: justify;
+}
+
 .skills .icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   margin: 0 auto 20px auto;
-  padding-top: 17px;
+  /* padding-top: 17px; */
-  display: inline-block;
+  /* display: inline-block; */
-  text-align: center;
+  /* text-align: center; */
   border-radius: 50%;
   width: 72px;
   height: 72px;
@@ -787,6 +825,11 @@ section {
   color: var(--highlight);
 }
 
+.skills .icon img {
+  max-height: 36px;
+  max-width: 36px;
+}
+
 .skills .title {
   font-weight: 700;
   margin-bottom: 15px;

assets/js/main.js

@@ -5,7 +5,7 @@
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  */
-(function() {
+(function () {
   "use strict";
 
   /**
@@ -117,7 +117,7 @@
   /**
    * Mobile nav toggle
    */
-    on("click", ".mobile-nav-toggle", function(e) {
+  on("click", ".mobile-nav-toggle", function (e) {
     select("#navbar").classList.toggle("navbar-mobile");
     this.classList.toggle("bi-list");
     this.classList.toggle("bi-x");
@@ -129,13 +129,13 @@
   on(
     "click",
     ".navbar .dropdown > a",
-        function(e) {
+    function (e) {
       if (select("#navbar").classList.contains("navbar-mobile")) {
         e.preventDefault();
         this.nextElementSibling.classList.toggle("dropdown-active");
       }
     },
-        true,
+    true
   );
 
   /**
@@ -144,7 +144,7 @@
   on(
     "click",
     ".scrollto",
-        function(e) {
+    function (e) {
       if (select(this.hash)) {
         e.preventDefault();
 
@@ -158,7 +158,7 @@
         scrollto(this.hash);
       }
     },
-        true,
+    true
   );
 
   /**
@@ -181,7 +181,7 @@
       new Waypoint({
         element: skill,
         offset: "100%",
-                handler: function(direction) {
+        handler: function (direction) {
           let progress = skill.querySelectorAll(".progress-bar");
           progress.forEach((el) => {
             let percent =
@@ -214,10 +214,39 @@
     },
   });
 
+  window.addEventListener("load", () => {
+    /**
+     * Skills isotope and filter
+     */
+    let skillsContainer = select(".skills-container");
+    if (skillsContainer) {
+      let skillsIsotope = new Isotope(skillsContainer, {
+        itemSelector: ".skill-item",
+      });
+
+      let skillsFilters = select("#skills-filters li", true);
+
+      on(
+        "click",
+        "#skills-filters li",
+        function (e) {
+          e.preventDefault();
+          skillsFilters.forEach(function (el) {
+            el.classList.remove("filter-active");
+          });
+          this.classList.add("filter-active");
+
+          skillsIsotope.arrange({
+            filter: this.getAttribute("data-filter"),
+          });
+        },
+        true
+      );
+    }
+
     /**
      * Porfolio isotope and filter
      */
-    window.addEventListener("load", () => {
     let portfolioContainer = select(".portfolio-container");
     if (portfolioContainer) {
       let portfolioIsotope = new Isotope(portfolioContainer, {
@@ -229,9 +258,9 @@
       on(
         "click",
         "#portfolio-flters li",
-                function(e) {
+        function (e) {
           e.preventDefault();
-                    portfolioFilters.forEach(function(el) {
+          portfolioFilters.forEach(function (el) {
             el.classList.remove("filter-active");
           });
           this.classList.add("filter-active");
@@ -240,13 +269,13 @@
             filter: this.getAttribute("data-filter"),
           });
         },
-                true,
+        true
       );
     }
     // let horizontal_aoss = document.querySelectorAll("[data-aos~='left'], [data-aos~='right']")
     if (window.matchMedia("(max-width: 768px)").matches) {
       let horizontal_aoss = document.querySelectorAll(
-                `[data-aos$="left"], [data-aos$="right"]`,
+        `[data-aos$="left"], [data-aos$="right"]`
       );
       horizontal_aoss.forEach((el) => el.setAttribute("data-aos", "fade-up"));
     }

index.html

@@ -27,6 +27,7 @@
     <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
     <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
     <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
+    <link href="assets/vendor/font-awesome/fontawesome.min.css" rel="stylesheet">
 
     <!-- Template Main CSS File -->
     <link href="assets/css/style.css" rel="stylesheet">
@@ -358,45 +359,137 @@
                     <h2>My Skills</h2>
                     <p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p>
                 </div>
+                <ul id="skills-filters" class="d-flex justify-content-center">
+                    <li data-filter="*" class="filter-active">All</li>
+                    <li data-filter=".filter-prod">Productivity</li>
+                    <li data-filter=".filter-lang">Languages</li>
+                    <li data-filter=".filter-frame">Frameworks</li>
+                    <li data-filter=".filter-web">Web</li>
+                </ul>
 
+                <!-- TODO: check the filter & link of each thing (normally the first
+                    line should be good) -->
+                <div class="skills-container">
                     <div class="row">
-                    <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
+                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
                             <div class="icon-box">
-                            <div class="icon"><i class="bx bxl-dribbble"></i></div>
+                                <div class="icon">
-                            <h4 class="title"><a href="">Lorem Ipsum</a></h4>
+                                    <img src="assets/img/neovim.png" alt="neovim-logo" />
-                            <p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias
+                                </div>
-                                excepturi sint occaecati cupiditate non provident</p>
+                                <h4 class="title"><a href="https://neovim.io">Neovim</a></h4>
+                                <p class="description">
+                                    Neovim is a versatile text editor that's become
+                                    an integral part of my workflow. It
+                                    offers customization, plugin support, and version control integration, making it a
+                                    reliable tool for my coding and writing tasks.
+                                </p>
                             </div>
                         </div>
 
-                    <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
+                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
                             <div class="icon-box">
-                            <div class="icon"><i class="bx bx-file"></i></div>
+                                <div class="icon">
-                            <h4 class="title"><a href="">Sed ut perspiciatis</a></h4>
+                                    <img src="assets/img/arch.png" alt="arch-linux-logo" />
-                            <p class="description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                                </div>
-                                dolore eu fugiat nulla pariatur</p>
+                                <h4 class="title"><a href="https://archlinux.org">Arch Linux</a></h4>
+                                <p class="description">Arch Linux is a minimalist, user-centric operating system that
+                                    I've
+                                    come to appreciate. It's not for everyone, but if you value control and enjoy
+                                    crafting
+                                    your system to suit your needs, it's a solid choice. With a rolling release model
+                                    and a
+                                    wealth of user-contributed packages, Arch Linux offers a clean slate to build your
+                                    computing environment.</p>
                             </div>
                         </div>
 
-                    <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
+                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
                             <div class="icon-box">
-                            <div class="icon"><i class="bx bx-tachometer"></i></div>
+                                <div class="icon">
-                            <h4 class="title"><a href="">Magni Dolores</a></h4>
+                                    <img src="assets/img/docker.png" alt="docker-logo" />
-                            <p class="description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                                </div>
-                                officia deserunt mollit anim id est laborum</p>
+                                <h4 class="title"><a href="https://www.docker.com">Docker</a></h4>
+                                <p class="description">Docker is a practical tool for managing containers, which I find
+                                    quite handy. It simplifies application deployment and scaling by encapsulating
+                                    applications and their dependencies. With Docker, you can create, test, and deploy
+                                    applications consistently, making it a valuable addition to any developer's toolkit.
+                                </p>
                             </div>
                         </div>
 
-                    <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
+                        <div class="col-md-6 col-lg-3
+                            mb-5 skill-item filter-web">
                             <div class="icon-box">
-                            <div class="icon"><i class="bx bx-world"></i></div>
+                                <div class="icon"><i class="bx bx-server"></i></div>
-                            <h4 class="title"><a href="">Nemo Enim</a></h4>
+                                <h4 class="title"><a href="">Server Management</a></h4>
-                            <p class="description">At vero eos et accusamus et iusto odio dignissimos ducimus qui
+                                <p class="description">Since 2018, I've been diving into the world of server
-                                blanditiis praesentium voluptatum deleniti atque</p>
+                                    administration,
+                                    experimenting with various hardware setups. It's been an enriching journey that's
+                                    expanded my technical horizons. I've come to appreciate the art of keeping servers
+                                    running smoothly and securely. Additionally, delving into DevOps activities has
+                                    allowed
+                                    me to bridge the gap between development and operations, streamlining processes and
+                                    improving overall efficiency.</p>
                             </div>
                         </div>
 
                     </div>
+                    <div class="row">
+                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
+                            <div class="icon-box">
+                                <div class="icon"><i class="fa fa-masks-theater"></i></div>
+                                <h4 class="title"><a href="https://neovim.io">Javascript / Typescript</a></h4>
+                                <p class="description">
+                                    Neovim is a versatile text editor that's become
+                                    an integral part of my workflow. It
+                                    offers customization, plugin support, and version control integration, making it a
+                                    reliable tool for my coding and writing tasks.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
+                            <div class="icon-box">
+                                <div class="icon">
+                                    <img src="assets/img/tsjs.png" alt="neovim-logo" />
+                                </div>
+                                <h4 class="title"><a href="https://neovim.io">Javascript / Typescript</a></h4>
+                                <p class="description">
+                                    Neovim is a versatile text editor that's become
+                                    an integral part of my workflow. It
+                                    offers customization, plugin support, and version control integration, making it a
+                                    reliable tool for my coding and writing tasks.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
+                            <div class="icon-box">
+                                <div class="icon">
+                                    <img src="assets/img/neovim.png" alt="neovim-logo" />
+                                </div>
+                                <h4 class="title"><a href="https://neovim.io">Neovim</a></h4>
+                                <p class="description">
+                                    Neovim is a versatile text editor that's become
+                                    an integral part of my workflow. It
+                                    offers customization, plugin support, and version control integration, making it a
+                                    reliable tool for my coding and writing tasks.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
+                            <div class="icon-box">
+                                <div class="icon">
+                                    <img src="assets/img/neovim.png" alt="neovim-logo" />
+                                </div>
+                                <h4 class="title"><a href="https://neovim.io">Neovim</a></h4>
+                                <p class="description">
+                                    Neovim is a versatile text editor that's become
+                                    an integral part of my workflow. It
+                                    offers customization, plugin support, and version control integration, making it a
+                                    reliable tool for my coding and writing tasks.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
 
                 </div>
         </section><!-- End My Services Section -->