From 40552a6d88113b7a67b435d8243f88a509dcf5e3 Mon Sep 17 00:00:00 2001
From: Craig <cdmacfadyen@gmail.com>
Date: Fri, 28 Feb 2025 11:03:14 +0000
Subject: [PATCH] Create expertise sections

---
 frontend/website/README.md                    |  4 ++
 frontend/website/src/App.tsx                  |  1 -
 frontend/website/src/components/About.tsx     | 23 +++++++++--
 .../src/components/ExpertiseSection.tsx       | 39 +++++++++++++++++++
 .../src/components/navbar-04/nav-menu.tsx     | 11 ++----
 .../src/components/navbar-04/navbar-04.tsx    |  1 -
 6 files changed, 66 insertions(+), 13 deletions(-)
 create mode 100644 frontend/website/src/components/ExpertiseSection.tsx

diff --git a/frontend/website/README.md b/frontend/website/README.md
index c8badd8..e4395f3 100644
--- a/frontend/website/README.md
+++ b/frontend/website/README.md
@@ -15,6 +15,10 @@ npm create vite@latest
 926  npm run dev
 ```
 
+# Setup
+TODO
+
+
 # React + TypeScript + Vite
 
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
diff --git a/frontend/website/src/App.tsx b/frontend/website/src/App.tsx
index 80c50b2..a1c12c7 100644
--- a/frontend/website/src/App.tsx
+++ b/frontend/website/src/App.tsx
@@ -12,7 +12,6 @@ function App() {
       <Navbar04Page />
       <Hero />
       <About />
-      <Projects />
       <Testimonial06 />
       <Contact />
     </div>
diff --git a/frontend/website/src/components/About.tsx b/frontend/website/src/components/About.tsx
index 0d62f4d..4388960 100644
--- a/frontend/website/src/components/About.tsx
+++ b/frontend/website/src/components/About.tsx
@@ -1,13 +1,30 @@
 import React from 'react';
+import ExpertiseSection from './ExpertiseSection';
 
 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 Me</h2>
-        <p className="text-lg">
-          A brief introduction about yourself. Highlight your skills, experience, and what you're passionate about.
+        <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. 
         </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."
+          imageUrl="https://gifs.cc/congratulation/congrats-animation-smiley-2018.gif"
+          imageAlt="Computer Vision"
+          viewMoreLink="/computer-vision"
+          imageOnLeft={true}
+        />
+        <ExpertiseSection
+          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."
+          imageUrl="/path/to/nlp-image.jpg"
+          imageAlt="Natural Language Processing"
+          viewMoreLink="/nlp"
+          imageOnLeft={false}
+        />
       </div>
     </section>
   );
diff --git a/frontend/website/src/components/ExpertiseSection.tsx b/frontend/website/src/components/ExpertiseSection.tsx
new file mode 100644
index 0000000..f9337d0
--- /dev/null
+++ b/frontend/website/src/components/ExpertiseSection.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Button } from "@/components/ui/button";
+
+interface ExpertiseSectionProps {
+  title: string;
+  content: string;
+  imageUrl: string;
+  imageAlt: string;
+  viewMoreLink: string;
+  imageOnLeft?: boolean;
+}
+
+const ExpertiseSection: React.FC<ExpertiseSectionProps> = ({
+  title,
+  content,
+  imageUrl,
+  imageAlt,
+  viewMoreLink,
+  imageOnLeft = false,
+}) => {
+  return (
+    <section className="expertise-section py-20 bg-gray-100">
+      <div className={`container mx-auto flex flex-col md:flex-row items-center ${imageOnLeft ? 'md:flex-row-reverse' : ''}`}>
+        <div className="md:w-1/2 mb-8 md:mb-0">
+          <img src={imageUrl} alt={imageAlt} className="rounded-lg shadow-md" />
+        </div>
+        <div className="md:w-1/2 md:px-8">
+          <h2 className="text-3xl font-bold mb-4">{title}</h2>
+          <p className="text-lg mb-4">{content}</p>
+          <Button asChild>
+            <a href={viewMoreLink}>View More</a>
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ExpertiseSection;
\ No newline at end of file
diff --git a/frontend/website/src/components/navbar-04/nav-menu.tsx b/frontend/website/src/components/navbar-04/nav-menu.tsx
index 42fd4d4..7d72304 100644
--- a/frontend/website/src/components/navbar-04/nav-menu.tsx
+++ b/frontend/website/src/components/navbar-04/nav-menu.tsx
@@ -14,19 +14,14 @@ export const NavMenu = (props: NavigationMenuProps) => (
           <a href="#">Home</a>
         </NavigationMenuLink>
       </NavigationMenuItem>
-      <NavigationMenuItem>
+      {/* <NavigationMenuItem>
         <NavigationMenuLink asChild>
           <a href="#">Blog</a>
         </NavigationMenuLink>
-      </NavigationMenuItem>
+      </NavigationMenuItem> */}
       <NavigationMenuItem>
         <NavigationMenuLink asChild>
-          <a href="#">About</a>
-        </NavigationMenuLink>
-      </NavigationMenuItem>
-      <NavigationMenuItem>
-        <NavigationMenuLink asChild>
-          <a href="#">Contact Us</a>
+          <a href="#">Contact</a>
         </NavigationMenuLink>
       </NavigationMenuItem>
     </NavigationMenuList>
diff --git a/frontend/website/src/components/navbar-04/navbar-04.tsx b/frontend/website/src/components/navbar-04/navbar-04.tsx
index 4e5c06c..5465233 100644
--- a/frontend/website/src/components/navbar-04/navbar-04.tsx
+++ b/frontend/website/src/components/navbar-04/navbar-04.tsx
@@ -20,7 +20,6 @@ const Navbar04Page = () => {
             >
               Sign In
             </Button>
-            <Button className="rounded-full">Get Started</Button>
 
             {/* Mobile Menu */}
             <div className="md:hidden">