home page

This commit is contained in:
Hri7566 2024-09-09 03:59:50 -04:00
parent 72a11f92b2
commit eac430f7bc
20 changed files with 322 additions and 53 deletions

View File

@ -1,4 +1,4 @@
import Link from '../Link';
import Link from '../../Link';
import SidebarProfile from './SidebarProfile';
export default function Sidebar() {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

54
app/routes/about.tsx Normal file
View File

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

33
app/routes/admin.tsx Normal file
View File

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

View File

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

43
app/routes/employment.tsx Normal file
View File

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

BIN
public/bg.webm Normal file

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

14
public/favicon.svg Normal file
View File

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

16
public/grain.svg Normal file
View File

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

View File

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

12
public/x.svg Normal file
View File

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

BIN
public/xcl.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB