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