Add links to header and contact section

frontend/website/package-lock.json

@@ -21,6 +21,7 @@
         "lucide-react": "^0.476.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-icons": "^5.5.0",
         "tailwind-merge": "^3.0.2",
         "tailwindcss": "^4.0.8",
         "tailwindcss-animate": "^1.0.7"
@@ -3809,6 +3810,15 @@
         "react": "^19.0.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",

frontend/website/package.json

@@ -23,6 +23,7 @@
     "lucide-react": "^0.476.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.8",
     "tailwindcss-animate": "^1.0.7"

frontend/website/src/components/About.tsx

@@ -7,7 +7,7 @@ const About = () => {
       <div className="container mx-auto">
         <h2 className="text-3xl font-bold mb-4">About</h2>
         <p className="text-lg mb-8">
-          You have data, I have the skills to help you make sense of it. 
+          You have data, I have the skills to help you understand it. 
         </p>
         <ExpertiseSection
           title="Computer Vision"

frontend/website/src/components/Contact.tsx

@@ -1,13 +1,25 @@
-import React from 'react';
+import { Button } from "@/components/ui/button";
-import { Button } from "@/components/ui/button"
+import { SiLinkedin } from "react-icons/si";
 
 const Contact = () => {
   return (
     <section id="contact" className="contact py-20 bg-gray-100">
       <div className="container mx-auto">
         <h2 className="text-3xl font-bold mb-4">Contact Me</h2>
-        <p className="text-lg mb-4">Feel free to reach out!</p>
+        <p className="text-lg mb-4">
-        <Button>Contact</Button>
+          Get in touch with me at <a href="mailto:cdmacfadyen@proton.me" className="text-blue-500">cdmacfadyen@proton.me</a>, or drop me a message on LinkedIn.
+        </p>
+        <div className="flex items-center justify-center gap-3">
+          <Button asChild>
+            <a href="mailto:cdmacfadyen@proton.me">Email Me</a>
+          </Button>
+          <Button asChild>
+            <a href="https://www.linkedin.com/in/craig-macfadyen-9a2041197/" target="_blank" rel="noopener noreferrer">
+              <SiLinkedin className="w-6 h-6 mr-2" />
+              LinkedIn
+            </a>
+          </Button>
+        </div>
       </div>
     </section>
   );

frontend/website/src/components/navbar-04/nav-menu.tsx

@@ -21,7 +21,7 @@ export const NavMenu = (props: NavigationMenuProps) => (
       </NavigationMenuItem> */}
       <NavigationMenuItem>
         <NavigationMenuLink asChild>
-          <a href="#">Contact</a>
+          <a href="#contact">Contact</a>
         </NavigationMenuLink>
       </NavigationMenuItem>
     </NavigationMenuList>

frontend/website/src/components/navbar-04/navbar-04.tsx

@@ -2,34 +2,43 @@ import { Button } from "@/components/ui/button";
 import { Logo } from "./logo";
 import { NavMenu } from "./nav-menu";
 import { NavigationSheet } from "./navigation-sheet";
+import { SiLinkedin, SiGithub, SiGitea } from "react-icons/si";
 
 const Navbar04Page = () => {
   return (
-    // <div className="min-h-screen bg-muted">
+    <nav className="top-6 inset-x-4 h-16 bg-background border dark:border-slate-700/70 max-w-screen-xl mx-auto rounded-full">
-      <nav className="top-6 inset-x-4 h-16 bg-background border dark:border-slate-700/70 max-w-screen-xl mx-auto rounded-full">
+      <div className="h-full flex items-center justify-between mx-auto px-4">
-        <div className="h-full flex items-center justify-between mx-auto px-4">
+        <Logo />
-          <Logo />
-
-          {/* Desktop Menu */}
-          <NavMenu className="hidden md:block" />
 
+        {/* Desktop Menu */}
+        <NavMenu className="hidden md:block" />
+        <div className="flex items-center gap-3">
+          {/* Social Media Links */}
           <div className="flex items-center gap-3">
-            <Button
+            <a href="https://www.linkedin.com/in/craig-macfadyen-9a2041197/" target="_blank" rel="noopener noreferrer">
-              variant="outline"
+              <SiLinkedin className="w-6 h-6 text-gray-700 dark:text-gray-300" />
-              className="hidden sm:inline-flex rounded-full"
+            </a>
-            >
+            <a href="https://github.com/cdmacfadyen" target="_blank" rel="noopener noreferrer">
-              Sign In
+              <SiGithub className="w-6 h-6 text-gray-700 dark:text-gray-300" />
-            </Button>
+            </a>
-
+            <a href="https://gitea.craigmacfadyen.co.uk/" target="_blank" rel="noopener noreferrer">
-            {/* Mobile Menu */}
+              <SiGitea className="w-6 h-6 text-gray-700 dark:text-gray-300" />
-            <div className="md:hidden">
+            </a>
-              <NavigationSheet />
+          </div>
-            </div>
+          <Button
+            variant="outline"
+            className="hidden sm:inline-flex rounded-full"
+          >
+            Sign In
+          </Button>
+          {/* Mobile Menu */}
+          <div className="md:hidden">
+            <NavigationSheet />
           </div>
         </div>
-      </nav>
+      </div>
-    // </div>
+    </nav>
   );
 };
 
-export default Navbar04Page;
+export default Navbar04Page;