add focus state styles for keyboard navigation.

index.css

@@ -192,6 +192,21 @@ a {
     font-weight: 400;
     font-family: 'Jost', sans-serif;
     transition: all .2s;
+    outline: 2px solid transparent;
+}
+
+::-moz-focus-inner {
+    border: 0;
+}
+
+button:focus,
+a:focus {
+    outline: 2px solid var(--pink);
+}
+
+body:not(.user-is-tabbing) button:focus,
+body:not(.user-is-tabbing) a:focus {
+    outline: none;
 }
 
 .link:hover {
@@ -208,6 +223,10 @@ a {
     font-weight: 400;
 }
 
+.btn:focus {
+    outline: none;
+}
+
 .btn::after {
     content: '';
     display: block;
@@ -221,7 +240,8 @@ a {
     transition: all 0.2s cubic-bezier(1, 0.68, 0.16, 0.9);
 }
 
-.btn:hover::after {
+.btn:hover::after,
+.btn:focus::after {
     right: 0;
     background: var(--pink);
 }
@@ -235,7 +255,8 @@ a {
     display: none;
 }
 
-.btn--pink:hover {
+.btn--pink:hover,
+.btn--pink:focus {
     background: transparent;
 }
 
@@ -261,7 +282,12 @@ a {
     transition: all 0.2s cubic-bezier(1, 0.68, 0.16, 0.9);
 }
 
-.link__text:hover::after {
+.link__text:focus {
+    outline: none;
+}
+
+.link__text:hover::after,
+.link__text:focus:after {
     right: 0;
     background: var(--pink);
 }

index.html

@@ -2,7 +2,7 @@
   Hello 😊.
 
   This template is designed and developed by Nisar Hassan Naqvi
-  for anyone to use for free or customize the way they want.
+  for anyone to use for free or customize the way they like.
 
   Github Repo: https://github.com/nisarhassan12/portfolio-template/
   My Website: https://nisar.dev

index.js

@@ -1,3 +1,26 @@
+/* -----------------------------------------
+  Have focus outline only for keyboard users 
+ ---------------------------------------- */
+
+const handleFirstTab = (e) => {
+  if(e.key === 'Tab') {
+    document.body.classList.add('user-is-tabbing')
+
+    window.removeEventListener('keydown', handleFirstTab)
+    window.addEventListener('mousedown', handleMouseDownOnce)
+  }
+
+}
+
+const handleMouseDownOnce = () => {
+  document.body.classList.remove('user-is-tabbing')
+
+  window.removeEventListener('mousedown', handleMouseDownOnce)
+  window.addEventListener('keydown', handleFirstTab)
+}
+
+window.addEventListener('keydown', handleFirstTab)
+
 const backToTopButton = document.querySelector(".back-to-top");
 let isBackToTopRendered = false;