home page

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() {

app/components/footer/index.tsx

@@ -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">&copy; 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>
+    );
+}

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 (
+        <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>
+    );
+}

app/components/header/index.tsx

@@ -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>
+        </>
+    );
+}

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 (
-        <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" />
-                    <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>
+        <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>
     );
 }

app/components/page/index.tsx

@@ -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() {}

app/root.tsx

@@ -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 />

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">
-            <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 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 />
+        </>
     );
 }

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">
+                                &nbsp;&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;&nbsp;
+                            </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 />
+        </>
+    );
+}

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>
+    );
+}

app/routes/admin/thing.tsx

@@ -0,0 +1,3 @@
+export default function Thing() {
+    return <div>Thing</div>;
+}

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">
+                                &nbsp;&nbsp;&nbsp;&nbsp;Employment&nbsp;&nbsp;&nbsp;&nbsp;
+                            </p>
+                        </div>
+
+                        <EmployeeList />
+                    </div>
+                </div>
+            </PageContainer>
+
+            <Footer />
+        </>
+    );
+}

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>

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>

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>
+<?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>

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>