Add personal describe

This commit is contained in:
DefectingCat
2022-03-25 20:30:48 +08:00
parent 1bb382409b
commit dc24df0909

View File

@ -1,8 +1,12 @@
import cn from 'classnames';
import MainLayout from 'layouts/MainLayout';
import Head from 'next/head';
import { useState } from 'react';
import type { NextPageWithLayout } from 'types';
const Home: NextPageWithLayout = () => {
const [showLang, setShowLang] = useState(false);
return (
<>
<Head>
@ -10,7 +14,43 @@ const Home: NextPageWithLayout = () => {
</Head>
<main className="h-[calc(100vh-142px)] flex justify-center items-center text-xl">
<div>Hi there,👋 Im a next.js app.</div>
<div className="w-full max-w-3xl px-10 text-2xl lg:px-0">
<div className="max-w-xl leading-10">
<h1 className="pb-4 text-4xl">Hi there 👋, I&apos;m Arthur. </h1>
<p>I&apos;m a Fron-end developer. Yes, that&apos;s mean</p>
<p
onMouseOver={() => setShowLang(true)}
onMouseLeave={() => setShowLang(false)}
>
<span className="text-sky-500 dark:text-sky-600 font-Aleo">
I make websites{' '}
</span>
<span className="text-xs text-gray-500 dark:text-gray-400">
(and web apps)
</span>
<span className="text-sky-500 dark:text-sky-600 font-Aleo">
.{' '}
</span>
The{' '}
<span className={cn('font-Aleo', showLang && 'hidden')}>
JavaScript
</span>
<span
className={cn('hidden font-Aleo', showLang && '!inline-block')}
>
TypeScript
</span>{' '}
is my favorite language.
</p>
<p>
I&apos;m not a creator. Just a little guy standing on the
shoulders of giants with a little imagination.
</p>
<p>
Open source is my passion. It&apos;s making everything be great.{' '}
</p>
</div>
</div>
</main>
</>
);