Add link page

bricesuazo · Oct 29, 2023 · aeebc05 · aeebc05
1 parent 8d8adec
commit aeebc05
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 14 deletions.
diff --git a/apps/www/src/app/(content)/layout.tsx b/apps/www/src/app/(content)/layout.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+import { footer, nav } from "@bricesuazo/constant/config";
+
+export default function ContentLayout(
+  props: React.PropsWithChildren<{ title: string }>,
+) {
+  const pathname = usePathname();
+
+  return (
+    <>
+      <section className="relative">
+        <div className="grid h-80 place-items-center bg-cover bg-fixed bg-center pt-20 before:absolute before:inset-0 before:z-[-1] before:bg-[length:30px_30px] before:bg-center before:opacity-5 before:bg-grid-[#000] dark:before:bg-grid-[#fff]">
+          <h1 className="text-4xl font-bold">
+            {
+              nav.left
+                .concat(
+                  footer.categories[footer.categories.length - 1]?.links ?? [],
+                )
+                .find((item) => item.href.includes(pathname))?.title
+            }
+          </h1>
+        </div>
+      </section>
+
+      <hr className="m-[0_auto] mb-8 h-px w-full border-none bg-[linear-gradient(to_right,transparent,rgba(0,0,0,0.2)_50%,transparent)] duration-300 motion-reduce:transition-none dark:bg-[linear-gradient(to_right,transparent,rgba(255,255,255,0.1)_50%,transparent)]" />
+      {props.children}
+    </>
+  );
+}
diff --git a/apps/www/src/app/(content)/projects/page.tsx b/apps/www/src/app/(content)/projects/page.tsx
@@ -0,0 +1,9 @@
+export default function ProjectsPage() {
+  return (
+    <>
+      <h4 className="text-center text-lg font-medium">
+        Here&apos;s a list of projects I&apos;ve worked on.
+      </h4>
+    </>
+  );
+}
diff --git a/apps/www/src/app/(content)/uses/page.tsx b/apps/www/src/app/(content)/uses/page.tsx
@@ -0,0 +1,3 @@
+export default function UsesPage() {
+  return <div>Work in progress...</div>;
+}
diff --git a/apps/www/src/app/videos/page.tsx → apps/www/src/app/(content)/videos/page.tsx b/apps/www/src/app/videos/page.tsx → apps/www/src/app/(content)/videos/page.tsx
@@ -1,3 +1,3 @@
 export default function VideosPage() {
-  return <div>Videos</div>;
+  return <div>Work in progress...</div>;
 }
diff --git a/apps/www/src/app/layout.tsx b/apps/www/src/app/layout.tsx
@@ -70,7 +70,12 @@ export default function RootLayout(props: { children: React.ReactNode }) {
     <html lang="en">
       <body className={cn(font.className)}>
         <NextTopLoader color="#7c3aed" shadow={false} showSpinner={false} />
-        <ThemeProvider attribute="class" enableSystem disableTransitionOnChange>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
           <TRPCReactProvider headers={headers()}>
             <Header />
             <main className="flex flex-col px-6 antialiased">

diff --git a/apps/www/src/app/page.tsx b/apps/www/src/app/page.tsx
@@ -29,7 +29,7 @@ export default function HomePage() {
   return (
     <>
       <div className="bg-cover bg-fixed bg-right before:absolute before:inset-0 before:z-[-1] before:bg-[length:30px_30px] before:bg-center before:opacity-5 before:bg-grid-[#000] dark:before:bg-grid-[#fff]">
-        <div className="bg-main-gradient pointer-events-none absolute -top-1/2 bottom-0 left-0 right-0 z-[-1] bg-contain blur-[160px] will-change-contents"></div>
+        <div className="bg-main-gradient pointer-events-none absolute -top-1/2 bottom-0 left-0 right-0 z-[-1] bg-contain blur-[160px] will-change-contents" />
         <div className="mx-auto flex min-h-screen flex-1 flex-col justify-center duration-300 motion-reduce:transition-none md:w-[90%] xl:w-4/5">
           <div className="md:grid-cols-0 grid items-center gap-x-8 md:grid-cols-5">
             <div className="f-full col-span-2 hidden md:flex">
@@ -220,7 +220,7 @@ export default function HomePage() {
           <hr className="m-[0_auto] mt-8 h-px w-full border-none bg-[linear-gradient(to_right,transparent,rgba(0,0,0,0.2)_50%,transparent)] duration-300 motion-reduce:transition-none dark:bg-[linear-gradient(to_right,transparent,rgba(255,255,255,0.1)_50%,transparent)]" />
         </div>
       </section>
-      <section id="about" className="scroll-mt-20 p-12 lg:px-24">
+      <section id="about" className="scroll-mt-20">
         <div className="relative mx-auto mb-7 text-center">
           <span className="absolute right-0 top-[90px] z-[-1]">
             <Dots h="107" w="134" />
@@ -255,7 +255,7 @@ export default function HomePage() {
               <Balancer>
                 In October 2021, I started learning React.js, and soon Next.js.
                 I fell in love with this technology and I am now using it
-                proffesionally.
+                professionally.
               </Balancer>
             </p>
             <p>

diff --git a/apps/www/src/app/projects/page.tsx b/apps/www/src/app/projects/page.tsx
diff --git a/apps/www/src/app/uses/page.tsx b/apps/www/src/app/uses/page.tsx
diff --git a/apps/www/src/components/elements/client/footer.tsx b/apps/www/src/components/elements/client/footer.tsx
@@ -8,9 +8,9 @@ import { env } from "~/env.mjs";
 
 export function Footer() {
   return (
-    <footer className="w-full px-4 py-10 md:px-8 lg:px-16">
+    <footer className="w-full p-6">
       <div className="mx-auto pt-10">
-        <div className="grid grid-cols-2 gap-9 md:grid-cols-6">
+        <div className="grid grid-cols-3 gap-4 md:grid-cols-6">
           <div className="col-span-3">
             <div className="flex items-center space-x-5">
               <Link href="/" legacyBehavior>
@@ -43,7 +43,7 @@ export function Footer() {
             </Button>
           </div>
           {footer.categories.map((category, index) => (
-            <div key={index} className="col-span-1 ">
+            <div key={index} className="col-span-1">
               <p className="mt-3 font-semibold text-secondary-foreground sm:mb-3 sm:mt-0 ">
                 {category.title}
               </p>