diff --git a/app/components/sidebar/SidebarProfile.tsx b/app/components/admin/sidebar/SidebarProfile.tsx similarity index 100% rename from app/components/sidebar/SidebarProfile.tsx rename to app/components/admin/sidebar/SidebarProfile.tsx diff --git a/app/components/sidebar/index.tsx b/app/components/admin/sidebar/index.tsx similarity index 97% rename from app/components/sidebar/index.tsx rename to app/components/admin/sidebar/index.tsx index 5ec4478..f2deb94 100644 --- a/app/components/sidebar/index.tsx +++ b/app/components/admin/sidebar/index.tsx @@ -1,4 +1,4 @@ -import Link from '../Link'; +import Link from '../../Link'; import SidebarProfile from './SidebarProfile'; export default function Sidebar() { diff --git a/app/components/footer/index.tsx b/app/components/footer/index.tsx new file mode 100644 index 0000000..9682e27 --- /dev/null +++ b/app/components/footer/index.tsx @@ -0,0 +1,12 @@ +export function Footer() { + return ( + + ); +} diff --git a/app/components/header/Nav.tsx b/app/components/header/Nav.tsx new file mode 100644 index 0000000..268329b --- /dev/null +++ b/app/components/header/Nav.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Button } from '../ui/button'; + +export function NavLink({ + href, + children +}: React.PropsWithChildren & { href: string }) { + return ( + + ); +} + +export function Nav() { + return ( +
+ Home + About +
+ ); +} diff --git a/app/components/header/index.tsx b/app/components/header/index.tsx new file mode 100644 index 0000000..1a4b16d --- /dev/null +++ b/app/components/header/index.tsx @@ -0,0 +1,21 @@ +import { Nav } from './Nav'; + +export default function Header() { + return ( + <> +
+
+ + +
+
+ + ); +} diff --git a/app/components/mode-toggle.tsx b/app/components/mode-toggle.tsx index 4d5f1b7..332d290 100644 --- a/app/components/mode-toggle.tsx +++ b/app/components/mode-toggle.tsx @@ -2,33 +2,23 @@ import { Moon, Sun } from 'lucide-react'; import { Theme, useTheme } from 'remix-themes'; import { Button } from './ui/button'; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger -} from './ui/dropdown-menu'; export function ModeToggle() { - const [, setTheme] = useTheme(); + const [theme, setTheme] = useTheme(); + + const toggleTheme = () => { + setTheme(theme === Theme.DARK ? Theme.LIGHT : Theme.DARK); + }; return ( - - - - - - setTheme(Theme.LIGHT)}> - Light - - setTheme(Theme.DARK)}> - Dark - - - + ); } diff --git a/app/components/page/index.tsx b/app/components/page/index.tsx new file mode 100644 index 0000000..dcfc86f --- /dev/null +++ b/app/components/page/index.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +export function PageContainer({ children }: React.PropsWithChildren) { + return
{children}
; +} + +export function PageBox() {} diff --git a/app/root.tsx b/app/root.tsx index 3dad867..dfec31b 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -67,6 +67,7 @@ export function App() { name="viewport" content="width=device-width, initial-scale=1" /> + diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index 18098bd..0b23a90 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -1,33 +1,51 @@ -import type { MetaFunction } from '@remix-run/node'; -import { PanelResizeHandle } from 'react-resizable-panels'; -import EmploymentCard from '~/components/cards/employment'; -import SampleCard from '~/components/cards/sample'; -import Sidebar from '~/components/sidebar'; -import Title from '~/components/title'; -import { ResizablePanelGroup } from '~/components/ui/resizable'; - -export const meta: MetaFunction = () => { - return [{ title: 'Home' }, { name: 'description', content: 'Home' }]; -}; +import { Footer } from '~/components/footer'; +import Header from '~/components/header'; +import { PageContainer } from '~/components/page'; export default function Index() { return ( -
- -
- - <div className="flex items-stretch h-[calc(100vh-5rem)]"> - <ResizablePanelGroup - direction="vertical" - autoSaveId="main-panel-group-" - className="px-4 py-2 overflow-y-scroll" - > - <EmploymentCard /> - <PanelResizeHandle /> - <SampleCard /> - </ResizablePanelGroup> - </div> + <> + <div className="absolute top-0 -z-40 backdrop-blur-sm w-full min-h-screen isolate bg-black" /> + + <div className="absolute -z-30 min-h-full min-w-full overflow-hidden"> + <video + className="min-w-full min-h-full w-auto h-auto absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]" + onLoad={() => {}} + autoPlay + muted + > + <source src="/bg.webm#t=4" type="video/webm" /> + </video> </div> - </div> + + <div + style={{ + background: + 'linear-gradient(20deg, #ff660005, #ff990005), #00000040' + }} + className="absolute top-0 -z-20 backdrop-blur-sm w-full min-h-screen isolate" + /> + + <div + style={{ + background: 'url("/grain.svg")', + opacity: 0.1 + }} + className="absolute top-0 -z-10 backdrop-blur-sm w-full min-h-screen isolate" + /> + + <Header /> + <PageContainer> + <div + id="middle" + className="flex justify-center items-center w-full min-h-[75vh]" + > + <h1 className="text-7xl text-center"> + Pushing the boundaries of what is achievable. + </h1> + </div> + </PageContainer> + <Footer /> + </> ); } diff --git a/app/routes/about.tsx b/app/routes/about.tsx new file mode 100644 index 0000000..42f3928 --- /dev/null +++ b/app/routes/about.tsx @@ -0,0 +1,54 @@ +import { Footer } from '~/components/footer'; +import Header from '~/components/header'; +import { PageContainer } from '~/components/page'; + +export default function About() { + return ( + <> + <Header /> + + <div + style={{ + background: 'linear-gradient(20deg, #ff660005, #ff990005)' + }} + className="absolute top-0 -z-20 backdrop-blur-sm w-full min-h-screen isolate" + /> + + <div + style={{ + background: 'url("/grain.svg")', + opacity: 0.1 + }} + className="absolute top-0 -z-10 backdrop-blur-sm w-full min-h-screen isolate" + /> + + <PageContainer> + <div className="flex justify-center items-center min-h-[75vh]"> + <div className="flex-col"> + <div className="mb-6 flex text-center justify-center"> + <p className="text-5xl pb-4 border-b"> +     About     + </p> + </div> + + <p className="text-lg indent-10 w-[60%] mx-auto"> + We make things. What do we make? Things. We make a + lot of things. Things, we make. When we make things, + we are making things. Things are definitely made by + us. We make things as we make them. Our things are + made by us, and we made them. The things we make are + made by us. Our things are made, and we made our + things. We make our things, as they are our things. + The things we make are constituted by the things + they are. The things are things, and we made them. + Our things are made. The things we make are things, + they were made by us, and they are our things. + </p> + </div> + </div> + </PageContainer> + + <Footer /> + </> + ); +} diff --git a/app/routes/admin.tsx b/app/routes/admin.tsx new file mode 100644 index 0000000..4eeead6 --- /dev/null +++ b/app/routes/admin.tsx @@ -0,0 +1,33 @@ +import type { MetaFunction } from '@remix-run/node'; +import { PanelResizeHandle } from 'react-resizable-panels'; +import EmploymentCard from '~/components/cards/employment'; +import SampleCard from '~/components/cards/sample'; +import Sidebar from '~/components/admin/sidebar'; +import Title from '~/components/title'; +import { ResizablePanelGroup } from '~/components/ui/resizable'; + +export const meta: MetaFunction = () => { + return [{ title: 'Home' }, { name: 'description', content: 'Home' }]; +}; + +export default function Admin() { + return ( + <div className="flex"> + <Sidebar /> + <div id="main-content" className="flex-1 overflow-y-scroll"> + <Title title="Home" /> + <div className="flex items-stretch h-[calc(100vh-5rem)]"> + <ResizablePanelGroup + direction="vertical" + autoSaveId="main-panel-group-" + className="px-4 py-2 overflow-y-scroll" + > + <EmploymentCard /> + <PanelResizeHandle /> + <SampleCard /> + </ResizablePanelGroup> + </div> + </div> + </div> + ); +} diff --git a/app/routes/admin/thing.tsx b/app/routes/admin/thing.tsx new file mode 100644 index 0000000..5287928 --- /dev/null +++ b/app/routes/admin/thing.tsx @@ -0,0 +1,3 @@ +export default function Thing() { + return <div>Thing</div>; +} diff --git a/app/routes/employment.tsx b/app/routes/employment.tsx new file mode 100644 index 0000000..65c636a --- /dev/null +++ b/app/routes/employment.tsx @@ -0,0 +1,43 @@ +import EmployeeList from '~/components/cards/employment/EmployeeList'; +import { Footer } from '~/components/footer'; +import Header from '~/components/header'; +import { PageContainer } from '~/components/page'; + +export default function Employment() { + return ( + <> + <Header /> + + <div + style={{ + background: 'linear-gradient(20deg, #ff660005, #ff990005)' + }} + className="absolute top-0 -z-20 backdrop-blur-sm w-full min-h-screen isolate" + /> + + <div + style={{ + background: 'url("/grain.svg")', + opacity: 0.1 + }} + className="absolute top-0 -z-10 backdrop-blur-sm w-full min-h-screen isolate" + /> + + <PageContainer> + <div className="flex justify-center items-center min-h-[75vh]"> + <div className="flex-col"> + <div className="mb-6 flex text-center justify-center"> + <p className="text-4xl pb-4 border-b"> +     Employment     + </p> + </div> + + <EmployeeList /> + </div> + </div> + </PageContainer> + + <Footer /> + </> + ); +} diff --git a/public/bg.webm b/public/bg.webm new file mode 100644 index 0000000..7c341f3 Binary files /dev/null and b/public/bg.webm differ diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index 8830cf6..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..5b3bb11 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 215.56 250"> + <defs> + <style>.b{fill:#ff001a;}.c{fill:#f60;}.d{fill:#09f;}</style> + </defs> + <polygon class="c" points="77.76 0 215.56 250 181.44 250 43.37 0 77.76 0" /> + <polygon class="c" points="34.13 0 172.19 250 138.07 250 0 0 34.13 0" /> + <path class="d" + d="M129.34,77.98l-17.7-32.61L137.81,0h34.39l-42.86,77.98Zm22.08,40.27L215.56,0h-34.13l-47.48,86.64,17.45,31.61Z" /> + <g> + <polygon class="b" points="86.23 172.02 103.68 203.37 77.76 250 43.37 250 86.23 172.02" /> + <polygon class="b" points="81.61 163.36 34.13 250 0 250 64.15 131.75 81.61 163.36" /> + </g> +</svg> \ No newline at end of file diff --git a/public/grain.svg b/public/grain.svg new file mode 100644 index 0000000..597c3eb --- /dev/null +++ b/public/grain.svg @@ -0,0 +1,16 @@ +<svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg"> + <filter id="noiseFilter"> + <feTurbulence + type="fractalNoise" + baseFrequency="0.65" + numOctaves="3" + stitchTiles="stitch" + /> + </filter> + + <rect + width="100%" + height="100%" + filter="url(#noiseFilter)" + /> +</svg> \ No newline at end of file diff --git a/public/logo.svg b/public/logo.svg index 311ec4c..ce23c0a 100644 --- a/public/logo.svg +++ b/public/logo.svg @@ -1 +1,24 @@ -<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 250"><defs><style>.b{fill:#ff001a;}.c{fill:#f60;}.d{fill:#09f;}</style></defs><polygon class="c" points="77.76 0 215.56 250 181.44 250 43.37 0 77.76 0"/><polygon class="c" points="34.13 0 172.19 250 138.07 250 0 0 34.13 0"/><path class="d" d="M129.34,77.98l-17.7-32.61L137.81,0h34.39l-42.86,77.98Zm22.08,40.27L215.56,0h-34.13l-47.48,86.64,17.45,31.61Z"/><g><polygon class="d" points="86.23 172.02 103.68 203.37 77.76 250 43.37 250 86.23 172.02"/><polygon class="d" points="81.61 163.36 34.13 250 0 250 64.15 131.75 81.61 163.36"/></g><path class="b" d="M364.93,62.43c.86,3.92,1.28,8.07,1.28,12.49V250h-32.08V83.59c0-2.04-.65-3.65-1.93-4.84-1.28-1.19-2.94-1.78-5-1.78h-93.16V43.07h102.4c5.99,0,10.91,.81,14.76,2.42s6.89,3.86,9.11,6.74c2.22,2.89,3.76,6.29,4.62,10.19Z"/><rect class="b" x="275.61" y="85.12" width="35.93" height="164.88"/><rect class="b" x="234.04" y="85.12" width="32.34" height="164.88"/><path class="b" d="M407.79,76.97V250h-32.34V69.83c0-5.1-.64-9.85-1.92-14.28-1.28-4.41-3.34-8.24-6.17-11.47-2.82-3.22-6.5-5.73-11.03-7.51-4.54-1.79-10.06-2.68-16.56-2.68h-105.74V0h102.4c12.49,0,23.22,1.36,32.21,4.07,8.98,2.72,16.38,7.14,22.2,13.25,5.82,6.12,10.09,14.07,12.83,23.83,2.73,9.78,4.11,21.71,4.11,35.81Z"/><path class="c" d="M506.84,216.1h93.16v33.9h-97.26c-9.24,0-18.18-2-26.82-5.99-8.64-3.99-16.25-9.43-22.84-16.31-6.59-6.89-11.85-15.04-15.78-24.47-3.93-9.43-5.9-19.5-5.9-30.2V0h34.14V173.03c0,5.1,.94,10.24,2.83,15.42,1.88,5.19,4.57,9.81,8.09,13.89,3.5,4.08,7.82,7.39,12.96,9.94,5.13,2.55,10.94,3.82,17.44,3.82Z"/><path class="d" d="M600,173.03v33.9h-89.83c-5.99,0-11.2-1.19-15.65-3.57-4.45-2.37-8.13-5.43-11.04-9.17-2.91-3.74-5.09-7.95-6.54-12.62-1.46-4.67-2.18-9.21-2.18-13.63V0h35.16V166.41c0,2.03,.55,3.61,1.66,4.71,1.12,1.11,2.19,1.66,3.21,1.66v.25h85.2Z"/></svg> \ No newline at end of file +<?xml version="1.0" encoding="UTF-8"?> +<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 250"> + <defs> + <style>.b{fill:#ff001a;}.c{fill:#f60;}.d{fill:#09f;}</style> + </defs> + <polygon class="c" points="77.76 0 215.56 250 181.44 250 43.37 0 77.76 0" /> + <polygon class="c" points="34.13 0 172.19 250 138.07 250 0 0 34.13 0" /> + <path class="d" + d="M129.34,77.98l-17.7-32.61L137.81,0h34.39l-42.86,77.98Zm22.08,40.27L215.56,0h-34.13l-47.48,86.64,17.45,31.61Z" /> + <g> + <polygon class="d" points="86.23 172.02 103.68 203.37 77.76 250 43.37 250 86.23 172.02" /> + <polygon class="d" points="81.61 163.36 34.13 250 0 250 64.15 131.75 81.61 163.36" /> + </g> + <path class="b" + d="M364.93,62.43c.86,3.92,1.28,8.07,1.28,12.49V250h-32.08V83.59c0-2.04-.65-3.65-1.93-4.84-1.28-1.19-2.94-1.78-5-1.78h-93.16V43.07h102.4c5.99,0,10.91,.81,14.76,2.42s6.89,3.86,9.11,6.74c2.22,2.89,3.76,6.29,4.62,10.19Z" /> + <rect class="b" x="275.61" y="85.12" width="35.93" height="164.88" /> + <rect class="b" x="234.04" y="85.12" width="32.34" height="164.88" /> + <path class="b" + d="M407.79,76.97V250h-32.34V69.83c0-5.1-.64-9.85-1.92-14.28-1.28-4.41-3.34-8.24-6.17-11.47-2.82-3.22-6.5-5.73-11.03-7.51-4.54-1.79-10.06-2.68-16.56-2.68h-105.74V0h102.4c12.49,0,23.22,1.36,32.21,4.07,8.98,2.72,16.38,7.14,22.2,13.25,5.82,6.12,10.09,14.07,12.83,23.83,2.73,9.78,4.11,21.71,4.11,35.81Z" /> + <path class="c" + d="M506.84,216.1h93.16v33.9h-97.26c-9.24,0-18.18-2-26.82-5.99-8.64-3.99-16.25-9.43-22.84-16.31-6.59-6.89-11.85-15.04-15.78-24.47-3.93-9.43-5.9-19.5-5.9-30.2V0h34.14V173.03c0,5.1,.94,10.24,2.83,15.42,1.88,5.19,4.57,9.81,8.09,13.89,3.5,4.08,7.82,7.39,12.96,9.94,5.13,2.55,10.94,3.82,17.44,3.82Z" /> + <path class="d" + d="M600,173.03v33.9h-89.83c-5.99,0-11.2-1.19-15.65-3.57-4.45-2.37-8.13-5.43-11.04-9.17-2.91-3.74-5.09-7.95-6.54-12.62-1.46-4.67-2.18-9.21-2.18-13.63V0h35.16V166.41c0,2.03,.55,3.61,1.66,4.71,1.12,1.11,2.19,1.66,3.21,1.66v.25h85.2Z" /> +</svg> \ No newline at end of file diff --git a/public/x.svg b/public/x.svg new file mode 100644 index 0000000..78953fc --- /dev/null +++ b/public/x.svg @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.62 241.31"> + <defs> + <style>.b{fill:#f26722;}</style> + </defs> + <polygon class="b" points="82.65 166.04 99.38 196.3 74.53 241.31 41.57 241.31 82.65 166.04" /> + <polygon class="b" points="74.53 0 206.62 241.31 173.91 241.31 41.57 0 74.53 0" /> + <polygon class="b" points="32.71 0 165.05 241.31 132.34 241.31 0 0 32.71 0" /> + <path class="b" + d="M123.97,75.27l-16.97-31.48L132.09,0h32.96l-41.08,75.27Zm21.16,38.87L206.62,0h-32.71l-45.51,83.63,16.73,30.51Z" /> + <polygon class="b" points="78.22 157.68 32.71 241.31 0 241.31 61.49 127.17 78.22 157.68" /> +</svg> \ No newline at end of file diff --git a/public/xcl.png b/public/xcl.png new file mode 100644 index 0000000..12570b0 Binary files /dev/null and b/public/xcl.png differ