|
|
|
|
import Head from 'next/head'
|
|
|
|
|
import styles from '../styles/Index.module.css'
|
|
|
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
|
|
|
import { faTwitter } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
|
|
|
|
|
|
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={styles.page}>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Trick The Fox | Index</title>
|
|
|
|
|
<link rel="icon" href="/sign.png" />
|
|
|
|
|
</Head>
|
|
|
|
|
|
|
|
|
|
<div className={styles.colorfulbar}></div>
|
|
|
|
|
|
|
|
|
|
<div className={styles.menu}>
|
|
|
|
|
<div className={styles.container}>
|
|
|
|
|
<a href="/" className={styles.title}><img src="/sign.png"></img> <h2>Trick The Fox</h2></a>
|
|
|
|
|
|
|
|
|
|
<div className={styles.items}>
|
|
|
|
|
<a href="/commissions">Commissions</a>
|
|
|
|
|
<a href="/gallery">Gallery</a>
|
|
|
|
|
<a href="/contact">Contact</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={styles.container}>
|
|
|
|
|
<article className={styles.content}>
|
|
|
|
|
|
|
|
|
|
<section>
|
|
|
|
|
<div className={styles.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>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section>
|
|
|
|
|
<div>
|
|
|
|
|
<div className={styles.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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
</article>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={styles.footer}>
|
|
|
|
|
<div className={styles.container}>
|
|
|
|
|
<h4>Made with love by Mid</h4>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
