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

first steps

Browse Source
main
Midnight 3 years ago
parent 50071efc94
commit e4355f097c
14 changed files with 2396 additions and 54 deletions
Show Stats Download Patch File Download Diff File

2
next-env.d.ts vendored
Unescape View File

@ -0,0 +1,2 @@
/// <reference types="next" />
/// <reference types="next/types/global" />

2138
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
package.json
Unescape View File

@ -8,8 +8,15 @@
"start": "next start"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"@types/react": "^17.0.11",
"next": "10.x",
"react": "17.x",
"react-dom": "17.x"
"react-dom": "17.x",
"typescript": "^4.3.4"
}
}

65
pages/home.js
Unescape View File

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

110
pages/index.js
Unescape View File

@ -1,65 +1,71 @@
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import styles from '../styles/Index.module.css'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
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 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>
<div className={styles.page}>
<Head>
<title>Trick's Website</title>
<link rel="icon" href="/trick.jpg" />
</Head>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<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>
<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>
<h2><RandomMotto /></h2>
<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>
<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>
<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>
<aside className={styles.content}>
<div className={styles.links}>
<a href="https://twitter.com/Trick_the_fox" target="_blank"><FontAwesomeIcon ico={faTwitter} /> 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>
<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>
<section className={styles.container}>
<section className={styles.content}>
<h2>Gallery</h2>
<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 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/Unnamed.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/trick.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
public/trick_be_sitting_shadow.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 KiB

BIN
public/tricky_boy.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/triiiiick.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 450 KiB

BIN
public/wow.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 772 KiB

94
styles/Index.module.css
Unescape View File

@ -0,0 +1,94 @@
.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%;
}
.gallery > img:hover {
transform: scale(2);
}

1
styles/globals.css
Unescape View File

@ -4,6 +4,7 @@ body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-size: 1.1em;
}
a {

29
tsconfig.json
Unescape View File

@ -0,0 +1,29 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}
Write Preview
Loading…
Cancel
Save