parent
7f35efeb17
commit
478d83f3dc
@ -1,34 +0,0 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
@ -1,34 +0,0 @@
|
||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
|
||||
|
||||
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
|
||||
|
||||
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,248 @@
|
||||
/* ---------------------------------------------
|
||||
Table of contents
|
||||
------------------------------------------------
|
||||
01. font & reset css
|
||||
02. reset
|
||||
03. global styles
|
||||
04. header
|
||||
05. banner
|
||||
|
||||
--------------------------------------------- */
|
||||
/*
|
||||
---------------------------------------------
|
||||
font & reset css
|
||||
---------------------------------------------
|
||||
*/
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");
|
||||
/*
|
||||
---------------------------------------------
|
||||
reset
|
||||
---------------------------------------------
|
||||
*/
|
||||
html, body, div, span, h1, h2, h3, h4, h5, h6, p, div
|
||||
a, font, img, center, header, nav{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ec7090;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
---------------------------------------------
|
||||
Global Styles
|
||||
---------------------------------------------
|
||||
*/
|
||||
html,
|
||||
body {
|
||||
background: #141414;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
body .page-content {
|
||||
margin-top: 110px;
|
||||
background-color: #27292a;
|
||||
padding: 60px;
|
||||
border-radius: 23px;
|
||||
}
|
||||
|
||||
.main-button a {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background-color: #e75e8d;
|
||||
padding: 12px 30px;
|
||||
display: inline-block;
|
||||
border-radius: 25px;
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
letter-spacing: 0.5px;
|
||||
transition: all .3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-button a:hover {
|
||||
background-color: #fff;
|
||||
color: #e75e8d;
|
||||
}
|
||||
|
||||
.main-border-button a {
|
||||
font-size: 14px;
|
||||
color: #ec6090;
|
||||
background-color: transparent;
|
||||
border: 1px solid #ec6090;
|
||||
padding: 12px 30px;
|
||||
display: inline-block;
|
||||
border-radius: 25px;
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
letter-spacing: 0.5px;
|
||||
transition: all .3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-border-button a:hover {
|
||||
border-color: #fff;
|
||||
background-color: #fff;
|
||||
color: #e75e8d;
|
||||
}
|
||||
|
||||
.heading-section h4 {
|
||||
color: #ec6090;
|
||||
font-size: 34px;
|
||||
text-decoration: none;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.heading-section h4 em {
|
||||
color: #fff;
|
||||
font-style: normal;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*
|
||||
---------------------------------------------
|
||||
Banner Style
|
||||
---------------------------------------------
|
||||
*/
|
||||
|
||||
.main-banner {
|
||||
background-image: url(../images/banner-pic.jpg);
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
min-height: 380px;
|
||||
border-radius: 23px;
|
||||
padding: 80px 60px;
|
||||
box-shadow: 0 0 10px rgba(140, 20, 252, 1);
|
||||
}
|
||||
|
||||
.main-banner h6 {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.main-banner h4 {
|
||||
font-size: 45px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.main-banner h4 em {
|
||||
font-style: normal;
|
||||
color: #ec6090;
|
||||
}
|
||||
|
||||
/*
|
||||
---------------------------------------------
|
||||
Popular Style
|
||||
---------------------------------------------
|
||||
*/
|
||||
|
||||
.most-popular {
|
||||
margin-top: 60px;
|
||||
padding: 30px;
|
||||
background-color: #1f2122;
|
||||
border-radius: 23px;
|
||||
box-shadow: 0 0 10px rgba(140, 20, 252, 0.5);
|
||||
}
|
||||
|
||||
.most-popular .item {
|
||||
background-color: #27292a;
|
||||
padding: 30px 15px;
|
||||
border-radius: 23px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.most-popular .item .item {
|
||||
padding: 0px;
|
||||
border-radius: 0px;
|
||||
background-color: transparent;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.most-popular .item img {
|
||||
border-radius: 23px;
|
||||
}
|
||||
|
||||
.most-popular .item h4 {
|
||||
font-size: 15px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 0px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.most-popular .item span {
|
||||
color: #666;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.most-popular .item ul {
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.most-popular .item ul li {
|
||||
text-align: right;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.most-popular .item ul li:first-child i {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.most-popular .item ul li:last-child i {
|
||||
color: #ec6090;
|
||||
}
|
||||
|
||||
.most-popular .main-button {
|
||||
text-align: center;
|
||||
margin-bottom: -53px;
|
||||
}
|
||||
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.social-links a i {
|
||||
font-size: 50px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.social-links a span {
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -0,0 +1,235 @@
|
||||
/* ---------------------------------------------
|
||||
Table of contents
|
||||
------------------------------------------------
|
||||
01. font & reset css
|
||||
02. reset
|
||||
03. global styles
|
||||
04. header
|
||||
05. banner
|
||||
|
||||
--------------------------------------------- */
|
||||
/*
|
||||
---------------------------------------------
|
||||
font & reset css
|
||||
---------------------------------------------
|
||||
*/
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");
|
||||
/*
|
||||
---------------------------------------------
|
||||
reset
|
||||
---------------------------------------------
|
||||
*/
|
||||
html, body, div, span, h1, h2, h3, h4, h5, h6, p, div
|
||||
a, font, img, center, header, nav{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ec7090;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
---------------------------------------------
|
||||
Global Styles
|
||||
---------------------------------------------
|
||||
*/
|
||||
html,
|
||||
body {
|
||||
background: #141414;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
body .page-content {
|
||||
margin-top: 110px;
|
||||
background-color: #27292a;
|
||||
padding: 60px;
|
||||
border-radius: 23px;
|
||||
}
|
||||
|
||||
.main-button a {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background-color: #e75e8d;
|
||||
padding: 12px 30px;
|
||||
display: inline-block;
|
||||
border-radius: 25px;
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
letter-spacing: 0.5px;
|
||||
transition: all .3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-button a:hover {
|
||||
background-color: #fff;
|
||||
color: #e75e8d;
|
||||
}
|
||||
|
||||
.main-border-button a {
|
||||
font-size: 14px;
|
||||
color: #ec6090;
|
||||
background-color: transparent;
|
||||
border: 1px solid #ec6090;
|
||||
padding: 12px 30px;
|
||||
display: inline-block;
|
||||
border-radius: 25px;
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
letter-spacing: 0.5px;
|
||||
transition: all .3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-border-button a:hover {
|
||||
border-color: #fff;
|
||||
background-color: #fff;
|
||||
color: #e75e8d;
|
||||
}
|
||||
|
||||
/*
|
||||
---------------------------------------------
|
||||
Banner Style
|
||||
---------------------------------------------
|
||||
*/
|
||||
|
||||
.main-banner {
|
||||
background-image: url(../images/banner-pic.jpg);
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
min-height: 380px;
|
||||
border-radius: 23px;
|
||||
padding: 80px 60px;
|
||||
box-shadow: 0 0 10px rgba(140, 20, 252, 1);
|
||||
}
|
||||
|
||||
.main-banner h6 {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.main-banner h4 {
|
||||
font-size: 45px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.main-banner h4 em {
|
||||
font-style: normal;
|
||||
color: #ec6090;
|
||||
}
|
||||
|
||||
/*
|
||||
---------------------------------------------
|
||||
Popular Style
|
||||
---------------------------------------------
|
||||
*/
|
||||
|
||||
.most-popular {
|
||||
margin-top: 60px;
|
||||
padding: 30px;
|
||||
background-color: #1f2122;
|
||||
border-radius: 23px;
|
||||
box-shadow: 0 0 10px rgba(140, 20, 252, 0.5);
|
||||
}
|
||||
|
||||
.most-popular .item {
|
||||
background-color: #27292a;
|
||||
padding: 30px 15px;
|
||||
border-radius: 23px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.most-popular .item .item {
|
||||
padding: 0px;
|
||||
border-radius: 0px;
|
||||
background-color: transparent;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.most-popular .item img {
|
||||
border-radius: 23px;
|
||||
}
|
||||
|
||||
.most-popular .item h4 {
|
||||
font-size: 15px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 0px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.most-popular .item span {
|
||||
color: #666;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.most-popular .item ul {
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.most-popular .item ul li {
|
||||
text-align: right;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.most-popular .item ul li:first-child i {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.most-popular .item ul li:last-child i {
|
||||
color: #ec6090;
|
||||
}
|
||||
|
||||
.most-popular .main-button {
|
||||
text-align: center;
|
||||
margin-bottom: -53px;
|
||||
}
|
||||
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.social-links a i {
|
||||
font-size: 50px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.social-links a span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 420 KiB |
|
After Width: | Height: | Size: 85 KiB |
|
After Width: | Height: | Size: 131 KiB |
|
After Width: | Height: | Size: 667 KiB |
|
After Width: | Height: | Size: 85 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.
@ -1,11 +0,0 @@
|
||||
import Head from 'next/head'
|
||||
|
||||
export default function HeadComponent() {
|
||||
return (
|
||||
<section>
|
||||
<Head>
|
||||
<link rel="icon" href="/logo.png" />
|
||||
</Head>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
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 Feed {`<<soon>>`}</a>
|
||||
<span>//</span>
|
||||
<a href="#">Models {`<<soon>>`}</a>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=1000x, initial-scale=1.0">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
|
||||
<title>Invesvpo | Website</title>
|
||||
|
||||
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/fontawesome.css">
|
||||
<link rel="stylesheet" href="assets/css/Invesvpo-style.css">
|
||||
<link rel="stylesheet"href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="page-content">
|
||||
<div class="main-banner" style="background-image: url('assets/images/banner-pic.jpg');">
|
||||
<div class="header-text">
|
||||
<h6>Welcome to</h6>
|
||||
<h4><em>Invesvpo's</em> website</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="most-popular">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="heading-section">
|
||||
<h4><em>Popular</em> projects / songs</h4>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="item">
|
||||
<img src="assets/images/WASTEDTIME.jpg" alt="">
|
||||
<h4>WASTED TIME (EP)<br><span>Trap/Phonk</span></h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="item">
|
||||
<img src="assets/images/TTS.jpg" alt="">
|
||||
<h4>TIME STOOD STILL<br><span>Electronic</span></h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="item">
|
||||
<img src="assets/images/SyrupSauce.jpg" alt="">
|
||||
<h4>Syrup Sauce<br><span>Trap/Phonk</span></h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="item">
|
||||
<img src="assets/images/Lost.jpg" alt="">
|
||||
<h4>Lost<br><span>Ambient/Phonk</span></h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div class="main-button">
|
||||
<a href="https://open.spotify.com/artist/14IZ5BWUMi9pnRmGEaYYPC?si=WQQJXAKaRoey-DpaD8-lEw">Discover More Music</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="page-content">
|
||||
|
||||
<div class="social-links">
|
||||
<a href="https://open.spotify.com/artist/14IZ5BWUMi9pnRmGEaYYPC?si=tfXT6zeDQVuS5w9UfpLGJg">
|
||||
<i class="fab fa-spotify"></i>
|
||||
<span> Spotify </span>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/channel/UC0OUTo03hlUHKMKFa1IarvA">
|
||||
<i class="fab fa-youtube"></i>
|
||||
<span> YouTube </span>
|
||||
</a>
|
||||
<a href="https://music.apple.com/us/artist/invesvpo/1724571673">
|
||||
<i class="fab fa-apple"></i>
|
||||
<span> Apple Music </span>
|
||||
</a>
|
||||
<a href="https://invesvpo.bandcamp.com/">
|
||||
<i class="fab fa-bandcamp"></i>
|
||||
<span> Bandcamp </span>
|
||||
</a>
|
||||
<a href="https://www.amazon.com/music/player/artists/B0B5RK1SBX/invesvpo">
|
||||
<i class="fab fa-amazon"></i>
|
||||
<span> Amazon Music </span>
|
||||
</a>
|
||||
<a href="https://soundcloud.com/invesvpo-sc">
|
||||
<i class="fab fa-soundcloud"></i>
|
||||
<span> SoundCloud </span>
|
||||
</a>
|
||||
<a href="https://www.instagram.com/invesvpomusic/">
|
||||
<i class="fab fa-instagram"></i>
|
||||
<span> Instagram </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<script src="vendor/jquery/jquery.min.js"></script>
|
||||
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,20 +0,0 @@
|
||||
{
|
||||
"name": "nextjs",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^5.15.3",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.35",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.3",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.3",
|
||||
"@fortawesome/react-fontawesome": "^0.1.14",
|
||||
"next": "10.x",
|
||||
"react": "17.x",
|
||||
"react-dom": "17.x"
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
import '../styles/globals.css'
|
||||
|
||||
import '@fortawesome/fontawesome-svg-core/styles.css';
|
||||
import { config } from '@fortawesome/fontawesome-svg-core';
|
||||
config.autoAddCss = false; /* eslint-disable import/first */
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return <Component {...pageProps} />
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
@ -1,6 +0,0 @@
|
||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
|
||||
export default (req, res) => {
|
||||
res.statusCode = 200
|
||||
res.json({ name: 'John Doe' })
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
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,92 +0,0 @@
|
||||
import Head from 'next/head'
|
||||
import HeadComponent from '../components/head.js'
|
||||
import Menu from '../components/menu.js'
|
||||
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 { faSteam } 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 Index() {
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<HeadComponent/>
|
||||
<Head>
|
||||
<title>Invesvpo | Landing Page</title>
|
||||
</Head>
|
||||
|
||||
<section className={styles.leftsidetint + " slide-in-down"}>
|
||||
<a href="/"><img src="/logo.png"/></a>
|
||||
<footer>
|
||||
<a href="https://dubbelnull.com/" target="_blank">Made by DubbelNull</a> with NextJS and Vercel
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<section className={styles.content}>
|
||||
<div className={styles.topcontainerbackg + " slide-in-right"}></div>
|
||||
|
||||
<div className={styles.topcontainer + " slide-in-left"}>
|
||||
<Menu/>
|
||||
<div>
|
||||
<h1>INVESVPO</h1>
|
||||
<p><div className="badge"><span>aka</span></div> Fuhz — Elikas — C2RW</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.bottomcontainer + " slide-in-up"}>
|
||||
<div>
|
||||
<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 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">
|
||||
<span>
|
||||
<p>Discord</p>
|
||||
<FontAwesomeIcon icon={faDiscord} />
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a target="_blank" href="https://soundcloud.com/invesvpo">
|
||||
<span>
|
||||
<p>SoundCloud</p>
|
||||
<FontAwesomeIcon icon={faSoundcloud} />
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a target="_blank" href="mailto:">
|
||||
<span>
|
||||
<p>Email</p>
|
||||
<FontAwesomeIcon icon={faEnvelope} />
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a target="_blank" href="https://steamcommunity.com/id/Invesvpo/">
|
||||
<span>
|
||||
<p>Steam</p>
|
||||
<FontAwesomeIcon icon={faSteam} />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
import Head from 'next/head'
|
||||
|
||||
export default function Models() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
import Head from 'next/head'
|
||||
|
||||
export default function Music() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
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.
|
Before Width: | Height: | Size: 125 KiB |
|
Before Width: | Height: | Size: 92 KiB |
@ -1,122 +0,0 @@
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 0 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 5rem 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border-top: 1px solid #eaeaea;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer img {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title a {
|
||||
color: #0070f3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title a:hover,
|
||||
.title a:focus,
|
||||
.title a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.title,
|
||||
.description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
line-height: 1.5;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: #fafafa;
|
||||
border-radius: 5px;
|
||||
padding: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 800px;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 1rem;
|
||||
flex-basis: 45%;
|
||||
padding: 1.5rem;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 10px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:focus,
|
||||
.card:active {
|
||||
color: #0070f3;
|
||||
border-color: #0070f3;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.grid {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@ -1,189 +0,0 @@
|
||||
/* page specific overwrites css */
|
||||
.page h1 {
|
||||
font-size: var(--font-xl);
|
||||
}
|
||||
|
||||
.page h3 {
|
||||
font-size: var(--font-lg);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
/* page layout */
|
||||
.page {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.page .content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topcontainerbackg {
|
||||
height: 40vh;
|
||||
z-index: 0;
|
||||
background-color: #2940D3;
|
||||
|
||||
-ms-transform: skewX(-20deg);
|
||||
-webkit-transform: skewX(-20deg);
|
||||
transform: skewX(-20deg);
|
||||
}
|
||||
|
||||
.topcontainer {
|
||||
padding: 0 var(--padding-xl);
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
height: 40vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
background-image: url('/gun.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
}
|
||||
|
||||
.topcontainer h1 {
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
.topcontainer p {
|
||||
opacity: 50%;
|
||||
margin-top: - var(--padding-sm);
|
||||
}
|
||||
|
||||
.bottomcontainer {
|
||||
padding: 0 var(--padding-xl);
|
||||
height: 60vh;
|
||||
background-color: #232323;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
color: white;
|
||||
padding-bottom: var(--padding);
|
||||
}
|
||||
|
||||
.leftsidetint {
|
||||
z-index: 1;
|
||||
width: 10vw;
|
||||
background-color: #1a1a1a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.leftsidetint footer {
|
||||
font-size: var(--font-sm);
|
||||
padding: var(--padding-lg);
|
||||
}
|
||||
|
||||
|
||||
/* items */
|
||||
|
||||
.links {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.links div {
|
||||
width: 100%;
|
||||
font-size: 1.5em;
|
||||
display: grid;
|
||||
grid-template-columns: 25% 25% 25%;
|
||||
gap: var(--padding-lg);
|
||||
}
|
||||
|
||||
.links div a {
|
||||
text-align: center;
|
||||
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 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);
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.links div 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 div {
|
||||
font-size: var(--font);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 5/4) {
|
||||
.leftsidetint {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -1,166 +0,0 @@
|
||||
:root {
|
||||
--padding-sm: 5px;
|
||||
--padding: 10px;
|
||||
--padding-lg: 20px;
|
||||
--padding-xl: 50px;
|
||||
--padding-xxl: 100px;
|
||||
|
||||
--font-xl: 5em;
|
||||
--font-lg: 1.5em;
|
||||
--font: 1em;
|
||||
--font-sm: 0.8em;
|
||||
|
||||
--page-width: 1200px;
|
||||
|
||||
--transition-speed: 0.3s;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Dual';
|
||||
src: url('/fonts/Dual-300.otf');
|
||||
src: url('/fonts/Dual-300.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Anurati';
|
||||
src: url('/fonts/Anurati-Regular.otf');
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'Dual', sans-serif;
|
||||
background-color: #232323;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: 'Anurati', sans-serif;
|
||||
letter-spacing: 0.5em;
|
||||
}
|
||||
|
||||
footer {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
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 */
|
||||
.slide-in-right {
|
||||
animation-name: slide-in-right;
|
||||
animation-duration: 1s;
|
||||
margin-right: var(--padding-xxl);
|
||||
margin-left: -50vw;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
0% {
|
||||
margin-right: 150vw;
|
||||
}
|
||||
25% {
|
||||
margin-right: 150vw;
|
||||
}
|
||||
100% {
|
||||
margin-right: var(--padding-xxl);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.slide-in-left {
|
||||
animation-name: slide-in-left;
|
||||
animation-duration: 1.2s;
|
||||
margin-left: 0vw;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes slide-in-left {
|
||||
0% {
|
||||
margin-left: 100vw;
|
||||
}
|
||||
25% {
|
||||
margin-left: 100vw;
|
||||
}
|
||||
100% {
|
||||
margin-left: 0vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.slide-in-up {
|
||||
animation-name: slide-in-up;
|
||||
animation-duration: 1.4s;
|
||||
margin-top: 0vh;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes slide-in-up {
|
||||
0% {
|
||||
margin-top: 100vh;
|
||||
}
|
||||
25% {
|
||||
margin-top: 100vh;
|
||||
}
|
||||
100% {
|
||||
margin-top: 0vh;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-in-down {
|
||||
animation-name: slide-in-down;
|
||||
animation-duration: 0.4s;
|
||||
overflow-y: hidden;
|
||||
margin-top: 0vh;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes slide-in-down {
|
||||
0% {
|
||||
margin-top: 100vh;
|
||||
}
|
||||
100% {
|
||||
margin-top: 0vh;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue