add files from git artifact
This commit is contained in:
commit
e37c96e104
24 changed files with 10306 additions and 0 deletions
34
README.md
Normal file
34
README.md
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
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/new?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.
|
||||
22
components/Footer.js
Normal file
22
components/Footer.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { BsFacebook, BsSpotify, BsTwitter, BsYoutube } from "react-icons/bs";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<div className="flex flex-row justify-center items-center w-full space-x-96 m-auto p-2">
|
||||
<div className="flex flex-row items-center m-2">
|
||||
<p className="text-sm">
|
||||
© 2009 - 2021 by Seycara Music and Arts Productions - last updated
|
||||
12/29/21 - mockup by Jariel Que @ fuwa.sh
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-row justify-items-end space-x-2">
|
||||
<BsSpotify />
|
||||
<BsYoutube />
|
||||
<BsTwitter />
|
||||
<BsFacebook />
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
10
components/NavLinks.js
Normal file
10
components/NavLinks.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
let NavLinks = [
|
||||
["Home", "/"],
|
||||
["Productions", "/productions"],
|
||||
["Projects", "/projects"],
|
||||
["Concert Hall", "/concert-hall"],
|
||||
["Join Us", "/join-us"],
|
||||
["Contact", "/contact"],
|
||||
];
|
||||
|
||||
export default NavLinks;
|
||||
49
components/Navigation.js
Normal file
49
components/Navigation.js
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
import Link from "next/link";
|
||||
import { useState, useEffect, ReactNode } from "react";
|
||||
import NavLinks from "./NavLinks";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Navigation({ children }) {
|
||||
const [displayChildren, setDisplayChildren] = useState(children);
|
||||
|
||||
useEffect(() => {
|
||||
// todo: code
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-row justify-center items-center z-50 fixed py-2 w-full space-x-96 m-auto bg-[#161817]">
|
||||
<div className="flex flex-row items-center m-2">
|
||||
<Image
|
||||
src="/../public/logo.webp"
|
||||
width="100"
|
||||
height="50"
|
||||
alt="logo"
|
||||
/>
|
||||
<div className="flex flex-col justify-items start">
|
||||
<h3 className="text-xl">Seycara</h3>
|
||||
<h4 className="text-xs">MUSIC AND ART PRODUCTIONS</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row justify-items-end items-center gap-2">
|
||||
{NavLinks.map(([title, url], x) => (
|
||||
<Link href={url} key={x}>
|
||||
{x == 5 ? (
|
||||
<div className="rounded-xl bg-white p-2 text-black items-center">
|
||||
<a className="text-md font-bold text-right cursor-pointer m-2">
|
||||
{title}
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<a className="text-md font-bold text-right cursor-pointer m-2">
|
||||
{title}
|
||||
</a>
|
||||
)}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
next.config.js
Normal file
10
next.config.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
swcMinify: true,
|
||||
images: {
|
||||
domains: ["static.wixstatic.com"],
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
6625
package-lock.json
generated
Normal file
6625
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
27
package.json
Normal file
27
package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "seycara",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-three/fiber": "^8.8.9",
|
||||
"gsap": "^3.11.3",
|
||||
"next": "12.3.1",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-icons": "^4.4.0",
|
||||
"three": "^0.145.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.12",
|
||||
"eslint": "8.24.0",
|
||||
"eslint-config-next": "12.3.1",
|
||||
"postcss": "^8.4.17",
|
||||
"tailwindcss": "^3.1.8"
|
||||
}
|
||||
}
|
||||
16
pages/_app.js
Normal file
16
pages/_app.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import Navigation from "../components/navigation";
|
||||
import Footer from "../components/footer";
|
||||
import "../styles/globals.css";
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return (
|
||||
<>
|
||||
<Navigation>
|
||||
<Component {...pageProps} />
|
||||
</Navigation>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default MyApp;
|
||||
18
pages/_document.js
Normal file
18
pages/_document.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { Html, Head, Main, NextScript } from "next/document";
|
||||
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html>
|
||||
<Head>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
5
pages/api/hello.js
Normal file
5
pages/api/hello.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
|
||||
export default function handler(req, res) {
|
||||
res.status(200).json({ name: 'John Doe' })
|
||||
}
|
||||
246
pages/concert-hall.js
Normal file
246
pages/concert-hall.js
Normal file
|
|
@ -0,0 +1,246 @@
|
|||
import Head from "next/head";
|
||||
import Image from "next/image";
|
||||
import styles from "../styles/Home.module.css";
|
||||
import { ImSoundcloud } from "react-icons/im";
|
||||
import { BsYoutube } from "react-icons/bs";
|
||||
|
||||
export default function ConcertHall() {
|
||||
return (
|
||||
<section
|
||||
id="#"
|
||||
className="flex flex-col min-h-screen bg-cover bg-center relative m-auto"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://static.wixstatic.com/media/f5599d_21ce3d70a6aa4b819113c355c0159b97.jpg/v1/fill/w_1486,h_967,al_tl,q_85,usm_0.66_1.00_0.01,enc_auto/f5599d_21ce3d70a6aa4b819113c355c0159b97.jpg)",
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row mt-32 m-auto space-x-2">
|
||||
<div className="flex flex-col space-y-4">
|
||||
<h2 className="absolute text-9xl font-bold text-[#313244] -translate-y-8">
|
||||
concert hall
|
||||
</h2>
|
||||
<h1 className="relative text-7xl font-semibold">
|
||||
The music of our <span class="text-[#D0A48C]">imagination</span>
|
||||
</h1>
|
||||
<h3 className="text-3xl font-semibold max-w-prose leading-10">
|
||||
The music of Seycara, featuring Seycara's Own - The Seycara
|
||||
Orchestra @ Seycara Studios in Canada with in house production
|
||||
</h3>
|
||||
<hr />
|
||||
<div className="rounded-3xl p-4 flex-col flex gap-4">
|
||||
<div class="flex flex-col pl-4">
|
||||
<h1 className="text-2xl font-bold">
|
||||
The Seycara Concert Hall - Youtube Features
|
||||
</h1>
|
||||
<h6 className="text-xs">
|
||||
The Best of Seycara Orchestral on YouTube!
|
||||
</h6>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2.5">
|
||||
<div>
|
||||
<div className="p-4 rounded-3xl flex flex-row gap-3">
|
||||
<div class="flex flex-col">
|
||||
<iframe
|
||||
className="rounded-xl mb-3"
|
||||
width="333"
|
||||
height="196"
|
||||
src="https://www.youtube.com/embed/tY3x3JXqAJs"
|
||||
></iframe>
|
||||
<h6 className="text-xs font-semibold">
|
||||
MUSIC FOR ORCHESTRA
|
||||
</h6>
|
||||
<h3 className="font-semibold">
|
||||
Shelter - Ghibli Edition - 2017
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="p-4 rounded-3xl flex flex-row gap-3">
|
||||
<div class="flex flex-col">
|
||||
<iframe
|
||||
className="rounded-xl mb-3"
|
||||
width="333"
|
||||
height="196"
|
||||
src="https://www.youtube.com/embed/jJlC4QyKGSA"
|
||||
></iframe>
|
||||
<h6 className="text-xs font-semibold">
|
||||
CONCERTINO FOR BASSOON AND ORCHESTRA
|
||||
</h6>
|
||||
<h3 className="font-semibold">Festival of Lights - 2019</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="p-4 rounded-3xl flex flex-row gap-3">
|
||||
<div class="flex flex-col">
|
||||
<iframe
|
||||
className="rounded-xl mb-3"
|
||||
width="333"
|
||||
height="196"
|
||||
src="https://www.youtube.com/embed/Wu1cBfUDzok"
|
||||
></iframe>
|
||||
<h6 className="text-xs font-semibold">
|
||||
FOR PIANO, VIOLIN, AND ORCHESTRA
|
||||
</h6>
|
||||
<h3 className="font-semibold">
|
||||
Glassy Sky (Tokyo Ghoul) - 2018
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="p-4 rounded-3xl flex flex-row gap-3">
|
||||
<div class="flex flex-col">
|
||||
<iframe
|
||||
className="rounded-xl mb-3"
|
||||
width="333"
|
||||
height="196"
|
||||
src="https://www.youtube.com/embed/df1gVQFitPM"
|
||||
></iframe>
|
||||
<h6 className="text-xs font-semibold">FOR ORCHESTRA</h6>
|
||||
<h3 className="font-semibold">
|
||||
Torikago, Darling In The Franxx - 2018
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="p-4 rounded-3xl flex flex-row gap-3">
|
||||
<div class="flex flex-col">
|
||||
<iframe
|
||||
className="rounded-xl mb-3"
|
||||
width="333"
|
||||
height="196"
|
||||
src="https://www.youtube.com/embed/fC-RpbZjUQQ"
|
||||
></iframe>
|
||||
<h6 className="text-xs font-semibold">
|
||||
MUSIC FOR OCHESTRA AND CHILDRENS CHOIR
|
||||
</h6>
|
||||
<h3 className="font-semibold">
|
||||
Dreams Of The Future - 2017
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="p-4 rounded-3xl flex flex-row gap-3">
|
||||
<div class="flex flex-col">
|
||||
<iframe
|
||||
className="rounded-xl mb-3"
|
||||
width="333"
|
||||
height="196"
|
||||
src="https://www.youtube.com/embed/0t_csXm8qhA"
|
||||
></iframe>
|
||||
<h6 className="text-xs font-semibold">
|
||||
FOR ENGLISH HORN AND ORCHESTRA
|
||||
</h6>
|
||||
<h3 className="font-semibold">
|
||||
Violet Evergarden ED - 2018
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div className="rounded-3xl p-4 flex-col flex gap-4">
|
||||
<div className="pb-16 ">
|
||||
<div class="pl-4">
|
||||
<h1 className="text-2xl font-bold">Soundcloud Exclusives</h1>
|
||||
<h6 className="text-xs">
|
||||
Pieces not found anywhere but here, on soundcloud!
|
||||
</h6>
|
||||
</div>
|
||||
<div className="mt-4 p-4 rounded-3xl flex flex-row gap-3">
|
||||
<img
|
||||
className="rounded-xl w-[72px] h-[72px]"
|
||||
src="https://i1.sndcdn.com/artworks-000337444146-cv4f8b-t200x200.jpg"
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<h6 className="text-xs font-semibold">SEYCHARA ORCHESTRAL</h6>
|
||||
<h3 className="font-semibold">
|
||||
The Girl Who Became An Angel (feat. Sagisapon) | For Ghibli
|
||||
Vocals and Orchestra
|
||||
</h3>
|
||||
<a className="mt-2 text-xs underline items-center flex flex-row gap-2">
|
||||
<ImSoundcloud className="inline text-2xl" />
|
||||
LISTEN ON SOUNDCLOUD
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2.5 p-4 rounded-3xl flex flex-row gap-3">
|
||||
<img
|
||||
className="rounded-xl w-[72px] h-[72px]"
|
||||
src="https://i1.sndcdn.com/artworks-000324235568-12hw0c-t200x200.jpg"
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<h6 className="text-xs font-semibold">SEYCARA ORCHESTRAL</h6>
|
||||
<h3 className="font-semibold">
|
||||
"Michishirube" (Violet Evergarden ED) | Ghibli Piano and
|
||||
Violin | Emotional, Beautiful OST
|
||||
</h3>
|
||||
<a className="mt-2 text-xs underline items-center flex flex-row gap-2">
|
||||
<ImSoundcloud className="inline text-2xl" />
|
||||
LISTEN ON SOUNDCLOUD
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2.5 p-4 rounded-3xl flex flex-row gap-3">
|
||||
<img
|
||||
className="rounded-xl w-[72px] h-[72px]"
|
||||
src="https://i1.sndcdn.com/artworks-000353345595-b0gz0v-t200x200.jpg"
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<h6 className="text-xs font-semibold">SEYCARA ORCHESTRAL</h6>
|
||||
<h3 className="font-semibold">
|
||||
Amelia's Waltz | Ghibli Clarinet And Piano | Beautiful,
|
||||
Emotional OST
|
||||
</h3>
|
||||
<a className="mt-2 text-xs underline items-center flex flex-row gap-2">
|
||||
<ImSoundcloud className="inline text-2xl" />
|
||||
LISTEN ON SOUNDCLOUD
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2.5 p-4 rounded-3xl flex flex-row gap-3">
|
||||
<img
|
||||
className="rounded-xl w-[72px] h-[72px]"
|
||||
src="https://i1.sndcdn.com/artworks-000428517684-d93b9h-t200x200.jpg"
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<h6 className="text-xs font-semibold">SEYCARA ORCHESTRAL</h6>
|
||||
<h3 className="font-semibold">
|
||||
Wind Spirit | Ghibli Flute & Orchestra | Original
|
||||
</h3>
|
||||
<a className="mt-2 text-xs underline items-center flex flex-row gap-2">
|
||||
<ImSoundcloud className="inline text-2xl" />
|
||||
LISTEN ON SOUNDCLOUD
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2.5 p-4 rounded-3xl flex flex-row gap-3">
|
||||
<img
|
||||
className="rounded-xl w-[72px] h-[72px]"
|
||||
src="https://i1.sndcdn.com/artworks-000290814336-flj7yq-t200x200.jpg"
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<h6 className="text-xs font-semibold">SEYCARA ORCHESTRAL</h6>
|
||||
<h3 className="font-semibold">
|
||||
"Nandemonaiya" | Ghibli Orchestra Edition「MV」Special |
|
||||
RADWIMPS (Kimi no Na wa, 君の名は OST)
|
||||
</h3>
|
||||
<a className="mt-2 text-xs underline items-center flex flex-row gap-2">
|
||||
<ImSoundcloud className="inline text-2xl" />
|
||||
LISTEN ON SOUNDCLOUD
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
120
pages/contact.js
Normal file
120
pages/contact.js
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
import Head from "next/head";
|
||||
import Image from "next/image";
|
||||
import styles from "../styles/Home.module.css";
|
||||
import { AiFillMail, AiFillPhone } from "react-icons/ai";
|
||||
import { BsFacebook, BsSpotify, BsTwitter, BsYoutube } from "react-icons/bs";
|
||||
import { MdMarkunreadMailbox } from "react-icons/md";
|
||||
|
||||
export default function Contact() {
|
||||
return (
|
||||
<section
|
||||
id="#"
|
||||
className="flex flex-col min-h-screen bg-cover bg-center relative m-auto"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://static.wixstatic.com/media/f5599d_622500a4702742399a4c75c6da4fda6c.jpg/v1/fill/w_1486,h_967,al_tl,q_85,usm_0.66_1.00_0.01,enc_auto/f5599d_622500a4702742399a4c75c6da4fda6c.jpg)",
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row mt-32 m-auto space-x-2">
|
||||
<div className="flex flex-col space-y-4">
|
||||
<h2 className="absolute text-9xl font-bold text-[#313244] -translate-y-8">
|
||||
contact
|
||||
</h2>
|
||||
<h1 className="relative text-7xl font-semibold">
|
||||
Contact <span class="text-[#D0A48C]">Us</span>
|
||||
</h1>
|
||||
<h3 className="text-3xl font-semibold max-w-prose leading-10">
|
||||
Have something an opportunity you want to discuss? Maybe an inquiry
|
||||
or just want to talk to us? Let's keep in touch!
|
||||
</h3>
|
||||
<div class="flex flex-row items-center pt-16 gap-64">
|
||||
<div className="flex flex-col space-y-4">
|
||||
<h3 className="text-4xl font-semibold max-w-prose leading-10">
|
||||
Let's communicate!
|
||||
</h3>
|
||||
<div className="flex flex-col ">
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<BsFacebook />
|
||||
<p className="text-xs "> FACEBOOK (CLICK ME) </p>
|
||||
</div>
|
||||
<p className="text-xl">Seycara Orchestral</p>
|
||||
</div>
|
||||
<div className="flex flex-col ">
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<BsTwitter />
|
||||
<p className="text-xs "> TWITTER (CLICK ME) </p>
|
||||
</div>
|
||||
<p className="text-xl">@Seycara</p>
|
||||
</div>
|
||||
<div className="flex flex-col ">
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<AiFillMail />
|
||||
<p className="text-xs "> EMAIL </p>
|
||||
</div>
|
||||
<p className="text-xl">info@seycara.com</p>
|
||||
</div>
|
||||
<div className="flex flex-col ">
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<AiFillPhone />
|
||||
<p className="text-xs "> TELEPHONE </p>
|
||||
</div>
|
||||
<p className="text-xl">available upon request</p>
|
||||
</div>
|
||||
<div className="flex flex-col ">
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<MdMarkunreadMailbox />
|
||||
<p className="text-xs "> MAILING ADDRESS </p>
|
||||
</div>
|
||||
<p className="text-xl">
|
||||
available upon special request/reasont
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<form action="/send-data-here" method="post">
|
||||
<div className="flex flex-col bg-[#161817] rounded-lg p-4 gap-2">
|
||||
<h1 className="text-2xl">Or you can use this form!</h1>
|
||||
<h6 className="text-xs">Fields marked with * are required.</h6>
|
||||
<div class="flex flex-row gap-2">
|
||||
<input
|
||||
className="rounded-lg p-2 bg-[#2e2e2e]"
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Name *"
|
||||
/>
|
||||
<input
|
||||
className="rounded-lg p-2 bg-[#2e2e2e]"
|
||||
type="text"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Email *"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
className="rounded-lg p-2 bg-[#2e2e2e]"
|
||||
type="text"
|
||||
id="subject"
|
||||
name="subject"
|
||||
placeholder="Subject"
|
||||
/>
|
||||
<label for="message">Message</label>
|
||||
<textarea
|
||||
className="rounded-lg p-2 bg-[#2e2e2e] h-32 "
|
||||
type="text"
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder="Say Hi!"
|
||||
/>
|
||||
|
||||
<button className="bg-[#2e2e2e] p-2 rounded-lg" type="submit">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
72
pages/index.js
Normal file
72
pages/index.js
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
import Head from "next/head";
|
||||
import Image from "next/image";
|
||||
import styles from "../styles/Home.module.css";
|
||||
import {
|
||||
BsSpotify,
|
||||
BsTwitter,
|
||||
BsYoutube,
|
||||
BsArrowRightShort,
|
||||
} from "react-icons/bs";
|
||||
import { AiOutlineArrowRight } from "react-icons/ai";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<section
|
||||
id="#"
|
||||
className="flex flex-col min-h-screen bg-cover bg-center relative m-auto"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://static.wixstatic.com/media/f5599d_82c715fc6035416bb1e78cd97ee48435.jpg/v1/fill/w_1477,h_877,al_t,q_85,enc_auto/f5599d_82c715fc6035416bb1e78cd97ee48435.jpg)",
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row mt-32 m-auto space-x-2">
|
||||
<div className="flex flex-col space-y-4">
|
||||
<h2 className="absolute text-9xl font-bold text-[#313244] -translate-y-8">
|
||||
studio seycara
|
||||
</h2>
|
||||
<h1 className="relative text-7xl font-semibold">
|
||||
<span className="text-[#D0A48C]">Welcome</span> to the studio.
|
||||
</h1>
|
||||
<h3 className="text-3xl font-semibold max-w-prose leading-10">
|
||||
At Seycara Music and Arts Productions, we handle all music, fine
|
||||
art, literary, and digital mediums for your creative projects.
|
||||
</h3>
|
||||
<div class="pt-8">
|
||||
<iframe
|
||||
className="rounded-3xl mb-3"
|
||||
width="720"
|
||||
height="480"
|
||||
src="https://www.youtube.com/embed/BT9ABOe-7S0"
|
||||
></iframe>
|
||||
<p class="text-xl my-2">
|
||||
Want more? Check out the{" "}
|
||||
<Link href="/concert-hall">
|
||||
<a className="underline cursor-pointer">
|
||||
concert hall
|
||||
<BsArrowRightShort className="inline text-2xl" />
|
||||
</a>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col-reverse items-end">
|
||||
<h3 className="text-xs my-4">WE DO MUSIC.</h3>
|
||||
<div className="flex flex-row items-center space-x-2 my-2">
|
||||
<h3 className="text-3xl font-semibold -translate-y-1">seycara</h3>
|
||||
<BsSpotify className="text-3xl" />
|
||||
</div>
|
||||
<div className="flex flex-row items-center space-x-2 my-2">
|
||||
<h3 className="text-3xl font-semibold -translate-y-1">@seycara</h3>
|
||||
<BsTwitter className="text-3xl" />
|
||||
</div>
|
||||
<div className="flex flex-row items-center space-x-2 my-2">
|
||||
<h3 className="text-3xl font-semibold -translate-y-1">seycara</h3>
|
||||
<BsYoutube className="text-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
81
pages/join-us.js
Normal file
81
pages/join-us.js
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
import Head from "next/head";
|
||||
import Image from "next/image";
|
||||
import styles from "../styles/Home.module.css";
|
||||
|
||||
export default function JoinUs() {
|
||||
return (
|
||||
<section
|
||||
id="#"
|
||||
className="flex flex-col min-h-screen bg-cover bg-center relative m-auto"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://static.wixstatic.com/media/f5599d_622500a4702742399a4c75c6da4fda6c.jpg/v1/fill/w_1486,h_967,al_tl,q_85,usm_0.66_1.00_0.01,enc_auto/f5599d_622500a4702742399a4c75c6da4fda6c.jpg)",
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row mt-32 m-auto space-x-2">
|
||||
<div className="flex flex-col space-y-4">
|
||||
<h2 className="absolute text-9xl font-bold text-[#313244] -translate-y-8">
|
||||
join us.
|
||||
</h2>
|
||||
<h1 className="relative text-7xl font-semibold">
|
||||
Join <span class="text-[#D0A48C]">Seycara</span>
|
||||
</h1>
|
||||
<h3 className="text-3xl font-semibold leading-10">
|
||||
Thank you for interest in joining Seycara; after all, what we do
|
||||
here is pretty cool...
|
||||
</h3>
|
||||
<div class="flex flex-row items-center pt-8 gap-8">
|
||||
<div class="flex flex-col gap-4">
|
||||
<p className="max-w-prose text-justify">
|
||||
Here are some positions that we are currently recruiting for.
|
||||
All position applications require the submission of a resume and
|
||||
a portfolio of relevant works (a cover letter is optional but
|
||||
recommended). Remember, we never require formal education in any
|
||||
application; what we value the most is your portfolio showing
|
||||
what you are capable of. However, degrees and other
|
||||
certifications can count towards your favour provided your
|
||||
portfolio is excellent.
|
||||
</p>
|
||||
<p className="max-w-prose text-justify">
|
||||
Also, our positions here at Seycara are not full time jobs.
|
||||
Being a part of Seycara does not require any regular "9-5" hours
|
||||
and if you have no active projects with us, you don't have to do
|
||||
any work with us. If you do work on projects with Seycara (in
|
||||
house or external), you are required to put in full commitment
|
||||
and stick to deadlines as required. Any monetary compensation
|
||||
will be distributed fairly among involved members with a 20%
|
||||
studio fee that is used for promotion and maintenance of
|
||||
Seycara.
|
||||
</p>
|
||||
<p className="max-w-prose text-justify">
|
||||
If any of these positions interest you, please send in your
|
||||
application materials to Info@seycara.com. We will review them
|
||||
as soon as possible and get back to you within a maximum time of
|
||||
2 weeks. Afterwards, you may be contacted for an interview on
|
||||
skype and your application status will be made known to you
|
||||
within a month of applying.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col bg-[#161817] rounded-lg p-4 gap-2 min-h-full w-[45%]">
|
||||
<h1 className="text-2xl">Available positions</h1>
|
||||
<h6 className="text-xs">
|
||||
There are no positions available right now as we're not
|
||||
searching for talent.
|
||||
</h6>
|
||||
|
||||
<div class="flex flex-row gap-2 hidden">
|
||||
<div className="rounded-lg p-4 w-full bg-[#2e2e2e]">
|
||||
<h3 className="text-xs"> PROJECT BASED</h3>
|
||||
<h3 className="text-lg">Web Developer</h3>
|
||||
<hr className="my-2" />
|
||||
<h3 className="text-sm">this is a test role description.</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
211
pages/productions.js
Normal file
211
pages/productions.js
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
import Head from "next/head";
|
||||
import Image from "next/image";
|
||||
import styles from "../styles/Home.module.css";
|
||||
import { BsSpotify, BsYoutube, BsArrowRightShort } from "react-icons/bs";
|
||||
import { CgHeart } from "react-icons/cg";
|
||||
import { IoIosArrowDown } from "react-icons/io";
|
||||
export default function Productions() {
|
||||
return (
|
||||
<section
|
||||
id="#"
|
||||
className="flex flex-col min-h-screen bg-cover bg-center relative m-auto"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://static.wixstatic.com/media/f5599d_1d315f45d1444c159300e272b6d89713.jpg/v1/fill/w_1486,h_967,al_tr,q_85,usm_0.66_1.00_0.01,enc_auto/f5599d_1d315f45d1444c159300e272b6d89713.jpg)",
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row mt-32 m-auto space-x-2">
|
||||
<div className="flex flex-col space-y-4">
|
||||
<h2 className="absolute text-9xl font-bold text-[#313244] -translate-y-8">
|
||||
productions
|
||||
</h2>
|
||||
<h1 className="relative text-7xl font-semibold">
|
||||
<span class="text-[#D0A48C]">Breathtaking</span> Soundtracks
|
||||
</h1>
|
||||
<h3 className="text-3xl font-semibold max-w-prose leading-10">
|
||||
Seycara Music Productions is all music, all the time.
|
||||
</h3>
|
||||
<div class="flex flex-row gap-12 items-center pt-8">
|
||||
<div class="flex flex-col gap-6">
|
||||
<p className="max-w-prose text-justify">
|
||||
As Seycara's oldest department established by chief composer
|
||||
Yuang Chen in 2009. We produce everything you can imagine from a
|
||||
symphonic piece for large orchestra and choir to music matching
|
||||
that of the latest J-pop featuring Hatsune Miku. Having worked
|
||||
with many youtube channels/game developers and since established
|
||||
as a high quality, reputable OST (original soundtrack) supplier,
|
||||
Seycara's music has had over 5.5 million views on our own
|
||||
channel and countless more on others. Works by chief composer
|
||||
Yuang Chen have been performed by numerous live professional
|
||||
quality orchestras such as the Kingston Symphony Orchestra and
|
||||
the Toronto Symphony Youth Orchestra.
|
||||
</p>
|
||||
<p className="max-w-prose text-justify">
|
||||
If you are interested in working with Seycara for your next big
|
||||
film, animation, or video game soundtrack, get in touch with us
|
||||
and send us what you have that you think is relevant to your
|
||||
project; we will evaluate your project and get back to you
|
||||
within 5 business days on potential cooperation opportunities.
|
||||
We also do concert piece commissions for symphony orchestras and
|
||||
other ensembles.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col bg-[#161817] rounded-lg p-4 gap-4 min-h-full w-[45%]">
|
||||
<div
|
||||
className="text-2xl h-32 p-4 rounded-xl "
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://static.wixstatic.com/media/da3e72d80cbc4e09a5b20613ca199302.jpg/v1/fill/w_978,h_465,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/da3e72d80cbc4e09a5b20613ca199302.jpg)",
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
>
|
||||
<h1>Interested in working with us?</h1>
|
||||
<div className="text-xs font-bold bg-[#a97d0d] w-32 p-2 rounded-xl mt-4 flex flex-row items-center justify-center">
|
||||
<p>GET IN TOUCH</p>{" "}
|
||||
<BsArrowRightShort className="inline text-xl font-bold" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="text-2xl h-32 p-4 rounded-xl "
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://img.youtube.com/vi/BT9ABOe-7S0/maxresdefault.jpg)",
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
>
|
||||
<h1 className="">Listen to our masterpieces</h1>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div className="text-xs font-bold bg-[#a97d0d] w-48 p-2 rounded-xl mt-4 flex flex-row items-center justify-center">
|
||||
<p>SEYCARA CONCERT HALL</p>{" "}
|
||||
<BsArrowRightShort className="inline text-xl font-bold" />
|
||||
</div>
|
||||
<div className="text-xs font-bold bg-[#0da94e] w-12 p-2 rounded-xl mt-4 flex flex-row items-center justify-center">
|
||||
<BsSpotify className="inline text-xl font-bold" />
|
||||
</div>
|
||||
<div className="text-xs font-bold bg-[#a90d0d] w-12 p-2 rounded-xl mt-4 flex flex-row items-center justify-center">
|
||||
<BsYoutube className="inline text-xl font-bold" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="text-2xl h-32 p-4 rounded-xl "
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://static.wixstatic.com/media/f5599d_21ce3d70a6aa4b819113c355c0159b97.jpg/v1/fill/w_1486,h_967,al_tl,q_85,usm_0.66_1.00_0.01,enc_auto/f5599d_21ce3d70a6aa4b819113c355c0159b97.jpg)",
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
>
|
||||
<h1>View our portfolio</h1>
|
||||
<div className="text-xs font-bold bg-[#a97d0d] w-24 p-2 rounded-xl mt-4 flex flex-row items-center justify-center">
|
||||
<p>PROJECTS</p>{" "}
|
||||
<BsArrowRightShort className="inline text-xl font-bold" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr></hr>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<CgHeart className="text-[#fb83c3] text-2xl" />
|
||||
<h1 className="text-2xl text-center font-bold">
|
||||
We blast through your{" "}
|
||||
<span className="text-[#fb83c3]">expectations</span>
|
||||
</h1>
|
||||
<h1 className="text-md text-center">
|
||||
Here's what people are saying about Seycara's work
|
||||
</h1>
|
||||
<IoIosArrowDown className="my-6" />
|
||||
</div>
|
||||
<div className="pb-12 flex flex-col gap-8">
|
||||
<div>
|
||||
<div className="flex flex-col max-w-4xl">
|
||||
<h1 className="text-md text-green-400 ">
|
||||
DesertFox - Wargirl Games - Great Britain
|
||||
</h1>
|
||||
<h1 className="text-3xl font-bold">
|
||||
"Very professional and the music they produced was amazingly
|
||||
high quality. Given the opportunity, I would love to work with
|
||||
them again"
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="flex flex-col max-w-4xl">
|
||||
<h1 className="text-md text-green-400 ">
|
||||
Yumi Ishii - Roseverte Visual Novels - Japan
|
||||
</h1>
|
||||
<h1 className="text-3xl font-bold">
|
||||
"This is the first time I use a paid material for my game's
|
||||
BGM. I'm pretty nervous at first, but Seycara is easy to
|
||||
discuss with and can handle some retakes I asked very well.
|
||||
I'm very satisfied and their music will surely give a unique
|
||||
touch to my" game.
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex flex-col max-w-4xl">
|
||||
<h1 className="text-md text-green-400 ">
|
||||
Jim Thach - MrEpicOSTs Youtube - Australia
|
||||
</h1>
|
||||
<h1 className="text-3xl font-bold">
|
||||
"Seycara Ocherstral's soundtracks are a variety of amazing
|
||||
pieces, which really reminds me of a Studio Ghibi or Disney
|
||||
film."
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="flex flex-col max-w-4xl">
|
||||
<h1 className="text-md text-green-400 ">
|
||||
David M. Tan - Film Director - United States
|
||||
</h1>
|
||||
<h1 className="text-3xl font-bold">
|
||||
“The very talented Seycara Orchestral takes you on a sonic
|
||||
journey from home where all is comfortable and yet riddled
|
||||
with anticipation to epic heights where emotions and romance
|
||||
soars through cool, new air. But as you listen and glide
|
||||
through the many ups, downs, twists and turns, you grow
|
||||
sentimental and reminiscent that perhaps a warm, grounded
|
||||
place like home is where you longed to be in the end.”
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex flex-col max-w-4xl">
|
||||
<h1 className="text-md text-green-400 ">
|
||||
Dagmawi Abebe - Film Director - United States
|
||||
</h1>
|
||||
<h1 className="text-3xl font-bold">
|
||||
"I was worried about working with a composer long distance,
|
||||
but The Seycara Orchestra did a brilliant job in bringing my
|
||||
vision for the film to fruition. I can't wait to work with
|
||||
them on future projects!"
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="flex flex-col max-w-4xl">
|
||||
<h1 className="text-md text-green-400 ">
|
||||
Jeff Ulstead - Composer - Canada
|
||||
</h1>
|
||||
<h1 className="text-3xl font-bold">
|
||||
"The music from Seycara is simply put, outstanding."
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center pb-16">
|
||||
<h1 className="text-2xl text-center font-bold">
|
||||
Ready to have us <span className="text-[#fb83c3]">onboard</span>?
|
||||
</h1>
|
||||
<div className="text-xs font-bold bg-[#fb83c3] text-black w-32 p-2 rounded-xl mt-4 flex flex-row items-center justify-center f">
|
||||
<p>Let's Talk</p>{" "}
|
||||
<BsArrowRightShort className="inline text-xl font-bold" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
490
pages/projects.js
Normal file
490
pages/projects.js
Normal file
|
|
@ -0,0 +1,490 @@
|
|||
import Head from "next/head";
|
||||
import Image from "next/image";
|
||||
import styles from "../styles/Home.module.css";
|
||||
import { CgHeart } from "react-icons/cg";
|
||||
import { AiOutlineClockCircle } from "react-icons/ai";
|
||||
import { FaHandsHelping } from "react-icons/fa";
|
||||
|
||||
export default function Projects() {
|
||||
return (
|
||||
<section
|
||||
id="#"
|
||||
className="flex flex-col min-h-screen bg-cover bg-center relative m-auto"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://static.wixstatic.com/media/f5599d_21ce3d70a6aa4b819113c355c0159b97.jpg/v1/fill/w_1486,h_967,al_tl,q_85,usm_0.66_1.00_0.01,enc_auto/f5599d_21ce3d70a6aa4b819113c355c0159b97.jpg)",
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row mt-32 m-auto space-x-2">
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="space-y-4">
|
||||
<h2 className="absolute text-9xl font-bold text-[#313244] -translate-y-8">
|
||||
portfolio.
|
||||
</h2>
|
||||
<h1 className="relative text-7xl font-semibold">
|
||||
We've worked with the{" "}
|
||||
<span class="text-[#D0A48C]">best</span>
|
||||
</h1>
|
||||
<h3 className="text-3xl font-semibold max-w-prose leading-10">
|
||||
with astonishing awards along the way
|
||||
</h3>
|
||||
</div>
|
||||
<div className="pt-8">
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<FaHandsHelping className="text-[#fb83c3] text-2xl" />
|
||||
<h1 className="text-2xl text-center font-bold">
|
||||
We'll work together,{" "}
|
||||
<span className="text-[#fb83c3]">hand in hand</span>.
|
||||
</h1>
|
||||
<h1 className="text-md text-center">
|
||||
Some partners in crime that we've worked with
|
||||
</h1>
|
||||
</div>
|
||||
<h4 className="text-xl mb-4"></h4>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<Image
|
||||
className="object-scale-down bg-[#dfcbcd] rounded-3xl"
|
||||
src="https://static.wixstatic.com/media/f5599d_638ceebba9464667911ec72192b85c7f.png/v1/fill/w_275,h_240,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/f5599d_638ceebba9464667911ec72192b85c7f.png"
|
||||
alt="Forge Animation"
|
||||
width="90"
|
||||
height="90"
|
||||
/>
|
||||
<Image
|
||||
className="object-scale-down bg-[#7d0100] rounded-3xl"
|
||||
src="https://static.wixstatic.com/media/f5599d_ec73dc700cc945e2b7a0b88614221001.png/v1/fill/w_351,h_99,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/f5599d_ec73dc700cc945e2b7a0b88614221001.png"
|
||||
alt="WarGirl"
|
||||
width="150"
|
||||
height="150"
|
||||
/>
|
||||
<Image
|
||||
className="object-scale-down bg-[#631c1c] rounded-3xl"
|
||||
src="https://static.wixstatic.com/media/f5599d_b6d97e5286034e858972ae1eada47a56.png/v1/fill/w_244,h_108,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/f5599d_b6d97e5286034e858972ae1eada47a56.png"
|
||||
alt="CDS"
|
||||
width="150"
|
||||
height="150"
|
||||
/>
|
||||
<Image
|
||||
className="object-scale-down bg-[#907e89] rounded-3xl"
|
||||
src="https://static.wixstatic.com/media/f5599d_eb326d395f794ec0aff1288b99132769.png/v1/fill/w_321,h_106,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/f5599d_eb326d395f794ec0aff1288b99132769.png"
|
||||
alt="Meowl"
|
||||
width="150"
|
||||
height="150"
|
||||
/>
|
||||
<Image
|
||||
className="object-scale-down bg-[#282828] rounded-3xl"
|
||||
src="https://static.wixstatic.com/media/f5599d_32f6b34dbef044f69a96d74da5b35766.png/v1/fill/w_392,h_136,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/f5599d_32f6b34dbef044f69a96d74da5b35766.png"
|
||||
alt="Shibuya Productions"
|
||||
width="150"
|
||||
height="150"
|
||||
/>
|
||||
<Image
|
||||
className="object-scale-down bg-[#aa3e0c] rounded-3xl"
|
||||
src="https://static.wixstatic.com/media/f5599d_b66193b0122d4e4e8eb921a24cd11a44.png/v1/fill/w_187,h_233,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/f5599d_b66193b0122d4e4e8eb921a24cd11a44.png"
|
||||
alt="Upset Games"
|
||||
width="75"
|
||||
height="75"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-8">
|
||||
<div className="flex flex-col items-center gap-1 ">
|
||||
<AiOutlineClockCircle className="text-[#fb8383] text-2xl" />
|
||||
<h1 className="text-2xl text-center font-bold">Our Timeline</h1>
|
||||
</div>
|
||||
<hr className="my-4"></hr>
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="w-32">
|
||||
<h5 className="text-4xl font-semibold text-right">2022</h5>
|
||||
<h6 className="text-xl text-right">ONGOING</h6>
|
||||
</div>
|
||||
<div className="w-1 border border-solid border-white bg-white rounded-t-full"></div>
|
||||
<ul className="pb-6">
|
||||
<li id="2022">
|
||||
<ul>
|
||||
<li className="mt-2 text-xs">SINCE 2022</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>Deemo II Original Soundtrack</li>
|
||||
<li>Feudal Lands Original Soundtrack</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="2021">
|
||||
<ul>
|
||||
<li className="mt-4 text-xs">SINCE 2021</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>Demon Rush Animation Original Soundtrack</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="2020">
|
||||
<ul>
|
||||
<li className="mt-4 text-xs">SINCE 2020</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>Hoa - Apple Arcade Title Soundtrack</li>
|
||||
<li>
|
||||
SpongeBob The Anime by Narmak - YouTube Animation
|
||||
Soundtrack
|
||||
</li>
|
||||
<li>Keyword - Video Game Soundtrack</li>
|
||||
<li>
|
||||
The Path to King by Hartova Maverick - Animation
|
||||
Soundtrack
|
||||
</li>
|
||||
<li>YouTube Critique and discussion video series</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="w-32">
|
||||
<h5 className="text-4xl font-semibold text-right">2020</h5>
|
||||
<h6 className="text-xl text-right"></h6>
|
||||
</div>
|
||||
<div className="w-1 border border-solid border-white bg-white "></div>
|
||||
<ul className="pb-6">
|
||||
<li>
|
||||
<ul>
|
||||
<li className="mt-2 text-xs">PROJECTS</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>Everlasting Summer Album</li>
|
||||
<li>Illusions of the Heart Album</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="w-32">
|
||||
<h5 className="text-4xl font-semibold text-right">2019</h5>
|
||||
<h6 className="text-xl text-right"></h6>
|
||||
</div>
|
||||
<div className="w-1 border border-solid border-white bg-white "></div>
|
||||
<ul className="pb-12">
|
||||
<li>
|
||||
<ul>
|
||||
<li className="mt-2 text-xs">PROJECTS</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>
|
||||
Festival of Lights - Concertino for Bassoon and
|
||||
Orchestra
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="w-32">
|
||||
<h5 className="text-4xl font-semibold text-right">2018</h5>
|
||||
<h6 className="text-xl text-right"></h6>
|
||||
</div>
|
||||
<div className="w-1 border border-solid border-white bg-white "></div>
|
||||
<ul className="pb-6">
|
||||
<li>
|
||||
<ul>
|
||||
<li className="mt-2 text-xs">PROJECTS</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>
|
||||
Remember Me - Concert Piece for English Horn and
|
||||
Orchestra
|
||||
</li>
|
||||
<li>
|
||||
Queen's University Faculty of Music Course Design
|
||||
- Orchestration for Modern Media
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="w-32">
|
||||
<h5 className="text-4xl font-semibold text-right">2017</h5>
|
||||
<h6 className="text-xl text-right"></h6>
|
||||
</div>
|
||||
<div className="w-1 border border-solid border-white bg-white "></div>
|
||||
<ul className="pb-6">
|
||||
<li>
|
||||
<ul>
|
||||
<li className="mt-2 text-xs">PROJECTS</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>
|
||||
Etobicoke Philharmonic Orchestra - Concert Feature
|
||||
Piece - "The Golden Waltz"
|
||||
</li>
|
||||
<li>
|
||||
The Girl Who Became An Angel - Song for Orchestra and
|
||||
Vocalist
|
||||
</li>
|
||||
<li>
|
||||
Kingston Symphony Orchestra - Concert Feature Piece -
|
||||
"Le porcelet de valse"
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="w-32">
|
||||
<h5 className="text-4xl font-semibold text-right">2016</h5>
|
||||
<h6 className="text-xl text-right"></h6>
|
||||
</div>
|
||||
<div className="w-1 border border-solid border-white bg-white "></div>
|
||||
<ul className="pb-6">
|
||||
<li>
|
||||
<ul>
|
||||
<li className="mt-2 text-xs">PROJECTS</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>Starnova - Visual Novel Original Soundtrack</li>
|
||||
<li>Conflict Genesis OST - PvP Video Game</li>
|
||||
<li>Smash Bros Legacy XP - Trailer Theme</li>
|
||||
<li>The Good Life - Short Film Original Soundtrack</li>
|
||||
<li>
|
||||
Dundas Valley Symphony Orchestra - Feature Concert
|
||||
Piece
|
||||
</li>
|
||||
<li>
|
||||
Café 0 - "The Sleeping Beast" - Visual Novel Original
|
||||
Soundtrack
|
||||
</li>
|
||||
<li>
|
||||
Kiwanis Music Festival - Best orchestral piece award
|
||||
"7 landscapes from a dream" (Since 2012)
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="w-32">
|
||||
<h5 className="text-4xl font-semibold text-right">2015</h5>
|
||||
<h6 className="text-xl text-right"></h6>
|
||||
</div>
|
||||
<div className="w-1 border border-solid border-white bg-white "></div>
|
||||
<ul className="pb-6">
|
||||
<li>
|
||||
<ul>
|
||||
<li className="mt-2 text-xs">PROJECTS</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>Smash Bros Legacy M - Theme</li>
|
||||
<li>Change! - Otome Visual Novel Soundtrack</li>
|
||||
|
||||
<li>
|
||||
No One But You - Visual Novel Credits Song Soundtrack
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Over The Hills And Far Away - Visual Novel Soundtrack
|
||||
</li>
|
||||
|
||||
<li>Windwalkers Animation - Trailer Music</li>
|
||||
<li>Hitting on the Break - Short Film</li>
|
||||
<li>Light Speed - Mobile Game Music</li>
|
||||
<li>Rblocks - Video Game Music</li>
|
||||
<li>QTV Intro Theme - Television News Network Music</li>
|
||||
<li>
|
||||
Jenny OST - Short Film -
|
||||
https://www.facebook.com/shortfilmjenny
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="w-32">
|
||||
<h5 className="text-4xl font-semibold text-right">2014</h5>
|
||||
<h6 className="text-xl text-right"></h6>
|
||||
</div>
|
||||
<div className="w-1 border border-solid border-white bg-white "></div>
|
||||
<ul className="pb-6">
|
||||
<li>
|
||||
<ul>
|
||||
<li className="mt-2 text-xs">PROJECTS</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>
|
||||
Ottawa Youth Orchestra - "Orchestral Suite no.1
|
||||
abridged"
|
||||
</li>
|
||||
<li>
|
||||
Toronto Symphony Orchestra Association - TSYO open
|
||||
call winner "Ouverture diabolique"
|
||||
</li>
|
||||
<li>
|
||||
Free the Children/Me to We - National We Day Orchestra
|
||||
Direction
|
||||
</li>
|
||||
<li>SH4 - Action film by Smiling Pig Productions</li>
|
||||
|
||||
<li>
|
||||
Ottawa Festival Symphony - Feature Concert Piece
|
||||
</li>
|
||||
<li>Cavern Simulator - In house video game</li>
|
||||
<li>A Goose's Tale - In house musical</li>
|
||||
<li>
|
||||
Colonel By Secondary School - Feature concert piece
|
||||
"Sunset"
|
||||
</li>
|
||||
<li>Soundtracks of Wonder - In house CD Publication</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="w-32">
|
||||
<h5 className="text-4xl font-semibold text-right">2013</h5>
|
||||
<h6 className="text-xl text-right"></h6>
|
||||
</div>
|
||||
<div className="w-1 border border-solid border-white bg-white "></div>
|
||||
<ul className="pb-6">
|
||||
<li>
|
||||
<ul>
|
||||
<li className="text-xs mt-2">AWARDS</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>
|
||||
Kiwanis Music Festival - Best symphonic/overall music
|
||||
award "Orchestral Suite no.1"{" "}
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li className="mt-4 text-xs">PROJECTS</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>Population dynamics - a Documentary on China </li>
|
||||
<li>JMaster9000 - In house video game </li>
|
||||
<li>Ottawa Festival Symphony - Music direction </li>
|
||||
<li>Animeka Japan - Theme music composition </li>
|
||||
<li>
|
||||
Colonel By Secondary School - Music arrangement{" "}
|
||||
</li>
|
||||
<li>FlagRunner - In house video game </li>
|
||||
<li>Sierra Leone - a Documentary </li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="w-32">
|
||||
<h5 className="text-4xl font-semibold text-right">2012</h5>
|
||||
<h6 className="text-xl text-right"></h6>
|
||||
</div>
|
||||
<div className="w-1 border border-solid border-white bg-white "></div>
|
||||
<ul className="pb-6">
|
||||
<li>
|
||||
<ul>
|
||||
<li className="text-xs mt-2">AWARDS</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>
|
||||
Kiwanis Music Festival - Best symphonic/overall music
|
||||
award "Adagio & Waltz"
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li className="mt-4 text-xs">PROJECTS</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>A Green Christmas - In house film </li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="w-32">
|
||||
<h5 className="text-4xl font-semibold text-right">2011</h5>
|
||||
<h6 className="text-xl text-right"></h6>
|
||||
</div>
|
||||
<div className="w-1 border border-solid border-white bg-white "></div>
|
||||
<ul className="pb-6">
|
||||
<li>
|
||||
<ul>
|
||||
<li className="mt-2 text-xs">PROJECTS</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>
|
||||
Youtube Symphony Orchestra - Editorial consulting
|
||||
</li>
|
||||
<li>Kanata Symphony Orchestra - Music arrangement</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="w-32">
|
||||
<h5 className="text-4xl font-semibold text-right">2010</h5>
|
||||
<h6 className="text-xl text-right"></h6>
|
||||
</div>
|
||||
<div className="w-1 border border-solid border-white bg-white "></div>
|
||||
<ul className="pb-6">
|
||||
<li>
|
||||
<ul>
|
||||
<li className="mt-2 text-xs">PROJECTS</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>
|
||||
Cory McPherson Regional Composition Festival -
|
||||
Programmatic background music{" "}
|
||||
</li>
|
||||
<li>
|
||||
WEJ Elementary School Chorus - Music
|
||||
arrangement/composition feature{" "}
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="w-32">
|
||||
<h5 className="text-xs font-semibold text-right">✨</h5>
|
||||
</div>
|
||||
<div className="w-1 border border-solid border-white bg-white mb-12 rounded-b-full "></div>
|
||||
<p className="mb-12 text-xs">YOU'VE REACHED THE END</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
public/logo.webp
Normal file
BIN
public/logo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
4
public/vercel.svg
Normal file
4
public/vercel.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
129
styles/Home.module.css
Normal file
129
styles/Home.module.css
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
.container {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
min-height: 100vh;
|
||||
padding: 4rem 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid #eaeaea;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin: 4rem 0;
|
||||
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;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 1rem;
|
||||
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;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:focus,
|
||||
.card:active {
|
||||
color: #0070f3;
|
||||
border-color: #0070f3;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 1em;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.grid {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.card,
|
||||
.footer {
|
||||
border-color: #222;
|
||||
}
|
||||
.code {
|
||||
background: #111;
|
||||
}
|
||||
.logo img {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
9
styles/globals.css
Normal file
9
styles/globals.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html,
|
||||
body {
|
||||
background-color: #161817;
|
||||
color: #dfcbcd;
|
||||
}
|
||||
10
tailwind.config.js
Normal file
10
tailwind.config.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
module.exports = {
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
Loading…
Reference in a new issue