add styling to the header

src/App.css

@@ -213,23 +213,6 @@ a:hover {
   color: #0db760;
 }
 
-.nav-title::after {
-  content: '';
-  height: 2px;
-  width: 100%;
-  background-color: #0db760;
-  position: absolute;
-  left: 0;
-  bottom: -5px;
-  opacity: 0;
-}
-
-.nav-title:hover::after {
-  color: #0db760;
-  opacity: 1;
-  cursor: pointer;
-}
-
 .headline {
   width: fit-content;
   padding: 8px;

src/components/Header.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Icon } from '@iconify/react';
+import '../css/header.css';
 
 const Header = () => {
   const [breakpoint, setBreakpoint] = useState(window.innerWidth);
@@ -66,44 +67,45 @@ const Header = () => {
   }
 
   return (
-    <nav className="d-flex justify-content-around align-items-center mt-3">
+    <nav className="d-flex justify-content-between align-items-center main-header">
       <div className="d-flex justify-content-center flex-column align-items-center">
         <h1 className="logo">
           R
-          <Icon icon="ant-design:code-filled" color="#0db760" fontSize="5rem" />
+          <Icon icon="ant-design:code-filled" color="#0db760" fontSize="4rem" />
           N
         </h1>
         <p className="solutions"><em>Software Solutions</em></p>
       </div>
-      <ul className="d-flex align-items-center">
+      <ul className="d-flex align-items-center header-ul">
         <li>
           <a className="nav-title" href="about-me">
-            About
+            <Icon icon="octicon:home-24" className="nav-icon" />
           </a>
         </li>
         <li>
-          <a className="nav-title" href="#my-skills">
-            Skills
+          <a className="nav-title2" href="#my-skills">
+            <Icon icon="game-icons:skills" className="nav-icon" />
           </a>
         </li>
         <li>
-          <a className="nav-title" href="#my-reviews">
-            Reviews
+          <a className="nav-title3" href="#my-reviews">
+            <Icon icon="material-symbols:reviews-outline-rounded" className="nav-icon" />
           </a>
         </li>
-        <li className="nav-title">
-          <a className="nav-title" href="#my-projects">
-            Projects
+        <li>
+          <a className="nav-title4" href="#my-projects">
+            <Icon icon="bytesize:portfolio" className="nav-icon" />
           </a>
         </li>
         <li>
-          <a className="nav-title" href="#my-contacts">
-            contact
+          <a className="nav-title5" href="#my-contacts">
+            <Icon icon="mingcute:contacts-line" className="nav-icon" />
           </a>
         </li>
+        <li>
+          <button type="button" className="btn btn-outline-success btn-sm" aria-label="Download CV"><a className="cv" href="https://docs.google.com/document/d/1BNoFCStYQbHl8Bwq073pdJt1owdG0XDF3TrVxV-KHgE/edit?usp=sharing">Download CV</a></button>
+        </li>
       </ul>
-      <button type="button" className="btn btn-outline-success btn-sm" aria-label="Download CV"><a className="cv" href="https://docs.google.com/document/d/1BNoFCStYQbHl8Bwq073pdJt1owdG0XDF3TrVxV-KHgE/edit?usp=sharing">Download CV</a></button>
-      {/* <hr className="header-line" /> */}
     </nav>
   );
 };

src/css/header.css

@@ -0,0 +1,163 @@
+.main-header {
+  padding: 0% 6%;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  z-index: 2000;
+  background-color: white;
+}
+
+.nav-icon {
+  color: #333;
+  font-size: 3em;
+  padding: 10px;
+}
+
+.nav-icon:hover {
+  background: #dae1e3;
+  border-radius: 50%;
+  padding: 10px;
+  font-size: 3em;
+}
+
+.nav-title::after {
+  content: 'Home';
+  position: absolute;
+  color: white;
+  font-size: 11px;
+  bottom: -30px;
+  width: 100%;
+  left: 22px;
+  transform: translateX(-50%);
+  background: rgb(0 0 0 / 42%);
+  padding: 0;
+  border-radius: 5px;
+  opacity: 0;
+  text-align: center;
+}
+
+.nav-title:hover::after {
+  color: white;
+  opacity: 1;
+  cursor: pointer;
+}
+
+.nav-title2 {
+  font-weight: 700;
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+  color: #333;
+}
+
+.nav-title2::after {
+  content: 'Skills';
+  position: absolute;
+  color: white;
+  font-size: 11px;
+  bottom: -30px;
+  width: 100%;
+  left: 22px;
+  transform: translateX(-50%);
+  background: rgb(0 0 0 / 42%);
+  padding: 0;
+  border-radius: 5px;
+  opacity: 0;
+  text-align: center;
+}
+
+.nav-title2:hover::after {
+  color: white;
+  opacity: 1;
+  cursor: pointer;
+}
+
+.nav-title3 {
+  font-weight: 700;
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+  color: #333;
+}
+
+.nav-title3::after {
+  content: 'Reviews';
+  position: absolute;
+  color: white;
+  font-size: 11px;
+  bottom: -30px;
+  width: 100%;
+  left: 22px;
+  transform: translateX(-50%);
+  background: rgb(0 0 0 / 42%);
+  padding: 0;
+  border-radius: 5px;
+  opacity: 0;
+  text-align: center;
+}
+
+.nav-title3:hover::after {
+  color: white;
+  opacity: 1;
+  cursor: pointer;
+}
+
+.nav-title4 {
+  font-weight: 700;
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+  color: #333;
+}
+
+.nav-title4::after {
+  content: 'Portfolio';
+  position: absolute;
+  color: white;
+  font-size: 11px;
+  bottom: -30px;
+  width: 100%;
+  left: 22px;
+  transform: translateX(-50%);
+  background: rgb(0 0 0 / 42%);
+  padding: 0;
+  border-radius: 5px;
+  opacity: 0;
+  text-align: center;
+}
+
+.nav-title4:hover::after {
+  color: white;
+  opacity: 1;
+  cursor: pointer;
+}
+
+.nav-title5 {
+  font-weight: 700;
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+  color: #333;
+}
+
+.nav-title5::after {
+  content: 'Contacts';
+  position: absolute;
+  color: white;
+  font-size: 11px;
+  bottom: -30px;
+  width: 100%;
+  left: 24px;
+  transform: translateX(-50%);
+  background: rgb(0 0 0 / 42%);
+  padding: 0;
+  border-radius: 5px;
+  opacity: 0;
+  text-align: center;
+}
+
+.nav-title5:hover::after {
+  color: white;
+  opacity: 1;
+  cursor: pointer;
+}