parent
27bd6c0cc3
commit
733ca0f9c3
File diff suppressed because it is too large
Load Diff
@ -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 →</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 →</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 →</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 →</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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,65 +1,51 @@
|
|||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import styles from '../styles/Home.module.css'
|
import Image from 'next/image'
|
||||||
|
import styles from '../styles/Index.module.css'
|
||||||
export default function Home() {
|
|
||||||
return (
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
<div className={styles.container}>
|
import { faDiscord } from '@fortawesome/free-brands-svg-icons'
|
||||||
<Head>
|
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
|
||||||
<title>Create Next App</title>
|
import { faSpotify } from '@fortawesome/free-brands-svg-icons'
|
||||||
<link rel="icon" href="/favicon.ico" />
|
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
|
||||||
</Head>
|
|
||||||
|
export default function Index() {
|
||||||
<main className={styles.main}>
|
return (
|
||||||
<h1 className={styles.title}>
|
<div className={styles.page}>
|
||||||
Welcome to <a href="https://nextjs.org">Next.js!</a>
|
<div className={styles.topcontainerbackg + " slide-in-right"}>
|
||||||
</h1>
|
|
||||||
|
</div>
|
||||||
<p className={styles.description}>
|
|
||||||
Get started by editing{' '}
|
<div className={styles.topcontainer + " slide-in-left"}>
|
||||||
<code className={styles.code}>pages/index.js</code>
|
<div className={styles.topcontent + " " + styles.menu}>
|
||||||
</p>
|
<a href="#">Home</a>
|
||||||
|
<a href="#">Music</a>
|
||||||
<div className={styles.grid}>
|
<a href="#">Modelling</a>
|
||||||
<a href="https://nextjs.org/docs" className={styles.card}>
|
</div>
|
||||||
<h3>Documentation →</h3>
|
<div className={styles.topcontent}>
|
||||||
<p>Find in-depth information about Next.js features and API.</p>
|
<h1>INVESVPO</h1>
|
||||||
</a>
|
<p>aka Fuhz — Elikas — C2RW</p>
|
||||||
|
</div>
|
||||||
<a href="https://nextjs.org/learn" className={styles.card}>
|
</div>
|
||||||
<h3>Learn →</h3>
|
|
||||||
<p>Learn about Next.js in an interactive course with quizzes!</p>
|
<div className={styles.bottomcontainer + " slide-in-up"}>
|
||||||
</a>
|
<div className={styles.topcontent}>
|
||||||
|
<h3>{`
|
||||||
<a
|
Hey I'm Invesvpo, I make some cool 3d models including guns and I'm trying to learn more.
|
||||||
href="https://github.com/vercel/next.js/tree/master/examples"
|
I also make music. A lot of my songs are made to be downtempo ambient songs. Check out my Spotify below.
|
||||||
className={styles.card}
|
`}</h3>
|
||||||
>
|
</div>
|
||||||
<h3>Examples →</h3>
|
|
||||||
<p>Discover and deploy boilerplate example Next.js projects.</p>
|
<div className={styles.topcontent + " " + styles.links}>
|
||||||
</a>
|
<a href="#"><p><FontAwesomeIcon icon={faTwitter} /> Twitter</p></a>
|
||||||
|
<a href="#"><p><FontAwesomeIcon icon={faSpotify} /> Spotify</p></a>
|
||||||
<a
|
<a href="#"><p><FontAwesomeIcon icon={faDiscord} /> Discord</p></a>
|
||||||
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
<a href="#"><p><FontAwesomeIcon icon={faEnvelope} /> Email</p></a>
|
||||||
className={styles.card}
|
</div>
|
||||||
>
|
|
||||||
<h3>Deploy →</h3>
|
<footer className={styles.topcontent}>
|
||||||
<p>
|
<p className="text-center">Made by DubbelNull</p>
|
||||||
Instantly deploy your Next.js site to a public URL with Vercel.
|
</footer>
|
||||||
</p>
|
</div>
|
||||||
</a>
|
|
||||||
</div>
|
</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>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,148 @@
|
|||||||
|
/* page specific overwrites css */
|
||||||
|
.page h1 {
|
||||||
|
font-size: var(--font-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page h3 {
|
||||||
|
font-size: var(--font-lg);
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* menu */
|
||||||
|
.menu {
|
||||||
|
padding: var(--padding) 0;
|
||||||
|
display: inline-flex;
|
||||||
|
gap: var(--padding-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu a::before {
|
||||||
|
content: "// ";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* page layout */
|
||||||
|
|
||||||
|
.topcontent {
|
||||||
|
width: var(--page-width);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topcontainerbackg {
|
||||||
|
height: 40vh;
|
||||||
|
background-color: #2940D3;
|
||||||
|
|
||||||
|
-ms-transform: skewX(-20deg);
|
||||||
|
-webkit-transform: skewX(-20deg);
|
||||||
|
transform: skewX(-20deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topcontainer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 40vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: end;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: white;
|
||||||
|
background-image: url('/gun.png');
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topcontainer h1 {
|
||||||
|
margin: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topcontainer p {
|
||||||
|
opacity: 50%;
|
||||||
|
margin-top: - var(--padding-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomcontainer {
|
||||||
|
height: 60vh;
|
||||||
|
background-color: #232323;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: start;
|
||||||
|
color: white;
|
||||||
|
padding-bottom: var(--padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* items */
|
||||||
|
|
||||||
|
.links {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-size: 1.5em;
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
gap: var(--padding-lg);
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links a {
|
||||||
|
padding: var(--padding) var(--padding-xl);
|
||||||
|
transition-duration: var(--transition-speed);
|
||||||
|
background-color: #2940D3;
|
||||||
|
|
||||||
|
-ms-transform: skewX(-20deg);
|
||||||
|
-webkit-transform: skewX(-20deg);
|
||||||
|
transform: skewX(-20deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.links a p {
|
||||||
|
margin: unset;
|
||||||
|
-ms-transform: skewX(20deg);
|
||||||
|
-webkit-transform: skewX(20deg);
|
||||||
|
transform: skewX(20deg);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links a:hover {
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
background-color: #1f309e;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* mobile responsivity */
|
||||||
|
|
||||||
|
@media (max-aspect-ratio: 1/1) {
|
||||||
|
.topcontent {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
.links a {
|
||||||
|
padding: 0 var(--padding-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page h1 {
|
||||||
|
font-size: var(--font-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page h3 {
|
||||||
|
font-size: var(--font-lg);
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
font-size: var(--font);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-aspect-ratio: 5/7) {
|
||||||
|
.gallery {
|
||||||
|
column-count: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue