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 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>
|
||||
import Image from 'next/image'
|
||||
import styles from '../styles/Index.module.css'
|
||||
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faDiscord } from '@fortawesome/free-brands-svg-icons'
|
||||
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
|
||||
import { faSpotify } from '@fortawesome/free-brands-svg-icons'
|
||||
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<div className={styles.topcontainerbackg + " slide-in-right"}>
|
||||
|
||||
</div>
|
||||
|
||||
<div className={styles.topcontainer + " slide-in-left"}>
|
||||
<div className={styles.topcontent + " " + styles.menu}>
|
||||
<a href="#">Home</a>
|
||||
<a href="#">Music</a>
|
||||
<a href="#">Modelling</a>
|
||||
</div>
|
||||
<div className={styles.topcontent}>
|
||||
<h1>INVESVPO</h1>
|
||||
<p>aka Fuhz — Elikas — C2RW</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.bottomcontainer + " slide-in-up"}>
|
||||
<div className={styles.topcontent}>
|
||||
<h3>{`
|
||||
Hey I'm Invesvpo, I make some cool 3d models including guns and I'm trying to learn more.
|
||||
I also make music. A lot of my songs are made to be downtempo ambient songs. Check out my Spotify below.
|
||||
`}</h3>
|
||||
</div>
|
||||
|
||||
<div className={styles.topcontent + " " + styles.links}>
|
||||
<a href="#"><p><FontAwesomeIcon icon={faTwitter} /> Twitter</p></a>
|
||||
<a href="#"><p><FontAwesomeIcon icon={faSpotify} /> Spotify</p></a>
|
||||
<a href="#"><p><FontAwesomeIcon icon={faDiscord} /> Discord</p></a>
|
||||
<a href="#"><p><FontAwesomeIcon icon={faEnvelope} /> Email</p></a>
|
||||
</div>
|
||||
|
||||
<footer className={styles.topcontent}>
|
||||
<p className="text-center">Made by DubbelNull</p>
|
||||
</footer>
|
||||
</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