Skip to content

Commit 56044ac

Browse files
lsbyerleylsbyerley
committed
chore: new homepage
1 parent 9b45ec5 commit 56044ac

File tree

7 files changed

+586
-31
lines changed

7 files changed

+586
-31
lines changed

‎app/components/site-footer.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const SiteFooter = () => {
2+
return (
3+
<footer className="flex w-full shrink-0 flex-col items-center gap-2 border-t px-4 py-6 sm:flex-row md:px-6">
4+
<p className="text-xs text-gray-500 dark:text-gray-400">
5+
© 2024 Lucas Byerley. All rights reserved.
6+
</p>
7+
</footer>
8+
)
9+
}
10+
11+
export default SiteFooter

‎app/components/site-header.tsx

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import { Link } from '@remix-run/react'
2+
import {
3+
SheetTrigger,
4+
SheetClose,
5+
SheetContent,
6+
Sheet,
7+
} from '#app/components/ui/sheet'
8+
import { Button } from '#app/components/ui/button.tsx'
9+
10+
const SiteHeader = () => {
11+
return (
12+
<header className="flex h-14 items-center justify-between px-4 lg:px-6">
13+
<div className="flex items-center justify-center">
14+
<CodeIcon className="h-6 w-6" />
15+
<span className="sr-only">Lucas Byerley</span>
16+
</div>
17+
<Sheet>
18+
<SheetTrigger asChild>
19+
<Button className="rounded-full" size="icon" variant="outline">
20+
<MenuIcon className="h-6 w-6" />
21+
<span className="sr-only">Toggle navigation menu</span>
22+
</Button>
23+
</SheetTrigger>
24+
<SheetContent
25+
className="flex flex-col bg-gray-950 p-6 text-gray-50"
26+
side="left"
27+
>
28+
<div className="mb-6 flex items-center justify-between">
29+
<div className="flex items-center justify-center">
30+
<CodeIcon className="h-6 w-6" />
31+
<span className="sr-only">Lucas Byerley</span>
32+
</div>
33+
<SheetClose asChild>
34+
<Button className="rounded-full" size="icon" variant="ghost">
35+
<XIcon className="h-6 w-6" />
36+
</Button>
37+
</SheetClose>
38+
</div>
39+
<nav className="flex flex-col gap-4">
40+
<Link
41+
className="text-lg font-medium underline-offset-4 hover:underline"
42+
to="/"
43+
>
44+
Home
45+
</Link>
46+
<Link
47+
className="text-lg font-medium underline-offset-4 hover:underline"
48+
to="/"
49+
>
50+
Projects
51+
</Link>
52+
<Link
53+
className="text-lg font-medium underline-offset-4 hover:underline"
54+
to="/"
55+
>
56+
Skills
57+
</Link>
58+
<Link
59+
className="text-lg font-medium underline-offset-4 hover:underline"
60+
to="/"
61+
>
62+
Contact
63+
</Link>
64+
</nav>
65+
</SheetContent>
66+
</Sheet>
67+
</header>
68+
)
69+
}
70+
71+
function CodeIcon(props: any) {
72+
return (
73+
<svg
74+
{...props}
75+
xmlns="http://www.w3.org/2000/svg"
76+
width="24"
77+
height="24"
78+
viewBox="0 0 24 24"
79+
fill="none"
80+
stroke="currentColor"
81+
strokeWidth="2"
82+
strokeLinecap="round"
83+
strokeLinejoin="round"
84+
>
85+
<polyline points="16 18 22 12 16 6" />
86+
<polyline points="8 6 2 12 8 18" />
87+
</svg>
88+
)
89+
}
90+
91+
function MenuIcon(props: any) {
92+
return (
93+
<svg
94+
{...props}
95+
xmlns="http://www.w3.org/2000/svg"
96+
width="24"
97+
height="24"
98+
viewBox="0 0 24 24"
99+
fill="none"
100+
stroke="currentColor"
101+
strokeWidth="2"
102+
strokeLinecap="round"
103+
strokeLinejoin="round"
104+
>
105+
<line x1="4" x2="20" y1="12" y2="12" />
106+
<line x1="4" x2="20" y1="6" y2="6" />
107+
<line x1="4" x2="20" y1="18" y2="18" />
108+
</svg>
109+
)
110+
}
111+
112+
function XIcon(props: any) {
113+
return (
114+
<svg
115+
{...props}
116+
xmlns="http://www.w3.org/2000/svg"
117+
width="24"
118+
height="24"
119+
viewBox="0 0 24 24"
120+
fill="none"
121+
stroke="currentColor"
122+
strokeWidth="2"
123+
strokeLinecap="round"
124+
strokeLinejoin="round"
125+
>
126+
<path d="M18 6 6 18" />
127+
<path d="m6 6 12 12" />
128+
</svg>
129+
)
130+
}
131+
132+
export default SiteHeader

‎app/components/ui/sheet.tsx

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import * as React from "react"
2+
import * as SheetPrimitive from "@radix-ui/react-dialog"
3+
import { cva, type VariantProps } from "class-variance-authority"
4+
import { X } from "lucide-react"
5+
6+
import { cn } from "#app/utils/misc.tsx"
7+
8+
const Sheet = SheetPrimitive.Root
9+
10+
const SheetTrigger = SheetPrimitive.Trigger
11+
12+
const SheetClose = SheetPrimitive.Close
13+
14+
const SheetPortal = SheetPrimitive.Portal
15+
16+
const SheetOverlay = React.forwardRef<
17+
React.ElementRef<typeof SheetPrimitive.Overlay>,
18+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
19+
>(({ className, ...props }, ref) => (
20+
<SheetPrimitive.Overlay
21+
className={cn(
22+
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
23+
className
24+
)}
25+
{...props}
26+
ref={ref}
27+
/>
28+
))
29+
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
30+
31+
const sheetVariants = cva(
32+
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
33+
{
34+
variants: {
35+
side: {
36+
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
37+
bottom:
38+
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
39+
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
40+
right:
41+
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
42+
},
43+
},
44+
defaultVariants: {
45+
side: "right",
46+
},
47+
}
48+
)
49+
50+
interface SheetContentProps
51+
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
52+
VariantProps<typeof sheetVariants> {}
53+
54+
const SheetContent = React.forwardRef<
55+
React.ElementRef<typeof SheetPrimitive.Content>,
56+
SheetContentProps
57+
>(({ side = "right", className, children, ...props }, ref) => (
58+
<SheetPortal>
59+
<SheetOverlay />
60+
<SheetPrimitive.Content
61+
ref={ref}
62+
className={cn(sheetVariants({ side }), className)}
63+
{...props}
64+
>
65+
{children}
66+
{/* <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
67+
<X className="h-4 w-4" />
68+
<span className="sr-only">Close</span>
69+
</SheetPrimitive.Close> */}
70+
</SheetPrimitive.Content>
71+
</SheetPortal>
72+
))
73+
SheetContent.displayName = SheetPrimitive.Content.displayName
74+
75+
const SheetHeader = ({
76+
className,
77+
...props
78+
}: React.HTMLAttributes<HTMLDivElement>) => (
79+
<div
80+
className={cn(
81+
"flex flex-col space-y-2 text-center sm:text-left",
82+
className
83+
)}
84+
{...props}
85+
/>
86+
)
87+
SheetHeader.displayName = "SheetHeader"
88+
89+
const SheetFooter = ({
90+
className,
91+
...props
92+
}: React.HTMLAttributes<HTMLDivElement>) => (
93+
<div
94+
className={cn(
95+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
96+
className
97+
)}
98+
{...props}
99+
/>
100+
)
101+
SheetFooter.displayName = "SheetFooter"
102+
103+
const SheetTitle = React.forwardRef<
104+
React.ElementRef<typeof SheetPrimitive.Title>,
105+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
106+
>(({ className, ...props }, ref) => (
107+
<SheetPrimitive.Title
108+
ref={ref}
109+
className={cn("text-lg font-semibold text-foreground", className)}
110+
{...props}
111+
/>
112+
))
113+
SheetTitle.displayName = SheetPrimitive.Title.displayName
114+
115+
const SheetDescription = React.forwardRef<
116+
React.ElementRef<typeof SheetPrimitive.Description>,
117+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
118+
>(({ className, ...props }, ref) => (
119+
<SheetPrimitive.Description
120+
ref={ref}
121+
className={cn("text-sm text-muted-foreground", className)}
122+
{...props}
123+
/>
124+
))
125+
SheetDescription.displayName = SheetPrimitive.Description.displayName
126+
127+
export {
128+
Sheet,
129+
SheetPortal,
130+
SheetOverlay,
131+
SheetTrigger,
132+
SheetClose,
133+
SheetContent,
134+
SheetHeader,
135+
SheetFooter,
136+
SheetTitle,
137+
SheetDescription,
138+
}

‎app/root.tsx

+7-31
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,11 @@ export const links: LinksFunction = () => {
8080

8181
export const meta: MetaFunction<typeof loader> = ({ data }) => {
8282
return [
83-
{ title: data ? 'Epic Notes' : 'Error | Epic Notes' },
84-
{ name: 'description', content: `Your own captain's log` },
83+
{ title: data ? 'lucasb.dev' : 'Error | lucasb.dev' },
84+
{
85+
name: 'description',
86+
content: `Personal website for software engineer lucas byerley`,
87+
},
8588
]
8689
}
8790

@@ -234,35 +237,8 @@ function App() {
234237
allowIndexing={allowIndexing}
235238
env={data.ENV}
236239
>
237-
<div className="flex h-screen flex-col justify-between">
238-
<header className="container py-6">
239-
<nav className="flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
240-
<Logo />
241-
<div className="ml-auto hidden max-w-sm flex-1 sm:block">
242-
{searchBar}
243-
</div>
244-
<div className="flex items-center gap-10">
245-
{user ? (
246-
<UserDropdown />
247-
) : (
248-
<Button asChild variant="default" size="lg">
249-
<Link to="/login">Log In</Link>
250-
</Button>
251-
)}
252-
</div>
253-
<div className="block w-full sm:hidden">{searchBar}</div>
254-
</nav>
255-
</header>
256-
257-
<div className="flex-1">
258-
<Outlet />
259-
</div>
260-
261-
<div className="container flex justify-between pb-5">
262-
<Logo />
263-
<ThemeSwitch userPreference={data.requestInfo.userPrefs.theme} />
264-
</div>
265-
</div>
240+
<ThemeSwitch userPreference={data.requestInfo.userPrefs.theme} />
241+
<Outlet />
266242
<EpicToaster closeButton position="top-center" theme={theme} />
267243
<EpicProgress />
268244
</Document>

0 commit comments

Comments
 (0)