update bento

BrianRuizy · Apr 3, 2024 · dc14b35 · dc14b35
1 parent 59984c5
commit dc14b35
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 105 deletions.
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -74,7 +74,7 @@ export default function About() {
         <Section heading="About" headingAlignment="left">
           <div className="flex flex-col gap-6">
             <p>
-              Hi, I&apos;m Brian, originally from Honduras and currently living
+              Hi, I&apos;m Brian, born in Honduras and currently living
               in Houston. I have been coding for{" "}
               {new Date().getFullYear() - 2019} years. As a software engineer, I
               specialize in full-stack web development and product design.

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
@@ -24,7 +24,7 @@ export default function Blog() {
             className="animate-in text-secondary"
             style={{ "--index": 1 } as React.CSSProperties}
           >
-            {posts.length} posts about code, design, more ...
+            {posts.length} posts so far. Stay tuned for more!
           </p>
         </div>
       </div>

diff --git a/app/components/bento/CardTemplate.tsx b/app/components/bento/CardTemplate.tsx
@@ -10,7 +10,7 @@ export default function Card({
   return (
     <div
       className={clsx(
-        "rounded-2xl bg-primary border border-secondary shadow-sm overflow-clip leading-tight",
+        "h-full w-full overflow-clip rounded-2xl border border-secondary bg-primary leading-tight shadow-sm",
         className,
       )}
     >

diff --git a/app/components/bento/Gumroad.tsx b/app/components/bento/Gumroad.tsx
@@ -1,21 +1,23 @@
 import Card from "@/app/components/bento/CardTemplate";
 import Link from "@/app/components/ui/Link";
-import { SiGumroad } from "react-icons/si";
+import Halo from "@/app/components/ui/Halo";
 
 export default function Gumroad() {
   return (
-    <Link
-      href="https://gumroad.com/brianr4"
-      className="col-span-1 no-underline"
-    >
-      <Card className="flex aspect-square flex-col gap-1.5 p-6">
-        <div className="flex aspect-square h-10 w-fit items-center justify-center rounded-xl bg-[#FF91E7]">
-          <Logo />
-        </div>
-        <p className="text-secondary">Gumroad</p>
-        <p>My new Notion Templates</p>
-      </Card>
-    </Link>
+    <Halo className="col-span-1 row-span-1">
+      <Link
+        href="https://gumroad.com/brianr4"
+        className="no-underline"
+      >
+        <Card className="flex aspect-square flex-col gap-1.5 p-6">
+          <div className="flex aspect-square h-10 w-fit items-center justify-center rounded-xl bg-[#FF91E7]">
+            <Logo />
+          </div>
+          <p className="text-secondary">Gumroad</p>
+          <p>My new Notion templates</p>
+        </Card>
+      </Link>
+    </Halo>
   );
 }
 

diff --git a/app/components/bento/Instagram.tsx b/app/components/bento/Instagram.tsx
@@ -1,21 +1,24 @@
 import Card from "@/app/components/bento/CardTemplate";
 import Link from "@/app/components/ui/Link";
 import { FaInstagram } from "react-icons/fa";
+import Halo from "@/app/components/ui/Halo";
 
 export default function Instagram() {
   return (
-    <Card className="col-span-1 flex aspect-square flex-col gap-1.5 p-6">
-      <div className="flex aspect-square h-10 w-fit items-center justify-center rounded-xl bg-gradient-to-bl from-[#7638FA] via-[#FF006A] to-[#FED702]">
-        <FaInstagram className="text-2xl text-white" />
-      </div>
-      <p className="text-secondary">@brianruizy</p>
-      <Link
-        className="mt-auto flex w-fit items-center gap-1.5 rounded-full bg-secondary px-4 py-1.5 text-sm no-underline hover:bg-tertiary"
-        href="https://instagram.com/brianruizy"
-      >
-        <span className="font-medium text-primary">Follow</span>
-        <span className="text-tertiary">3.9k</span>
-      </Link>
-    </Card>
+    <Halo className="col-span-1 row-span-1">
+      <Card className="col-span-1 flex aspect-square flex-col gap-1.5 p-6">
+        <div className="flex aspect-square h-10 w-fit items-center justify-center rounded-xl bg-gradient-to-bl from-[#7638FA] via-[#FF006A] to-[#FED702]">
+          <FaInstagram className="text-2xl text-white" />
+        </div>
+        <p className="text-secondary">@brianruizy</p>
+        <Link
+          className="mt-auto flex w-fit items-center gap-1.5 rounded-full bg-secondary px-4 py-1.5 text-sm no-underline hover:bg-tertiary"
+          href="https://instagram.com/brianruizy"
+        >
+          <span className="font-medium text-primary">Follow</span>
+          <span className="text-tertiary">3.9k</span>
+        </Link>
+      </Card>
+    </Halo>
   );
 }
diff --git a/app/components/bento/Youtube.tsx b/app/components/bento/Youtube.tsx
@@ -1,7 +1,8 @@
-import Link from "@/app/components/ui/Link";
+import Image from "next/image";
 import { FaYoutube } from "react-icons/fa";
+import Link from "@/app/components/ui/Link";
 import Card from "@/app/components/bento/CardTemplate";
-import Image from "next/image";
+import Halo from "@/app/components/ui/Halo";
 
 // get youtube subs count from route handler api/youtube
 async function getData() {
@@ -18,68 +19,70 @@ export default async function YouTube() {
   const data = await getData();
 
   return (
-    <Card className="col-span-2 flex justify-between gap-6 p-6">
-      <div className="flex flex-col gap-1.5">
-        <div className="flex aspect-square h-10 w-fit items-center justify-center rounded-xl bg-[#FF0000]">
-          <FaYoutube className="text-2xl text-white" />
+    <Halo className="col-span-2 row-span-1">
+      <Card className="flex justify-between gap-6 p-6">
+        <div className="flex flex-col gap-1.5">
+          <div className="flex aspect-square h-10 w-fit items-center justify-center rounded-xl bg-[#FF0000]">
+            <FaYoutube className="text-2xl text-white" />
+          </div>
+          <p className="text-secondary">@brianruizy</p>
+          <Link
+            className="mt-auto flex items-center gap-1.5 rounded-full bg-secondary px-4 py-1.5 text-sm no-underline hover:bg-tertiary"
+            href="https://youtube.com/@Brianruizy?sub_confirmation=1"
+          >
+            <span className="font-medium text-primary">Subscribe</span>
+            <span className="text-tertiary">
+              {Math.floor(data.subscribers / 1000)}k
+            </span>
+          </Link>
+        </div>
+        <div className="grid w-full grid-cols-2 grid-rows-2 gap-3">
+          <Link
+            className="relative col-span-1 row-span-1"
+            href={"https://youtu.be/j68U1wBplk8"}
+          >
+            <Image
+              src={"/thumbnails/my tech stack.png"}
+              fill={true}
+              alt="thumbnail"
+              className="rounded-lg border border-secondary object-cover hover:opacity-75"
+            />
+          </Link>
+          <Link
+            className="relative col-span-1 row-span-1"
+            href={"https://youtu.be/53KFVt2GRkE"}
+          >
+            <Image
+              src={"/thumbnails/notion setup.png"}
+              fill={true}
+              alt="thumbnail"
+              className="rounded-lg border border-secondary object-cover hover:opacity-75"
+            />
+          </Link>
+          <Link
+            className="relative col-span-1 row-span-1"
+            href={"https://youtu.be/mH4Fs1Pxomo"}
+          >
+            <Image
+              src={"/thumbnails/5 productivity tools.png"}
+              fill={true}
+              alt="thumbnail"
+              className="rounded-lg border border-secondary object-cover hover:opacity-75"
+            />
+          </Link>
+          <Link
+            className="relative col-span-1 row-span-1"
+            href={"https://youtu.be/BlB5wovFmjc"}
+          >
+            <Image
+              src={"/thumbnails/macbook.png"}
+              fill={true}
+              alt="thumbnail"
+              className="rounded-lg border border-secondary object-cover hover:opacity-75"
+            />
+          </Link>
         </div>
-        <p className="text-secondary">@brianruizy</p>
-        <Link
-          className="mt-auto flex items-center gap-1.5 rounded-full bg-secondary px-4 py-1.5 text-sm no-underline hover:bg-tertiary"
-          href="https://youtube.com/@Brianruizy?sub_confirmation=1"
-        >
-          <span className="font-medium text-primary">Subscribe</span>
-          <span className="text-tertiary">
-            {Math.floor(data.subscribers / 1000)}k
-          </span>
-        </Link>
-      </div>
-      <div className="grid w-full grid-cols-2 grid-rows-2 gap-3">
-        <Link
-          className="relative col-span-1 row-span-1"
-          href={"https://youtu.be/j68U1wBplk8"}
-        >
-          <Image
-            src={"/thumbnails/my tech stack.png"}
-            fill={true}
-            alt="thumbnail"
-            className="rounded-lg border border-secondary object-cover"
-          />
-        </Link>
-        <Link
-          className="relative col-span-1 row-span-1"
-          href={"https://youtu.be/53KFVt2GRkE"}
-        >
-          <Image
-            src={"/thumbnails/notion setup.png"}
-            fill={true}
-            alt="thumbnail"
-            className="rounded-lg border border-secondary object-cover"
-          />
-        </Link>
-        <Link
-          className="relative col-span-1 row-span-1"
-          href={"https://youtu.be/mH4Fs1Pxomo"}
-        >
-          <Image
-            src={"/thumbnails/5 productivity tools.png"}
-            fill={true}
-            alt="thumbnail"
-            className="rounded-lg border border-secondary object-cover"
-          />
-        </Link>
-        <Link
-          className="relative col-span-1 row-span-1"
-          href={"https://youtu.be/BlB5wovFmjc"}
-        >
-          <Image
-            src={"/thumbnails/macbook.png"}
-            fill={true}
-            alt="thumbnail"
-            className="rounded-lg border border-secondary object-cover"
-          />
-        </Link>
-      </div>
-    </Card>
+      </Card>
+    </Halo>
   );
 }
diff --git a/app/components/bento/map.js b/app/components/bento/map.js
@@ -13,7 +13,7 @@ export default function Map() {
   const map = useRef(null);
   const [lng, setLng] = useState(-95.36327);
   const [lat, setLat] = useState(29.76328);
-  const [zoom, setZoom] = useState(2);
+  const [zoom, setZoom] = useState(2.5);
   const [pitch, setPitch] = useState(15);
 
   const { theme, resolvedTheme } = useTheme();

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,10 +1,11 @@
 import Image from "next/image";
 import Link from "@/app/components/ui/Link";
 import { allPosts } from ".contentlayer/generated";
+import { ArrowUpRightIcon } from "@heroicons/react/20/solid";
 
-import PostList from "./blog/components/ui/PostList";
 import Avatar from "@/public/avatar.png";
 
+import PostList from "@/app/blog/components/ui/PostList";
 import Card from "@/app/components/bento/CardTemplate";
 import Map from "@/app/components/bento/map";
 import Gumroad from "@/app/components/bento/Gumroad";
@@ -52,26 +53,34 @@ export default async function Home() {
         <YouTube />
         <Instagram />
         <Gumroad />
-        <Card className="relative col-span-2">
+        <Card className="relative order-2 col-span-2">
           <Map />
           {/* chip showing city bottom left corner of card, above map */}
-          <div className="absolute bottom-6 left-6 flex items-center rounded-lg bg-white/25 px-4 py-1.5 backdrop-blur dark:bg-black/25">
-            <span className="text-sm font-medium text-primary">Houston, TX</span>
+          <div className="absolute bottom-6 left-6 flex items-center rounded-lg bg-neutral-100/75 px-4 py-1.5 backdrop-blur dark:bg-neutral-900/75">
+            <span className="text-sm font-medium text-primary">
+              Houston, TX
+            </span>
           </div>
         </Card>
       </div>
       <div
         className="flex animate-in flex-col gap-8"
         style={{ "--index": 4 } as React.CSSProperties}
       >
-        <h2 className="text-secondary">Latest Posts</h2>
+        <div className="space-y-4">
+          <Link
+            className="group flex items-center gap-2 text-xl font-semibold tracking-tight text-primary"
+            href="/blog"
+          >
+            Latest Posts
+            <ArrowUpRightIcon className="h-5 w-5 text-tertiary transition-all group-hover:text-primary" />
+          </Link>
+          <p className="max-w-md leading-relaxed text-secondary">
+            I occasionally write about programming, productivity, and more.
+            Check me out and subscribe to stay up to date.
+          </p>
+        </div>
         <PostList posts={posts} />
-        <Link
-          href="/blog"
-          className="text-secondary underline underline-offset-4 hover:text-primary"
-        >
-          See All
-        </Link>
       </div>
     </div>
   );