home page
This commit is contained in:
parent
72a11f92b2
commit
eac430f7bc
|
|
@ -1,4 +1,4 @@
|
|||
import Link from '../Link';
|
||||
import Link from '../../Link';
|
||||
import SidebarProfile from './SidebarProfile';
|
||||
|
||||
export default function Sidebar() {
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
export function Footer() {
|
||||
return (
|
||||
<footer className="text-xl text-stone-500 fixed bottom-0 min-h-[10vh] min-w-full justify-center flex">
|
||||
<div className="flex align-middle text-center items-center min-h-full">
|
||||
<p className="px-5">© XNL 2024 All rights reseved.</p>
|
||||
<a href="https://xcl.hri7566.info" className="text-white">
|
||||
<img src="/xcl.png" alt="XCL" width="72" />
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react';
|
||||
import { Button } from '../ui/button';
|
||||
|
||||
export function NavLink({
|
||||
href,
|
||||
children
|
||||
}: React.PropsWithChildren & { href: string }) {
|
||||
return (
|
||||
<Button variant="ghost" className="text-lg">
|
||||
<a href={href}>{children}</a>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export function Nav() {
|
||||
return (
|
||||
<div className="flex justify-between gap-4">
|
||||
<NavLink href="/">Home</NavLink>
|
||||
<NavLink href="/about">About</NavLink>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { Nav } from './Nav';
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<>
|
||||
<header className="px-4 py-2 w-full">
|
||||
<div className="flex w-[76%] mx-auto my-1 justify-between text-center items-center">
|
||||
<a
|
||||
href="/"
|
||||
id="main-logo"
|
||||
className="flex items-center justify-center mb-4"
|
||||
>
|
||||
<img src="/logo.svg" alt="XNL Logo" className="w-32" />
|
||||
</a>
|
||||
|
||||
<Nav />
|
||||
</div>
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={toggleTheme}
|
||||
>
|
||||
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-color dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-color dark:rotate-0 dark:scale-100" />
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setTheme(Theme.LIGHT)}>
|
||||
Light
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme(Theme.DARK)}>
|
||||
Dark
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
import React from 'react';
|
||||
|
||||
export function PageContainer({ children }: React.PropsWithChildren) {
|
||||
return <div className="page-container w-[75vw] mx-auto">{children}</div>;
|
||||
}
|
||||
|
||||
export function PageBox() {}
|
||||
|
|
@ -67,6 +67,7 @@ export function App() {
|
|||
name="viewport"
|
||||
content="width=device-width, initial-scale=1"
|
||||
/>
|
||||
<link rel="icon" type="image/svg" href="/favicon.svg" />
|
||||
<Meta />
|
||||
<PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} />
|
||||
<Links />
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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"
|
||||
<>
|
||||
<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
|
||||
>
|
||||
<EmploymentCard />
|
||||
<PanelResizeHandle />
|
||||
<SampleCard />
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
<source src="/bg.webm#t=4" type="video/webm" />
|
||||
</video>
|
||||
</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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export default function Thing() {
|
||||
return <div>Thing</div>;
|
||||
}
|
||||
|
|
@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 722 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 369 B |
|
|
@ -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>
|
||||
<?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>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 2.0 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 695 B |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Loading…
Reference in New Issue