Add gifs to expertise sections

Add links to header and contact section
2025-03-06 15:51:47 +00:00 · 2025-02-28 12:41:37 +00:00
15 changed files with 77 additions and 44 deletions
--- a/frontend/website/index.html
+++ b/frontend/website/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Craig Macfadyen</title>
  </head>
  <body>
    <div id="root"></div>
--- a/frontend/website/package-lock.json
+++ b/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",
--- a/frontend/website/package.json
+++ b/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"
--- a/frontend/website/src/App.tsx
+++ b/frontend/website/src/App.tsx
@@ -8,7 +8,8 @@ import Navbar04Page from './components/navbar-04/navbar-04';
 import Testimonial06 from './components/testimonial-06/testimonial-06';
 function App() {
  return (
-    <div className="App min-h-screen bg-muted rounded-lg">
+    <div className="App min-h-screen bg-muted rounded-3xl">
+      <title>Home | Craig Macfadyen</title>
      <Navbar04Page />
      <Hero />
      <About />
--- a/frontend/website/src/assets/open-webui.gif
+++ b/frontend/website/src/assets/open-webui.gif
--- a/frontend/website/src/assets/output.gif
+++ b/frontend/website/src/assets/output.gif
--- a/frontend/website/src/components/About.tsx
+++ b/frontend/website/src/components/About.tsx
@@ -1,20 +1,20 @@
 import React from 'react';
 import ExpertiseSection from './ExpertiseSection';
+import outputGif from '@/assets/output.gif';
+import openWebUIGif from '@/assets/open-webui.gif';

 const About = () => {
  return (
    <section id="about" className="about py-20 bg-gray-100">
      <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"
          content="Expertise in developing and deploying computer vision models for various applications, including object detection, image classification, and more. Ask me about state-of-the-art real-time models for your business."
          images={[
-            { url: "https://gifs.cc/congratulation/congrats-animation-smiley-2018.gif", alt: "Computer Vision 1" },
-            { url: "https://example.com/image2.jpg", alt: "Computer Vision 2" },
+            { url: outputGif, alt: "Video Segmentation with SAM2." },
          ]}
          viewMoreLink="/computer-vision"
          imageOnLeft={true}
@@ -23,8 +23,7 @@ const About = () => {
          title="Natural Language Processing"
          content="Building NLP models for tasks such as sentiment analysis, text classification, and language generation. If you need a chatbot for your business and care about privacy, or a simple text classification algorithm to understand your data, I can help."
          images={[
-            { url: "/path/to/nlp-image.jpg", alt: "NLP 1" },
-            { url: "/path/to/nlp-image2.jpg", alt: "NLP 2" },
+            { url: openWebUIGif, alt: "Locally hosted LLM using oLLama and OpenWebUI." },
          ]}
          viewMoreLink="/nlp"
          imageOnLeft={false}
--- a/frontend/website/src/components/Contact.tsx
+++ b/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">
+    <section id="contact" className="contact py-20">
      <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>
-        <Button>Contact</Button>
+        <p className="text-lg mb-4">
+          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>
  );
--- a/frontend/website/src/components/ExpertiseSection.tsx
+++ b/frontend/website/src/components/ExpertiseSection.tsx
@@ -26,9 +26,9 @@ const ExpertiseSection: React.FC<ExpertiseSectionProps> = ({
        <div className="md:w-2/3 md:px-8">
          <h2 className="text-3xl font-bold mb-4">{title}</h2>
          <p className="text-lg mb-4">{content}</p>
-          <Button asChild>
+          {/* <Button asChild>
            <a href={viewMoreLink}>View More</a>
-          </Button>
+          </Button> */}
        </div>
      </div>
    </section>
--- a/frontend/website/src/components/Hero.tsx
+++ b/frontend/website/src/components/Hero.tsx
@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button"

 const Hero = () => {
  return (
-    <section id="hero" className="hero py-20">
+    <section id="hero" className="hero">
      <div className="container mx-auto text-center">
        <h1 className="text-5xl font-bold mb-4">Craig Macfadyen</h1>
        <p className="text-xl mb-8"> 
--- a/frontend/website/src/components/ImageCarousel.tsx
+++ b/frontend/website/src/components/ImageCarousel.tsx
@@ -27,6 +27,9 @@ const ImageCarousel: React.FC<ImageCarouselProps> = ({ images, delay = 8000 }) =
          {images.map((image, index) => (
            <CarouselItem key={index}>
              <img src={image.url} alt={image.alt} className="rounded-lg shadow-md" />
+              <div className="text-center py-2 rounded-lg bg-white">
+                {image.alt}
+              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
--- a/frontend/website/src/components/navbar-04/nav-menu.tsx
+++ b/frontend/website/src/components/navbar-04/nav-menu.tsx
@@ -11,7 +11,7 @@ export const NavMenu = (props: NavigationMenuProps) => (
    <NavigationMenuList className="gap-6 space-x-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start">
      <NavigationMenuItem>
        <NavigationMenuLink asChild>
-          <a href="#">Home</a>
+          <a href="/">Home</a>
        </NavigationMenuLink>
      </NavigationMenuItem>
      {/* <NavigationMenuItem>
@@ -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>
--- a/frontend/website/src/components/navbar-04/navbar-04.tsx
+++ b/frontend/website/src/components/navbar-04/navbar-04.tsx
@@ -1,26 +1,34 @@
-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">
      <div className="h-full flex items-center justify-between mx-auto px-4">
-          <Logo />

        {/* Desktop Menu */}
        <NavMenu className="hidden md:block" />
-
        <div className="flex items-center gap-3">
-            <Button
+          {/* Social Media Links */}
+          <div className="flex items-center gap-3">
+            <a href="https://www.linkedin.com/in/craig-macfadyen-9a2041197/" target="_blank" rel="noopener noreferrer">
+              <SiLinkedin className="w-6 h-6 text-gray-700 dark:text-gray-300" />
+            </a>
+            <a href="https://github.com/cdmacfadyen" target="_blank" rel="noopener noreferrer">
+              <SiGithub className="w-6 h-6 text-gray-700 dark:text-gray-300" />
+            </a>
+            <a href="https://gitea.craigmacfadyen.co.uk/" target="_blank" rel="noopener noreferrer">
+              <SiGitea className="w-6 h-6 text-gray-700 dark:text-gray-300" />
+            </a>
+          </div>
+          {/* <Button
            variant="outline"
            className="hidden sm:inline-flex rounded-full"
          >
            Sign In
-            </Button>
-
+          </Button> */}
          {/* Mobile Menu */}
          <div className="md:hidden">
            <NavigationSheet />
@@ -28,7 +36,6 @@ const Navbar04Page = () => {
        </div>
      </div>
    </nav>
-    // </div>
  );
 };

--- a/frontend/website/src/components/testimonial-06/testimonial-06.tsx
+++ b/frontend/website/src/components/testimonial-06/testimonial-06.tsx
@@ -41,7 +41,7 @@ const Testimonial06 = () => {
  }, [api]);

  return (
-    <div className="min-h-screen w-full flex justify-center items-center py-12 px-6">
+    <div className="w-full flex justify-center items-center px-6">
      <div className="w-full">
        <h2 className="mb-14 text-5xl md:text-6xl font-bold text-center tracking-tight">
          Testimonials
@@ -58,7 +58,7 @@ const Testimonial06 = () => {
            <CarouselPrevious />
            <CarouselNext />
          </Carousel>
-          <div className="flex items-center justify-center gap-2">
+          {/* <div className="flex items-center justify-center gap-2">
            {Array.from({ length: count }).map((_, index) => (
              <button
                key={index}
@@ -68,7 +68,7 @@ const Testimonial06 = () => {
                })}
              />
            ))}
-          </div>
+          </div> */}
        </div>
      </div>
    </div>
--- a/frontend/website/src/components/ui/button.tsx
+++ b/frontend/website/src/components/ui/button.tsx
@@ -55,4 +55,4 @@ function Button({
  )
 }

-export { Button, buttonVariants }
+export { Button }
Author	SHA1	Message	Date
Craig	f9c6b607cd	Add gifs to expertise sections	2025-03-06 15:51:47 +00:00
Craig	206e180948	Add links to header and contact section	2025-02-28 12:41:37 +00:00