initial
parent
761bb5536a
commit
cb0a978a11
|
|
@ -1,3 +1,7 @@
|
||||||
{
|
{
|
||||||
"extends": "next/core-web-vitals"
|
"extends": [
|
||||||
|
"next/core-web-vitals",
|
||||||
|
"plugin:@typescript-eslint/recommended",
|
||||||
|
"prettier" // Add "prettier" last. This will turn off eslint rules conflicting with prettier. This is not what will format our code.
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
/.pnp
|
/.pnp
|
||||||
.pnp.js
|
.pnp.js
|
||||||
|
|
||||||
|
|
||||||
# testing
|
# testing
|
||||||
/coverage
|
/coverage
|
||||||
|
|
||||||
|
|
@ -36,3 +37,8 @@ yarn-error.log*
|
||||||
|
|
||||||
# typescript
|
# typescript
|
||||||
*.tsbuildinfo
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
.vscode
|
||||||
|
yarn.lock
|
||||||
|
.next
|
||||||
|
.node_modules
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"semi": false,
|
||||||
|
"trailingComma": "es5",
|
||||||
|
"singleQuote": true,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"useTabs": false
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,120 @@
|
||||||
|
import type { NextPage } from "next";
|
||||||
|
import Lottie from "react-lottie";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { MutableRefObject, useRef, useState } from "react";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const Footer: NextPage = () => {
|
||||||
|
|
||||||
|
const playAnimation = (ref: any) => {
|
||||||
|
if (ref?.current) {
|
||||||
|
ref.current.play()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const [isPause, setIsPause] = useState(true)
|
||||||
|
const [isStopped, setIsStopped] = useState(true)
|
||||||
|
|
||||||
|
|
||||||
|
const contactLinks = [
|
||||||
|
{
|
||||||
|
href: "https://github.com/amirmoghi3",
|
||||||
|
label: "Github",
|
||||||
|
icon: require("assets/json/github.json"),
|
||||||
|
path: "assets/json/github.json",
|
||||||
|
ref: useRef(null)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://www.linkedin.com/in/amirmoghi3/",
|
||||||
|
label: "LinkedIn",
|
||||||
|
icon: require("assets/json/linkedin.json"),
|
||||||
|
path: "assets/json/linkedin.json",
|
||||||
|
ref: useRef(null)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://www.instagram.com/amirmoghi3/",
|
||||||
|
label: "Instagram",
|
||||||
|
icon: require("assets/json/instagram.json"),
|
||||||
|
path: "assets/json/instagram.json",
|
||||||
|
ref: useRef(null)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://twitter.com/amirmoghi3",
|
||||||
|
label: "Twitter",
|
||||||
|
icon: require("assets/json/twitter.json"),
|
||||||
|
path: "assets/json/twitter.json",
|
||||||
|
ref: useRef(null)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// email
|
||||||
|
href: "mailto:siramirmoghi3@gmail.com",
|
||||||
|
label: "Email",
|
||||||
|
icon: require("assets/images/email.png"),
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
//discord
|
||||||
|
href: "https://discord.gg/FeECbW766J",
|
||||||
|
label: "Discord",
|
||||||
|
icon: require("assets/json/discord.json"),
|
||||||
|
path: "assets/json/discord.json",
|
||||||
|
ref: useRef(null)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed bottom-5 md:px-5 py-3 w-full">
|
||||||
|
<div className="flex flex-col md:flex-row-reverse justify-between w-full">
|
||||||
|
<div className="flex flex-row">
|
||||||
|
{
|
||||||
|
contactLinks.map(contactLink => (
|
||||||
|
<a onMouseEnter={() => playAnimation(contactLink.ref)} href={contactLink.href} target="_blank" key={contactLink.href} className="px-2 cursor-pointer" rel="noreferrer" >
|
||||||
|
{
|
||||||
|
contactLink.path ?
|
||||||
|
<div className="bg-secondary w-7 h-7 hover:bg-gold">
|
||||||
|
<div className="relative -top-2 -right-2">
|
||||||
|
<Lottie options={{
|
||||||
|
animationData: contactLink.icon,
|
||||||
|
loop: false,
|
||||||
|
autoplay: true,
|
||||||
|
|
||||||
|
}}
|
||||||
|
height={20}
|
||||||
|
width={20}
|
||||||
|
title={contactLink.label}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
: (
|
||||||
|
<div className="bg-secondary w-7 h-7 hover:bg-gold">
|
||||||
|
<div className="relative -top-2 -right-3">
|
||||||
|
<Image src={contactLink.icon} width={20} height={20} alt={contactLink.label} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</a>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
<div className="px-2 cursor-pointer w-[20px] h-[20px]">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-secondary text-xs opacity-30 pl-1 md:pl-0 ">
|
||||||
|
@2020 Amir Hossein Moghiseh
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { NextComponentType } from "next";
|
||||||
|
import { ArrowBack } from '@material-ui/icons';
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
|
const GoBack: NextComponentType = () => {
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
return (
|
||||||
|
<button className="text-left p-3 border-0 " onClick={() => {
|
||||||
|
router.push("/")
|
||||||
|
}} >
|
||||||
|
<ArrowBack className="text-secondary" />
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GoBack;
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const Journey = ({ title, description, tags, year, url, isLunched }) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-52 bg-dark-primary rounded-md flex flex-col p-3 my-2 mx-3">
|
||||||
|
<h3 className="text-2xl font-bold bg-gold text-dark-primary rounded-lg px-1 py-2">{title}</h3>
|
||||||
|
<p className="text-secondary opacity-80 text-sm text-left px-1 my-2">{description}</p>
|
||||||
|
<div className="flex flex-row flex-wrap ">
|
||||||
|
{tags.map(tag => (
|
||||||
|
<p className="text-dark-primary bg-secondary rounded-md p-1 opacity-80 text-xs m-1">
|
||||||
|
{`#${tag}`}
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Journey;
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
import type { NextPage } from "next";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
|
||||||
|
const MenuIcon = () => (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||||
|
width="50" height="50"
|
||||||
|
viewBox="0 0 50 50"
|
||||||
|
style={{ fill: "#C2C2CA" }}><path d="M 2 9 L 2 11 L 48 11 L 48 9 L 2 9 z M 2 24 L 2 26 L 48 26 L 48 24 L 2 24 z M 2 39 L 2 41 L 48 41 L 48 39 L 2 39 z"></path></svg>
|
||||||
|
)
|
||||||
|
const CloseIcon = () => (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||||
|
width="50" height="50"
|
||||||
|
viewBox="0 0 50 50"
|
||||||
|
style={{ fill: "#C2C2CA" }}><path d="M 7.71875 6.28125 L 6.28125 7.71875 L 23.5625 25 L 6.28125 42.28125 L 7.71875 43.71875 L 25 26.4375 L 42.28125 43.71875 L 43.71875 42.28125 L 26.4375 25 L 43.71875 7.71875 L 42.28125 6.28125 L 25 23.5625 Z"></path></svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
const Navbar: NextPage = () => {
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const [isNavbarOpened, setIsNavbarOpened] = useState(false);
|
||||||
|
|
||||||
|
const showNavbar = () => {
|
||||||
|
setIsNavbarOpened(!isNavbarOpened);
|
||||||
|
}
|
||||||
|
const links = [
|
||||||
|
{
|
||||||
|
href: "/", label: "Amirmoghi3", isActive: router.pathname === "/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "/resume", label: "Who I Am", isActive: router.pathname === "/resume",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
return (
|
||||||
|
<div className="p-5">
|
||||||
|
<nav className="flex justify-between flex-wrap items-start">
|
||||||
|
<div className="hidden md:flex">
|
||||||
|
{links.map(({ href, label, isActive }) => (
|
||||||
|
<Link href={href} key={href} >
|
||||||
|
<a className={`${isActive ? "border-secondary" : "border-light-primary"} mx-2 text-secondary border-2 hover:border-secondary p-2`}>{label}</a>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col md:hidden w-full">
|
||||||
|
<div className="flex flex-row justify-between">
|
||||||
|
<button onClick={showNavbar}>
|
||||||
|
{isNavbarOpened ? <CloseIcon /> : <MenuIcon />}
|
||||||
|
</button>
|
||||||
|
<div className="border-b-2 border-b-secondary p-2">
|
||||||
|
<Link href={links[0].href}>
|
||||||
|
<a className="text-secondary text-sm md:text-xl">{links[0].label}</a>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col border-secondary ">
|
||||||
|
{isNavbarOpened && links.slice(1).map(({ href, label, isActive }) => (
|
||||||
|
<Link href={href} key={href} >
|
||||||
|
<a className={`${isActive ? "border-secondary" : "border-light-primary"} my-2 text-secondary border-2 hover:border-secondary p-2`}>{label}</a>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Navbar;
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const LinearSpeacialistBar = ({ title, percent }) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<span className="text-secondary text-sm opacity-75">
|
||||||
|
{title}
|
||||||
|
</span>
|
||||||
|
<div className="h-2 w-full bg-dark-primary rounded-md z-0">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className={`relative -top-[8px] h-2 rounded-md bg-gold z-10`} style={{ width: percent + "%" }}>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import Footer from "@/Footer";
|
||||||
|
import Navbar from "@/Navbar";
|
||||||
|
import type { NextPage } from "next";
|
||||||
|
import Head from "next/head";
|
||||||
|
|
||||||
|
|
||||||
|
const MainLayout: NextPage = ({ children }) => {
|
||||||
|
return (
|
||||||
|
<div className="w-screen h-screen bg-dark-primary p-5 ">
|
||||||
|
<Head>
|
||||||
|
<title>Amirmoghi3 | امیرحسین مقیسه</title>
|
||||||
|
<meta name="description" content="amir hossein moghiseh personal page" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
</Head>
|
||||||
|
<main className='bg-light-primary w-full h-full'>
|
||||||
|
<Navbar />
|
||||||
|
{children}
|
||||||
|
<Footer />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MainLayout;
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import GoBack from "@/GoBack";
|
||||||
|
import type { NextPage } from "next";
|
||||||
|
import Head from "next/head";
|
||||||
|
|
||||||
|
|
||||||
|
const PageLayout: NextPage = ({ children }) => {
|
||||||
|
return (
|
||||||
|
<div className="w-screen bg-dark-primary p-5">
|
||||||
|
<Head>
|
||||||
|
<title>Amirmoghi3 | امیرحسین مقیسه</title>
|
||||||
|
<meta name="description" content="amir hossein moghiseh personal page" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
</Head>
|
||||||
|
<main className='bg-light-primary w-full'>
|
||||||
|
<GoBack />
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PageLayout;
|
||||||
15
package.json
15
package.json
|
|
@ -9,15 +9,28 @@
|
||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@material-ui/core": "^4.12.3",
|
||||||
|
"@material-ui/icons": "^4.11.2",
|
||||||
|
"@types/react-gravatar": "^2.6.10",
|
||||||
|
"@types/react-lottie": "^1.2.6",
|
||||||
|
"lottie-web": "^5.8.1",
|
||||||
"next": "12.1.0",
|
"next": "12.1.0",
|
||||||
"react": "17.0.2",
|
"react": "17.0.2",
|
||||||
"react-dom": "17.0.2"
|
"react-dom": "17.0.2",
|
||||||
|
"react-gravatar": "^2.6.3",
|
||||||
|
"react-lottie": "^1.2.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "17.0.18",
|
"@types/node": "17.0.18",
|
||||||
"@types/react": "17.0.39",
|
"@types/react": "17.0.39",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.12.0",
|
||||||
|
"autoprefixer": "^10.4.2",
|
||||||
"eslint": "8.9.0",
|
"eslint": "8.9.0",
|
||||||
"eslint-config-next": "12.1.0",
|
"eslint-config-next": "12.1.0",
|
||||||
|
"eslint-config-prettier": "^8.4.0",
|
||||||
|
"postcss": "^8.4.6",
|
||||||
|
"prettier": "^2.5.1",
|
||||||
|
"tailwindcss": "^3.0.23",
|
||||||
"typescript": "4.5.5"
|
"typescript": "4.5.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,23 @@
|
||||||
import '../styles/globals.css'
|
import 'styles/globals.css'
|
||||||
import type { AppProps } from 'next/app'
|
import type { AppProps } from 'next/app'
|
||||||
|
import MainLayout from 'layouts/mainLayout'
|
||||||
|
import PageLayout from 'layouts/pageLayout'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }: AppProps) {
|
function MyApp({ Component, pageProps }: AppProps) {
|
||||||
return <Component {...pageProps} />
|
const route = useRouter();
|
||||||
|
return (
|
||||||
|
|
||||||
|
route.pathname === "/" ?
|
||||||
|
<MainLayout>
|
||||||
|
<Component {...pageProps} />
|
||||||
|
</MainLayout>
|
||||||
|
:
|
||||||
|
<PageLayout>
|
||||||
|
<Component {...pageProps} />
|
||||||
|
</PageLayout>
|
||||||
|
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default MyApp
|
export default MyApp
|
||||||
|
|
|
||||||
|
|
@ -1,70 +1,12 @@
|
||||||
import type { NextPage } from 'next'
|
import type { NextPage } from 'next'
|
||||||
import Head from 'next/head'
|
import amirmoghi3Glitch from "assets/images/amirmoghi3.png"
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
import styles from '../styles/Home.module.css'
|
|
||||||
|
|
||||||
const Home: NextPage = () => {
|
const Home: NextPage = () => {
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className='text-center text-secondary relative top-[30%] -translate-y-2/4 px-2'>
|
||||||
<Head>
|
<h1 className='text-3xl'> <Image alt="amirmoghi3" src={amirmoghi3Glitch} /></h1>
|
||||||
<title>Create Next App</title>
|
<p className='opacity-60 text-sm'>PM4D | Web3 Developer | Devops Specialist | Web Engineer</p>
|
||||||
<meta name="description" content="Generated by create next app" />
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<main className={styles.main}>
|
|
||||||
<h1 className={styles.title}>
|
|
||||||
Welcome to <a href="https://nextjs.org">Next.js!</a>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p className={styles.description}>
|
|
||||||
Get started by editing{' '}
|
|
||||||
<code className={styles.code}>pages/index.tsx</code>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className={styles.grid}>
|
|
||||||
<a href="https://nextjs.org/docs" className={styles.card}>
|
|
||||||
<h2>Documentation →</h2>
|
|
||||||
<p>Find in-depth information about Next.js features and API.</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="https://nextjs.org/learn" className={styles.card}>
|
|
||||||
<h2>Learn →</h2>
|
|
||||||
<p>Learn about Next.js in an interactive course with quizzes!</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://github.com/vercel/next.js/tree/canary/examples"
|
|
||||||
className={styles.card}
|
|
||||||
>
|
|
||||||
<h2>Examples →</h2>
|
|
||||||
<p>Discover and deploy boilerplate example Next.js projects.</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
|
||||||
className={styles.card}
|
|
||||||
>
|
|
||||||
<h2>Deploy →</h2>
|
|
||||||
<p>
|
|
||||||
Instantly deploy your Next.js site to a public URL with Vercel.
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer className={styles.footer}>
|
|
||||||
<a
|
|
||||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Powered by{' '}
|
|
||||||
<span className={styles.logo}>
|
|
||||||
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,383 @@
|
||||||
|
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;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
'tailwindcss',
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,116 +0,0 @@
|
||||||
.container {
|
|
||||||
padding: 0 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
min-height: 100vh;
|
|
||||||
padding: 4rem 0;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
padding: 2rem 0;
|
|
||||||
border-top: 1px solid #eaeaea;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer a {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title a {
|
|
||||||
color: #0070f3;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title a:hover,
|
|
||||||
.title a:focus,
|
|
||||||
.title a:active {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.15;
|
|
||||||
font-size: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title,
|
|
||||||
.description {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
margin: 4rem 0;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code {
|
|
||||||
background: #fafafa;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 0.75rem;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
|
||||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
max-width: 800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
margin: 1rem;
|
|
||||||
padding: 1.5rem;
|
|
||||||
text-align: left;
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
border: 1px solid #eaeaea;
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: color 0.15s ease, border-color 0.15s ease;
|
|
||||||
max-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover,
|
|
||||||
.card:focus,
|
|
||||||
.card:active {
|
|
||||||
color: #0070f3;
|
|
||||||
border-color: #0070f3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card h2 {
|
|
||||||
margin: 0 0 1rem 0;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 1em;
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.grid {
|
|
||||||
width: 100%;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,16 +1,3 @@
|
||||||
html,
|
@tailwind base;
|
||||||
body {
|
@tailwind components;
|
||||||
padding: 0;
|
@tailwind utilities;
|
||||||
margin: 0;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
|
||||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
"./pages/**/*.{js,ts,jsx,tsx}",
|
||||||
|
"./components/**/*.{js,ts,jsx,tsx}",
|
||||||
|
"./layouts/**/*.{js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extends: {
|
||||||
|
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
"dark-primary": "#26232A",
|
||||||
|
"light-primary": "#313039",
|
||||||
|
"secondary": "#C2C2CA",
|
||||||
|
"white": "white",
|
||||||
|
"gold": "#F5C346"
|
||||||
|
},
|
||||||
|
sans: ['DM Sans', 'sans-serif'],
|
||||||
|
mono: ['DM Mono', 'monospace'],
|
||||||
|
},
|
||||||
|
fontWeight: {
|
||||||
|
regular: 400,
|
||||||
|
medium: 500,
|
||||||
|
bold: 700,
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,11 @@
|
||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "es5",
|
"target": "ES2020",
|
||||||
"lib": ["dom", "dom.iterable", "esnext"],
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"esnext"
|
||||||
|
],
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"strict": true,
|
"strict": true,
|
||||||
|
|
@ -13,8 +17,23 @@
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"jsx": "preserve",
|
"jsx": "preserve",
|
||||||
"incremental": true
|
"incremental": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"components/*"
|
||||||
|
],
|
||||||
|
"CTX/*": [
|
||||||
|
"contexts/*"
|
||||||
|
],
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
"include": [
|
||||||
"exclude": ["node_modules"]
|
"next-env.d.ts",
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue