yashhere · yashhere · May 12, 2024 · May 12, 2024 · May 17, 2024 · May 19, 2024
diff --git a/app/(pages)/lifelog/page.tsx b/app/(pages)/lifelog/page.tsx
@@ -25,11 +25,8 @@ export default function LifeLog() {
           const MdxContent = getMDXComponent(note.body.code)
           return (
             <>
-              <li
-                key={note.slug}
-                className="prose prose-article ml-4 pt-24 first:pt-8"
-              >
-                <div className="absolute -left-1.5 mt-1.5 size-3 rounded-full border border-background bg-gray-700/80"></div>
+              <li key={note.slug} className="ml-4 pt-24 first:pt-8">
+                <div className="bg-gray-700/80 absolute -left-1.5 mt-1.5 size-3 rounded-full border"></div>
                 <time className="mb-1 text-2xl font-semibold leading-none text-gray-900">
                   {moment(note.createdOn).format("MMMM DD, YYYY")}
                 </time>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,5 @@
 import { Metadata } from "next"
+import { Newsreader } from "next/font/google"
 import localFont from "next/font/local"
 import { Analytics } from "@/components/analytics"
 import { Footer } from "@/components/footer"
@@ -7,12 +8,16 @@ import { Navigation } from "@/components/ui/navigation"
 import { TailwindIndicator } from "@/components/ui/tailwind-indicator"
 import { siteConfig } from "@/config/site"
 import { cn, encodeParameter } from "@/lib/utils"
+import { GeistMono } from "geist/font/mono"
+import { GeistSans } from "geist/font/sans"
 
 import "@/styles/globals.css"
 
-const bodyFont = localFont({
-  src: "../public/assets/fonts/wotfard.ttf",
-  variable: "--font-body",
+import Header from "@/components/ui/layout/header"
+
+const GeistRegular = localFont({
+  src: "../public/assets/fonts/geist-regular.otf",
+  variable: "--font-geist-regular",
   display: "swap",
 })
 
@@ -22,6 +27,12 @@ const monoFont = localFont({
   display: "swap",
 })
 
+const NewsReader = Newsreader({
+  subsets: ["latin"],
+  variable: "--font-news-reader",
+  display: "swap",
+})
+
 export async function generateMetadata(): Promise<Metadata> {
   const siteUrl: string = siteConfig.url
 
@@ -113,11 +124,13 @@ export default function RootLayout({ children }: RootLayoutProps) {
     <html lang="en" className="scroll-smooth" suppressHydrationWarning>
       <body
         className={cn(
-          "min-h-screen font-body antialiased",
-          "bg-background text-text",
-          "mx-4 flex max-w-6xl flex-col md:flex-row lg:mx-auto",
-          bodyFont.variable,
-          monoFont.variable
+          "min-h-screen font-sans antialiased",
+          "bg-gray-100 text-gray-1200",
+          "flex flex-col lg:mx-auto",
+          GeistRegular.variable,
+          NewsReader.variable,
+          GeistSans.variable,
+          GeistMono.variable
         )}
       >
         <ThemeProvider
@@ -127,11 +140,20 @@ export default function RootLayout({ children }: RootLayoutProps) {
           defaultTheme="system"
           enableSystem
         >
-          <main className="flex h-screen max-w-2xl flex-auto flex-col px-2 sm:mx-auto md:mt-0 md:px-0">
-            <Navigation />
-            <div className="mb-32">{children}</div>
+          <div className="h-screen ">
+            <main className="mx-4 flex max-w-2xl flex-auto flex-col px-2 sm:mx-auto">
+              {/* <Navigation /> */}
+              <div className="mb-32">
+                <div className="mt-28 space-y-12">
+                  <section className="flex flex-col justify-start">
+                    <Header />
+                    {children}
+                  </section>
+                </div>
+              </div>
+            </main>
             <Footer />
-          </main>
+          </div>
           <Analytics />
           <TailwindIndicator />
         </ThemeProvider>

diff --git a/app/notes/[slug]/page.tsx b/app/notes/[slug]/page.tsx
@@ -112,17 +112,17 @@ export default async function Page({ params }: Props) {
   return (
     <>
       <div>
-        <section className="mb-8 space-y-4">
+        <section className="mb-8">
           <SectionTitle data={null} title={article.note.title} />
           {/* {article.note.description ? (
             <>
-              <h3 className="relative mt-4 pb-2 font-heading text-lg font-normal leading-relaxed text-text/70">
+              <h3 className="relative mt-4 pb-2 font-sans text-lg font-normal leading-relaxed text-text/70">
                 {article.note.description}
               </h3>
               <hr className="border-t-1 my-4 border-gray-300/60" />
             </>
           ) : null}
-          <div className="flex flex-col font-body text-base text-gray-600 sm:flex-row sm:justify-between">
+          <div className="flex flex-col font-sans text-base text-gray-600 sm:flex-row sm:justify-between">
             <p>
               Published:{" "}
               <span className="text-sm tracking-widest">
@@ -138,24 +138,24 @@ export default async function Page({ params }: Props) {
               </p>
             ) : null}
           </div> */}
-          <TagList tags={article.note.tags} />
+          {/* <TagList tags={article.note.tags} /> */}
         </section>
         {article.series ? (
           <div className="mb-8">
             <Series series={article.series} interactive={true} current={slug} />
           </div>
         ) : null}
-        {article.note.headings.length != 0 ? (
+        {/* {article.note.headings.length != 0 ? (
           <div className="mb-8">
             <TableOfContents
               headings={article.note.headings}
               path={`/notes/${article.note.slug}`}
               interactive={true}
             />
           </div>
-        ) : null}
+        ) : null} */}
         <div className="mb-8">
-          <div className="prose prose-article text-lg leading-8 prose-headings:cursor-pointer prose-h1:mt-16 prose-h1:text-4xl prose-h2:mt-8 prose-h2:text-3xl prose-h3:mt-8 prose-h3:text-2xl prose-h4:text-xl prose-p:mt-8 prose-th:cursor-auto">
+          <div className="article text-base">
             <MdxContent components={CustomMDXComponents} />
             {article.note.status === "draft" ? <Draft /> : null}
           </div>

diff --git a/app/notes/page.tsx b/app/notes/page.tsx
@@ -25,7 +25,9 @@ export default async function Page() {
   return (
     <>
       <section>
-        <SectionTitle data={notes} title="notes" />
+        <div className="mt-16 flex flex-col items-start align-middle font-semibold">
+          <h1>Notes</h1>
+        </div>
       </section>
       <NotesList notes={notes} />
     </>

diff --git a/app/og/route.tsx b/app/og/route.tsx
@@ -12,7 +12,7 @@ export async function GET(req: NextRequest) {
   const tags = searchParams.get("tags")?.split("|")
   const hostname = new URL(`${siteConfig.url}`).hostname
   const font = fetch(
-    new URL("../../public/assets/fonts/wotfard.ttf", import.meta.url)
+    new URL("../../public/assets/fonts/geist-regular.otf", import.meta.url)
   ).then((res) => res.arrayBuffer())
   const fontData = await font
 
@@ -21,14 +21,14 @@ export async function GET(req: NextRequest) {
       <div
         tw="flex p-10 h-full w-full bg-white flex-col"
         style={{
-          fontFamily: "Wotfard",
+          fontFamily: "Geist Regular",
           backgroundImage:
             "radial-gradient(circle at 50% 50%, lightgray 2%, transparent 0%), radial-gradient(circle at 100% 100%, lightgray 2%, transparent 0%)",
           backgroundSize: "75px 75px",
         }}
       >
         <header tw="flex mt-8 text-[44px] w-full">
-          <div tw="font-bold" style={{ fontFamily: "Wotfard" }}>
+          <div tw="font-bold" style={{ fontFamily: "Geist Regular" }}>
             {siteConfig.name}
           </div>
           <div tw="grow" />
@@ -40,7 +40,7 @@ export async function GET(req: NextRequest) {
             <div
               tw="rounded-md bg-stone-100 tracking-wide p-4 text-6xl leading-snug font-medium text-center max-w-screen-xl text-slate-500"
               style={{
-                fontFamily: "Wotfard",
+                fontFamily: "Geist Regular",
                 boxShadow: "4px 4px 8px 1px rgba(184,182,184,1)",
               }}
             >
@@ -50,7 +50,7 @@ export async function GET(req: NextRequest) {
           {meta ? (
             <div
               tw="mt-12 flex items-center justify-center text-4xl text-gray-500"
-              style={{ fontFamily: "Wotfard" }}
+              style={{ fontFamily: "Geist Regular" }}
             >
               {meta}
             </div>
@@ -59,7 +59,7 @@ export async function GET(req: NextRequest) {
           {tags && tags.length > 0 ? (
             <div
               tw="text-2xl mt-10 flex flex-row flex-wrap justify-center items-center flex-wrap max-w-screen-xl text-gray-600"
-              style={{ fontFamily: "Wotfard" }}
+              style={{ fontFamily: "Geist Regular" }}
             >
               {tags?.slice(0, 3).map((tag, index) => (
                 <span
@@ -79,7 +79,7 @@ export async function GET(req: NextRequest) {
       height: 630,
       fonts: [
         {
-          name: "Wotfard",
+          name: "Geist Regular",
           data: fontData,
           style: "normal",
         },

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,30 +1,16 @@
-import { RecentNotes } from "@/components/recent-notes"
-import SectionTitle from "@/components/ui/section-title"
-import { siteConfig } from "@/config/site"
+import Connect from "@/components/ui/layout/connect"
+import NewsLetter from "@/components/ui/layout/newsletter"
+import Now from "@/components/ui/layout/now"
+import Writing from "@/components/ui/layout/writing"
 
 export default async function Page() {
   return (
-    <div className="space-y-12">
-      <section className="flex flex-col justify-start">
-        <SectionTitle data={null} title="Hey, I'm Yash 👋" />
-        <div className="prose prose-article text-lg leading-8 text-text">
-          <p>
-            I&apos;m a Software Engineer crafting efficient solutions for
-            intricate problems. Currently I work at{" "}
-            <a href="https://netskope.com" target="_blank">
-              Netskope
-            </a>{" "}
-            on it&apos;s API security product.
-          </p>
-          <p>
-            This domain is my little digital nest where I write about my
-            experiments with tech and life.
-          </p>
-        </div>
-      </section>
-      <section className="flex flex-col justify-start">
-        <RecentNotes count={siteConfig.recentNotes} />
-      </section>
-    </div>
+    <>
+      <Now />
+      {/* <Work /> */}
+      <Writing />
+      <Connect />
+      <NewsLetter />
+    </>
   )
 }
diff --git a/app/work/page.tsx b/app/work/page.tsx
@@ -23,7 +23,7 @@ const Page: FC = () => {
   return (
     <>
       <SectionTitle data={null} title="work" />
-      <section className="prose prose-lg prose-article">
+      <section className="">
         <p>
           I am a enthusiastic software developer with a knack for backend
           development. I&apos;ve got my hands dirty in Python, Golang, and C++.

diff --git a/components/all-notes.tsx b/components/all-notes.tsx
@@ -38,7 +38,7 @@ export const NotesList = ({
           <SearchInput search={search} onChange={onChange} />
         </div>
       ) : null}
-      <section className="w-full space-y-4">
+      <section className="space-y-2">
         <NoteList notes={results} />
       </section>
     </div>

diff --git a/components/footer.tsx b/components/footer.tsx
@@ -1,8 +1,16 @@
 import { FC } from "react"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 import { env } from "@/env.mjs"
 import moment from "moment"
 import { FiGithub, FiLinkedin, FiRss } from "react-icons/fi"
 
+import { DarkToggle } from "./mode-toggle"
+import { AnalogClock } from "./ui/clock/clock"
 import Link from "./ui/link"
 
 const Socials = [
@@ -38,40 +46,11 @@ const navItems = {
 
 export const Footer: FC = () => {
   return (
-    <footer className="mt-auto font-heading">
-      <hr className="border-[0.5px]" />
-      <div className="my-8 flex flex-row items-center justify-between">
-        <div className="flex flex-col gap-y-4">
-          <div className="flex flex-row justify-start gap-x-4">
-            {Socials.map((s) => {
-              return (
-                <Link
-                  href={s.url}
-                  key={s.name}
-                  aria-label={s.name}
-                  noExternalLinkIcon
-                >
-                  <s.icon className="size-5 text-text/60 hover:text-text" />
-                </Link>
-              )
-            })}
-          </div>
-          <div className="items-start">
-            <p className="text-text/60">Live since 2016</p>
-          </div>
-        </div>
-        <div className="flex flex-col items-end">
-          {Object.entries(navItems).map(([path, { name }]) => {
-            return (
-              <Link
-                key={path}
-                href={path}
-                className="text-text/60 hover:text-text hover:no-underline"
-              >
-                {name}
-              </Link>
-            )
-          })}
+    <footer className="mt-auto w-full border-[1px] border-t-gray-600 py-2">
+      <div className="mx-auto flex max-w-2xl flex-col gap-4 px-3 sm:px-0">
+        <div className="flex flex-row items-center justify-between">
+          <DarkToggle />
+          <AnalogClock />
         </div>
       </div>
     </footer>

diff --git a/components/mdx.tsx b/components/mdx.tsx
@@ -22,21 +22,28 @@ const BlogImage = (props) => {
 
 const CustomMDXComponents: MDXComponents = {
   Draft,
+  h1: ({ children }) => (
+    <h1 className="mb-5 mt-16 font-semibold">{children}</h1>
+  ),
+  h2: ({ children }) => (
+    <h2 className="mb-5 mt-16 font-semibold md:mt-16">{children}</h2>
+  ),
+  p: ({ children }) => <p className="mt-5 opacity-90">{children}</p>,
   a: BlogLink,
   pre: ({ children, ...props }) => (
-    <pre className="mb-4 mt-6 bg-pre-bg py-4 text-base" {...props}>
+    <pre className="" {...props}>
       {children}
     </pre>
   ),
-  code: ({ className, ...props }) => (
-    <code
-      className={cn(
-        "relative overflow-x-auto break-words rounded bg-code-bg p-[0.3rem] text-base",
-        className
-      )}
-      {...props}
-    />
-  ),
+  // code: ({ className, ...props }) => (
+  //   <code
+  //     className={cn(
+  //       "relative overflow-x-auto break-words rounded p-[0.3rem]",
+  //       className
+  //     )}
+  //     {...props}
+  //   />
+  // ),
   img: BlogImage,
 }
 export default CustomMDXComponents