diff --git a/components/footer.js b/components/footer.js new file mode 100644 index 0000000..bf55da8 --- /dev/null +++ b/components/footer.js @@ -0,0 +1,13 @@ +import styles from '../styles/components/Footer.module.css' + +const Header = () => ( +
+
+
+

Made with love by Mid

+
+
+
+) + +export default Header \ No newline at end of file diff --git a/components/header.js b/components/header.js new file mode 100644 index 0000000..1adbf87 --- /dev/null +++ b/components/header.js @@ -0,0 +1,26 @@ +import Head from 'next/head' +import styles from '../styles/components/Header.module.css' + +const Header = () => ( +
+ + + + +
+ +
+
+

Trick The Fox

 + +
+ Commissions + Gallery + Contact +
+
+
+
+) + +export default Header \ No newline at end of file diff --git a/pages/commissions.js b/pages/commissions.js new file mode 100644 index 0000000..272e7e7 --- /dev/null +++ b/pages/commissions.js @@ -0,0 +1,32 @@ +import Head from 'next/head' +import styles from '../styles/Commissions.module.css' +import Header from '../components/header'; +import Footer from '../components/footer'; + +export default function Commissions() { + return ( +
+ + Trick - Commissions + + +
+ +
+
+ +
+
+

Commissions

+
+
+ +
+
+ +
+ ) +} diff --git a/pages/contact.js b/pages/contact.js new file mode 100644 index 0000000..9bfca98 --- /dev/null +++ b/pages/contact.js @@ -0,0 +1,32 @@ +import Head from 'next/head' +import styles from '../styles/Contact.module.css' +import Header from '../components/header'; +import Footer from '../components/footer'; + +export default function Contact() { + return ( +
+ + Trick - Contact + + +
+ +
+
+ +
+
+

Contact

+
+
+ +
+
+ +
+ ) +} diff --git a/pages/gallery.js b/pages/gallery.js new file mode 100644 index 0000000..aaf8a25 --- /dev/null +++ b/pages/gallery.js @@ -0,0 +1,32 @@ +import Head from 'next/head' +import styles from '../styles/Gallery.module.css' +import Header from '../components/header'; +import Footer from '../components/footer'; + +export default function Gallery() { + return ( +
+ + Trick - Gallery + + +
+ +
+
+ +
+
+

Gallery

+
+
+ +
+
+ +
+ ) +} diff --git a/pages/index.js b/pages/index.js index e80700d..e1aad24 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,7 +1,7 @@ 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"; +import Header from '../components/header'; +import Footer from '../components/footer'; function RandomMotto(props) { const Mottos = [ @@ -16,31 +16,18 @@ function RandomMotto(props) { export default function Index() { return ( -
+
- Trick The Fox | Index - + Trick - Index -
+
-
-
-

Trick The Fox

 - - -
-
- -
-
+
+
-
+
@@ -50,7 +37,7 @@ export default function Index() {
-

About me:

+

About me

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, @@ -62,7 +49,7 @@ export default function Index() {

-
+
Twitter Twitch Trello @@ -74,11 +61,7 @@ export default function Index() {
-
-
-

Made with love by Mid

-
-
+
diff --git a/styles/Commissions.module.css b/styles/Commissions.module.css new file mode 100644 index 0000000..573cc44 --- /dev/null +++ b/styles/Commissions.module.css @@ -0,0 +1,3 @@ +.owo { + color: blue; +} \ No newline at end of file diff --git a/styles/Contact.module.css b/styles/Contact.module.css new file mode 100644 index 0000000..e69de29 diff --git a/styles/Gallery.module.css b/styles/Gallery.module.css new file mode 100644 index 0000000..e69de29 diff --git a/styles/Index.module.css b/styles/Index.module.css index e0b77e8..ab7e3f2 100644 --- a/styles/Index.module.css +++ b/styles/Index.module.css @@ -1,72 +1,7 @@ -.page { - min-height: 110vh; - background-color: #1B1C22; - display: flex; - flex-direction: column; -} - -.container { - max-width: 1200px; - margin: 0 auto; -} - -.content { - padding: 2em 0; - gap: 2em; - display: flex; - flex-direction: row; -} - -.card { - 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; -} - -.card p { - font-size: 1.1em; -} - -.content .buttons { - width: 300px; - display: flex; - flex-direction: column; - gap: 1em; -} - -.content .buttons > a { - display: flex; - 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; -} - -.icon { - font-size: 2em; -} - -.content .buttons > a:hover { - transform: scale(0.95); - transition-duration: 0.1s; -} - .avatar { height: 200px; display: flex; - gap: 3em; + gap: 2em; } .avatar h1 { @@ -86,48 +21,5 @@ .avatar > img:hover { transition-duration: 0.3s; - transform: scale(1.1) rotate(20deg); -} - -.colorfulbar { - box-shadow: -2px -2px 10px rgba(0,0,0,0.2); - background: linear-gradient(to left, rgba(255,85,200,1) 0%, rgba(79,79,255,1) 100%, rgba(0,212,255,1) 100%); - height: 6px; -} - -.menu { - box-shadow: 2px 2px 10px rgba(0,0,0,0.2); - background: #25262C; - color: white; - padding: 1em 2em; -} - -.menu > div { - display: flex; - justify-content: space-between; -} - -.menu .items { - display: flex; - gap: 1.5em; -} - -.menu a { - display: flex; - align-items: center; -} - -.menu .title > img { - height: 3em; -} - -.menu .title { - margin: -20px 0; - gap: 5px; - font-size: 0.8em; -} - -.footer { - text-align: center; - color: white; + transform: scale(1.1) rotate(-20deg); } \ No newline at end of file diff --git a/styles/components/Footer.module.css b/styles/components/Footer.module.css new file mode 100644 index 0000000..839db15 --- /dev/null +++ b/styles/components/Footer.module.css @@ -0,0 +1,4 @@ +.footer { + text-align: center; + color: white; +} \ No newline at end of file diff --git a/styles/components/Header.module.css b/styles/components/Header.module.css new file mode 100644 index 0000000..f908a87 --- /dev/null +++ b/styles/components/Header.module.css @@ -0,0 +1,60 @@ +.menu { + box-shadow: 2px 2px 10px rgba(0,0,0,0.2); + background: #25262C; + color: white; + padding: 1em 2em; +} + +.menu > div { + display: flex; + justify-content: space-between; +} + +.menu .items { + display: flex; +} + +.menu a { + display: flex; + align-items: center; + padding: 0.3em 1.3em; + border-radius: 5px; + transition-duration: 0.2s; +} + +.menu .items a:hover { + transition-duration: 0.2s; + background-color: rgba(79,79,255,1); +} + +.menu .title > img { + height: 3em; + animation-name: idle-img; + animation-duration: 4s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; +} + +.menu .title { + margin: -20px 0; + gap: 5px; + font-size: 0.8em; +} + +@keyframes idle-img { + 0% { + margin-top: -10px; + } + 50% { + margin-top: 10px; + } + 100% { + margin-top: -10px; + } +} + +.colorfulbar { + box-shadow: -2px -2px 10px rgba(0,0,0,0.2); + background: linear-gradient(to left, rgba(255,85,200,1) 0%, rgba(79,79,255,1) 100%, rgba(0,212,255,1) 100%); + height: 8px; + } \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index e0dd511..70f7b3e 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -7,6 +7,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-size: 1.1em; + background-color: #1B1C22; } a { @@ -20,4 +21,69 @@ a { h1, h2, h3 { font-family: 'Dela Gothic One', cursive; +} + +.link:hover { + text-decoration: underline; +} + +.page { + min-height: 100vh; + background-color: #1B1C22; + display: flex; + flex-direction: column; +} + +.container { + max-width: 1200px; + margin: 0 auto; +} + +.content { + padding: 2em 0; + gap: 2em; + display: flex; + flex-direction: row; +} + +.card { + 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; +} + +.card p { + font-size: 1.1em; +} + +.content .buttons { + width: 300px; + display: flex; + flex-direction: column; + gap: 1em; +} + +.content .buttons > a { + display: flex; + 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; +} + +.content .buttons > a:hover { + transform: scale(0.95); + transition-duration: 0.1s; } \ No newline at end of file