x

Author: SamHillierDev

src/App.tsx

@@ -8,7 +8,7 @@ function App() {
   return (
     <div>
       <Header />
-      <main className="container mx-auto p-4 md:p-8">
+      <main className="container mx-auto mt-20">
         <About />
         <Projects />
         <Certifications />

src/components/Header.tsx

@@ -12,6 +12,7 @@ const Header: React.FC = () => {
   const [typingIndex, setTypingIndex] = useState("Software Engineer".length);
   const [isDeleting, setIsDeleting] = useState(false);
   const [isWaiting, setIsWaiting] = useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
   useEffect(() => {
     if (isWaiting) {
@@ -46,56 +47,116 @@ const Header: React.FC = () => {
     return () => clearTimeout(timeout);
   }, [roles, roleIndex, typingIndex, isDeleting, currentRole, isWaiting]);
 
+  const toggleSidebar = () => {
+    setIsSidebarOpen((prev) => !prev);
+  };
+
   return (
-    <header className="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 py-4 shadow-sm">
+    <header className="fixed top-0 left-0 w-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 py-4 shadow-sm z-50">
       <div className="container mx-auto flex items-center justify-between px-4">
-        <div className="flex flex-col">
-          <span className="text-2xl font-bold text-white leading-none">
-            Sam Hillier
-          </span>
-          <span className="text-sm font-light text-gray-200 leading-none">
-            {currentRole}
-            <span className="animate-blink">|</span>
-          </span>
+        <div className="flex items-center space-x-4">
+          <button
+            className="md:hidden text-white focus:outline-none"
+            onClick={toggleSidebar}
+          >
+            <svg
+              className="w-6 h-6"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+          </button>
+          <div className="flex flex-col cursor-pointer">
+            <span className="text-2xl font-bold text-white leading-none text-nowrap">
+              Sam Hillier
+            </span>
+            <span className="text-sm font-light text-gray-200 leading-none text-nowrap">
+              {currentRole}
+              <span className="animate-blink">|</span>
+            </span>
+          </div>
         </div>
 
-        <nav>
+        <nav className="hidden md:block">
           <ul className="flex space-x-6 text-lg font-medium text-gray-100">
             <li>
-              <a
-                href="#about"
-                className="relative block px-4 py-3 after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[2px] after:bg-white after:transition-all after:duration-300 hover:after:w-full"
-              >
+              <a href="#about" className="hover:text-white">
                 About
               </a>
             </li>
             <li>
-              <a
-                href="#projects"
-                className="relative block px-4 py-3 after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[2px] after:bg-white after:transition-all after:duration-300 hover:after:w-full"
-              >
+              <a href="#projects" className="hover:text-white">
                 Projects
               </a>
             </li>
             <li>
-              <a
-                href="#skills"
-                className="relative block px-4 py-3 after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[2px] after:bg-white after:transition-all after:duration-300 hover:after:w-full"
-              >
+              <a href="#skills" className="hover:text-white">
                 Skills
               </a>
             </li>
             <li>
-              <a
-                href="#contact"
-                className="relative block px-4 py-3 after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[2px] after:bg-white after:transition-all after:duration-300 hover:after:w-full"
-              >
+              <a href="#contact" className="hover:text-white">
                 Contact
               </a>
             </li>
           </ul>
         </nav>
       </div>
+
+      <div
+        className={`fixed inset-y-0 left-0 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 shadow-lg transform ${
+          isSidebarOpen ? "translate-x-0" : "-translate-x-full"
+        } transition-transform duration-300 ease-in-out z-30`}
+      >
+        <button
+          className="absolute top-4 right-4 text-white focus:outline-none"
+          onClick={toggleSidebar}
+        >
+          <svg
+            className="w-6 h-6"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+        <nav className="mt-16 space-y-6 px-8 text-lg font-medium text-gray-100">
+          <a href="#about" className="block hover:text-white">
+            About
+          </a>
+          <a href="#projects" className="block hover:text-white">
+            Projects
+          </a>
+          <a href="#skills" className="block hover:text-white">
+            Skills
+          </a>
+          <a href="#contact" className="block hover:text-white">
+            Contact
+          </a>
+        </nav>
+      </div>
+
+      {isSidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50 z-20"
+          onClick={toggleSidebar}
+        ></div>
+      )}
     </header>
   );
 };