style: homepage

inducingchaos · Dec 22, 2024 · f3804fb · f3804fb
1 parent c97a050
commit f3804fb
Show file tree

Hide file tree

Showing 18 changed files with 185 additions and 120 deletions.
diff --git a/src/_ignore/experimental/do/page.tsx b/src/_ignore/experimental/do/page.tsx
@@ -9,14 +9,16 @@ export default function Do(): JSX.Element {
                 <div className="container">
                     <section className="flex min-h-screen flex-col items-center justify-center">
                         <div className="-translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-rose-100/eighth to-transparent"></div>
-                        <p className="mt-64px py-128px text-60px font-bold text-[hsl(0,0%,75%)] dark:text-[hsl(0,0%,25%)]">
+                        {/* was text-60px */}
+                        <p className="mt-64px py-128px text-64px font-bold text-[hsl(0,0%,75%)] dark:text-[hsl(0,0%,25%)]">
                             Give it your all.
                         </p>
 
                         <div className="flex justify-center rounded-8px bg-rose-100/[1%] p-16px ring-1 ring-inset ring-rose-100/[3%]">
                             <div className="">
                                 <div className="relative isolate space-y-24px overflow-hidden rounded-16px bg-white/sixteenth p-16px shadow-black/sixteenth before:absolute before:inset-0px before:-translate-x-full before:animate-[shimmer_2s_infinite] before:border-t before:border-rose-100/eighth before:bg-gradient-to-r before:from-transparent before:via-rose-100/eighth before:to-transparent">
-                                    <p className="text-60px font-bold text-[hsl(0,0%,75%)] dark:text-[hsl(0,0%,25%)]">
+                                    {/* was text-60px */}
+                                    <p className="text-64px font-bold text-[hsl(0,0%,75%)] dark:text-[hsl(0,0%,25%)]">
                                         {"Give it your all."}
                                     </p>
                                 </div>
@@ -39,7 +41,8 @@ export default function Do(): JSX.Element {
                                     key={index}
                                     className="group flex w-full items-center justify-center border-2x border-[hsl(0,0%,87.5%)] transition-all duration-half ease-out hover:border-red-500 dark:border-[hsl(0,0%,12.5%)] hover:dark:border-[hsl(0,0%,9.375%)]"
                                 >
-                                    <p className="w-full p-16px text-left text-18px text-[hsl(0,0%,75%)] transition-all duration-half ease-out hover:text-[hsl(0,0%,12.5%)] group-hover:-border-opacity-quarter dark:text-[hsl(0,0%,25%)] dark:hover:text-[hsl(0,0%,87.5%)]">
+                                    {/* was text-18px */}
+                                    <p className="w-full p-16px text-left text-16px text-[hsl(0,0%,75%)] transition-all duration-half ease-out hover:text-[hsl(0,0%,12.5%)] group-hover:-border-opacity-quarter dark:text-[hsl(0,0%,25%)] dark:hover:text-[hsl(0,0%,87.5%)]">
                                         Upcoming task: {task}
                                     </p>
                                 </div>

diff --git a/src/_ignore/experimental/stacks-stash-stuff/main-home-page.tsx b/src/_ignore/experimental/stacks-stash-stuff/main-home-page.tsx
@@ -60,7 +60,11 @@
 //                     >
 //                         <Stack label="Header" fill={true} spacing="none" className="gap-16px">
 //                             <Stack label="Logo" orientation="horizontal" alignment="center" className="gap-8px">
-//                                 <span className="text-18px font-bold">kyzn.</span>
+{
+    /* was text-18px */
+}
+
+//                                 <span className="text-16px font-bold">kyzn.</span>
 //                                 <InlineCode className="border-gray-[250]] border px-4px font-mono">preflight</InlineCode>
 //                             </Stack>
 //                             <H1>{"Riley Barabash"}</H1>

diff --git a/src/app/(site)/_components/animated-sections.tsx b/src/app/(site)/_components/animated-sections.tsx
@@ -0,0 +1,64 @@
+/**
+ *
+ */
+
+"use client"
+
+import { motion } from "framer-motion"
+import { XStack } from "~/components/ui/layout/stacks"
+
+export function AnimatedSections(): JSX.Element {
+    return (
+        <>
+            <XStack expand className="h-screen bg-accent-neutral">
+                <motion.div
+                    variants={{
+                        hidden: {
+                            opacity: 0,
+                            scale: 0.75,
+                            filter: "blur(32px)"
+                        },
+                        visible: {
+                            opacity: 1,
+                            scale: 1,
+                            filter: "blur(0px)"
+                        }
+                    }}
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true }}
+                    transition={{
+                        duration: 1,
+                        delay: 0.5,
+                        ease: [0.125, 1, 0.25, 1]
+                    }}
+                >
+                    <p className="font-serif text-32px text-accent-alternate">{"Do more."}</p>
+                </motion.div>
+            </XStack>
+
+            <XStack expand className="h-screen bg-main">
+                <motion.div
+                    variants={{
+                        off: {
+                            opacity: 0.125
+                        },
+                        on: {
+                            opacity: [0.125, 1, 0.75, 1, 0.5, 1]
+                        }
+                    }}
+                    initial="off"
+                    whileInView="on"
+                    viewport={{ once: false }}
+                    transition={{
+                        duration: 0.5,
+                        delay: 1,
+                        times: [0, 0.2, 0.4, 0.6, 0.8, 1]
+                    }}
+                >
+                    <h1 className="text-192px font-thin text-alternate">{"Don't wait."}</h1>
+                </motion.div>
+            </XStack>
+        </>
+    )
+}
diff --git a/src/app/(site)/_components/index.ts b/src/app/(site)/_components/index.ts
@@ -0,0 +1,5 @@
+/**
+ *
+ */
+
+export * from "./animated-sections"
diff --git a/src/app/(site)/_components/navigation/bar.tsx b/src/app/(site)/_components/navigation/bar.tsx
@@ -16,38 +16,44 @@ export async function Bar(): Promise<JSX.Element> {
     const user = await getCurrentUser()
 
     return (
-        <header className="fixed inset-x-0px top-0px z-10 flex w-full flex-row items-center justify-between bg-alternate p-8px">
-            {/* Logo. */}
+        <header className="fixed inset-x-0px top-0px z-10 p-16px">
+            <div className="flex w-full flex-row items-center justify-between border bg-alternate/-quarter px-32px py-16px backdrop-blur">
+                {/* Logo. */}
 
-            <h1 className="text-nowrap px-24px py-16px text-24px font-bold tracking-tighter">{"RILEY BARABASH"}</h1>
+                <h1 className="text-nowrap font-mono text-24px font-black tracking-tighter">{"> [riley]"}</h1>
 
-            {/* Menu bar links. */}
+                {/* Menu bar links. */}
 
-            <nav className="flex flex-row items-center justify-center gap-8px">
-                {links.map(item => (
-                    <Button key={item.url} asChild style="link" className="h-auto p-0px">
-                        <Link href={item.url}>{item.label}</Link>
-                    </Button>
-                ))}
-            </nav>
-
-            {/* Sign in/out button. */}
-
-            <div className="flex flex-row items-center justify-center gap-8px px-16px">
-                <div className="flex flex-row items-center justify-center">
-                    {user ? (
-                        <form action="/api/sign-out" method="POST">
-                            <Button type="submit" style="ghost" className="flex h-auto p-0px">
-                                {"Sign Out"}
-                            </Button>
-                        </form>
-                    ) : (
-                        <Button asChild>
-                            <Link href="/sign-in">Sign In</Link>
+                <nav className="flex flex-row items-center justify-center gap-8px">
+                    {links.map(item => (
+                        <Button key={item.url} asChild style="link" className="h-auto p-0px">
+                            <Link href={item.url}>{item.label}</Link>
                         </Button>
-                    )}
+                    ))}
+                </nav>
+
+                <Button style="outline" color="accent" className="bg-accent-neutral/eighth font-mono" asChild>
+                    <Link href="/ledger">{"Ledger"}</Link>
+                </Button>
+
+                {/* Sign in/out button. */}
+
+                <div className="flex flex-row items-center justify-center gap-8px">
+                    <div className="flex flex-row items-center justify-center">
+                        {user ? (
+                            <form action="/api/sign-out" method="POST">
+                                <Button type="submit" style="ghost" className="flex h-auto p-0px">
+                                    {"Sign Out"}
+                                </Button>
+                            </form>
+                        ) : (
+                            <Button asChild>
+                                <Link href="/sign-in">Sign In</Link>
+                            </Button>
+                        )}
+                    </div>
+                    <ThemeToggle />
                 </div>
-                <ThemeToggle />
             </div>
         </header>
     )

diff --git a/src/app/(site)/_components/test.tsx b/src/app/(site)/_components/test.tsx
diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
@@ -9,7 +9,7 @@ import Image from "next/image"
 import Link from "next/link"
 import { Button } from "~/components/ui/primitives/inputs"
 import { InlineCode, Muted } from "~/components/ui/primitives/typography"
-import Test from "./_components/test"
+import { AnimatedSections } from "./_components"
 
 export default async function Landing(): Promise<JSX.Element> {
     //  do sum
@@ -21,39 +21,33 @@ export default async function Landing(): Promise<JSX.Element> {
     return (
         <>
             <main className="flex flex-col items-center justify-center">
-                <div className="container">
-                    <section className="flex min-h-screen flex-col items-center justify-center">
-                        <div className="flex flex-col items-center justify-center gap-24px">
-                            <div className="relative size-96px">
-                                <Image
-                                    src="/riley-barabash/profile-picture.jpg"
-                                    alt="Profile Picture"
-                                    fill
-                                    className="border border-main object-cover"
-                                />
-                            </div>
-                            <h1 className="text-48px font-semibold tracking-tight">{"My name is Riley."}</h1>
-                            <InlineCode>{"X/IG: @inducingchaos"}</InlineCode>
-                            <Muted>{"Check out my projects:"}</Muted>
-                            <div className="flex flex-row gap-8px">
-                                {/* <Button style="outline" asChild>
+                <section className="flex min-h-screen flex-col items-center justify-center">
+                    <div className="flex flex-col items-center justify-center gap-24px">
+                        <div className="relative size-96px">
+                            <Image
+                                src="/riley-barabash/profile-picture.jpg"
+                                alt="Profile Picture"
+                                fill
+                                className="border border-main object-cover"
+                            />
+                        </div>
+                        <h1 className="text-48px font-semibold tracking-tight">{"My name is Riley."}</h1>
+                        <InlineCode>{"X/IG: @inducingchaos"}</InlineCode>
+                        <Muted>{"Check out my projects:"}</Muted>
+                        <div className="flex flex-row gap-8px">
+                            {/* <Button style="outline" asChild>
                                     <Link href="/value-only">{"Value-Only"}</Link>
                                 </Button> */}
 
-                                <Button style="outline" asChild className="font-mono">
-                                    <Link href="/altered">{"Altered"}</Link>
-                                </Button>
-                            </div>
+                            <Button style="outline" asChild className="font-mono">
+                                <Link href="/altered">{"Altered"}</Link>
+                            </Button>
                         </div>
-                    </section>
-                    <Test />
-
-                    <Separator className="my-32px" />
+                    </div>
+                </section>
+                <AnimatedSections />
 
-                    <section className="flex min-h-screen flex-col items-center justify-center">
-                        <p>{"You should only see this if you're signed in."}</p>
-                    </section>
-                </div>
+                <Separator className="bg-accent-neutral" />
             </main>
         </>
     )

diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -14,7 +14,8 @@ export default function ErrorPage({ error }: { error: Error & { digest?: string
         <div className="container mx-auto min-h-screen space-y-32px py-48px">
             <>
                 <H1 className="text-center">{error.name}</H1>
-                <p className="text-18px">{error.message}</p>
+                {/* was text-18px */}
+                <p className="text-16px">{error.message}</p>
             </>
         </div>
     )

diff --git a/src/components/ui/compositions/templates/starter.tsx b/src/components/ui/compositions/templates/starter.tsx
@@ -7,12 +7,12 @@ import { cn } from "~/utils/ui"
 
 export function Starter({ children, className, ...options }: StackOptions): JSX.Element {
     return (
-        <YStack label="Starter" type="main">
+        <XStack label="Starter" type="main">
             <XStack label="Container" className="container">
                 <YStack label="Content" type="section" className={cn("min-h-screen", className)} {...options}>
                     {children ?? <p>Hello, world!</p>}
                 </YStack>
             </XStack>
-        </YStack>
+        </XStack>
     )
 }
diff --git a/src/components/ui/layout/sheet.tsx b/src/components/ui/layout/sheet.tsx
@@ -78,7 +78,8 @@ const SheetTitle = React.forwardRef<
     React.ElementRef<typeof SheetPrimitive.Title>,
     React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
 >(({ className, ...props }, ref) => (
-    <SheetPrimitive.Title ref={ref} className={cn("text-18px font-semibold text-main", className)} {...props} />
+    // was text-18px
+    <SheetPrimitive.Title ref={ref} className={cn("text-16px font-semibold text-main", className)} {...props} />
 ))
 SheetTitle.displayName = SheetPrimitive.Title.displayName
 

diff --git a/src/components/ui/primitives/indicators/alert-dialog.tsx b/src/components/ui/primitives/indicators/alert-dialog.tsx
@@ -59,7 +59,8 @@ const AlertDialogTitle = React.forwardRef<
     React.ElementRef<typeof AlertDialogPrimitive.Title>,
     React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-    <AlertDialogPrimitive.Title ref={ref} className={cn("text-18px font-semibold", className)} {...props} />
+    // was text-18px
+    <AlertDialogPrimitive.Title ref={ref} className={cn("text-16px font-semibold", className)} {...props} />
 ))
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 

diff --git a/src/components/ui/primitives/typography/h1.tsx b/src/components/ui/primitives/typography/h1.tsx
@@ -10,8 +10,8 @@ export function H1({
     ...props
 }: React.HTMLAttributes<HTMLHeadingElement> & { children: React.ReactNode }): JSX.Element {
     return (
-        // was scroll-m-20
-        <h1 className={cn("scroll-m-96px text-36px font-bold tracking-tight lg:text-48px", className)} {...props}>
+        // was scroll-m-20, text-36px
+        <h1 className={cn("scroll-m-96px text-32px font-bold tracking-tight lg:text-48px", className)} {...props}>
             {children}
         </h1>
     )

diff --git a/src/components/ui/primitives/typography/h2.tsx b/src/components/ui/primitives/typography/h2.tsx
@@ -12,7 +12,8 @@ export function H2({
     return (
         // was scroll-m-20
         <h2
-            className={cn("scroll-m-96px border-b pb-8px text-30px font-semibold tracking-tight first:mt-0px", className)}
+            // was text-30px
+            className={cn("scroll-m-96px border-b pb-8px text-32px font-semibold tracking-tight first:mt-0px", className)}
             {...props}
         >
             {children}

diff --git a/src/components/ui/primitives/typography/large.tsx b/src/components/ui/primitives/typography/large.tsx
@@ -10,7 +10,9 @@ export function Large({
     ...props
 }: React.HTMLAttributes<HTMLDivElement> & { children: React.ReactNode }): JSX.Element {
     return (
-        <div className={cn("text-18px font-semibold", className)} {...props}>
+        // was text-18px
+
+        <div className={cn("text-16px font-semibold", className)} {...props}>
             {children}
         </div>
     )