Mid
/
trickthefox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new style

Browse Source
main
Midnight 3 years ago
parent 13e8011664
commit 2554fe20c2
13 changed files with 351 additions and 308 deletions
Show Stats Download Patch File Download Diff File

5
pages/_app.js
Unescape View File

@ -1,5 +1,10 @@
import '../styles/globals.css' import '../styles/globals.css'
import '@fortawesome/fontawesome-free/js/fontawesome';
import '@fortawesome/fontawesome-free/js/solid';
import '@fortawesome/fontawesome-free/js/regular';
import '@fortawesome/fontawesome-free/js/brands';
function MyApp({ Component, pageProps }) { function MyApp({ Component, pageProps }) {
return <Component {...pageProps} /> return <Component {...pageProps} />
} }

65
pages/home.js
Unescape View File

@ -1,65 +0,0 @@
import Head from 'next/head'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h3>Documentation &rarr;</h3>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h3>Learn &rarr;</h3>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/master/examples"
className={styles.card}
>
<h3>Examples &rarr;</h3>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h3>Deploy &rarr;</h3>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
</a>
</footer>
</div>
)
}

89
pages/index.js
Unescape View File

@ -1,71 +1,86 @@
import Head from 'next/head' import Head from 'next/head'
import styles from '../styles/Index.module.css' import styles from '../styles/Index.module.css'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTwitter } from "@fortawesome/free-solid-svg-icons";
function RandomMotto(props) { function RandomMotto(props) {
const Mottos = [ const Mottos = [
"Yesterday is history, tomorrow is a mystery and today is a gift that's why it's called the present.", "Yesterday is history, tomorrow is a mystery and today is a gift that's why it's called the present",
"Just have fun!", "Just have fun!",
"Live and let go.", "Live and let go",
"Keep calm and carry on." "Keep calm and carry on"
]; ];
const randomNumber = Math.floor(Math.random() * Mottos.length); const randomNumber = Math.floor(Math.random() * Mottos.length);
return <p>{Mottos[randomNumber]}</p>; return <span>{Mottos[randomNumber]}</span>;
} }
export default function Home() { export default function Index() {
return ( return (
<div className={styles.page}> <div className={styles.page}>
<Head> <Head>
<title>Trick's Website</title> <title>Trick The Fox | Index</title>
<link rel="icon" href="/trick.jpg" /> <link rel="icon" href="/sign.png" />
</Head> </Head>
<section className={styles.container}> <div className={styles.colorfulbar}></div>
<div className={styles.main}>
<article className={styles.content}> <div className={styles.menu}>
<section className={styles.header}> <div className={styles.container}>
<div className={styles.avatar_bar}> <a href="/" className={styles.title}><img src="/sign.png"></img> <h2>Trick The Fox</h2></a>
<img src="trick.jpg" className={styles.avatar}></img>
<h1>Trick The Fox</h1> <div className={styles.items}>
<a href="/commissions">Commissions</a>
<a href="/gallery">Gallery</a>
<a href="/contact">Contact</a>
</div>
</div>
</div> </div>
</section>
<h2><RandomMotto /></h2> <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> <p>
I'm a gay femboy nurse fox who likes figure skating, running and dancing, 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, 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. oh and I play dnd... And that's just about me in a nutshell.
</p> </p>
</article> </div>
</div>
</section>
<aside className={styles.content}> <section>
<div className={styles.links}> <div>
<a href="https://twitter.com/Trick_the_fox" target="_blank"><FontAwesomeIcon ico={faTwitter} /> Twitter</a> <div className={styles.buttons}>
<a href="https://www.twitch.tv/trick_the_fox" target="_blank">Twitch</a> <a href="https://twitter.com/Trick_the_fox" target="_blank"><i className="fab fa-twitter icon"></i> Twitter</a>
<a href="https://docs.google.com/document/d/1cwacGjMxjppSblnxEp5RSCBOlPQDICWisST6R0mMVJQ/edit?usp=sharing" target="_blank">Commissions</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">Trello</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">Ko-fi</a> <a href="https://ko-fi.com/trick_the_fox" target="_blank"><i className="fas fa-coins icon"></i> Ko-fi</a>
</div> </div>
</aside>
</div> </div>
</section> </section>
<section className={styles.container}> </article>
<section className={styles.content}> </div>
<h2>Gallery</h2>
<div className={styles.gallery}> <div className={styles.footer}>
<img src="trick_be_sitting_shadow.png"></img> <div className={styles.container}>
<img src="Unnamed.png"></img> <h4>Made with love by Mid</h4>
<img src="wow.png"></img>
<img src="triiiiick.png"></img>
<img src="tricky_boy.png"></img>
</div> </div>
</section> </div>
</section>
</div> </div>
) )
} }

71
pages/old.js
Unescape View File

@ -0,0 +1,71 @@
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>
)
}

BIN
public/D0hAuJxW0AA2mjn.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
public/background.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 602 KiB

BIN
public/sign.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
public/svflkzxd.bmp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 765 KiB

BIN
public/trickwow.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 631 KiB

122
styles/Home.module.css
Unescape View File

@ -1,122 +0,0 @@
.container {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}
.footer img {
margin-left: 0.5rem;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
}
.title a {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
margin-top: 3rem;
}
.card {
margin: 1rem;
flex-basis: 45%;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h3 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}

159
styles/Index.module.css
Unescape View File

@ -1,124 +1,133 @@
.page { .page {
background: rgb(255,85,200); min-height: 110vh;
background: radial-gradient(to bottom left, rgba(255,85,200,1) 0%, rgba(79,79,255,1) 100%, rgba(0,212,255,1) 100%); background-color: #1B1C22;
min-height: 100vh; display: flex;
padding: 50px 0 200px 0; flex-direction: column;
} }
.container { .container {
max-width: 1200px; max-width: 1200px;
margin: auto; margin: 0 auto;
} }
.main { .content {
padding: 2em 0;
gap: 2em;
display: flex; display: flex;
gap: 1em; flex-direction: row;
margin: 100px 0 20px 0;
} }
.content { .card {
flex-grow: 1;
background-color: white;
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
padding: 50px;
border-radius: 10px; border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
display: flex;
flex-direction: column;
gap: 1em;
padding: 2em;
color: white;
background-color: #25262C;
} }
.content h2 { .card p {
margin: unset; font-size: 1.1em;
} }
.header { .content .buttons {
width: 300px;
display: flex; display: flex;
gap: 3em; flex-direction: column;
gap: 1em;
} }
.links { .content .buttons > a {
margin: -20px 0;
display: flex; display: flex;
flex-direction: column; justify-content: center;
align-items: center;
gap: 1em;
border-radius: 10px;
padding: 0.4em 2em;
font-size: 1.3em;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
background-color: rgba(79,79,255,1);
color: white;
transition-duration: 0.1s;
font-family: 'Dela Gothic One', cursive;
} }
.links > a { .icon {
padding: 10px; font-size: 2em;
color: #1F50DD;
width: 10em;
font-size: 1.2em;
border-bottom: 4px solid #1F50DD;
transition-duration: 0.2s;
} }
.links > a:hover { .content .buttons > a:hover {
transition-duration: 0.2s; transform: scale(0.95);
border-bottom: 4px solid rgba(0,0,0,0); transition-duration: 0.1s;
transform: scale(0.97);
} }
.avatar_bar { .avatar {
margin: -40px 0 0 0; height: 200px;
flex-grow: 1;
display: flex; display: flex;
gap: 1em; gap: 3em;
} }
.avatar_bar h1 { .avatar h1 {
font-size: 3em; font-size: 2em;
margin: unset;
} }
.avatar { .avatar h4 {
margin: -110px 0 0 0; font-weight: normal;
border: 6px solid white; }
.avatar > img {
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
border-radius: 100%; border-radius: 100%;
height: 200px; max-height: 100%;
transition-duration: 0.3s; transition-duration: 0.3s;
} }
.avatar:hover { .avatar > img:hover {
transition-duration: 0.3s; transition-duration: 0.3s;
transform: scale(1.1) rotate(20deg); transform: scale(1.1) rotate(20deg);
} }
.gallery { .colorfulbar {
padding: 20px 0; box-shadow: -2px -2px 10px rgba(0,0,0,0.2);
display: flex; background: linear-gradient(to left, rgba(255,85,200,1) 0%, rgba(79,79,255,1) 100%, rgba(0,212,255,1) 100%);
gap: 2em; height: 6px;
} }
.gallery > img { .menu {
width: 100%; box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
height: auto; background: #25262C;
color: white;
padding: 1em 2em;
} }
.gallery > img:hover { .menu > div {
transform: scale(2); display: flex;
justify-content: space-between;
} }
@media(max-width:768px) { .menu .items {
.avatar_bar { display: flex;
justify-content: center; gap: 1.5em;
text-align: center; }
flex-direction: column;
}
.avatar_bar h1 {
font-size: 2em;
}
.avatar { .menu a {
width: 40vw; display: flex;
height: auto; align-items: center;
} }
.page { .menu .title > img {
width: 100%; height: 3em;
} }
.content { .menu .title {
margin: 0 10px; margin: -20px 0;
} gap: 5px;
font-size: 0.8em;
}
.main { .footer {
flex-direction: column; text-align: center;
} color: white;
} }

124
styles/Old.module.css
Unescape View File

@ -0,0 +1,124 @@
.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;
}
}

6
styles/globals.css
Unescape View File

@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
html, html,
body { body {
padding: 0; padding: 0;
@ -15,3 +17,7 @@ a {
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
h1, h2, h3 {
font-family: 'Dela Gothic One', cursive;
}
Write Preview
Loading…
Cancel
Save