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

updates

Browse Source
main
Midnight 3 years ago
parent 1b96811d5f
commit e1f92aa150
6 changed files with 111 additions and 80 deletions
Show Stats Download Patch File Download Diff File

2
components/menu.js
Unescape View File

@ -13,6 +13,8 @@ export default function Menu() {
<a href="#">Home</a> <a href="#">Home</a>
<span>//</span> <span>//</span>
<a href="/music">Music Feed</a> <a href="/music">Music Feed</a>
<span>//</span>
<a href="/models">Models</a>
</div> </div>
</section> </section>
) )

102
pages/index.js
Unescape View File

@ -20,73 +20,73 @@ export default function Index() {
<title>Invesvpo | Landing Page</title> <title>Invesvpo | Landing Page</title>
</Head> </Head>
<div className={styles.leftsidetint + " slide-in-down"}> <section className={styles.leftsidetint + " slide-in-down"}>
<a href="/"><img src="/logo.png"/></a> <a href="/"><img src="/logo.png"/></a>
<footer> <footer>
<a href="https://dubbelnull.com/" target="_blank">Made by DubbelNull</a> with NextJS and Vercel <a href="https://dubbelnull.com/" target="_blank">Made by DubbelNull</a> with NextJS and Vercel
</footer> </footer>
</div> </section>
<div className={styles.topcontainerbackg + " slide-in-right"}></div> <section className={styles.content}>
<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}>
<Menu/> <Menu/>
</div> <div>
<div className={styles.topcontent}> <h1>INVESVPO</h1>
<h1>INVESVPO</h1> <p><div className="badge"><span>aka</span></div> Fuhz — Elikas — C2RW</p>
<p><div className="badge"><span>aka</span></div> Fuhz — Elikas — C2RW</p> </div>
</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 about it.`} <br/>
{`I also make music, so check out my Spotify and SoundCloud below. `}<br/>
{`A lot of my songs are made to be downtempo ambient songs.`}
</h3>
</div> </div>
<div className={styles.topcontent + " " + styles.links}> <div className={styles.bottomcontainer + " slide-in-up"}>
<div> <div>
<a target="_blank" href="https://twitter.com/invesvpo"> <h3>
<span> {`Hey I'm Invesvpo, I make some cool 3d models including guns and I'm trying to learn more about it.`} <br/>
<p>Twitter</p> {`I also make music, so check out my Spotify and SoundCloud below. `}<br/>
<FontAwesomeIcon icon={faTwitter} /> {`A lot of my songs are made to be downtempo ambient songs.`}
</span> </h3>
</a> </div>
<div className={styles.topcontent + " " + styles.links}>
<div>
<a target="_blank" href="https://twitter.com/invesvpo">
<span>
<p>Twitter</p>
<FontAwesomeIcon icon={faTwitter} />
</span>
</a>
<a target="_blank" href="https://discord.com/users/221984151161667585"> <a target="_blank" href="https://discord.com/users/221984151161667585">
<span> <span>
<p>Discord</p> <p>Discord</p>
<FontAwesomeIcon icon={faDiscord} /> <FontAwesomeIcon icon={faDiscord} />
</span> </span>
</a> </a>
<a target="_blank" href="https://soundcloud.com/invesvpo"> <a target="_blank" href="https://soundcloud.com/invesvpo">
<span> <span>
<p>SoundCloud</p> <p>SoundCloud</p>
<FontAwesomeIcon icon={faSoundcloud} /> <FontAwesomeIcon icon={faSoundcloud} />
</span> </span>
</a> </a>
<a target="_blank" href="mailto:"> <a target="_blank" href="mailto:">
<span> <span>
<p>Email</p> <p>Email</p>
<FontAwesomeIcon icon={faEnvelope} /> <FontAwesomeIcon icon={faEnvelope} />
</span> </span>
</a> </a>
<a target="_blank" href="https://steamcommunity.com/id/Invesvpo/"> <a target="_blank" href="https://steamcommunity.com/id/Invesvpo/">
<span> <span>
<p>Steam</p> <p>Steam</p>
<FontAwesomeIcon icon={faSteam} /> <FontAwesomeIcon icon={faSteam} />
</span> </span>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </section>
</div> </div>
) )
} }

9
pages/models.js
Unescape View File

@ -0,0 +1,9 @@
import Head from 'next/head'
export default function Models() {
return (
<div>
</div>
)
}

9
pages/music.js
Unescape View File

@ -1,13 +1,4 @@
import Head from 'next/head' 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() { export default function Music() {
return ( return (

54
styles/Index.module.css
Unescape View File

@ -10,14 +10,22 @@
/* page layout */ /* page layout */
.page {
display: flex;
}
.page .content {
flex-grow: 1;
}
.topcontent { .content {
width: var(--page-width); position: relative;
margin: 0 auto; width: 100%;
} }
.topcontainerbackg { .topcontainerbackg {
height: 40vh; height: 40vh;
z-index: 0;
background-color: #2940D3; background-color: #2940D3;
-ms-transform: skewX(-20deg); -ms-transform: skewX(-20deg);
@ -26,20 +34,22 @@
} }
.topcontainer { .topcontainer {
position: absolute; padding: 0 var(--padding-xl);
top: 0; top: 0;
right: 0;
left: 0; left: 0;
width: 100vw; bottom: 0;
position: absolute;
height: 40vh; height: 40vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: end; align-items: start;
justify-content: space-between; justify-content: space-between;
color: white; color: white;
background-image: url('/gun.png'); background-image: url('/gun.png');
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right; background-position: right center;
} }
.topcontainer h1 { .topcontainer h1 {
@ -52,6 +62,7 @@
} }
.bottomcontainer { .bottomcontainer {
padding: 0 var(--padding-xl);
height: 60vh; height: 60vh;
background-color: #232323; background-color: #232323;
display: flex; display: flex;
@ -63,12 +74,8 @@
} }
.leftsidetint { .leftsidetint {
position: absolute; z-index: 1;
z-index: 10;
top: 0;
left: 0;
width: 10vw; width: 10vw;
height: 100vh;
background-color: #1a1a1a; background-color: #1a1a1a;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -84,6 +91,7 @@
/* items */ /* items */
.links { .links {
width: 100%;
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
align-items: center; align-items: center;
@ -99,7 +107,7 @@
.links div a { .links div a {
text-align: center; text-align: center;
padding: var(--padding) var(--padding-lg) var(--padding) var(--padding-xl); padding: var(--padding) var(--padding-xl);
transition-duration: var(--transition-speed); transition-duration: var(--transition-speed);
background-color: #2940D3; background-color: #2940D3;
@ -108,14 +116,30 @@
transform: skewX(-20deg); transform: skewX(-20deg);
} }
.links div a:hover {
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
transition-duration: var(--transition-speed);
}
.links div a:hover span {
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
transition-duration: var(--transition-speed);
}
.links div p { .links div p {
margin: unset; margin: unset;
} }
.links div a span { .links div a span {
transition-duration: var(--transition-speed);
-ms-transform: skewX(20deg); -ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg); -webkit-transform: skewX(20deg);
transform: skewX(20deg); transform: skewX(20deg);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -158,7 +182,7 @@
} }
} }
@media (max-aspect-ratio: 5/3) { @media (max-aspect-ratio: 5/4) {
.leftsidetint { .leftsidetint {
display: none; display: none;
} }

15
styles/globals.css
Unescape View File

@ -3,6 +3,7 @@
--padding: 10px; --padding: 10px;
--padding-lg: 20px; --padding-lg: 20px;
--padding-xl: 50px; --padding-xl: 50px;
--padding-xxl: 100px;
--font-xl: 5em; --font-xl: 5em;
--font-lg: 1.5em; --font-lg: 1.5em;
@ -90,7 +91,8 @@ img {
.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: var(--padding-xxl);
margin-left: -50vw;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
} }
@ -98,8 +100,11 @@ img {
0% { 0% {
margin-right: 150vw; margin-right: 150vw;
} }
25% {
margin-right: 150vw;
}
100% { 100% {
margin-right: 10vw; margin-right: var(--padding-xxl);
} }
} }
@ -147,15 +152,15 @@ img {
animation-name: slide-in-down; animation-name: slide-in-down;
animation-duration: 0.4s; animation-duration: 0.4s;
overflow-y: hidden; overflow-y: hidden;
top: 0vh; margin-top: 0vh;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
} }
@keyframes slide-in-down { @keyframes slide-in-down {
0% { 0% {
top: 100vh; margin-top: 100vh;
} }
100% { 100% {
top: 0vh; margin-top: 0vh;
} }
} }
Write Preview
Loading…
Cancel
Save