xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-15 16:51:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add personal describe

Browse Source
This commit is contained in:
DefectingCat
2022-03-25 20:30:48 +08:00
parent 1bb382409b
commit dc24df0909
1 changed files with 41 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
pages/index.tsx
View File

@ -1,8 +1,12 @@
import cn from 'classnames';
import MainLayout from 'layouts/MainLayout'; import MainLayout from 'layouts/MainLayout';
import Head from 'next/head'; import Head from 'next/head';
import { useState } from 'react';
import type { NextPageWithLayout } from 'types'; import type { NextPageWithLayout } from 'types';
const Home: NextPageWithLayout = () => { const Home: NextPageWithLayout = () => {
const [showLang, setShowLang] = useState(false);
return ( return (
<> <>
<Head> <Head>
@ -10,7 +14,43 @@ const Home: NextPageWithLayout = () => {
</Head> </Head>
<main className="h-[calc(100vh-142px)] flex justify-center items-center text-xl"> <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> </main>
</> </>
); );