383 lines
11 KiB
TypeScript
383 lines
11 KiB
TypeScript
import Journey from "@/Journey";
|
||
import { LinearSpeacialistBar } from "@/SpecialistBar";
|
||
import type { NextPage } from "next";
|
||
import Head from "next/head";
|
||
import { useState } from "react";
|
||
import Gravatar from "react-gravatar";
|
||
|
||
|
||
const specialistPageSize = 12;
|
||
const Resume: NextPage = () => {
|
||
|
||
const [specialistLimitSize, setSpecialistLimitSize] = useState(specialistPageSize)
|
||
|
||
|
||
const loadMore = () => {
|
||
if (thoseWhatIknowAndFamiliarAndSpecialistAt.length - specialistPageSize > specialistLimitSize)
|
||
setSpecialistLimitSize(specialistLimitSize + specialistPageSize)
|
||
else
|
||
setSpecialistLimitSize(thoseWhatIknowAndFamiliarAndSpecialistAt.length)
|
||
}
|
||
|
||
const thoseWhatIknowAndFamiliarAndSpecialistAt = [
|
||
{
|
||
title: "HTML",
|
||
percent: 100,
|
||
},
|
||
{
|
||
title: "CSS",
|
||
percent: 60,
|
||
},
|
||
{
|
||
title: "Web3",
|
||
percent: 60,
|
||
},
|
||
{
|
||
title: "Javascript",
|
||
percent: 100,
|
||
},
|
||
{
|
||
title: "Typescript",
|
||
percent: 90,
|
||
},
|
||
{
|
||
title: "Reactjs",
|
||
percent: 100,
|
||
},
|
||
{
|
||
title: "Nextjs",
|
||
percent: 90,
|
||
},
|
||
{
|
||
title: "Vuejs",
|
||
percent: 80,
|
||
},
|
||
{
|
||
title: "Rust",
|
||
percent: 70
|
||
},
|
||
{
|
||
title: "Nuxtjs",
|
||
percent: 80,
|
||
},
|
||
{
|
||
title: "Go",
|
||
percent: 60,
|
||
},
|
||
{
|
||
title: "MongoDB",
|
||
percent: 80,
|
||
},
|
||
{
|
||
title: "Docker",
|
||
percent: 100,
|
||
},
|
||
{
|
||
title: "K8s",
|
||
percent: 60,
|
||
},
|
||
{
|
||
title: "WebRTC",
|
||
percent: 60,
|
||
},
|
||
{
|
||
title: "Kafka",
|
||
percent: 80,
|
||
},
|
||
{
|
||
title: "Elastic search",
|
||
percent: 95,
|
||
},
|
||
{
|
||
title: "Java",
|
||
percent: 100,
|
||
},
|
||
{
|
||
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: "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: "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,
|
||
},
|
||
].sort((a, b) => a.percent === b.percent ? a.title.localeCompare(b.title) : b.percent - a.percent)
|
||
|
||
const projects = [
|
||
{
|
||
title: "Baladam",
|
||
tags: ["nuxtjs", "java", "springboot", "mongodb", "elastic", "redis", "rust", "rabbitmq"],
|
||
description: "Hire the freelancers for any job, online.",
|
||
year: 2019,
|
||
url: "https://mucut.ir",
|
||
isLunched: false
|
||
},
|
||
{
|
||
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
|
||
},
|
||
{
|
||
title: "!mixsome",
|
||
tags: ["reactjs", "web3"],
|
||
description: "Approval manager dashboard and revoking approvals ",
|
||
year: 2022,
|
||
url: "https://dapp.mixsomecash.com",
|
||
isLunched: true
|
||
},
|
||
{
|
||
title: "Yaus",
|
||
tags: ["rust", "actix", "mongodb"],
|
||
description: "Free URL shortener and link services",
|
||
year: 2021,
|
||
url: "https://yaus.ir",
|
||
isLunched: true
|
||
},
|
||
{
|
||
title: "Mafia Game",
|
||
tags: ["nodejs", "redis", "reactjs", "sqlite"],
|
||
description: "Mafia Game (werewolf)",
|
||
year: 2021,
|
||
url: "https://mafia.game.igarson.app",
|
||
isLunched: true
|
||
},
|
||
{
|
||
title: "iGarson",
|
||
tags: ["springboot", "stomp", "reactjs", "nextjs", "mongodb", "pg", ".net", "pwa", "rabbitmq", "docker swarm", "elastic", "redis"],
|
||
description: "iGarson is a first smart resturant assistance infestracture",
|
||
year: 2022,
|
||
url: "https://igarson.app",
|
||
isLunched: true
|
||
}
|
||
|
||
].sort((a, b) => b.year - a.year)
|
||
|
||
|
||
|
||
return (
|
||
<>
|
||
<Head>
|
||
<title>
|
||
رزومه امیرحسین مقیسه
|
||
</title>
|
||
</Head>
|
||
<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" height={"85px"} width={"85px"} />
|
||
</div>
|
||
<h1 className="text-2xl text-white text-center mt-3">Amirmoghi3</h1>
|
||
<h2 className="text-xl text-white text-center mt-3">Amir Hossein Moghiseh</h2>
|
||
<h3 className="text-xs text-secondary text-center opacity-60">PM4D | Web3 Developer | Devops Specialist | Web Engineer</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>
|
||
<div className="flex flex-col p-3">
|
||
{
|
||
thoseWhatIknowAndFamiliarAndSpecialistAt.slice(1, specialistLimitSize).map(occupation => (
|
||
<LinearSpeacialistBar 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 px-5 text-center w-full bg-light-primary">
|
||
{/* <div className="bg-secondary flex flex-row p-5 h-72 text-dark-primary rounded-xl ">
|
||
<div>
|
||
<p className="text-xl">
|
||
Discover My Amazing Journay!
|
||
</p>
|
||
<p>
|
||
{"<code>"} Look At My Amazing Journay . {"</code>"}
|
||
</p>
|
||
</div>
|
||
</div> */}
|
||
|
||
<div className="flex flex-row flex-wrap ">
|
||
{projects.map(project => (
|
||
<Journey key={project.title} title={project.title} tags={project.tags} description={project.description} year={project.year} url={project.url} isLunched={project.isLunched} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
|
||
}
|
||
|
||
export default Resume; |