|
|
|
import Head from 'next/head'
|
|
|
|
import styles from '../styles/Index.module.css'
|
|
|
|
import Header from '../components/header';
|
|
|
|
import Footer from '../components/footer';
|
|
|
|
|
|
|
|
function RandomMotto(props) {
|
|
|
|
const Mottos = [
|
|
|
|
"Yesterday is history, tomorrow is a mystery and today is a gift that's why it's called the present",
|
|
|
|
"Just have fun!",
|
|
|
|
"Live and let go",
|
|
|
|
"Keep calm and carry on"
|
|
|
|
];
|
|
|
|
const randomNumber = Math.floor(Math.random() * Mottos.length);
|
|
|
|
return <span>{Mottos[randomNumber]}</span>;
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function Index() {
|
|
|
|
return (
|
|
|
|
<div className="page">
|
|
|
|
<Head>
|
|
|
|
<title>Trick - Index</title>
|
|
|
|
</Head>
|
|
|
|
|
|
|
|
<Header />
|
|
|
|
|
|
|
|
<div className="container">
|
|
|
|
<article className="content">
|
|
|
|
|
|
|
|
<section className="card">
|
|
|
|
<div className={styles.avatar}>
|
|
|
|
<img src="/trickwow.png"></img>
|
|
|
|
<div>
|
|
|
|
<h1>Hi, I'm Trick!</h1>
|
|
|
|
<h4><RandomMotto /></h4>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
<h3>About me</h3>
|
|
|
|
<p>
|
|
|
|
I'm a gay femboy nurse fox who likes figure skating, running and dancing,
|
|
|
|
addicted to vr and video making and I'm always listening to music,
|
|
|
|
oh and I play dnd... And that's just about me in a nutshell.
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<section className="buttons">
|
|
|
|
<a href="https://twitter.com/Trick_the_fox" target="_blank"><i className="fab fa-twitter icon"></i> Twitter</a>
|
|
|
|
<a href="https://www.twitch.tv/trick_the_fox" target="_blank"><i className="fab fa-twitch icon"></i> Twitch</a>
|
|
|
|
<a href="https://trello.com/b/cMyTLWYd" target="_blank"><i className="fab fa-trello icon"></i> Trello</a>
|
|
|
|
<a href="https://ko-fi.com/trick_the_fox" target="_blank"><i className="fas fa-coins icon"></i> Ko-fi</a>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
</article>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<Footer />
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|