diff --git a/pages/_app.js b/pages/_app.js index 1e1cec9..35d9e4b 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,5 +1,10 @@ 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 }) { return } diff --git a/pages/home.js b/pages/home.js deleted file mode 100644 index 43956d9..0000000 --- a/pages/home.js +++ /dev/null @@ -1,65 +0,0 @@ -import Head from 'next/head' -import styles from '../styles/Home.module.css' - -export default function Home() { - return ( -
- - Create Next App - - - -
-

- Welcome to Next.js! -

- -

- Get started by editing{' '} - pages/index.js -

- -
- -

Documentation →

-

Find in-depth information about Next.js features and API.

- - - -

Learn →

-

Learn about Next.js in an interactive course with quizzes!

- - - -

Examples →

-

Discover and deploy boilerplate example Next.js projects.

- - - -

Deploy →

-

- Instantly deploy your Next.js site to a public URL with Vercel. -

- -
-
- - -
- ) -} diff --git a/pages/index.js b/pages/index.js index d089ed9..e80700d 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,71 +1,86 @@ import Head from 'next/head' import styles from '../styles/Index.module.css' -import { faTwitter } from '@fortawesome/free-brands-svg-icons' 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.", + "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." + "Live and let go", + "Keep calm and carry on" ]; const randomNumber = Math.floor(Math.random() * Mottos.length); - return

{Mottos[randomNumber]}

; + return {Mottos[randomNumber]}; } -export default function Home() { +export default function Index() { return (
- Trick's Website - + Trick The Fox | Index + -
-
-
-
-
- -

Trick The Fox

-
-
+
+ + -

- 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. -

-
+
+
- +
+ +
+
+
+ Twitter + Twitch + Trello + Ko-fi +
+
+
+ + +
+ +
+
+

Made with love by Mid

- +
-
-
-

Gallery

- -
- - - - - -
-
-
+ ) } diff --git a/pages/old.js b/pages/old.js new file mode 100644 index 0000000..60fa2d9 --- /dev/null +++ b/pages/old.js @@ -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

{Mottos[randomNumber]}

; + } + +export default function Index() { + return ( +
+ + Trick's Website + + + +
+
+
+
+
+ +

Trick The Fox

+
+
+ +

+ +

+ 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. +

+
+ + +
+
+ +
+
+

Gallery

+ +
+ + + + + +
+
+
+
+ ) +} diff --git a/public/D0hAuJxW0AA2mjn.jpg b/public/D0hAuJxW0AA2mjn.jpg new file mode 100644 index 0000000..f468cd3 Binary files /dev/null and b/public/D0hAuJxW0AA2mjn.jpg differ diff --git a/public/background.jpg b/public/background.jpg new file mode 100644 index 0000000..843904b Binary files /dev/null and b/public/background.jpg differ diff --git a/public/sign.png b/public/sign.png new file mode 100644 index 0000000..6d4c7d2 Binary files /dev/null and b/public/sign.png differ diff --git a/public/svflkzxd.bmp b/public/svflkzxd.bmp new file mode 100644 index 0000000..cbbcfbc Binary files /dev/null and b/public/svflkzxd.bmp differ diff --git a/public/trickwow.png b/public/trickwow.png new file mode 100644 index 0000000..10f5d57 Binary files /dev/null and b/public/trickwow.png differ diff --git a/styles/Home.module.css b/styles/Home.module.css deleted file mode 100644 index 42e7e60..0000000 --- a/styles/Home.module.css +++ /dev/null @@ -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; - } -} diff --git a/styles/Index.module.css b/styles/Index.module.css index 8019df8..e0b77e8 100644 --- a/styles/Index.module.css +++ b/styles/Index.module.css @@ -1,124 +1,133 @@ .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; + min-height: 110vh; + background-color: #1B1C22; + display: flex; + flex-direction: column; } .container { max-width: 1200px; - margin: auto; + margin: 0 auto; } -.main { +.content { + padding: 2em 0; + gap: 2em; display: flex; - gap: 1em; - margin: 100px 0 20px 0; + flex-direction: row; } -.content { - flex-grow: 1; - background-color: white; - box-shadow: 5px 5px 10px rgba(0,0,0,0.2); - padding: 50px; +.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; } -.content h2 { - margin: unset; +.card p { + font-size: 1.1em; } -.header { +.content .buttons { + width: 300px; display: flex; - gap: 3em; + flex-direction: column; + gap: 1em; } -.links { - margin: -20px 0; +.content .buttons > a { 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 { - padding: 10px; - color: #1F50DD; - width: 10em; - font-size: 1.2em; - border-bottom: 4px solid #1F50DD; - transition-duration: 0.2s; +.icon { + font-size: 2em; } -.links > a:hover { - transition-duration: 0.2s; - border-bottom: 4px solid rgba(0,0,0,0); - transform: scale(0.97); +.content .buttons > a:hover { + transform: scale(0.95); + transition-duration: 0.1s; } -.avatar_bar { - margin: -40px 0 0 0; - flex-grow: 1; +.avatar { + height: 200px; display: flex; - gap: 1em; + gap: 3em; } -.avatar_bar h1 { - font-size: 3em; - margin: unset; +.avatar h1 { + font-size: 2em; } -.avatar { - margin: -110px 0 0 0; - border: 6px solid white; +.avatar h4 { + font-weight: normal; +} + +.avatar > img { + box-shadow: 2px 2px 10px rgba(0,0,0,0.2); border-radius: 100%; - height: 200px; + max-height: 100%; transition-duration: 0.3s; } -.avatar:hover { +.avatar > img:hover { transition-duration: 0.3s; transform: scale(1.1) rotate(20deg); } -.gallery { - padding: 20px 0; - display: flex; - gap: 2em; +.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; } -.gallery > img { - width: 100%; - height: auto; +.menu { + box-shadow: 2px 2px 10px rgba(0,0,0,0.2); + background: #25262C; + color: white; + padding: 1em 2em; } -.gallery > img:hover { - transform: scale(2); +.menu > div { + display: flex; + justify-content: space-between; } -@media(max-width:768px) { - .avatar_bar { - justify-content: center; - text-align: center; - flex-direction: column; - } - - .avatar_bar h1 { - font-size: 2em; - } +.menu .items { + display: flex; + gap: 1.5em; +} - .avatar { - width: 40vw; - height: auto; - } +.menu a { + display: flex; + align-items: center; +} - .page { - width: 100%; - } +.menu .title > img { + height: 3em; +} - .content { - margin: 0 10px; - } +.menu .title { + margin: -20px 0; + gap: 5px; + font-size: 0.8em; +} - .main { - flex-direction: column; - } +.footer { + text-align: center; + color: white; } \ No newline at end of file diff --git a/styles/Old.module.css b/styles/Old.module.css new file mode 100644 index 0000000..8019df8 --- /dev/null +++ b/styles/Old.module.css @@ -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; + } +} \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index e1cc045..e0dd511 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap'); + html, body { padding: 0; @@ -15,3 +17,7 @@ a { * { box-sizing: border-box; } + +h1, h2, h3 { + font-family: 'Dela Gothic One', cursive; +} \ No newline at end of file