Create expertise sections

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.

frontend/website/src/App.tsx

@@ -12,7 +12,6 @@ function App() {
       <Navbar04Page />
       <Hero />
       <About />
-      <Projects />
       <Testimonial06 />
       <Contact />
     </div>

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>
+        <h2 className="text-3xl font-bold mb-4">About</h2>
-        <p className="text-lg">
+        <p className="text-lg mb-8">
-          A brief introduction about yourself. Highlight your skills, experience, and what you're passionate about.
+          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>
   );

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;

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>
+          <a href="#">Contact</a>
-        </NavigationMenuLink>
-      </NavigationMenuItem>
-      <NavigationMenuItem>
-        <NavigationMenuLink asChild>
-          <a href="#">Contact Us</a>
         </NavigationMenuLink>
       </NavigationMenuItem>
     </NavigationMenuList>

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">