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,290 +5,319 @@
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  */
-(function() {
+(function () {
-    "use strict";
+  "use strict";
 
-    /**
+  /**
-     * Easy selector helper function
+   * Easy selector helper function
-     */
+   */
-    const select = (el, all = false) => {
+  const select = (el, all = false) => {
-        el = el.trim();
+    el = el.trim();
-        if (all) {
+    if (all) {
-            return [...document.querySelectorAll(el)];
+      return [...document.querySelectorAll(el)];
-        } else {
+    } else {
-            return document.querySelector(el);
+      return document.querySelector(el);
-        }
-    };
-
-    /**
-     * Easy event listener function
-     */
-    const on = (type, el, listener, all = false) => {
-        let selectEl = select(el, all);
-        if (selectEl) {
-            if (all) {
-                selectEl.forEach((e) => e.addEventListener(type, listener));
-            } else {
-                selectEl.addEventListener(type, listener);
-            }
-        }
-    };
-
-    /**
-     * Easy on scroll event listener
-     */
-    const onscroll = (el, listener) => {
-        el.addEventListener("scroll", listener);
-    };
-
-    /**
-     * Navbar links active state on scroll
-     */
-    let navbarlinks = select("#navbar .scrollto", true);
-    const navbarlinksActive = () => {
-        let position = window.scrollY + 200;
-        navbarlinks.forEach((navbarlink) => {
-            if (!navbarlink.hash) return;
-            let section = select(navbarlink.hash);
-            if (!section) return;
-            if (
-                position >= section.offsetTop &&
-                position <= section.offsetTop + section.offsetHeight
-            ) {
-                navbarlink.classList.add("active");
-            } else {
-                navbarlink.classList.remove("active");
-            }
-        });
-    };
-    window.addEventListener("load", navbarlinksActive);
-    onscroll(document, navbarlinksActive);
-
-    /**
-     * Scrolls to an element with header offset
-     */
-    const scrollto = (el) => {
-        let header = select("#header");
-        let offset = header.offsetHeight;
-
-        if (!header.classList.contains("header-scrolled")) {
-            offset -= 20;
-        }
-
-        let elementPos = select(el).offsetTop;
-        window.scrollTo({
-            top: elementPos - offset,
-            behavior: "smooth",
-        });
-    };
-
-    /**
-     * Toggle .header-scrolled class to #header when page is scrolled
-     */
-    let selectHeader = select("#header");
-    if (selectHeader) {
-        const headerScrolled = () => {
-            if (window.scrollY > 100) {
-                selectHeader.classList.add("header-scrolled");
-            } else {
-                selectHeader.classList.remove("header-scrolled");
-            }
-        };
-        window.addEventListener("load", headerScrolled);
-        onscroll(document, headerScrolled);
     }
+  };
 
-    /**
+  /**
-     * Back to top button
+   * Easy event listener function
-     */
+   */
-    let backtotop = select(".back-to-top");
+  const on = (type, el, listener, all = false) => {
-    if (backtotop) {
+    let selectEl = select(el, all);
-        const toggleBacktotop = () => {
+    if (selectEl) {
-            if (window.scrollY > 100) {
+      if (all) {
-                backtotop.classList.add("active");
+        selectEl.forEach((e) => e.addEventListener(type, listener));
-            } else {
+      } else {
-                backtotop.classList.remove("active");
+        selectEl.addEventListener(type, listener);
-            }
+      }
-        };
-        window.addEventListener("load", toggleBacktotop);
-        onscroll(document, toggleBacktotop);
     }
+  };
 
-    /**
+  /**
-     * Mobile nav toggle
+   * Easy on scroll event listener
-     */
+   */
-    on("click", ".mobile-nav-toggle", function(e) {
+  const onscroll = (el, listener) => {
-        select("#navbar").classList.toggle("navbar-mobile");
+    el.addEventListener("scroll", listener);
-        this.classList.toggle("bi-list");
+  };
-        this.classList.toggle("bi-x");
+
+  /**
+   * Navbar links active state on scroll
+   */
+  let navbarlinks = select("#navbar .scrollto", true);
+  const navbarlinksActive = () => {
+    let position = window.scrollY + 200;
+    navbarlinks.forEach((navbarlink) => {
+      if (!navbarlink.hash) return;
+      let section = select(navbarlink.hash);
+      if (!section) return;
+      if (
+        position >= section.offsetTop &&
+        position <= section.offsetTop + section.offsetHeight
+      ) {
+        navbarlink.classList.add("active");
+      } else {
+        navbarlink.classList.remove("active");
+      }
     });
+  };
+  window.addEventListener("load", navbarlinksActive);
+  onscroll(document, navbarlinksActive);
 
+  /**
+   * Scrolls to an element with header offset
+   */
+  const scrollto = (el) => {
+    let header = select("#header");
+    let offset = header.offsetHeight;
+
+    if (!header.classList.contains("header-scrolled")) {
+      offset -= 20;
+    }
+
+    let elementPos = select(el).offsetTop;
+    window.scrollTo({
+      top: elementPos - offset,
+      behavior: "smooth",
+    });
+  };
+
+  /**
+   * Toggle .header-scrolled class to #header when page is scrolled
+   */
+  let selectHeader = select("#header");
+  if (selectHeader) {
+    const headerScrolled = () => {
+      if (window.scrollY > 100) {
+        selectHeader.classList.add("header-scrolled");
+      } else {
+        selectHeader.classList.remove("header-scrolled");
+      }
+    };
+    window.addEventListener("load", headerScrolled);
+    onscroll(document, headerScrolled);
+  }
+
+  /**
+   * Back to top button
+   */
+  let backtotop = select(".back-to-top");
+  if (backtotop) {
+    const toggleBacktotop = () => {
+      if (window.scrollY > 100) {
+        backtotop.classList.add("active");
+      } else {
+        backtotop.classList.remove("active");
+      }
+    };
+    window.addEventListener("load", toggleBacktotop);
+    onscroll(document, toggleBacktotop);
+  }
+
+  /**
+   * Mobile nav toggle
+   */
+  on("click", ".mobile-nav-toggle", function (e) {
+    select("#navbar").classList.toggle("navbar-mobile");
+    this.classList.toggle("bi-list");
+    this.classList.toggle("bi-x");
+  });
+
+  /**
+   * Mobile nav dropdowns activate
+   */
+  on(
+    "click",
+    ".navbar .dropdown > a",
+    function (e) {
+      if (select("#navbar").classList.contains("navbar-mobile")) {
+        e.preventDefault();
+        this.nextElementSibling.classList.toggle("dropdown-active");
+      }
+    },
+    true
+  );
+
+  /**
+   * Scrool with ofset on links with a class name .scrollto
+   */
+  on(
+    "click",
+    ".scrollto",
+    function (e) {
+      if (select(this.hash)) {
+        e.preventDefault();
+
+        let navbar = select("#navbar");
+        if (navbar.classList.contains("navbar-mobile")) {
+          navbar.classList.remove("navbar-mobile");
+          let navbarToggle = select(".mobile-nav-toggle");
+          navbarToggle.classList.toggle("bi-list");
+          navbarToggle.classList.toggle("bi-x");
+        }
+        scrollto(this.hash);
+      }
+    },
+    true
+  );
+
+  /**
+   * Scroll with ofset on page load with hash links in the url
+   */
+  window.addEventListener("load", () => {
+    if (window.location.hash) {
+      if (select(window.location.hash)) {
+        scrollto(window.location.hash);
+      }
+    }
+  });
+
+  /**
+   * Skills animation
+   */
+  let skillsContent = select(".progress", true);
+  if (skillsContent) {
+    skillsContent.forEach((skill) => {
+      new Waypoint({
+        element: skill,
+        offset: "100%",
+        handler: function (direction) {
+          let progress = skill.querySelectorAll(".progress-bar");
+          progress.forEach((el) => {
+            let percent =
+              100 *
+              (+el.getAttribute("aria-valuenow") /
+                (+el.getAttribute("aria-valuemax") -
+                  +el.getAttribute("aria-valuemin")));
+            el.style.width = percent + "%";
+          });
+        },
+      });
+    });
+  }
+
+  /**
+   * Testimonials slider
+   */
+  new Swiper(".testimonials-slider", {
+    speed: 600,
+    loop: true,
+    autoplay: {
+      delay: 10000,
+      disableOnInteraction: false,
+    },
+    slidesPerView: "auto",
+    pagination: {
+      el: ".swiper-pagination",
+      type: "bullets",
+      clickable: true,
+    },
+  });
+
+  window.addEventListener("load", () => {
     /**
-     * Mobile nav dropdowns activate
+     * Skills isotope and filter
      */
-    on(
+    let skillsContainer = select(".skills-container");
+    if (skillsContainer) {
+      let skillsIsotope = new Isotope(skillsContainer, {
+        itemSelector: ".skill-item",
+      });
+
+      let skillsFilters = select("#skills-filters li", true);
+
+      on(
         "click",
-        ".navbar .dropdown > a",
+        "#skills-filters li",
-        function(e) {
+        function (e) {
-            if (select("#navbar").classList.contains("navbar-mobile")) {
+          e.preventDefault();
-                e.preventDefault();
+          skillsFilters.forEach(function (el) {
-                this.nextElementSibling.classList.toggle("dropdown-active");
+            el.classList.remove("filter-active");
-            }
+          });
+          this.classList.add("filter-active");
+
+          skillsIsotope.arrange({
+            filter: this.getAttribute("data-filter"),
+          });
         },
-        true,
+        true
-    );
+      );
-
-    /**
-     * Scrool with ofset on links with a class name .scrollto
-     */
-    on(
-        "click",
-        ".scrollto",
-        function(e) {
-            if (select(this.hash)) {
-                e.preventDefault();
-
-                let navbar = select("#navbar");
-                if (navbar.classList.contains("navbar-mobile")) {
-                    navbar.classList.remove("navbar-mobile");
-                    let navbarToggle = select(".mobile-nav-toggle");
-                    navbarToggle.classList.toggle("bi-list");
-                    navbarToggle.classList.toggle("bi-x");
-                }
-                scrollto(this.hash);
-            }
-        },
-        true,
-    );
-
-    /**
-     * Scroll with ofset on page load with hash links in the url
-     */
-    window.addEventListener("load", () => {
-        if (window.location.hash) {
-            if (select(window.location.hash)) {
-                scrollto(window.location.hash);
-            }
-        }
-    });
-
-    /**
-     * Skills animation
-     */
-    let skillsContent = select(".progress", true);
-    if (skillsContent) {
-        skillsContent.forEach((skill) => {
-            new Waypoint({
-                element: skill,
-                offset: "100%",
-                handler: function(direction) {
-                    let progress = skill.querySelectorAll(".progress-bar");
-                    progress.forEach((el) => {
-                        let percent =
-                            100 *
-                            (+el.getAttribute("aria-valuenow") /
-                                (+el.getAttribute("aria-valuemax") -
-                                    +el.getAttribute("aria-valuemin")));
-                        el.style.width = percent + "%";
-                    });
-                },
-            });
-        });
     }
 
-    /**
-     * Testimonials slider
-     */
-    new Swiper(".testimonials-slider", {
-        speed: 600,
-        loop: true,
-        autoplay: {
-            delay: 10000,
-            disableOnInteraction: false,
-        },
-        slidesPerView: "auto",
-        pagination: {
-            el: ".swiper-pagination",
-            type: "bullets",
-            clickable: true,
-        },
-    });
-
     /**
      * Porfolio isotope and filter
      */
-    window.addEventListener("load", () => {
+    let portfolioContainer = select(".portfolio-container");
-        let portfolioContainer = select(".portfolio-container");
+    if (portfolioContainer) {
-        if (portfolioContainer) {
+      let portfolioIsotope = new Isotope(portfolioContainer, {
-            let portfolioIsotope = new Isotope(portfolioContainer, {
+        itemSelector: ".portfolio-item",
-                itemSelector: ".portfolio-item",
+      });
-            });
 
-            let portfolioFilters = select("#portfolio-flters li", true);
+      let portfolioFilters = select("#portfolio-flters li", true);
 
-            on(
+      on(
-                "click",
+        "click",
-                "#portfolio-flters li",
+        "#portfolio-flters li",
-                function(e) {
+        function (e) {
-                    e.preventDefault();
+          e.preventDefault();
-                    portfolioFilters.forEach(function(el) {
+          portfolioFilters.forEach(function (el) {
-                        el.classList.remove("filter-active");
+            el.classList.remove("filter-active");
-                    });
+          });
-                    this.classList.add("filter-active");
+          this.classList.add("filter-active");
 
-                    portfolioIsotope.arrange({
+          portfolioIsotope.arrange({
-                        filter: this.getAttribute("data-filter"),
+            filter: this.getAttribute("data-filter"),
-                    });
+          });
-                },
-                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"]`,
-            );
-            horizontal_aoss.forEach((el) => el.setAttribute("data-aos", "fade-up"));
-        }
-        AOS.init();
-    });
-
-    /**
-     * Initiate portfolio lightbox
-     */
-    const portfolioLightbox = GLightbox({
-        selector: ".portfolio-lightbox",
-    });
-
-    /**
-     * Portfolio details slider
-     */
-    new Swiper(".portfolio-details-slider", {
-        speed: 400,
-        loop: true,
-        autoplay: {
-            delay: 5000,
-            disableOnInteraction: false,
         },
-        pagination: {
+        true
-            el: ".swiper-pagination",
+      );
-            type: "bullets",
-            clickable: true,
-        },
-    });
-    if (localStorage.getItem("theme") == "light") {
-        toggleDarkMode();
     }
+    // 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"]`
+      );
+      horizontal_aoss.forEach((el) => el.setAttribute("data-aos", "fade-up"));
+    }
+    AOS.init();
+  });
+
+  /**
+   * Initiate portfolio lightbox
+   */
+  const portfolioLightbox = GLightbox({
+    selector: ".portfolio-lightbox",
+  });
+
+  /**
+   * Portfolio details slider
+   */
+  new Swiper(".portfolio-details-slider", {
+    speed: 400,
+    loop: true,
+    autoplay: {
+      delay: 5000,
+      disableOnInteraction: false,
+    },
+    pagination: {
+      el: ".swiper-pagination",
+      type: "bullets",
+      clickable: true,
+    },
+  });
+  if (localStorage.getItem("theme") == "light") {
+    toggleDarkMode();
+  }
 })();
 
 function toggleDarkMode() {
-    let dark_indicator = document.querySelector("#navbar i");
+  let dark_indicator = document.querySelector("#navbar i");
-    dark_indicator.classList.toggle("bi-moon-stars-fill");
+  dark_indicator.classList.toggle("bi-moon-stars-fill");
-    dark_indicator.classList.toggle("bi-sun-fill");
+  dark_indicator.classList.toggle("bi-sun-fill");
 
-    document.body.classList.toggle("dark");
+  document.body.classList.toggle("dark");
 
-    let theme = document.body.classList.contains("dark") ? "dark" : "light";
+  let theme = document.body.classList.contains("dark") ? "dark" : "light";
-    document.documentElement.style.setProperty("color-scheme", theme);
+  document.documentElement.style.setProperty("color-scheme", theme);
-    localStorage.setItem("theme", theme);
+  localStorage.setItem("theme", theme);
 }

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,47 +359,139 @@
                     <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>
 
-                <div class="row">
+                <!-- TODO: check the filter & link of each thing (normally the first
-                    <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
+                    line should be good) -->
-                        <div class="icon-box">
+                <div class="skills-container">
-                            <div class="icon"><i class="bx bxl-dribbble"></i></div>
+                    <div class="row">
-                            <h4 class="title"><a href="">Lorem Ipsum</a></h4>
+                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
-                            <p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias
+                            <div class="icon-box">
-                                excepturi sint occaecati cupiditate non provident</p>
+                                <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 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-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>
 
-                    <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-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>
 
-                    <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
-                        <div class="icon-box">
+                            mb-5 skill-item filter-web">
-                            <div class="icon"><i class="bx bx-world"></i></div>
+                            <div class="icon-box">
-                            <h4 class="title"><a href="">Nemo Enim</a></h4>
+                                <div class="icon"><i class="bx bx-server"></i></div>
-                            <p class="description">At vero eos et accusamus et iusto odio dignissimos ducimus qui
+                                <h4 class="title"><a href="">Server Management</a></h4>
-                                blanditiis praesentium voluptatum deleniti atque</p>
+                                <p class="description">Since 2018, I've been diving into the world of server
+                                    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>
-
-            </div>
         </section><!-- End My Services Section -->
 
         <!-- ======= Testimonials Section ======= -->