From 265f12009a969024238d5889b7d4ac0b56847c4f Mon Sep 17 00:00:00 2001
From: Zobaidul Kazi <zobaidulkazi64.official@gmail.com>
Date: Wed, 28 Aug 2024 21:19:49 +0600
Subject: [PATCH]     subjects: ["Mechanical Engineering", "Tools Design",
 "Projects Management"],

---
 src/app/projects/page.tsx                   |   1 +
 src/components/ui-utils/ProjectShowcase.tsx | 156 +++++++++++++-------
 src/components/ui/about/EducationDetail.tsx |   6 +-
 src/components/ui/skills/SkillsShow.tsx     |   5 +-
 src/contexts/data/educationDetails.ts       |  11 +-
 src/contexts/skillsData.ts                  |  29 +++-
 6 files changed, 140 insertions(+), 68 deletions(-)

diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index b73a89e..939a515 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -37,6 +37,7 @@ const ProjectsPage = () => {
       imageUrl: "https://via.placeholder.com/300",
       projectUrl: "https://github.com/zobkazi/job-board-api",
     },
+
     // Add more projects as needed
   ];
 
diff --git a/src/components/ui-utils/ProjectShowcase.tsx b/src/components/ui-utils/ProjectShowcase.tsx
index a03c6a9..1601c68 100644
--- a/src/components/ui-utils/ProjectShowcase.tsx
+++ b/src/components/ui-utils/ProjectShowcase.tsx
@@ -1,5 +1,6 @@
+"use client";
 import Link from "next/link";
-import React from "react";
+import React, { useState } from "react";
 
 interface Project {
   name: string;
@@ -16,62 +17,117 @@ interface ProjectShowcaseProps {
 }
 
 const ProjectShowcase: React.FC<ProjectShowcaseProps> = ({ projects }) => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const projectsPerPage = 3; // Number of projects to display per page
+
+  // Calculate the number of pages
+  const totalPages = Math.ceil(projects.length / projectsPerPage);
+
+  // Get the projects for the current page
+  const currentProjects = projects.slice(
+    (currentPage - 1) * projectsPerPage,
+    currentPage * projectsPerPage
+  );
+
+  // Handle page changes
+  const handleNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const handlePrevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
   return (
-    <div className="flex flex-wrap justify-center gap-8 p-8 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] shadow-lg rounded-2xl lg:p-12">
-      {projects.map((project, index) => (
-        <div
-          key={index}
-          className="max-w-xs rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300"
-        >
-          <img
-            className="w-full h-48 object-cover"
-            src={project.imageUrl}
-            alt={project.name}
-          />
-          <div className="p-6">
-            <h3 className="text-xl font-semibold mb-2">{project.name}</h3>
-            <p className="text-gray-400 mb-4">{project.description}</p>
-            <div className="flex flex-wrap gap-2 mb-4">
-              {project.techStack.map((tech, i) => (
-                <span
-                  key={i}
-                  className="text-sm bg-purple-600 text-white px-2 py-1 rounded"
-                >
-                  {tech}
-                </span>
-              ))}
-            </div>
-            <Link
-              href={project.projectUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-purple-400 hover:text-purple-600 transition-colors"
-            >
-              View Project
-            </Link>
-            {project.docsUrl && (
-              <Link
-                href={project.docsUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-purple-400 hover:text-purple-600 transition-colors ml-2"
-              >
-                View Docs
-              </Link>
-            )}
-            {project.dockerUrl && (
+    <div className="flex flex-col items-center">
+      <div className="flex flex-wrap justify-center gap-8 p-8 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] shadow-lg rounded-2xl lg:p-12">
+        {currentProjects.map((project, index) => (
+          <div
+            key={index}
+            className="max-w-xs rounded-lg shadow-lg shadow-purple-500 border border-purple-500 p-1 overflow-hidden transform hover:scale-105 transition-transform duration-300"
+          >
+            <picture>
+              <img
+                className="w-full h-48 object-cover"
+                src={project.imageUrl}
+                alt={project.name}
+              />
+            </picture>
+            <div className="p-6">
+              <h3 className="text-xl font-semibold mb-2">{project.name}</h3>
+              <p className="text-gray-400 mb-4">{project.description}</p>
+              <div className="flex flex-wrap gap-2 mb-4">
+                {project.techStack.map((tech, i) => (
+                  <span
+                    key={i}
+                    className="text-sm bg-purple-600 text-white px-2 py-1 rounded"
+                  >
+                    {tech}
+                  </span>
+                ))}
+              </div>
               <Link
-                href={project.dockerUrl}
+                href={project.projectUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-purple-400 hover:text-purple-600 transition-colors ml-2"
+                className="text-purple-400 hover:text-purple-600 transition-colors"
               >
-                View Docker
+                View Project
               </Link>
-            )}
+              {project.docsUrl && (
+                <Link
+                  href={project.docsUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-purple-400 hover:text-purple-600 transition-colors ml-2"
+                >
+                  View Docs
+                </Link>
+              )}
+              {project.dockerUrl && (
+                <Link
+                  href={project.dockerUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-purple-400 hover:text-purple-600 transition-colors ml-2"
+                >
+                  View Docker
+                </Link>
+              )}
+            </div>
           </div>
-        </div>
-      ))}
+        ))}
+      </div>
+
+      {/* Pagination Controls */}
+      <div className="flex justify-between w-full max-w-md mt-6">
+        <button
+          onClick={handlePrevPage}
+          disabled={currentPage === 1}
+          className={`px-4 py-2 text-white rounded-lg ${
+            currentPage === 1
+              ? "bg-gray-400 cursor-not-allowed"
+              : "bg-purple-500 hover:bg-purple-700"
+          }`}
+        >
+          Previous
+        </button>
+        <button
+          onClick={handleNextPage}
+          disabled={currentPage === totalPages}
+          className={`px-4 py-2 text-white rounded-lg ${
+            currentPage === totalPages
+              ? "bg-gray-400 cursor-not-allowed"
+              : "bg-purple-500 hover:bg-purple-700"
+          }`}
+        >
+          Next
+        </button>
+      </div>
     </div>
   );
 };
diff --git a/src/components/ui/about/EducationDetail.tsx b/src/components/ui/about/EducationDetail.tsx
index 3a6070b..b0f3a71 100644
--- a/src/components/ui/about/EducationDetail.tsx
+++ b/src/components/ui/about/EducationDetail.tsx
@@ -60,7 +60,7 @@ const EducationCard: React.FC<EducationCardProps> = ({ educationDetails }) => {
         {educationDetails.map((detail, index) => (
           <motion.div
             key={index}
-            className="container mx-auto bg-gray-100 dark:bg-gray-800-600 shadow-lg rounded-lg mb-8"
+            className="container  mx-auto w-full sm:w-4/6 lg:w-full flex flex-col bg-gray-100 dark:bg-gray-800-600 shadow-lg rounded-lg mb-8"
             initial="hidden"
             animate="visible"
             variants={itemVariants}
@@ -74,7 +74,7 @@ const EducationCard: React.FC<EducationCardProps> = ({ educationDetails }) => {
                   {/* Card header */}
                   <div className="flex justify-between items-center mb-3">
                     {/* Title */}
-                    <h2 className="text-2xl leading-snug font-extrabold text-purple-800 dark:text-purple-100 truncate mb-1 sm:mb-0">
+                    <h2 className="text-xl leading-snug font-extrabold text-purple-800 dark:text-purple-100 truncate mb-1 sm:mb-0">
                       <AccessibilityIcon />
                       {detail.schoolName}
                     </h2>
@@ -87,7 +87,7 @@ const EducationCard: React.FC<EducationCardProps> = ({ educationDetails }) => {
                     </div>
                   </div>
                   {/* Course Name */}
-                  <div className="flex items-center gap-2 mb-2 text-xl font-semibold text-gray-700 dark:text-gray-200">
+                  <div className="flex items-center gap-2 mb-2 text-lg font-semibold text-gray-700 dark:text-gray-200">
                     <CheckCircledIcon className="w-6 h-6 text-green-600" />
                     {detail.courseName}
                   </div>
diff --git a/src/components/ui/skills/SkillsShow.tsx b/src/components/ui/skills/SkillsShow.tsx
index d831888..ee6c2ab 100644
--- a/src/components/ui/skills/SkillsShow.tsx
+++ b/src/components/ui/skills/SkillsShow.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { motion } from "framer-motion";
 import Tooltip from "@/components/common/Tooltip";
 import { skills } from "@/contexts/skillsData";
+import Link from "next/link";
 interface Skill {
   name: string;
   src: string;
@@ -29,7 +30,7 @@ const SkillsShow: React.FC = () => {
           <div className="flex justify-center flex-wrap gap-3">
             {skillsArray.map((skill: Skill, index) => (
               <Tooltip key={index} text={skill.name}>
-                <a
+                <Link
                   href={skill.link}
                   target="_blank"
                   rel="noopener noreferrer"
@@ -42,7 +43,7 @@ const SkillsShow: React.FC = () => {
                       alt={skill.alt}
                     />
                   </picture>
-                </a>
+                </Link>
               </Tooltip>
             ))}
           </div>
diff --git a/src/contexts/data/educationDetails.ts b/src/contexts/data/educationDetails.ts
index 1166f6d..e474074 100644
--- a/src/contexts/data/educationDetails.ts
+++ b/src/contexts/data/educationDetails.ts
@@ -7,18 +7,19 @@ export const educationDetails = [
     years: "2019 - 2023",
     length: "4 years",
     results: "GPA: 3.8",
-    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    description:
+      "Completed a rigorous 4-year program focused on Mechanical Engineering. Gained hands-on experience in tools design, project management, and engineering principles. Graduated with a solid GPA, demonstrating consistent academic performance.",
   },
   {
     courseName: "Secondary School Certificate",
-    schoolName: "Sylhet Govt. High School",
+    schoolName: "M B M T H S",
     location: "Ulipur, Kurigram, Bangladesh",
     subjects: ["Mathematics", "Networking Basics", "Information Technology"],
     years: "2017 - 2019",
     length: "2 years",
     results: "GPA: 4.71",
     description:
-      "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "Achieved a high GPA in a comprehensive 2-year program with a focus on core subjects such as Mathematics, Networking Basics, and Information Technology. This foundation paved the way for advanced studies in engineering and technology.",
   },
   {
     courseName: "Full Stack Army",
@@ -36,10 +37,10 @@ export const educationDetails = [
       "Cloud Computing",
     ],
     years: "2019 - remaining",
-    length: "remaining",
+    length: "Ongoing",
     results: "Full Time",
     description:
-      "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      "Enrolled in an intensive, ongoing Full Stack Development program. Covering a wide range of subjects from web development and advanced JavaScript to system design, DevOps, and cloud computing. Continuously expanding skills to stay at the forefront of technology.",
   },
   // Add more education details as needed
 ];
diff --git a/src/contexts/skillsData.ts b/src/contexts/skillsData.ts
index e322949..0ceb882 100644
--- a/src/contexts/skillsData.ts
+++ b/src/contexts/skillsData.ts
@@ -23,6 +23,19 @@ export const skills = {
   ],
 
   frontend: [
+    {
+      name: "HTML",
+      src: "https://skillicons.dev/icons?i=html",
+      alt: "HTML",
+      link: "https://developer.mozilla.org/en-US/docs/Web/HTML",
+    },
+    {
+      name: "CSS",
+      src: "https://skillicons.dev/icons?i=css",
+      alt: "CSS",
+      link: "https://developer.mozilla.org/en-US/docs/Web/CSS",
+    },
+
     {
       name: "React",
       src: "https://skillicons.dev/icons?i=react",
@@ -121,7 +134,7 @@ export const skills = {
   api_Documentation: [
     {
       name: "Swagger",
-      src: "https://skillicons.dev/icons?i=swagger",
+      src: "https://raw.githubusercontent.com/zobkazi/zobkazi.github.io/3c2c06679b46dea205193dc814580e2951fe1eea/src/assets/images/swagger.svg",
       alt: "Swagger",
       link: "https://swagger.io/",
     },
@@ -137,6 +150,12 @@ export const skills = {
       alt: "Markdown",
       link: "https://daringfireball.net/projects/markdown/",
     },
+    {
+      name: "notion",
+      src: "https://skillicons.dev/icons?i=notion",
+      alt: "Notion",
+      link: "https://www.notion.so/",
+    },
   ],
   microservices: [
     {
@@ -256,7 +275,7 @@ export const skills = {
       link: "https://www.netlify.com/",
     },
   ],
-  cli: [
+  Cli: [
     {
       name: "Git",
       src: "https://skillicons.dev/icons?i=git",
@@ -307,12 +326,6 @@ export const skills = {
       alt: "pnpm",
       link: "https://pnpm.io/",
     },
-    {
-      name: "notion",
-      src: "https://skillicons.dev/icons?i=notion",
-      alt: "Notion",
-      link: "https://www.notion.so/",
-    },
   ],
   degian_Tools: [
     {