Update routes and add Contact page

public/docs/contact.md

@@ -0,0 +1,46 @@
+### Hello there, I'm Greg Uretzky 👋
+
+👨‍💻 **Full-stack Developer** | 🌱 **Tech Enthusiast** | 🌍 **Living in the Netherlands**
+
+---
+
+#### 🛠️ Tech Stack
+
+- **Languages**: TypeScript, JavaScript, Python, C#, HTML, CSS
+- **Frameworks**: React, NestJS, NextJS, .NET
+- **Cloud**: AWS, GCP, Azure
+- **Tools**: Tailwind CSS, Docker, PostgreSQL
+- **Other**: SOLID Principles, Clean Code
+
+---
+
+#### 🚀 About Me
+
+- 🌱 I’m constantly learning and improving my skills.
+- 🏞️ In my free time, I love walking outside and hiking.
+- 💬 Ask me about full-stack development, startup culture, or anything tech-related.
+- 📫 How to reach me: [LinkedIn](https://www.linkedin.com/in/uretzkyzvi/), [Email](mailto:[email protected])
+- ⚡ Fun fact: I originally hail from Israel.
+
+---
+
+#### 🤝 Looking to Collaborate
+
+- Open-source projects
+- Monitoring solutions
+- Innovative tech solutions
+
+---
+
+#### 📊 My GitHub Stats
+
+![Greg's GitHub Stats](https://github-readme-stats.vercel.app/api?username=UretzkyZvi&show_icons=true&hide_border=true)
+
+---
+
+Feel free to connect with me:
+
+🔗 [LinkedIn](https://www.linkedin.com/in/uretzkyzvi/)  
+✉️ [Email](mailto:[email protected])
+
+---

src/App.tsx

@@ -12,12 +12,13 @@ import CardsPage from "./pages/CardsPage";
 import Showcase from "./pages/Showcase";
 import VideoPlayerPage from "./pages/VideoPlayerPage";
 import ImageAnnotationPage from "./pages/ImageAnnotationPage";
+import Contact from "./pages/Contact";
 
 function App() {
   return (
     <Router basename="/nexwind-components">
       <Routes>
-        <Route index path="/" element={<HomePage />} />
+        <Route index path="/" element={<IntroductionPage />} />
         <Route path="/introduction" element={<IntroductionPage />} />
         <Route path="/list-view" element={<ListViewPage />} />
         <Route path="/forms" element={<FormPage />} />
@@ -30,7 +31,7 @@ function App() {
         <Route path="/cards" element={<CardsPage />} />
         <Route path="/showcase" element={<Showcase />} />
         <Route path="/image-annotation" element={<ImageAnnotationPage />} />
-
+        <Route path="/contact" element={<Contact />} />
         <Route path="*" element={<h1>Not Found</h1>} />
         {/* Add more routes as needed */}
       </Routes>

src/components/card/cards.tsx

@@ -185,7 +185,7 @@ const CardWithImageBody: FC<CardWithImageBodyProps> = ({
   imageAlt,
   title,
   text,
-  onClick
+  onClick,
 }) => {
   return (
     <Card className={`relative w-full min-h-48 group ` + className}>
@@ -195,18 +195,14 @@ const CardWithImageBody: FC<CardWithImageBodyProps> = ({
             imageSrc ? imageSrc : "https://picsum.photos/seed/picsum/640/440"
           }
           alt={imageAlt ? imageAlt : "random image"}
-          className="absolute top-0  w-full h-fit object-cover  group-hover:scale-125 transition-all duration-300 ease-in-out"
+          className="  top-0  w-full  object-cover  group-hover:scale-125 transition-all duration-300 ease-in-out"
         />
         <div className="absolute bottom-0 p-4 ">
           <div className="flex flex-col gap-4">
             <div className="text-lg font-bold leading-6">
-              {title ? title : "Card with Image Body"}
-            </div>
-            <div className="text-sm  ">
-              {text
-                ? text
-                : "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptas?"}
+              {title ? title : ""}
             </div>
+            <div className="text-sm  ">{text ? text : " "}</div>
           </div>
         </div>
       </div>

src/components/headers/header.tsx

@@ -42,10 +42,10 @@ const Header: FC<HeaderProps> = ({ setOpenSidebar }) => {
                   </li>
                   <li>
                     <a
-                      href="#"
+                      href="/nexwind-components/contact"
                       className="font-medium text-primary hover:text-primary/70"
                     >
-                      Contact
+                      About Me
                     </a>
                   </li>
                 </ul>

src/components/headers/navigation.tsx

@@ -12,14 +12,7 @@ const navigationItems = [
     href: `${basePath}/contribute`,
   },
 
-  {
-    name: "Resources",
-    href: "#",
-  },
-  {
-    name: "Support",
-    href: "#",
-  },
+
 ];
 
 const NavigationComponents = [

src/pages/Contact.tsx

@@ -0,0 +1,114 @@
+import LayoutShowcase from "../components/layout/LayoutShowcase";
+
+const Contact: React.FC = () => {
+  return (
+    <LayoutShowcase>
+      <div className="mx-auto w-full max-w-7xl lg:px-8 py-12">
+        <div className="relative px-4 sm:px-8 lg:px-12">
+          <div className="mx-auto max-w-2xl lg:max-w-5xl">
+            <div className="grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:grid-rows-[auto_1fr] lg:gap-y-12">
+              <div className="lg:pl-20">
+                <div className="max-w-xs px-2.5 lg:max-w-none">
+                  {/* Update your image path */}
+                  <img
+                    alt="Portrait of Greg Uretzky"
+                    className="aspect-square rotate-3 rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
+                    src="images/greg_uretzky_profile.png"
+                  />
+                </div>
+              </div>
+              <div className="lg:order-first lg:row-span-2">
+                <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100">
+                  I’m Greg Uretzky. I live in the Netherlands, where I craft the
+                  web's future.
+                </h1>
+                <div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
+                  <p>
+                    From a young age, technology captured my imagination. Today,
+                    I blend creativity and coding to build digital experiences
+                    that matter.
+                  </p>
+                  <p>
+                    Beyond code, I'm passionate about the great outdoors,
+                    finding inspiration in nature's complexity and beauty.
+                  </p>
+                  <p>
+                    My journey in technology began with tinkering on my family's
+                    old computer, leading to a deep dive into web development
+                    during my teenage years. This exploration laid the
+                    foundation for my career as a full-stack developer, where I
+                    leverage languages like TypeScript, JavaScript, and Python
+                    to turn complex problems into elegant solutions.
+                  </p>
+                  <p>
+                    I thrive in environments that challenge the status quo,
+                    constantly seeking to learn new frameworks and technologies.
+                    My toolbox is ever-expanding, with recent endeavors into
+                    cloud services and containerization to streamline
+                    development and deployment processes.
+                  </p>
+                  <p>
+                    Collaboration and knowledge sharing form the cornerstone of
+                    my professional ethos. I actively contribute to open-source
+                    projects and enjoy mentoring aspiring developers, believing
+                    that our collective growth strengthens the tech community.
+                  </p>
+                  <p>
+                    When not glued to a computer screen, you can find me hiking
+                    through the Netherlands' picturesque landscapes or planning
+                    my next adventure. These moments away from the keyboard are
+                    crucial, providing fresh perspectives that I bring back to
+                    my work.
+                  </p>
+                  <p>
+                    Looking ahead, I am excited by the possibilities of emerging
+                    technologies and their potential to solve real-world
+                    problems. Whether it's through developing innovative web
+                    applications or contributing to sustainability through tech,
+                    I am committed to making an impact.
+                  </p>
+                </div>
+              </div>
+              <div className="lg:pl-20">
+                {/* Social Links */}
+                <ul role="list">
+                  {/* Ensure URLs are correct */}
+                  <li className="flex">
+                    <a
+                      className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500"
+                      href="https://www.linkedin.com/in/uretzkyzvi/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <span className="ml-4">LinkedIn</span>
+                    </a>
+                  </li>
+                  <li className="mt-4 flex">
+                    <a
+                      className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500"
+                      href="https://github.com/UretzkyZvi"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <span className="ml-4">GitHub</span>
+                    </a>
+                  </li>
+                  {/* Add more social links as needed */}
+                  <li className="mt-8 border-t border-zinc-100 pt-8 dark:border-zinc-700/40 flex">
+                    <a
+                      className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500"
+                      href="mailto:[email protected]"
+                    >
+                      <span className="ml-4">Email</span>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </LayoutShowcase>
+  );
+};
+export default Contact;

src/pages/Showcase.tsx

@@ -19,9 +19,10 @@ const Showcase: FC = () => {
         <ul className="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-8">
           <li className="  px-8 py-10">
             <CardWithImageBody
-              text="This is a card with image body"
-              title="Card with image body"
+              text="Explore the movie browse page."
               onClick={()=>handleCardClick()}
+              imageSrc="images/movie-browse.gif"
+              className="w-full h-full text-white bg-gray-900 rounded-lg shadow-lg"
             />
           </li>
         </ul>