amirmoghi3-vite/src/pages/resume/index.tsx

import Journey from "@/Journey";
import Tag from "@/Tag";
import { useState } from "react";
import Gravatar from "react-gravatar";
import { Helmet } from "react-helmet";
const positions = [
  {
    from: "2018",
    to: "2019",
    position: "Full-Stack Developer Self-Employee",
  },
  {
    from: "2019",
    to: "2020",
    position: "Software Enginer At Vira Nasir Fanavar",
  },
  {
    from: "2020",
    to: "2023",
    position: "CTO At Holding ToseE Tejerat Sarafraz",
  },
  {
    from: "2020",
    to: "2023",
    position: "CTO At Sahand",
  },
  {
    from: "2020",
    to: "2023",
    position: "CTO At Vira Nasir Fanavar",
  },
];

const thoseWhatIknowAndFamiliarAndSpecialistAt = [
  {
    title: "HTML",
    percent: 100,
  },
  {
    title: "vault",
    percent: 30,
  },
  {
    title: "vault",
    percent: 30,
  },
  {
    title: "CSS",
    percent: 80,
  },
  {
    title: "Web3",
    percent: 90,
  },
  {
    title: "Javascript",
    percent: 100,
  },
  {
    title: "Typescript",
    percent: 100,
  },
  {
    title: "Reactjs",
    percent: 100,
  },
  {
    title: "Nextjs / app directory",
    percent: 80,
  },
  {
    title: "Vuejs",
    percent: 60,
  },
  {
    title: "Rust",
    percent: 70,
  },
  {
    title: "Nuxtjs",
    percent: 40,
  },
  {
    title: "Go",
    percent: 50,
  },
  {
    title: "MongoDB",
    percent: 80,
  },
  {
    title: "Docker",
    percent: 100,
  },
  {
    title: "K8s",
    percent: 50,
  },
  {
    title: "WebRTC",
    percent: 50,
  },
  {
    title: "Kafka",
    percent: 80,
  },
  {
    title: "Elastic search",
    percent: 90,
  },
  {
    title: "Java",
    percent: 80,
  },
  {
    title: "Python",
    percent: 100,
  },
  {
    title: "Tailwindcss",
    percent: 100,
  },
  {
    title: "Unity",
    percent: 50,
  },
  {
    title: "Linux",
    percent: 90,
  },
  {
    title: "Bash",
    percent: 60,
  },
  {
    title: "Postgresql",
    percent: 60,
  },
  {
    title: "Express",
    percent: 95,
  },
  {
    title: "NodeJs",
    percent: 95,
  },
  {
    title: "Solidity",
    percent: 50,
  },
  {
    title: "ERC20",
    percent: 50,
  },
  {
    title: "GA4",
    percent: 50,
  },
  {
    title: "GoogleTagManager",
    percent: 50,
  },
  {
    title: "YAML",
    percent: 100,
  },
  {
    title: "Redis",
    percent: 100,
  },
  {
    title: "RabbitMQ",
    percent: 80,
  },
  {
    title: "SEO",
    percent: 60,
  },
  {
    title: "Laravel",
    percent: 60,
  },
  {
    title: "PHP",
    percent: 80,
  },
  {
    title: "MySQL",
    percent: 90,
  },
  {
    title: "Sqlite",
    percent: 100,
  },
  {
    title: "Nginx",
    percent: 90,
  },
  {
    title: "gRPC",
    percent: 50,
  },
  {
    title: "Rest",
    percent: 100,
  },
  {
    title: "oAuth",
    percent: 80,
  },
  {
    title: "Googling",
    percent: 100,
  },
  {
    title: "GraphQL",
    percent: 60,
  },
  {
    title: "Moralis",
    percent: 90,
  },
  {
    title: "actix",
    percent: 80,
  },
  {
    title: "WebSocket",
    percent: 100,
  },
  {
    title: "Kibana",
    percent: 60,
  },
  {
    title: "jQuery",
    percent: 60,
  },
  {
    title: "NodeRed",
    percent: 80,
  },
  {
    title: "Bootstrap",
    percent: 90,
  },
  {
    title: "SysAdmin",
    percent: 80,
  },
  {
    title: "SpringBoot",
    percent: 90,
  },
  {
    title: "Jira",
    percent: 100,
  },
  {
    title: "Bamboo",
    percent: 100,
  },
  {
    title: "Git",
    percent: 100,
  },
  {
    title: "Gitlab CI",
    percent: 100,
  },
  {
    title: "STOMP",
    percent: 90,
  },
  {
    title: "PWA",
    percent: 100,
  },
  {
    title: "Docker Swarm",
    percent: 100,
  },
  {
    title: "PaaS",
    percent: 90,
  },
  {
    title: "json",
    percent: 90,
  },
  {
    title: "ETH",
    percent: 90,
  },
  {
    title: "Microservices",
    percent: 90,
  },
  {
    title: "jenkins",
    percent: 90,
  },
  {
    title: "envoy",
    percent: 90,
  },
  {
    title: "echo",
    percent: 90,
  },
  {
    title: "jettool",
    percent: 90,
  },
  {
    title: "appsmith",
    percent: 90,
  },
  {
    title: "faas",
    percent: 90,
  },
  {
    title: "paas",
    percent: 90,
  },
  {
    title: "DesignSystem",
    percent: 90,
  },
  {
    title: "storybook",
    percent: 90,
  },
  {
    title: "cva",
    percent: 90,
  },
  
].sort((a, b) => a.title.localeCompare(b.title));

const projects = [
  {
    order:5,
    title: "Baladam",
    tags: [
      "nuxtjs",
      "java",
      "springboot",
      "mongodb",
      "elastic",
      "redis",
      "rust",
      "rabbitmq",
    ],
    description: "Hire the freelancers, online.",
    year: 2019,
    isLunched: false,
    development: false,
    image: "https://avatars.githubusercontent.com/u/43704900?s=200&v=4",
  },
  {
    order:2,
    title: "Mucut",
    tags: ["nuxtjs", "python", "mysql", "nginx", "pm2"],
    description:
      "Find & book beauty services like hairdressing, manicure, spa or massage.",
    year: 2020,
    url: "https://mucut.ir",
    isLunched: true,
    development: true,
    image: "https://mucut.ir/images/mucut.logo.svg",
  },
  {
    order:3,
    title: "!mixsome",
    tags: ["reactjs", "web3", "moralis"],
    description: "Approval manager dashboard and revoking approvals ",
    year: 2022,
    url: "https://mixsome.cash",
    development: false,
    isLunched: true,
    image: "https://mixsome.cash/images/logo-white500px.gif",
  },
  {
    order:4,
    title: "MPCP (mutant penguins club project)",
    tags: [
      "reactjs",
      "web3",
      "moralis",
      "solidity",
      "ganache",
      "remixIDE",
      "ethers.js",
      "nft",
    ],
    description: "P2E platform",
    year: 2021,
    url: "https://mpcp.amirmoghi3.ir",
    isLunched: false,
    development: false,
    image: "https://docs.soliditylang.org/en/v0.8.20/_static/logo.svg",
  },
  {
    order:6,
    title: "instagram-scr.ap.per",
    tags: ["python", "proxy", "selenium"],
    description: "Scrapping public data from Instagram",
    year: 2020,
    url: "",
    isLunched: false,
    development: false,
    image:
      "https://upload.wikimedia.org/wikipedia/commons/9/95/Instagram_logo_2022.svg",
  },
  {
    order:7,
    title: "Yaus",
    tags: ["rust", "actix", "mongodb"],
    description: "Free URL shortener and link services with less than 10MB RAM",
    year: 2021,
    url: "https://yaus.ir",
    isLunched: true,
    development: false,
    image: "https://yaus.ir/favicon.png",
  },
  {
    order:12,
    title: "Mafia Game",
    tags: ["nodejs", "redis", "reactjs", "sqlite", "socketjs"],
    description: "Mafia Game (werewolf)",
    year: 2021,
    url: "https://mafia.game.igarson.app",
    isLunched: true,
    development: false,
    image:
      "https://mafia-game.igarson.app/static/media/mafia-logo.a06d547a1d64327fdfc0.png",
  },
  {
    order:1,
    title: "iGarson.app",
    tags: [
      "paas",
      "springboot",
      "stomp",
      "reactjs",
      "nextjs",
      "mongodb",
      "pg",
      ".net",
      "pwa",
      "rabbitmq",
      "elastic",
      "redis",
      "microservises",
      "rust",
      "go",
    ],
    description: "smart resturant assistance infestracture",
    year: 2019,
    url: "https://igarson.app",
    isLunched: true,
    development: true,
    image: "https://igarson.app/_next/static/media/G.c7e22450.svg",
  },
  {
    order:9,
    title: "ftsco.co",
    tags: ["nextjs", "docker", "swarm", "nginx", "let's encrypt"],
    description: "introducing herbal products for export.",
    year: 2021,
    url: "https://ftsco.co",
    isLunched: true,
    development: false,
    image:
      "https://ftsco.co/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.ec591a4f.png&w=1920&q=75",
  },
  {
    order:10,
    title: "imedapp",
    tags: ["nextjs", "pg", "swarm", "docker"],
    description: "selling medical content",
    year: 2022,
    url: "https://admin.imedapp.ir",
    isLunched: true,
    development: false,
    image:
      "https://admin.imedapp.ir/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.3c212134.png&w=640&q=75",
  },
  {
    order:15,
    title: "Chemiboard",
    tags: ["nextjs", "designsystem", "tailwindcss", "storybook","mysql","nodejs"],
    description: "Wholesale sale of chemicals",
    year: 2022,
    url: "https://chemiboard.com",
    isLunched: true,
    development: false,
    // image:
      // "https://admin.imedapp.ir/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.3c212134.png&w=640&q=75",
  },
  {
    order:7,
    title: "menuva",
    tags: ["react-ts", "vite", "signalR"],
    description: "digital jukebox",
    year: 2023,
    url: "https://menuva.ir",
    isLunched: false,
    development: true,
    // image:
    //   "https://admin.imedapp.ir/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.3c212134.png&w=640&q=75",
  },
].sort((a, b) => a.order - b.order);
// const specialistPageSize = 12;
const Resume = () => {
  // const [specialistLimitSize, setSpecialistLimitSize] = useState(
  //   specialistPageSize
  // );

  const [searchQuery, setSearchQuery] = useState("");

  // const loadMore = () => {
  //   if (
  //     thoseWhatIknowAndFamiliarAndSpecialistAt.length - specialistPageSize >
  //     specialistLimitSize
  //   )
  //     setSpecialistLimitSize(specialistLimitSize + specialistPageSize);
  //   else
  //     setSpecialistLimitSize(thoseWhatIknowAndFamiliarAndSpecialistAt.length);
  // };

  return (
    <>
      <Helmet>
        <title> سوابق امیرحسین مقیسه</title>
      </Helmet>

      <div className="flex flex-col lg:grid lg:grid-flow-row lg:grid-cols-5 p-2 text-secondary">
        <div className="col-span-1 h-full bg-light-primary">
          <div className="flex flex-col w-full">
            <div className="flex flex-col p-3 bg-dark-primary rounded-xl">
              <div className="text-center mx-auto">
                <Gravatar
                  email="siramirmoghi3@gmail.com"
                  className="rounded-full"
                  title="amirmoghi3"
                  size={300}
                  height={"85px"}
                  width={"85px"}
                />
              </div>
              <h1 className="text-3xl text-white text-center mt-2">
                Amirmoghi3
              </h1>
              <h2 className="text-xl opacity-80 text-white text-center mt-3">
                Amir Hossein Moghiseh
              </h2>
              <h3 className="text-xs text-secondary text-center opacity-60">
                PM4D | Software Enginer | Web3 ;)
              </h3>
            </div>
            <div className="flex flex-col bg-light-primary p-3 text-xs">
              <div className="flex flex-row justify-between py-2 text-center">
                <span className="text-white text-ellipsis ">Residence :</span>
                <span className="text-white opacity-60">Iran</span>
              </div>
              <div className="flex flex-row justify-between py-2 text-center">
                <span className="text-white ">City :</span>
                <span className="text-white opacity-60">Tehran</span>
              </div>
              <div className="flex flex-row justify-between py-2 text-center">
                <span className="text-white text-ellipsis">Birthday :</span>
                <span className="text-white  text-ellipsis opacity-60">
                  Aug/26/1998
                </span>
              </div>
              <div className="flex flex-row justify-between py-2 text-center">
                <span className="text-white text-ellipsis">Experiance :</span>
                <span className="text-white  text-ellipsis opacity-60">
                  2016
                </span>
              </div>
              <div className="flex flex-row justify-between py-2 text-center">
                <span className="text-white text-ellipsis">Positions :</span>
              </div>
              <div className="flex flex-row justify-between py-2 text-center">
                <div className="flex flex-col gap-1 text-left">
                  {positions.map((position) => (
                    <span className="text-white text-xs text-ellipsis opacity-60">
                      {position.position}
                    </span>
                  ))}
                </div>
              </div>
            </div>
            <div className="px-3">
              <input
                type="text"
                placeholder="Search ..."
                className="bg-dark-primary text-secondary px-2 py-1 rounded-md w-full"
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <div className="flex flex-wrap p-3">
              {searchQuery &&
                thoseWhatIknowAndFamiliarAndSpecialistAt
                  .filter((o) => new RegExp(searchQuery, "gi").test(o.title))
                  // .slice(1, specialistLimitSize)
                  .map((occupation) => (
                    <Tag
                      key={occupation.title}
                      // percent={occupation.percent}
                      title={occupation.title}
                    />
                  ))}
              {!searchQuery &&
                thoseWhatIknowAndFamiliarAndSpecialistAt
                  // .slice(1, specialistLimitSize)
                  .map((occupation) => (
                    <Tag
                      key={occupation.title}
                      // percent={occupation.percent}
                      title={occupation.title}
                    />
                  ))}
              {/* {thoseWhatIknowAndFamiliarAndSpecialistAt.length >
                specialistLimitSize && (
                <span
                  onClick={loadMore}
                  className="mt-5 text-white text-sm opacity-50 hover:opacity-80  text-left cursor-pointer"
                >
                  Load More ...
                </span>
              )} */}
            </div>
          </div>
        </div>
        <div className="lg:col-span-4 h-full flex flex-col lg:px-5 text-center w-full bg-light-primary">
          <div className="flex flex-row flex-wrap">
            {projects.map((project) => (
              <div key={project.title} className=" w-full lg:w-1/2 mb-4">
                <Journey {...project} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

export default Resume;