mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-16 01:01:38 +00:00
67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import cn from 'classnames';
|
|
import dynamic from 'next/dynamic';
|
|
import Head from 'next/head';
|
|
import { useState } from 'react';
|
|
import style from 'styles/index/index.module.css';
|
|
import type { NextPageWithLayout } from 'types';
|
|
|
|
const MainLayout = dynamic(() => import('layouts/MainLayout'));
|
|
|
|
const Home: NextPageWithLayout = () => {
|
|
const [showLang, setShowLang] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>RUA - HOME</title>
|
|
</Head>
|
|
|
|
<main className="min-h-[calc(100vh-142px)] flex justify-center items-center text-xl">
|
|
<div className="z-0 w-full max-w-3xl px-4 my-4 text-2xl">
|
|
<div className="max-w-xl leading-10">
|
|
<h1 className="pb-4 text-4xl">Hi there 👋, I'm Arthur. </h1>
|
|
<p>I'm a Front-end developer. Yes, that's mean</p>
|
|
<p
|
|
onMouseOver={() => setShowLang(true)}
|
|
onMouseLeave={() => setShowLang(false)}
|
|
>
|
|
<span className={cn('font-Aleo font-semibold', style.gradient)}>
|
|
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'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's making everything be great.{' '}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
};
|
|
|
|
Home.getLayout = function getLayout(page) {
|
|
return <MainLayout>{page}</MainLayout>;
|
|
};
|
|
|
|
export default Home;
|