root
3 years ago
parent
3b2b92c4bc
commit
9c5b8778ea
@ -1,35 +1,35 @@
|
|||||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
secrets.json
|
secrets.json
|
||||||
|
|
||||||
# dependencies
|
# dependencies
|
||||||
/node_modules
|
/node_modules
|
||||||
/.pnp
|
/.pnp
|
||||||
.pnp.js
|
.pnp.js
|
||||||
|
|
||||||
# testing
|
# testing
|
||||||
/coverage
|
/coverage
|
||||||
|
|
||||||
# next.js
|
# next.js
|
||||||
/.next/
|
/.next/
|
||||||
/out/
|
/out/
|
||||||
|
|
||||||
# production
|
# production
|
||||||
/build
|
/build
|
||||||
|
|
||||||
# misc
|
# misc
|
||||||
.DS_Store
|
.DS_Store
|
||||||
*.pem
|
*.pem
|
||||||
|
|
||||||
# debug
|
# debug
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
|
||||||
# local env files
|
# local env files
|
||||||
.env.local
|
.env.local
|
||||||
.env.development.local
|
.env.development.local
|
||||||
.env.test.local
|
.env.test.local
|
||||||
.env.production.local
|
.env.production.local
|
||||||
|
|
||||||
# vercel
|
# vercel
|
||||||
.vercel
|
.vercel
|
||||||
|
|||||||
@ -1,34 +1,34 @@
|
|||||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||||
|
|
||||||
## Getting Started
|
## Getting Started
|
||||||
|
|
||||||
First, run the development server:
|
First, run the development server:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run dev
|
npm run dev
|
||||||
# or
|
# or
|
||||||
yarn dev
|
yarn dev
|
||||||
```
|
```
|
||||||
|
|
||||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||||
|
|
||||||
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
|
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
|
||||||
|
|
||||||
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
|
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
|
||||||
|
|
||||||
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
|
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
|
||||||
|
|
||||||
## Learn More
|
## Learn More
|
||||||
|
|
||||||
To learn more about Next.js, take a look at the following resources:
|
To learn more about Next.js, take a look at the following resources:
|
||||||
|
|
||||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||||
|
|
||||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||||
|
|
||||||
## Deploy on Vercel
|
## Deploy on Vercel
|
||||||
|
|
||||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||||
|
|
||||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||||
|
|||||||
@ -1,57 +1,57 @@
|
|||||||
import styles from '../styles/components/Footer.module.css'
|
import styles from '../styles/components/Footer.module.css'
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
import { faHeart } from '@fortawesome/free-solid-svg-icons'
|
import { faHeart } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className={styles.footer}>
|
<div className={styles.footer}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<p>
|
<p>
|
||||||
<b>
|
<b>
|
||||||
Made with <FontAwesomeIcon icon={faHeart} style={{color: "#63C5DA"}} size="1x" id="clickMeow" onClick={() => updateMeowCount()} /> by <a href="https://dubbelnull.com" className="link" target="_blank">DubbelNull</a>
|
Made with <FontAwesomeIcon icon={faHeart} style={{color: "#63C5DA"}} size="1x" id="clickMeow" onClick={() => updateMeowCount()} /> by <a href="https://dubbelnull.com" className="link" target="_blank">DubbelNull</a>
|
||||||
</b>
|
</b>
|
||||||
<br/>
|
<br/>
|
||||||
NextJS // Vercel // Airtable
|
NextJS // Vercel // Airtable
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="js/meow.js"></script>
|
<script src="js/meow.js"></script>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
async function updateMeowCount() {
|
async function updateMeowCount() {
|
||||||
const getMeow = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Meows", {
|
const getMeow = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Meows", {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
"Authorization": "Bearer " + process.env.AIRTABLE,
|
"Authorization": "Bearer " + process.env.AIRTABLE,
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
let meowCount = await getMeow.json();
|
let meowCount = await getMeow.json();
|
||||||
meowCount = parseInt(meowCount['records'][0]['fields']['count']);
|
meowCount = parseInt(meowCount['records'][0]['fields']['count']);
|
||||||
meowCount++;
|
meowCount++;
|
||||||
|
|
||||||
const updateMeow = {
|
const updateMeow = {
|
||||||
"records": [
|
"records": [
|
||||||
{
|
{
|
||||||
"id": "recR9RbScmJUPGQem",
|
"id": "recR9RbScmJUPGQem",
|
||||||
"fields": {
|
"fields": {
|
||||||
"count": meowCount + ""
|
"count": meowCount + ""
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Meows", {
|
await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Meows", {
|
||||||
method: "PATCH",
|
method: "PATCH",
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
"Authorization": "Bearer " + process.env.AIRTABLE,
|
"Authorization": "Bearer " + process.env.AIRTABLE,
|
||||||
"accept": "application/json",
|
"accept": "application/json",
|
||||||
},
|
},
|
||||||
body: JSON.stringify(updateMeow)
|
body: JSON.stringify(updateMeow)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -1,27 +1,27 @@
|
|||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import styles from '../styles/components/Header.module.css'
|
import styles from '../styles/components/Header.module.css'
|
||||||
|
|
||||||
const Header = () => (
|
const Header = () => (
|
||||||
<div>
|
<div>
|
||||||
<Head>
|
<Head>
|
||||||
<link rel="icon" href="/sign.png" />
|
<link rel="icon" href="/sign.png" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<div className={styles.colorfulbar}></div>
|
<div className={styles.colorfulbar}></div>
|
||||||
|
|
||||||
<div className={styles.menu}>
|
<div className={styles.menu}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<a href="/" className={styles.title}><img src="/sign.png"></img> <h2>Trick The Fox</h2></a>
|
<a href="/" className={styles.title}><img src="/sign.png"></img> <h2>Trick The Fox</h2></a>
|
||||||
|
|
||||||
<div className={styles.items}>
|
<div className={styles.items}>
|
||||||
{/* <a href="/">Home</a> */}
|
{/* <a href="/">Home</a> */}
|
||||||
<a href="/commissions">Commissions</a>
|
<a href="/commissions">Commissions</a>
|
||||||
<a href="/gallery">Gallery</a>
|
<a href="/gallery">Gallery</a>
|
||||||
<a href="/contact">Contact</a>
|
<a href="/contact">Contact</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
export default Header
|
export default Header
|
||||||
@ -1,17 +1,17 @@
|
|||||||
import styles from '../styles/components/Socials.module.css'
|
import styles from '../styles/components/Socials.module.css'
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
|
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
|
||||||
import { faTwitch } from '@fortawesome/free-brands-svg-icons'
|
import { faTwitch } from '@fortawesome/free-brands-svg-icons'
|
||||||
import { faTrello } from '@fortawesome/free-brands-svg-icons'
|
import { faTrello } from '@fortawesome/free-brands-svg-icons'
|
||||||
import { faMugHot } from '@fortawesome/free-solid-svg-icons'
|
import { faPatreon } from '@fortawesome/free-brands-svg-icons'
|
||||||
|
|
||||||
const Socials = () => (
|
const Socials = () => (
|
||||||
<section className={styles.buttons}>
|
<section className={styles.buttons}>
|
||||||
<a href="https://twitter.com/Trick_the_fox" target="_blank"><FontAwesomeIcon icon={faTwitter} size="1x" /> Twitter</a>
|
<a href="https://twitter.com/Trick_the_fox" target="_blank"><FontAwesomeIcon icon={faTwitter} size="1x" /> Twitter</a>
|
||||||
<a href="https://www.twitch.tv/trick_the_fox" target="_blank"><FontAwesomeIcon icon={faTwitch} size="1x" /> Twitch</a>
|
<a href="https://www.twitch.tv/trick_the_fox" target="_blank"><FontAwesomeIcon icon={faTwitch} size="1x" /> Twitch</a>
|
||||||
<a href="https://trello.com/b/cMyTLWYd" target="_blank"><FontAwesomeIcon icon={faTrello} size="1x" /> Trello</a>
|
<a href="https://trello.com/b/cMyTLWYd" target="_blank"><FontAwesomeIcon icon={faTrello} size="1x" /> Trello</a>
|
||||||
<a href="https://ko-fi.com/trick_the_fox" target="_blank"><FontAwesomeIcon icon={faMugHot} size="1x" /> Ko-fi</a>
|
<a href="https://www.patreon.com/trickthefox" target="_blank"><FontAwesomeIcon icon={faPatreon} size="1x" /> Patreon</a>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
|
|
||||||
export default Socials
|
export default Socials
|
||||||
@ -1,18 +1,18 @@
|
|||||||
import styles from '../styles/components/TwitchPopup.module.css'
|
import styles from '../styles/components/TwitchPopup.module.css'
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
import { faTwitch } from '@fortawesome/free-brands-svg-icons'
|
import { faTwitch } from '@fortawesome/free-brands-svg-icons'
|
||||||
import { faMicrophoneAlt } from '@fortawesome/free-solid-svg-icons'
|
import { faMicrophoneAlt } from '@fortawesome/free-solid-svg-icons'
|
||||||
import { TwitchEmbed } from 'react-twitch-embed';
|
import { TwitchEmbed } from 'react-twitch-embed';
|
||||||
|
|
||||||
export default function TwitchPopup({ show }) {
|
export default function TwitchPopup({ show }) {
|
||||||
if(show == true) {
|
if(show == true) {
|
||||||
return (
|
return (
|
||||||
<div className="card" style={{ backgroundColor: "rgba(79,79,255,1)", marginBottom: "1em" }}>
|
<div className="card" style={{ backgroundColor: "rgba(79,79,255,1)", marginBottom: "1em" }}>
|
||||||
<h1 className={styles.h1}><FontAwesomeIcon icon={faTwitch} size="1x" /> I'm currently live on Twitch! <FontAwesomeIcon icon={faMicrophoneAlt} size="1x" /></h1>
|
<h1 className={styles.h1}><FontAwesomeIcon icon={faTwitch} size="1x" /> I'm currently live on Twitch! <FontAwesomeIcon icon={faMicrophoneAlt} size="1x" /></h1>
|
||||||
<TwitchEmbed id="trick_the_fox" channel="trick_the_fox" theme="dark" autoplay="true" width="100%" withChat={false} />
|
<TwitchEmbed id="trick_the_fox" channel="trick_the_fox" theme="dark" autoplay="true" width="100%" withChat={false} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
return ( <span></span> )
|
return ( <span></span> )
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,2 +1,2 @@
|
|||||||
/// <reference types="next" />
|
/// <reference types="next" />
|
||||||
/// <reference types="next/types/global" />
|
/// <reference types="next/types/global" />
|
||||||
|
|||||||
@ -1,14 +1,14 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
webpack: (config, options) => {
|
webpack: (config, options) => {
|
||||||
config.module.rules.push(
|
config.module.rules.push(
|
||||||
{
|
{
|
||||||
test: /\.(jpe?g|png|jpg|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
|
test: /\.(jpe?g|png|jpg|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
|
||||||
loader: 'url-loader?limit=100000'
|
loader: 'url-loader?limit=100000'
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
return config
|
return config
|
||||||
},
|
},
|
||||||
env: {
|
env: {
|
||||||
AIRTABLE: "keygkEz5Bp89HsIJt",
|
AIRTABLE: "keygkEz5Bp89HsIJt",
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@ -1,29 +1,29 @@
|
|||||||
{
|
{
|
||||||
"name": "nextjs",
|
"name": "nextjs",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start"
|
"start": "next start"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/fontawesome-free": "^5.15.3",
|
"@fortawesome/fontawesome-free": "^5.15.3",
|
||||||
"@fortawesome/fontawesome-svg-core": "^1.2.35",
|
"@fortawesome/fontawesome-svg-core": "^1.2.35",
|
||||||
"@fortawesome/free-brands-svg-icons": "^5.15.3",
|
"@fortawesome/free-brands-svg-icons": "^5.15.3",
|
||||||
"@fortawesome/free-solid-svg-icons": "^5.15.3",
|
"@fortawesome/free-solid-svg-icons": "^5.15.3",
|
||||||
"@fortawesome/react-fontawesome": "^0.1.14",
|
"@fortawesome/react-fontawesome": "^0.1.14",
|
||||||
"@types/react": "^17.0.11",
|
"@types/react": "^17.0.11",
|
||||||
"airtable": "^0.11.1",
|
"airtable": "^0.11.1",
|
||||||
"googleapis": "^78.0.0",
|
"googleapis": "^78.0.0",
|
||||||
"next": "10.x",
|
"next": "10.x",
|
||||||
"next-images": "^1.8.1",
|
"next-images": "^1.8.1",
|
||||||
"react": "17.x",
|
"react": "17.x",
|
||||||
"react-dom": "17.x",
|
"react-dom": "17.x",
|
||||||
"react-twitch-embed": "^2.1.0",
|
"react-twitch-embed": "^2.1.0",
|
||||||
"typescript": "^4.3.4"
|
"typescript": "^4.3.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"url-loader": "^4.1.1"
|
"url-loader": "^4.1.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,19 +1,19 @@
|
|||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import styles from '../styles/Gallery.module.css'
|
import styles from '../styles/Gallery.module.css'
|
||||||
import Header from '../components/header';
|
import Header from '../components/header';
|
||||||
import Footer from '../components/footer';
|
import Footer from '../components/footer';
|
||||||
|
|
||||||
export default function Custom404() {
|
export default function Custom404() {
|
||||||
return (
|
return (
|
||||||
<div style={{ width: "100vw", height: "100vh" }}>
|
<div style={{ width: "100vw", height: "100vh" }}>
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<section style={{ color: "white", display: "flex", height: "50vh", margin: "unset", justifyContent: "center", alignItems: "center", gap: "2em" }}>
|
<section style={{ color: "white", display: "flex", height: "50vh", margin: "unset", justifyContent: "center", alignItems: "center", gap: "2em" }}>
|
||||||
<h1>404</h1> <h4>|</h4> <h1>Page Not Found</h1>
|
<h1>404</h1> <h4>|</h4> <h1>Page Not Found</h1>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1,18 +1,18 @@
|
|||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import styles from '../styles/Gallery.module.css'
|
import styles from '../styles/Gallery.module.css'
|
||||||
import Header from '../components/header';
|
import Header from '../components/header';
|
||||||
import Footer from '../components/footer';
|
import Footer from '../components/footer';
|
||||||
|
|
||||||
export default function Custom500() {
|
export default function Custom500() {
|
||||||
return (
|
return (
|
||||||
<div style={{ width: "100vw", height: "100vh" }}>
|
<div style={{ width: "100vw", height: "100vh" }}>
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<section style={{ color: "white", display: "flex", height: "50vh", margin: "unset", justifyContent: "center", alignItems: "center", gap: "2em" }}>
|
<section style={{ color: "white", display: "flex", height: "50vh", margin: "unset", justifyContent: "center", alignItems: "center", gap: "2em" }}>
|
||||||
<h1>500</h1> <h4>|</h4> <h1>Internal Server Error</h1>
|
<h1>500</h1> <h4>|</h4> <h1>Internal Server Error</h1>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -1,11 +1,11 @@
|
|||||||
import '../styles/globals.css'
|
import '../styles/globals.css'
|
||||||
|
|
||||||
import '@fortawesome/fontawesome-svg-core/styles.css';
|
import '@fortawesome/fontawesome-svg-core/styles.css';
|
||||||
import { config } from '@fortawesome/fontawesome-svg-core';
|
import { config } from '@fortawesome/fontawesome-svg-core';
|
||||||
config.autoAddCss = false; /* eslint-disable import/first */
|
config.autoAddCss = false; /* eslint-disable import/first */
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }) {
|
function MyApp({ Component, pageProps }) {
|
||||||
return <Component {...pageProps} />
|
return <Component {...pageProps} />
|
||||||
}
|
}
|
||||||
|
|
||||||
export default MyApp
|
export default MyApp
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||||
|
|
||||||
export default (req, res) => {
|
export default (req, res) => {
|
||||||
res.statusCode = 200
|
res.statusCode = 200
|
||||||
res.json({ name: 'John Doe' })
|
res.json({ name: 'John Doe' })
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,128 +1,128 @@
|
|||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import styles from '../styles/Commissions.module.css'
|
import styles from '../styles/Commissions.module.css'
|
||||||
import Header from '../components/header';
|
import Header from '../components/header';
|
||||||
import Footer from '../components/footer';
|
import Footer from '../components/footer';
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
import { faPoundSign } from '@fortawesome/free-solid-svg-icons'
|
import { faPoundSign } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
export default function Commissions() {
|
export default function Commissions() {
|
||||||
return (
|
return (
|
||||||
<div className="page">
|
<div className="page">
|
||||||
<Head>
|
<Head>
|
||||||
<title>Trick - Commissions</title>
|
<title>Trick - Commissions</title>
|
||||||
|
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:url" content="https://trickthefox.com/commissions" />
|
<meta property="og:url" content="https://trickthefox.com/commissions" />
|
||||||
<meta property="og:title" content="Trick - Commissions" />
|
<meta property="og:title" content="Trick - Commissions" />
|
||||||
<meta property="og:description" content="Trick's commission sheet!" />
|
<meta property="og:description" content="Trick's commission sheet!" />
|
||||||
<meta property="og:image" content="/trick.jpg" />
|
<meta property="og:image" content="/trick.jpg" />
|
||||||
|
|
||||||
<meta property="twitter:card" content="summary_large_image" />
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
<meta property="twitter:url" content="https://trickthefox.com/commissions" />
|
<meta property="twitter:url" content="https://trickthefox.com/commissions" />
|
||||||
<meta property="twitter:title" content="Trick - Commissions" />
|
<meta property="twitter:title" content="Trick - Commissions" />
|
||||||
<meta property="twitter:description" content="Trick's commission sheet!" />
|
<meta property="twitter:description" content="Trick's commission sheet!" />
|
||||||
<meta property="twitter:image" content="/trick.jpg" />
|
<meta property="twitter:image" content="/trick.jpg" />
|
||||||
|
|
||||||
<meta name="theme-color" content="#4f4fff" />
|
<meta name="theme-color" content="#4f4fff" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<article className="content">
|
<article className="content">
|
||||||
|
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<h1 className="h-unset">Commission sheet</h1>
|
<h1 className="h-unset">Commission sheet</h1>
|
||||||
<h4 className="h-unset"><a href="/contact" className="link">Contact me</a> for more information.</h4>
|
<h4 className="h-unset"><a href="/contact" className="link">Contact me</a> for more information.</h4>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<section className={styles.row}>
|
<section className={styles.row}>
|
||||||
<div>
|
<div>
|
||||||
<h2>Headshot Icon</h2>
|
<h2>Headshot Icon</h2>
|
||||||
<p><FontAwesomeIcon icon={faPoundSign} size="1x" /> 15+</p>
|
<p><FontAwesomeIcon icon={faPoundSign} size="1x" /> 15+</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.gapped}>
|
<div className={styles.gapped}>
|
||||||
<div>
|
<div>
|
||||||
<img src="/vulpirius_foxx_headshot.png"></img>
|
<img src="/vulpirius_foxx_headshot.png"></img>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img src="/trickdounut.png"></img>
|
<img src="/trickdounut.png"></img>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<section className={styles.row}>
|
<section className={styles.row}>
|
||||||
<div>
|
<div>
|
||||||
<h2>Full body artworks</h2>
|
<h2>Full body artworks</h2>
|
||||||
<p><FontAwesomeIcon icon={faPoundSign} size="1x" /> 25+ for one peep</p>
|
<p><FontAwesomeIcon icon={faPoundSign} size="1x" /> 25+ for one peep</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.gapped}>
|
<div className={styles.gapped}>
|
||||||
<div>
|
<div>
|
||||||
<img src="/!wow.png"></img>
|
<img src="/!wow.png"></img>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<section className={styles.row}>
|
<section className={styles.row}>
|
||||||
<div>
|
<div>
|
||||||
<h2>Ref sheets</h2>
|
<h2>Ref sheets</h2>
|
||||||
<p><FontAwesomeIcon icon={faPoundSign} size="1x" /> 30+ extras</p>
|
<p><FontAwesomeIcon icon={faPoundSign} size="1x" /> 30+ extras</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.gapped}>
|
<div className={styles.gapped}>
|
||||||
<div>
|
<div>
|
||||||
<img src="/trick_ref_3.png"></img>
|
<img src="/trick_ref_3.png"></img>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<section className={styles.row}>
|
<section className={styles.row}>
|
||||||
<div>
|
<div>
|
||||||
<h2>NSFW Commissions</h2>
|
<h2>NSFW Commissions</h2>
|
||||||
<p><FontAwesomeIcon icon={faPoundSign} size="1x" /> 30+ per peep</p>
|
<p><FontAwesomeIcon icon={faPoundSign} size="1x" /> 30+ per peep</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.gapped}>
|
<div className={styles.gapped}>
|
||||||
<div>
|
<div>
|
||||||
<img src="/owwwo.png"></img>
|
<img src="/owwwo.png"></img>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<section className={styles.row}>
|
<section className={styles.row}>
|
||||||
<div>
|
<div>
|
||||||
<h2>Large Group Artworks</h2>
|
<h2>Large Group Artworks</h2>
|
||||||
<p>
|
<p>
|
||||||
<FontAwesomeIcon icon={faPoundSign} size="1x" /> 100+ for 8 peeps <br />
|
<FontAwesomeIcon icon={faPoundSign} size="1x" /> 100+ for 8 peeps <br />
|
||||||
<FontAwesomeIcon icon={faPoundSign} size="1x" /> 15+ per extra peep
|
<FontAwesomeIcon icon={faPoundSign} size="1x" /> 15+ per extra peep
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.gapped}>
|
<div className={styles.gapped}>
|
||||||
<div>
|
<div>
|
||||||
<img src="/puppsden.png"></img>
|
<img src="/puppsden.png"></img>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,48 +1,48 @@
|
|||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import styles from '../styles/Contact.module.css'
|
import styles from '../styles/Contact.module.css'
|
||||||
import Header from '../components/header';
|
import Header from '../components/header';
|
||||||
import Footer from '../components/footer';
|
import Footer from '../components/footer';
|
||||||
import Socials from '../components/socials';
|
import Socials from '../components/socials';
|
||||||
|
|
||||||
export default function Contact() {
|
export default function Contact() {
|
||||||
return (
|
return (
|
||||||
<div className="page">
|
<div className="page">
|
||||||
<Head>
|
<Head>
|
||||||
<title>Trick - Contact</title>
|
<title>Trick - Contact</title>
|
||||||
|
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:url" content="https://trickthefox.com/contact" />
|
<meta property="og:url" content="https://trickthefox.com/contact" />
|
||||||
<meta property="og:title" content="Trick - Contact" />
|
<meta property="og:title" content="Trick - Contact" />
|
||||||
<meta property="og:description" content="Contact me via one of my social medias or by email." />
|
<meta property="og:description" content="Contact me via one of my social medias or by email." />
|
||||||
<meta property="og:image" content="/trick.jpg" />
|
<meta property="og:image" content="/trick.jpg" />
|
||||||
|
|
||||||
<meta property="twitter:card" content="summary_large_image" />
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
<meta property="twitter:url" content="https://trickthefox.com/contact" />
|
<meta property="twitter:url" content="https://trickthefox.com/contact" />
|
||||||
<meta property="twitter:title" content="Trick - Contact" />
|
<meta property="twitter:title" content="Trick - Contact" />
|
||||||
<meta property="twitter:description" content="Contact me via one of my social medias or by email." />
|
<meta property="twitter:description" content="Contact me via one of my social medias or by email." />
|
||||||
<meta property="twitter:image" content="/trick.jpg" />
|
<meta property="twitter:image" content="/trick.jpg" />
|
||||||
|
|
||||||
<meta name="theme-color" content="#4f4fff" />
|
<meta name="theme-color" content="#4f4fff" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<article className="content">
|
<article className="content">
|
||||||
|
|
||||||
<section className="card">
|
<section className="card">
|
||||||
<h1 className="h-unset">Contact</h1>
|
<h1 className="h-unset">Contact</h1>
|
||||||
<p>You can contact me through one of the methods displayed below, or by emailing me at <a href="mailto:trick@trickthefox.com" className="link">trick@trickthefox.com</a>.</p>
|
<p>You can contact me through one of the methods displayed below, or by emailing me at <a href="mailto:trick@trickthefox.com" className="link">trick@trickthefox.com</a>.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<Socials />
|
<Socials />
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,82 +1,82 @@
|
|||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import styles from '../styles/Gallery.module.css'
|
import styles from '../styles/Gallery.module.css'
|
||||||
import Header from '../components/header';
|
import Header from '../components/header';
|
||||||
import Footer from '../components/footer';
|
import Footer from '../components/footer';
|
||||||
|
|
||||||
export default function Gallery({ response }) {
|
export default function Gallery({ response }) {
|
||||||
let images = [];
|
let images = [];
|
||||||
for(const key in response) {
|
for(const key in response) {
|
||||||
let item = response[key];
|
let item = response[key];
|
||||||
if(item['fields']['image'] != null) item['fields']['link'] = item['fields']['image'][0]['url'];
|
if(item['fields']['image'] != null) item['fields']['link'] = item['fields']['image'][0]['url'];
|
||||||
images.push(item['fields']);
|
images.push(item['fields']);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="page">
|
<div className="page">
|
||||||
<Head>
|
<Head>
|
||||||
<title>Trick - Gallery</title>
|
<title>Trick - Gallery</title>
|
||||||
|
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:url" content="https://trickthefox.com/gallery" />
|
<meta property="og:url" content="https://trickthefox.com/gallery" />
|
||||||
<meta property="og:title" content="Trick - Gallery" />
|
<meta property="og:title" content="Trick - Gallery" />
|
||||||
<meta property="og:description" content="Gallery of art I made." />
|
<meta property="og:description" content="Gallery of art I made." />
|
||||||
<meta property="og:image" content="/trick.jpg" />
|
<meta property="og:image" content="/trick.jpg" />
|
||||||
|
|
||||||
<meta property="twitter:card" content="summary_large_image" />
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
<meta property="twitter:url" content="https://trickthefox.com/gallery" />
|
<meta property="twitter:url" content="https://trickthefox.com/gallery" />
|
||||||
<meta property="twitter:title" content="Trick - Gallery" />
|
<meta property="twitter:title" content="Trick - Gallery" />
|
||||||
<meta property="twitter:description" content="Gallery of art I made." />
|
<meta property="twitter:description" content="Gallery of art I made." />
|
||||||
<meta property="twitter:image" content="/trick.jpg" />
|
<meta property="twitter:image" content="/trick.jpg" />
|
||||||
|
|
||||||
<meta name="theme-color" content="#4f4fff" />
|
<meta name="theme-color" content="#4f4fff" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<article className="content">
|
<article className="content">
|
||||||
|
|
||||||
<section className="card">
|
<section className="card">
|
||||||
<h1 className="h-unset">Gallery</h1>
|
<h1 className="h-unset">Gallery</h1>
|
||||||
|
|
||||||
<div className={styles.gallery}>
|
<div className={styles.gallery}>
|
||||||
{images.map((image) => (
|
{images.map((image) => (
|
||||||
<div key={image.link.toString()}>
|
<div key={image.link.toString()}>
|
||||||
<img src={image.link}></img>
|
<img src={image.link}></img>
|
||||||
<div className={styles.overlay}>
|
<div className={styles.overlay}>
|
||||||
<h4 style={{ textAlign: "center", margin: "unset" }}>{image.name}</h4>
|
<h4 style={{ textAlign: "center", margin: "unset" }}>{image.name}</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getGallery() {
|
async function getGallery() {
|
||||||
const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Gallery", {
|
const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Gallery", {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
"Authorization": "Bearer " + process.env.AIRTABLE,
|
"Authorization": "Bearer " + process.env.AIRTABLE,
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const data = await req.json();
|
const data = await req.json();
|
||||||
return data['records'];
|
return data['records'];
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getServerSideProps() {
|
export async function getServerSideProps() {
|
||||||
return {
|
return {
|
||||||
props: {
|
props: {
|
||||||
response: await getGallery()
|
response: await getGallery()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,158 +1,158 @@
|
|||||||
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 Header from '../components/header';
|
import Header from '../components/header';
|
||||||
import Footer from '../components/footer';
|
import Footer from '../components/footer';
|
||||||
import Socials from '../components/socials';
|
import Socials from '../components/socials';
|
||||||
import TwitchPopup from '../components/twitchpopup';
|
import TwitchPopup from '../components/twitchpopup';
|
||||||
|
|
||||||
const client_id = "edpx4oisrkpnrlx47b7a2p3govy6qm";
|
const client_id = "edpx4oisrkpnrlx47b7a2p3govy6qm";
|
||||||
const client_secret = "dqr2glvdhr7uyn3bf3biu48977rfwo";
|
const client_secret = "dqr2glvdhr7uyn3bf3biu48977rfwo";
|
||||||
|
|
||||||
export default function Index({ motto, twitch_online, about }) {
|
export default function Index({ motto, twitch_online, about }) {
|
||||||
return (
|
return (
|
||||||
<div className="page">
|
<div className="page">
|
||||||
<Head>
|
<Head>
|
||||||
<title>Trick - Homepage</title>
|
<title>Trick - Homepage</title>
|
||||||
<meta name="description" content={about.toString()} />
|
<meta name="description" content={about.toString()} />
|
||||||
|
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:url" content="https://trickthefox.com/" />
|
<meta property="og:url" content="https://trickthefox.com/" />
|
||||||
<meta property="og:title" content="Trick - Homepage" />
|
<meta property="og:title" content="Trick - Homepage" />
|
||||||
<meta property="og:description" content={about.toString()} />
|
<meta property="og:description" content={about.toString()} />
|
||||||
<meta property="og:image" content="/trick.jpg" />
|
<meta property="og:image" content="/trick.jpg" />
|
||||||
|
|
||||||
<meta property="twitter:card" content="summary_large_image" />
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
<meta property="twitter:url" content="https://trickthefox.com/" />
|
<meta property="twitter:url" content="https://trickthefox.com/" />
|
||||||
<meta property="twitter:title" content="Trick - Homepage" />
|
<meta property="twitter:title" content="Trick - Homepage" />
|
||||||
<meta property="twitter:description" content={about.toString()} />
|
<meta property="twitter:description" content={about.toString()} />
|
||||||
<meta property="twitter:image" content="/trick.jpg" />
|
<meta property="twitter:image" content="/trick.jpg" />
|
||||||
|
|
||||||
<meta name="theme-color" content="#4f4fff" />
|
<meta name="theme-color" content="#4f4fff" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<article className="content">
|
<article className="content">
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<TwitchPopup show={twitch_online} />
|
<TwitchPopup show={twitch_online} />
|
||||||
|
|
||||||
<section className="card">
|
<section className="card">
|
||||||
<div className={styles.avatar}>
|
<div className={styles.avatar}>
|
||||||
<div>
|
<div>
|
||||||
<img src="/trickwow.png"></img>
|
<img src="/trickwow.png"></img>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h1>Hi, I'm Trick!</h1>
|
<h1>Hi, I'm Trick!</h1>
|
||||||
<h4>{motto}</h4>
|
<h4>{motto}</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3>About me</h3>
|
<h3>About me</h3>
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
<p>
|
<p>
|
||||||
{about}
|
{about}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Socials />
|
<Socials />
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getAboutText() {
|
async function getAboutText() {
|
||||||
const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Locale", {
|
const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Locale", {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
"Authorization": "Bearer " + process.env.AIRTABLE,
|
"Authorization": "Bearer " + process.env.AIRTABLE,
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const data = await req.json();
|
const data = await req.json();
|
||||||
for(const key in data['records']) {
|
for(const key in data['records']) {
|
||||||
if(data['records'][key]['fields']['field'] == "about") {
|
if(data['records'][key]['fields']['field'] == "about") {
|
||||||
return data['records'][key]['fields']['value'];
|
return data['records'][key]['fields']['value'];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getMottos() {
|
async function getMottos() {
|
||||||
const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Mottos", {
|
const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Mottos", {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
"Authorization": "Bearer " + process.env.AIRTABLE,
|
"Authorization": "Bearer " + process.env.AIRTABLE,
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const data = await req.json();
|
const data = await req.json();
|
||||||
|
|
||||||
let mottoArray = [];
|
let mottoArray = [];
|
||||||
for(const key in data['records']) {
|
for(const key in data['records']) {
|
||||||
mottoArray.push(data['records'][key]['fields']['motto']);
|
mottoArray.push(data['records'][key]['fields']['motto']);
|
||||||
}
|
}
|
||||||
|
|
||||||
return mottoArray;
|
return mottoArray;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getAccessToken() {
|
async function getAccessToken() {
|
||||||
const req = await fetch("https://id.twitch.tv/oauth2/token?client_id=" + client_id + "&client_secret=" + client_secret + "&grant_type=client_credentials", {
|
const req = await fetch("https://id.twitch.tv/oauth2/token?client_id=" + client_id + "&client_secret=" + client_secret + "&grant_type=client_credentials", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const data = await req.json();
|
const data = await req.json();
|
||||||
return data['access_token'];
|
return data['access_token'];
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getIsUserLive() {
|
async function getIsUserLive() {
|
||||||
const access_token = await getAccessToken();
|
const access_token = await getAccessToken();
|
||||||
let userId = 268280947; // trick_the_fox;
|
let userId = 268280947; // trick_the_fox;
|
||||||
|
|
||||||
const req = await fetch("https://api.twitch.tv/helix/streams?user_id=" + userId, {
|
const req = await fetch("https://api.twitch.tv/helix/streams?user_id=" + userId, {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
"Authorization": "Bearer " + access_token,
|
"Authorization": "Bearer " + access_token,
|
||||||
"Client-ID": client_id,
|
"Client-ID": client_id,
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
const data = await req.json();
|
const data = await req.json();
|
||||||
if(data['data'].length > 0) {
|
if(data['data'].length > 0) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function RandomMotto() {
|
async function RandomMotto() {
|
||||||
const Mottos = await getMottos();
|
const Mottos = await getMottos();
|
||||||
const randomNumber = Math.floor(Math.random() * Mottos.length);
|
const randomNumber = Math.floor(Math.random() * Mottos.length);
|
||||||
return Mottos[randomNumber];
|
return Mottos[randomNumber];
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getServerSideProps() {
|
export async function getServerSideProps() {
|
||||||
return {
|
return {
|
||||||
props: {
|
props: {
|
||||||
motto: await RandomMotto(),
|
motto: await RandomMotto(),
|
||||||
twitch_online: await getIsUserLive(),
|
twitch_online: await getIsUserLive(),
|
||||||
about: await getAboutText()
|
about: await getAboutText()
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
const soundBtn = document.querySelector('#clickMeow');
|
const soundBtn = document.querySelector('#clickMeow');
|
||||||
soundBtn.addEventListener('click',() => {
|
soundBtn.addEventListener('click',() => {
|
||||||
let meow = new Audio("/sounds/meow.mp3");
|
let meow = new Audio("/sounds/meow.mp3");
|
||||||
meow.volume = 0.1;
|
meow.volume = 0.1;
|
||||||
meow.play();
|
meow.play();
|
||||||
});
|
});
|
||||||
@ -1,33 +1,33 @@
|
|||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: 2em;
|
gap: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row img {
|
.row img {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.gapped {
|
.gapped {
|
||||||
width: 500px;
|
width: 500px;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price {
|
.price {
|
||||||
background-color: var(--theme-color);
|
background-color: var(--theme-color);
|
||||||
padding: 0.3em 0.7em;
|
padding: 0.3em 0.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* mobile */
|
/* mobile */
|
||||||
@media (max-aspect-ratio: 5/6) {
|
@media (max-aspect-ratio: 5/6) {
|
||||||
.row {
|
.row {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.gapped {
|
.gapped {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,50 +1,50 @@
|
|||||||
.gallery {
|
.gallery {
|
||||||
column-count: 4;
|
column-count: 4;
|
||||||
column-gap: 1em;
|
column-gap: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery > div {
|
.gallery > div {
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery > div > img {
|
.gallery > div > img {
|
||||||
margin-bottom: -5px;
|
margin-bottom: -5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: .5s ease;
|
transition: .5s ease;
|
||||||
background-color: rgba(0, 0, 0, 0.8);
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery > div:hover .overlay {
|
.gallery > div:hover .overlay {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* mobile */
|
/* mobile */
|
||||||
@media (max-aspect-ratio: 1/1) {
|
@media (max-aspect-ratio: 1/1) {
|
||||||
.gallery {
|
.gallery {
|
||||||
column-count: 2;
|
column-count: 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-aspect-ratio: 5/7) {
|
@media (max-aspect-ratio: 5/7) {
|
||||||
.gallery {
|
.gallery {
|
||||||
column-count: 1;
|
column-count: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,59 +1,59 @@
|
|||||||
.avatar {
|
.avatar {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 2em;
|
gap: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar div:last-child {
|
.avatar div:last-child {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar div:last-child > * {
|
.avatar div:last-child > * {
|
||||||
margin: unset;
|
margin: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar h1 {
|
.avatar h1 {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar h4 {
|
.avatar h4 {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar > div:first-child {
|
.avatar > div:first-child {
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
transition-duration: 0.3s;
|
transition-duration: 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar > div:first-child > img {
|
.avatar > div:first-child > img {
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar > div:first-child:hover {
|
.avatar > div:first-child:hover {
|
||||||
transition-duration: 0.3s;
|
transition-duration: 0.3s;
|
||||||
transform: scale(1.1) rotate(-20deg);
|
transform: scale(1.1) rotate(-20deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* mobile */
|
/* mobile */
|
||||||
@media (max-aspect-ratio: 4/5) {
|
@media (max-aspect-ratio: 4/5) {
|
||||||
.avatar {
|
.avatar {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: unset;
|
height: unset;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
gap: unset;
|
gap: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar > div:first-child {
|
.avatar > div:first-child {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar h1 {
|
.avatar h1 {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
.footer {
|
.footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
@ -1,90 +1,90 @@
|
|||||||
.menu {
|
.menu {
|
||||||
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
|
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
|
||||||
background: #25262C;
|
background: #25262C;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 1em 2em;
|
padding: 1em 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu > div {
|
.menu > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu .items {
|
.menu .items {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu a {
|
.menu a {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0.3em 1.3em;
|
padding: 0.3em 1.3em;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu .items a:hover {
|
.menu .items a:hover {
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
background-color: rgba(79,79,255,1);
|
background-color: rgba(79,79,255,1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu .title > img {
|
.menu .title > img {
|
||||||
height: 3em;
|
height: 3em;
|
||||||
animation-name: idle-img;
|
animation-name: idle-img;
|
||||||
animation-duration: 4s;
|
animation-duration: 4s;
|
||||||
animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
||||||
animation-timing-function: ease-in-out;
|
animation-timing-function: ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu .title {
|
.menu .title {
|
||||||
margin: -20px 0;
|
margin: -20px 0;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes idle-img {
|
@keyframes idle-img {
|
||||||
0% {
|
0% {
|
||||||
margin-top: -10px;
|
margin-top: -10px;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
margin-top: -10px;
|
margin-top: -10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorfulbar {
|
.colorfulbar {
|
||||||
box-shadow: -2px -2px 10px rgba(0,0,0,0.2);
|
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%);
|
background: linear-gradient(to left, rgba(255,85,200,1) 0%, rgba(79,79,255,1) 100%, rgba(0,212,255,1) 100%);
|
||||||
background-size: 200% 100%;
|
background-size: 200% 100%;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
animation-name: colorbar-anim;
|
animation-name: colorbar-anim;
|
||||||
animation-duration: 5s;
|
animation-duration: 5s;
|
||||||
animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
||||||
animation-timing-function: ease-in-out;
|
animation-timing-function: ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes colorbar-anim {
|
@keyframes colorbar-anim {
|
||||||
0% {
|
0% {
|
||||||
background-position: 0%;
|
background-position: 0%;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
background-position: 100%;
|
background-position: 100%;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
background-position: 0;
|
background-position: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* mobile */
|
/* mobile */
|
||||||
@media(max-aspect-ratio: 4/3) {
|
@media(max-aspect-ratio: 4/3) {
|
||||||
.menu > div {
|
.menu > div {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,33 +1,33 @@
|
|||||||
.buttons {
|
.buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons > a {
|
.buttons > a {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 0.4em 2em;
|
padding: 0.4em 2em;
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
background-color: var(--theme-color);
|
background-color: var(--theme-color);
|
||||||
color: white;
|
color: white;
|
||||||
transition-duration: 0.1s;
|
transition-duration: 0.1s;
|
||||||
font-family: 'Dela Gothic One', cursive;
|
font-family: 'Dela Gothic One', cursive;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons > a:hover {
|
.buttons > a:hover {
|
||||||
transform: scale(0.95);
|
transform: scale(0.95);
|
||||||
transition-duration: 0.1s;
|
transition-duration: 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* mobile */
|
/* mobile */
|
||||||
/* @media(max-aspect-ratio: 4/3) {
|
/* @media(max-aspect-ratio: 4/3) {
|
||||||
.buttons > a {
|
.buttons > a {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
} */
|
} */
|
||||||
@ -1,3 +1,3 @@
|
|||||||
.h1 {
|
.h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -1,111 +1,111 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
background-color: #1B1C22;
|
background-color: #1B1C22;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
|
--box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
|
||||||
--theme-color: rgba(79,79,255,1);
|
--theme-color: rgba(79,79,255,1);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3 {
|
h1, h2, h3 {
|
||||||
font-family: 'Dela Gothic One', cursive;
|
font-family: 'Dela Gothic One', cursive;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link:hover {
|
.link:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-unset {
|
.h-unset {
|
||||||
margin: unset;
|
margin: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* page structure */
|
/* page structure */
|
||||||
.page {
|
.page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: #1B1C22;
|
background-color: #1B1C22;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 2em 0;
|
padding: 2em 0;
|
||||||
gap: 2em;
|
gap: 2em;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* page elements */
|
/* page elements */
|
||||||
.card {
|
.card {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
padding: 2em;
|
padding: 2em;
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #25262C;
|
background-color: #25262C;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-grow: 3;
|
flex-grow: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* mobile */
|
/* mobile */
|
||||||
@media(max-aspect-ratio: 5/4) {
|
@media(max-aspect-ratio: 5/4) {
|
||||||
.content {
|
.content {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-aspect-ratio: 3/4) {
|
@media(max-aspect-ratio: 3/4) {
|
||||||
.card {
|
.card {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(min-width: 1200px) {
|
@media(min-width: 1200px) {
|
||||||
.container {
|
.container {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in new issue