Add gifs to expertise sections

2025-03-06 15:51:47 +00:00
parent 206e180948
commit f9c6b607cd
13 changed files with 21 additions and 20 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/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,11 +1,12 @@
 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 understand it. 
        </p>
@@ -13,8 +14,7 @@ const About = () => {
          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
@@ -3,7 +3,7 @@ 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">
--- 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>
--- a/frontend/website/src/components/navbar-04/navbar-04.tsx
+++ b/frontend/website/src/components/navbar-04/navbar-04.tsx
@@ -1,4 +1,3 @@
-import { Button } from "@/components/ui/button";
 import { Logo } from "./logo";
 import { NavMenu } from "./nav-menu";
 import { NavigationSheet } from "./navigation-sheet";
@@ -8,7 +7,6 @@ const Navbar04Page = () => {
  return (
    <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" />
@@ -25,12 +23,12 @@ const Navbar04Page = () => {
              <SiGitea className="w-6 h-6 text-gray-700 dark:text-gray-300" />
            </a>
          </div>
-          <Button
+          {/* <Button
            variant="outline"
            className="hidden sm:inline-flex rounded-full"
          >
            Sign In
-          </Button>
+          </Button> */}
          {/* Mobile Menu */}
          <div className="md:hidden">
            <NavigationSheet />
--- 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 }