From e1f92aa1502256285e79fa277b2b95f0ff53bac7 Mon Sep 17 00:00:00 2001 From: midblep Date: Mon, 19 Jul 2021 15:21:28 +0200 Subject: [PATCH] updates --- components/menu.js | 2 + pages/index.js | 102 ++++++++++++++++++++-------------------- pages/models.js | 9 ++++ pages/music.js | 9 ---- styles/Index.module.css | 54 +++++++++++++++------ styles/globals.css | 15 ++++-- 6 files changed, 111 insertions(+), 80 deletions(-) create mode 100644 pages/models.js diff --git a/components/menu.js b/components/menu.js index 532710c..eccc69c 100644 --- a/components/menu.js +++ b/components/menu.js @@ -13,6 +13,8 @@ export default function Menu() { Home // Music Feed + // + Models ) diff --git a/pages/index.js b/pages/index.js index edb726e..ce622e2 100644 --- a/pages/index.js +++ b/pages/index.js @@ -20,73 +20,73 @@ export default function Index() { Invesvpo | Landing Page -
+
-
+ -
+
+
-
-
+
-
-
-

INVESVPO

-

aka
Fuhz — Elikas — C2RW

-
-
- -
-
-

- {`Hey I'm Invesvpo, I make some cool 3d models including guns and I'm trying to learn more about it.`}
- {`I also make music, so check out my Spotify and SoundCloud below. `}
- {`A lot of my songs are made to be downtempo ambient songs.`} -

+
+

INVESVPO

+

aka
Fuhz — Elikas — C2RW

+
-
+
- - -

Twitter

- - - +

+ {`Hey I'm Invesvpo, I make some cool 3d models including guns and I'm trying to learn more about it.`}
+ {`I also make music, so check out my Spotify and SoundCloud below. `}
+ {`A lot of my songs are made to be downtempo ambient songs.`} +

+
+ +
-
+
) } \ No newline at end of file diff --git a/pages/models.js b/pages/models.js new file mode 100644 index 0000000..d03ebbf --- /dev/null +++ b/pages/models.js @@ -0,0 +1,9 @@ +import Head from 'next/head' + +export default function Models() { + return ( +
+ +
+ ) +} \ No newline at end of file diff --git a/pages/music.js b/pages/music.js index dfb34fc..0689bdb 100644 --- a/pages/music.js +++ b/pages/music.js @@ -1,13 +1,4 @@ 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 ( diff --git a/styles/Index.module.css b/styles/Index.module.css index 1021c60..4848e3b 100644 --- a/styles/Index.module.css +++ b/styles/Index.module.css @@ -10,14 +10,22 @@ /* page layout */ +.page { + display: flex; +} + +.page .content { + flex-grow: 1; +} -.topcontent { - width: var(--page-width); - margin: 0 auto; +.content { + position: relative; + width: 100%; } .topcontainerbackg { height: 40vh; + z-index: 0; background-color: #2940D3; -ms-transform: skewX(-20deg); @@ -26,20 +34,22 @@ } .topcontainer { - position: absolute; + padding: 0 var(--padding-xl); top: 0; + right: 0; left: 0; - width: 100vw; + bottom: 0; + position: absolute; height: 40vh; display: flex; flex-direction: column; - align-items: end; + align-items: start; justify-content: space-between; color: white; background-image: url('/gun.png'); background-size: contain; background-repeat: no-repeat; - background-position: right; + background-position: right center; } .topcontainer h1 { @@ -52,6 +62,7 @@ } .bottomcontainer { + padding: 0 var(--padding-xl); height: 60vh; background-color: #232323; display: flex; @@ -63,12 +74,8 @@ } .leftsidetint { - position: absolute; - z-index: 10; - top: 0; - left: 0; + z-index: 1; width: 10vw; - height: 100vh; background-color: #1a1a1a; display: flex; flex-direction: column; @@ -84,6 +91,7 @@ /* items */ .links { + width: 100%; display: flex; flex-grow: 1; align-items: center; @@ -99,7 +107,7 @@ .links div a { 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); background-color: #2940D3; @@ -108,14 +116,30 @@ 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 { margin: unset; } .links div a span { + transition-duration: var(--transition-speed); -ms-transform: skewX(20deg); -webkit-transform: skewX(20deg); - transform: skewX(20deg); + transform: skewX(20deg); + display: inline-flex; align-items: center; justify-content: space-between; @@ -158,7 +182,7 @@ } } -@media (max-aspect-ratio: 5/3) { +@media (max-aspect-ratio: 5/4) { .leftsidetint { display: none; } diff --git a/styles/globals.css b/styles/globals.css index c9e0aa5..6f3ebaa 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -3,6 +3,7 @@ --padding: 10px; --padding-lg: 20px; --padding-xl: 50px; + --padding-xxl: 100px; --font-xl: 5em; --font-lg: 1.5em; @@ -90,7 +91,8 @@ img { .slide-in-right { animation-name: slide-in-right; animation-duration: 1s; - margin-right: 10vw; + margin-right: var(--padding-xxl); + margin-left: -50vw; animation-timing-function: ease-in-out; } @@ -98,8 +100,11 @@ img { 0% { margin-right: 150vw; } + 25% { + margin-right: 150vw; + } 100% { - margin-right: 10vw; + margin-right: var(--padding-xxl); } } @@ -147,15 +152,15 @@ img { animation-name: slide-in-down; animation-duration: 0.4s; overflow-y: hidden; - top: 0vh; + margin-top: 0vh; animation-timing-function: ease-in-out; } @keyframes slide-in-down { 0% { - top: 100vh; + margin-top: 100vh; } 100% { - top: 0vh; + margin-top: 0vh; } } \ No newline at end of file