parent
b6cdd84778
commit
4fb1e6ed6f
@ -1,71 +0,0 @@
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/Index.module.css'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faSearch } 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 <p>{Mottos[randomNumber]}</p>;
|
||||
}
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<Head>
|
||||
<title>Trick's Website</title>
|
||||
<link rel="icon" href="/trick.jpg" />
|
||||
</Head>
|
||||
|
||||
<section className={styles.container}>
|
||||
<div className={styles.main}>
|
||||
<article className={styles.content}>
|
||||
<section className={styles.header}>
|
||||
<div className={styles.avatar_bar}>
|
||||
<img src="trick.jpg" className={styles.avatar}></img>
|
||||
<h1>Trick The Fox</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2><RandomMotto /></h2>
|
||||
|
||||
<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>
|
||||
</article>
|
||||
|
||||
<aside className={styles.content}>
|
||||
<div className={styles.links}>
|
||||
<a href="https://twitter.com/Trick_the_fox" target="_blank"><FontAwesomeIcon ico={faSearch} /> Twitter</a>
|
||||
<a href="https://www.twitch.tv/trick_the_fox" target="_blank">Twitch</a>
|
||||
<a href="https://docs.google.com/document/d/1cwacGjMxjppSblnxEp5RSCBOlPQDICWisST6R0mMVJQ/edit?usp=sharing" target="_blank">Commissions</a>
|
||||
<a href="https://trello.com/b/cMyTLWYd" target="_blank">Trello</a>
|
||||
<a href="https://ko-fi.com/trick_the_fox" target="_blank">Ko-fi</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={styles.container}>
|
||||
<section className={styles.content}>
|
||||
<h2>Gallery</h2>
|
||||
|
||||
<div className={styles.gallery}>
|
||||
<img src="trick_be_sitting_shadow.png"></img>
|
||||
<img src="Unnamed.png"></img>
|
||||
<img src="wow.png"></img>
|
||||
<img src="triiiiick.png"></img>
|
||||
<img src="tricky_boy.png"></img>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
After Width: | Height: | Size: 470 KiB |
|
After Width: | Height: | Size: 691 KiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 1021 KiB |
@ -1,124 +0,0 @@
|
||||
.page {
|
||||
background: rgb(255,85,200);
|
||||
background: radial-gradient(to bottom left, rgba(255,85,200,1) 0%, rgba(79,79,255,1) 100%, rgba(0,212,255,1) 100%);
|
||||
min-height: 100vh;
|
||||
padding: 50px 0 200px 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
margin: 100px 0 20px 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
background-color: white;
|
||||
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
|
||||
padding: 50px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
gap: 3em;
|
||||
}
|
||||
|
||||
.links {
|
||||
margin: -20px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.links > a {
|
||||
padding: 10px;
|
||||
color: #1F50DD;
|
||||
width: 10em;
|
||||
font-size: 1.2em;
|
||||
border-bottom: 4px solid #1F50DD;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.links > a:hover {
|
||||
transition-duration: 0.2s;
|
||||
border-bottom: 4px solid rgba(0,0,0,0);
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.avatar_bar {
|
||||
margin: -40px 0 0 0;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.avatar_bar h1 {
|
||||
font-size: 3em;
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin: -110px 0 0 0;
|
||||
border: 6px solid white;
|
||||
border-radius: 100%;
|
||||
height: 200px;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.avatar:hover {
|
||||
transition-duration: 0.3s;
|
||||
transform: scale(1.1) rotate(20deg);
|
||||
}
|
||||
|
||||
.gallery {
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.gallery > img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.gallery > img:hover {
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
.avatar_bar {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.avatar_bar h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 40vw;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue