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

updates

Browse Source
main
Midnight 3 years ago
parent 733ca0f9c3
commit a57cdd1c41
7 changed files with 129 additions and 38 deletions
Show Stats Download Patch File Download Diff File

11
components/head.js
Unescape View File

@ -0,0 +1,11 @@
import Head from 'next/head'
export default function HeadComponent() {
return (
<section>
<Head>
<link rel="icon" href="/logo.png" />
</Head>
</section>
)
}

19
components/menu.js
Unescape View File

@ -0,0 +1,19 @@
export default function Menu() {
return (
<section>
<style jsx>{`
div {
padding: var(--padding) 0;
display: inline-flex;
gap: var(--padding-lg);
}
`}</style>
<div>
<a href="#">Home</a>
<span>//</span>
<a href="/music">Music Feed</a>
</div>
</section>
)
}

36
pages/index.js
Unescape View File

@ -1,4 +1,6 @@
import Head from 'next/head' import Head from 'next/head'
import HeadComponent from '../components/head.js'
import Menu from '../components/menu.js'
import Image from 'next/image' import Image from 'next/image'
import styles from '../styles/Index.module.css' import styles from '../styles/Index.module.css'
@ -6,46 +8,54 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDiscord } from '@fortawesome/free-brands-svg-icons' import { faDiscord } from '@fortawesome/free-brands-svg-icons'
import { faTwitter } from '@fortawesome/free-brands-svg-icons' import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faSpotify } from '@fortawesome/free-brands-svg-icons' import { faSpotify } from '@fortawesome/free-brands-svg-icons'
import { faSoundcloud } from '@fortawesome/free-brands-svg-icons'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons' import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
export default function Index() { export default function Index() {
return ( return (
<div className={styles.page}> <div className={styles.page}>
<div className={styles.topcontainerbackg + " slide-in-right"}> <HeadComponent/>
<Head>
<title>Invesvpo | Landing Page</title>
</Head>
<div className={styles.leftsidetint + " slide-in-down"}>
<a href="/"><img src="/logo.png"/></a>
</div> </div>
<div className={styles.topcontainerbackg + " slide-in-right"}></div>
<div className={styles.topcontainer + " slide-in-left"}> <div className={styles.topcontainer + " slide-in-left"}>
<div className={styles.topcontent + " " + styles.menu}> <div className={styles.topcontent}>
<a href="#">Home</a> <Menu/>
<a href="#">Music</a>
<a href="#">Modelling</a>
</div> </div>
<div className={styles.topcontent}> <div className={styles.topcontent}>
<h1>INVESVPO</h1> <h1>INVESVPO</h1>
<p>aka Fuhz — Elikas — C2RW</p> <p><div className="badge"><span>aka</span></div> Fuhz — Elikas — C2RW</p>
</div> </div>
</div> </div>
<div className={styles.bottomcontainer + " slide-in-up"}> <div className={styles.bottomcontainer + " slide-in-up"}>
<div className={styles.topcontent}> <div className={styles.topcontent}>
<h3>{` <h3>
Hey I'm Invesvpo, I make some cool 3d models including guns and I'm trying to learn more. {`Hey I'm Invesvpo, I make some cool 3d models including guns and I'm trying to learn more about it.`} <br/>
I also make music. A lot of my songs are made to be downtempo ambient songs. Check out my Spotify below. {`I also make music, so check out my Spotify and SoundCloud below. `}<br/>
`}</h3> {`A lot of my songs are made to be downtempo ambient songs.`}
</h3>
</div> </div>
<div className={styles.topcontent + " " + styles.links}> <div className={styles.topcontent + " " + styles.links}>
<a href="#"><p><FontAwesomeIcon icon={faTwitter} /> Twitter</p></a> <a href="#"><p><FontAwesomeIcon icon={faTwitter} /> Twitter</p></a>
<a href="#"><p><FontAwesomeIcon icon={faSpotify} /> Spotify</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={faDiscord} /> Discord</p></a>
<a href="#"><p><FontAwesomeIcon icon={faEnvelope} /> Email</p></a> <a href="#"><p><FontAwesomeIcon icon={faSoundcloud} /> SoundCloud</p></a>
{/* <a href="#"><p><FontAwesomeIcon icon={faEnvelope} /> Email</p></a> */}
</div>
</div> </div>
<footer className={styles.topcontent}> <footer className={styles.topcontent}>
<p className="text-center">Made by DubbelNull</p> <a href="https://dubbelnull.com/" target="_blank">Made by DubbelNull</a> with NextJS and Vercel
</footer> </footer>
</div> </div>
</div>
) )
} }

18
pages/music.js
Unescape View File

@ -0,0 +1,18 @@
import Head from 'next/head'
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 { faSoundcloud } from '@fortawesome/free-brands-svg-icons'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
export default function Music() {
return (
<div>
</div>
)
}

BIN
public/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

30
styles/Index.module.css
Unescape View File

@ -9,18 +9,6 @@
} }
/* menu */
.menu {
padding: var(--padding) 0;
display: inline-flex;
gap: var(--padding-lg);
}
.menu a::before {
content: "// ";
}
/* page layout */ /* page layout */
.topcontent { .topcontent {
@ -66,7 +54,7 @@
} }
.bottomcontainer { .bottomcontainer {
height: 60vh; height: auto;
background-color: #232323; background-color: #232323;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -76,6 +64,16 @@
padding-bottom: var(--padding); padding-bottom: var(--padding);
} }
.leftsidetint {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 10vw;
height: 100vh;
background-color: #1a1a1a;
}
/* items */ /* items */
@ -141,8 +139,8 @@
} }
} }
@media (max-aspect-ratio: 5/7) { @media (max-aspect-ratio: 5/3) {
.gallery { .leftsidetint {
column-count: 1; display: none;
} }
} }

49
styles/globals.css
Unescape View File

@ -9,7 +9,7 @@
--font: 1em; --font: 1em;
--font-sm: 0.8em; --font-sm: 0.8em;
--page-width: 1000px; --page-width: 1200px;
--transition-speed: 0.3s; --transition-speed: 0.3s;
} }
@ -31,6 +31,8 @@ body {
margin: 0; margin: 0;
font-family: 'Dual', sans-serif; font-family: 'Dual', sans-serif;
background-color: #232323; background-color: #232323;
overflow: hidden;
color: white;
} }
h1, h2 { h1, h2 {
@ -42,8 +44,8 @@ footer {
opacity: 50%; opacity: 50%;
} }
.text-center { footer a:hover {
text-align: center; text-decoration: underline;
} }
a { a {
@ -55,12 +57,42 @@ a {
box-sizing: border-box; box-sizing: border-box;
} }
img {
max-width: 100%;
}
/* help classes */
.text-center {
text-align: center;
}
.badge {
display: inline-block;
background-color: rgba(35,35,35,0.5);
padding: var(--padding-sm) var(--padding);
margin: 0 var(--padding-sm);
-ms-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
}
.badge span {
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
display: inline-block;
}
/* animations */ /* animations */
.slide-in-right { .slide-in-right {
animation-name: slide-in-right; animation-name: slide-in-right;
animation-duration: 1s; animation-duration: 1s;
margin-right: 10vw; margin-right: 10vw;
margin-left: -10vw; margin-left: -10vw;
animation-timing-function: ease-in-out;
} }
@keyframes slide-in-right { @keyframes slide-in-right {
@ -77,6 +109,7 @@ a {
animation-name: slide-in-left; animation-name: slide-in-left;
animation-duration: 1s; animation-duration: 1s;
margin-left: 0vw; margin-left: 0vw;
animation-timing-function: ease-in-out;
} }
@keyframes slide-in-left { @keyframes slide-in-left {
@ -93,6 +126,7 @@ a {
animation-name: slide-in-up; animation-name: slide-in-up;
animation-duration: 1s; animation-duration: 1s;
margin-top: 0vh; margin-top: 0vh;
animation-timing-function: ease-in-out;
} }
@keyframes slide-in-up { @keyframes slide-in-up {
@ -106,16 +140,17 @@ a {
.slide-in-down { .slide-in-down {
animation-name: slide-in-down; animation-name: slide-in-down;
animation-duration: 0.5s; animation-duration: 1s;
overflow-y: hidden; overflow-y: hidden;
margin-bottom: 0vh; top: 0vh;
animation-timing-function: ease-in-out;
} }
@keyframes slide-in-down { @keyframes slide-in-down {
0% { 0% {
margin-bottom: 100vh; top: 100vh;
} }
100% { 100% {
margin-bottom: 0vh; top: 0vh;
} }
} }
Write Preview
Loading…
Cancel
Save