amirmoghi3
/
amirmoghi3.ir
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial

master
Amir Hossein Moghiseh 2022-02-28 14:06:38 +03:30
parent 761bb5536a
commit cb0a978a11
29 changed files with 1579 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env 100644
View File

@ -0,0 +1 @@
NEXT_PUBLIC_URL=localhost:3000

8
.eslintrc.json
View File

@ -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.
]
}

6
.gitignore vendored
View File

@ -5,6 +5,7 @@
/.pnp
.pnp.js
# testing
/coverage
@ -36,3 +37,8 @@ yarn-error.log*
# typescript
*.tsbuildinfo
.vscode
yarn.lock
.next
.node_modules

7
.prettierrc.json 100644
View File

@ -0,0 +1,7 @@
{
"semi": false,
"trailingComma": "es5",
"singleQuote": true,
"tabWidth": 2,
"useTabs": false
}

BIN
assets/images/amirmoghi3.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
assets/images/email.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
assets/json/discord.json 100644
View File

File diff suppressed because one or more lines are too long

1
assets/json/github.json 100644
View File

File diff suppressed because one or more lines are too long

1
assets/json/instagram.json 100644
View File

File diff suppressed because one or more lines are too long

1
assets/json/linkedin.json 100644
View File

File diff suppressed because one or more lines are too long

1
assets/json/twitter.json 100644
View File

File diff suppressed because one or more lines are too long

120
components/Footer/index.tsx 100644
View File

@ -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;

17
components/GoBack/index.tsx 100644
View File

@ -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;

22
components/Journey/index.tsx 100644
View File

@ -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;

72
components/Navbar/index.tsx 100644
View File

@ -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;

23
components/SpecialistBar/index.tsx 100644
View File

@ -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>
)
}

25
layouts/mainLayout.tsx 100644
View File

@ -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;

23
layouts/pageLayout.tsx 100644
View File

@ -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
View File

@ -9,15 +9,28 @@
"lint": "next lint"
},
"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",
"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": {
"@types/node": "17.0.18",
"@types/react": "17.0.39",
"@typescript-eslint/eslint-plugin": "^5.12.0",
"autoprefixer": "^10.4.2",
"eslint": "8.9.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"
}
}

19
pages/_app.tsx
View File

@ -1,8 +1,23 @@
import '../styles/globals.css'
import 'styles/globals.css'
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) {
return <Component {...pageProps} />
const route = useRouter();
return (
route.pathname === "/" ?
<MainLayout>
<Component {...pageProps} />
</MainLayout>
:
<PageLayout>
<Component {...pageProps} />
</PageLayout>
)
}
export default MyApp

66
pages/index.tsx
View File

@ -1,70 +1,12 @@
import type { NextPage } from 'next'
import Head from 'next/head'
import amirmoghi3Glitch from "assets/images/amirmoghi3.png"
import Image from 'next/image'
import styles from '../styles/Home.module.css'
const Home: NextPage = () => {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<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 &rarr;</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 &rarr;</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 &rarr;</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 &rarr;</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 className='text-center text-secondary relative top-[30%] -translate-y-2/4 px-2'>
<h1 className='text-3xl'> <Image alt="amirmoghi3" src={amirmoghi3Glitch} /></h1>
<p className='opacity-60 text-sm'>PM4D | Web3 Developer | Devops Specialist | Web Engineer</p>
</div>
)
}

383
pages/resume/index.tsx 100644
View File

@ -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;

5
postcss.config.js 100644
View File

@ -0,0 +1,5 @@
module.exports = {
plugins: [
'tailwindcss',
],
}

4
public/vercel.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

116
styles/Home.module.css
View File

@ -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;
}
}

19
styles/globals.css
View File

@ -1,16 +1,3 @@
html,
body {
padding: 0;
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;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

27
tailwind.config.js 100644
View File

@ -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: [],
}

31
tsconfig.json
View File

@ -1,7 +1,11 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"target": "ES2020",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@ -13,8 +17,23 @@
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
"incremental": true,
"baseUrl": ".",
"paths": {
"@/*": [
"components/*"
],
"CTX/*": [
"contexts/*"
],
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}

794
yarn.lock
View File

File diff suppressed because it is too large Load Diff