updated project structure

Author: drtinkerer

components/ui/BentoGrid.tsx

@@ -84,18 +84,18 @@ export const BentoGridItem: React.FC<BentoGridItemProps> = ({
         <div
           className={cn(
             titleClassName,
-            "group-hover/bento:translate-x-2 transition duration-200 relative flex flex-col px-5 py-5 lg:py-10"
+            "group-hover/bento:translate-x-2 transition duration-200 relative flex flex-col px-4 py-4 lg:py-5"
           )}
         >
-          <div className="flex flex-col gap-5">
-            <div className="flex items-start gap-5">
-              <div className="flex-1 space-y-6">
-                <div className="drop-shadow-[0_2px_2px_rgba(0,0,0,0.8)] z-10 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-                  <h2 className="text-xl md:text-2xl font-bold">
+          <div className="flex flex-col gap-3">
+            <div className="flex items-start gap-3">
+              <div className="flex-1 space-y-3">
+                <div className="drop-shadow-[0_2px_2px_rgba(0,0,0,0.8)] z-10 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+                  <h2 className="text-lg md:text-xl font-bold">
                     {link ? (
-                      <a 
-                        href={link} 
-                        target="_blank" 
+                      <a
+                        href={link}
+                        target="_blank"
                         rel="noopener noreferrer"
                         className="hover:text-gray-300 transition-colors duration-200"
                       >
@@ -110,31 +110,31 @@ export const BentoGridItem: React.FC<BentoGridItemProps> = ({
                       href={github}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="self-start sm:self-auto flex items-center gap-2 px-4 py-1.5 rounded-full bg-gradient-to-r from-gray-800/70 to-gray-900/70 hover:from-gray-700/80 hover:to-gray-800/80 text-sm font-medium text-gray-200 hover:text-white transition-all duration-300 border border-gray-700/50 hover:border-gray-500/70 backdrop-blur-sm shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
+                      className="self-start sm:self-auto flex items-center gap-1.5 px-3 py-1 rounded-full bg-gradient-to-r from-gray-800/70 to-gray-900/70 hover:from-gray-700/80 hover:to-gray-800/80 text-xs font-medium text-gray-200 hover:text-white transition-all duration-300 border border-gray-700/50 hover:border-gray-500/70 backdrop-blur-sm shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
                     >
-                      <div className="relative w-4 h-4 mr-1">
+                      <div className="relative w-3.5 h-3.5">
                         <Image
                           src="/assets/git.svg"
                           alt="GitHub"
                           className="transition-all duration-300"
                           fill
-                          sizes="16px"
+                          sizes="14px"
                           priority={false}
                         />
                       </div>
                       <span>View on GitHub</span>
                     </a>
                   )}
                 </div>
-                <div className="font-medium text-gray-200 drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)] z-10">
+                <div className="text-sm font-medium text-gray-200 drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)] z-10 line-clamp-3">
                   {description}
                 </div>
 
-                <div className="flex flex-wrap gap-2 py-1">
+                <div className="flex flex-wrap gap-1.5">
                   {techs?.map((tech) => (
                     <div
                       key={tech}
-                      className="bg-electricBlue/15 text-white text-sm font-semibold px-4 py-2 rounded-full shadow-lg hover:bg-electricBlue/25 transition duration-200 ease-in-out drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]"
+                      className="bg-electricBlue/15 text-white text-xs font-semibold px-2.5 py-1 rounded-full shadow-lg hover:bg-electricBlue/25 transition duration-200 ease-in-out drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]"
                     >
                       {tech}
                     </div>

data/projects.ts

@@ -15,6 +15,28 @@ export interface Project {
 export const projects: Project[] = [
   {
     id: 1,
+    title: "NetBird Python Client",
+    description: "An unofficial Python library for interacting with NetBird's API, providing comprehensive network management and automation capabilities. Features complete API coverage for 11 NetBird resources, network topology visualization, advanced error handling, and type-safe Pydantic models with 98% test coverage.",
+    className: "md:col-span-1",
+    titleClassName: "justify-end",
+    img: "https://i.pinimg.com/originals/be/f4/1a/bef41a7d5a877841bbf7d8f9f0d42f14.gif",
+    github: `https://github.com/${personalInfo.github}/netbird-python-client`,
+    link: `https://github.com/${personalInfo.github}/netbird-python-client`,
+    techs: ["Python", "Pydantic", "REST API", "Network Automation", "DevOps", "Infrastructure as Code", "Security", "Graphviz"]
+  },
+  {
+    id: 2,
+    title: "Terraform NetBird Network Module",
+    description: "A Terraform module for creating and managing NetBird networks with advanced networking capabilities. Features automatic peer group creation, network resource management, advanced routing configuration, granular access policy control, setup key generation for device enrollment, and multi-group resource assignment.",
+    className: "md:col-span-1",
+    titleClassName: "justify-start",
+    img: "https://i.pinimg.com/originals/84/f6/d1/84f6d14f1f88d34d3956150d19060d3a.gif",
+    github: `https://github.com/${personalInfo.github}/terraform-netbird-network`,
+    link: `https://github.com/${personalInfo.github}/terraform-netbird-network`,
+    techs: ["Terraform", "NetBird", "Infrastructure as Code", "Network Automation", "DevOps", "Security", "SDN", "Multi-tier Architecture"]
+  },
+  {
+    id: 3,
     title: "AWS: Landing Zone",
     description: "An AWS Landing Zone is a well-architected, multi-account AWS environment that serves as a secure and scalable starting point for deploying workloads and applications, based on AWS best practices for security, governance, and networking.",
     className: "md:col-span-1",
@@ -25,7 +47,7 @@ export const projects: Project[] = [
     techs: ["AWS", "Terraform", "AWS DevOps", "Secure Networking", "Cloud Security", "DevSecOps", "Platform Management"]
   },
   {
-    id: 2,
+    id: 4,
     title: "AWS Security Comply 360",
     description: "AWS Security Comply 360 is a comprehensive security and compliance solution that helps organizations manage and monitor their AWS environments, ensuring compliance with security and regulatory requirements.",
     className: "md:col-span-1",
@@ -36,7 +58,7 @@ export const projects: Project[] = [
     techs: ["AWS", "Python", "CyberSecurity", "Vulnerability Assessments", "Compliance", "NIST", "CIS", "Benchmarking", "MCP", "LLM", "Gen AI"]
   },
   {
-    id: 3,
+    id: 5,
     title: "AI Powered Cloud Sandbox Provisiner",
     description: "A cloud sandbox provisioner is a API service that allows users to create and manage temporary, isolated environments for testing, development, or training purposes, based on Google Cloud.",
     className: "md:col-span-1",
@@ -47,7 +69,7 @@ export const projects: Project[] = [
     techs: ["Google Cloud", "Terraform", "Python", "FastAPI", "Gen AI", "DevSecOps", "Platform Management"]
   },
   {
-    id: 4,
+    id: 6,
     title: "The Self Hosted Engineer",
     description: "The Self-Hosted Engineer explores building cost-effective homelabs using open-source tools, Raspberry Pi clusters, and free-tier cloud services. It blends technical guidance with real-world insights, helping tech enthusiasts and aspiring DevOps engineers experiment with Kubernetes, automation, and cloud integration.",
     className: "md:col-span-1",