add a broken blog

devashish2024 · Jan 6, 2025 · 4f550e6 · 4f550e6
1 parent 2d4d6ae
commit 4f550e6
Show file tree

Hide file tree

Showing 23 changed files with 1,916 additions and 166 deletions.
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -11,7 +11,7 @@ import {
 
 export default function Page() {
   return (
-    <div className="container px-4 mb-12 md:mt-4 space-y-4 min-h-screen">
+    <div className="container px-4 mb-12 mt-2 md:mt-4 space-y-4 min-h-screen">
       <Breadcrumb>
         <BreadcrumbList>
           <BreadcrumbItem>

diff --git a/app/contact/page.tsx b/app/contact/page.tsx
@@ -57,7 +57,7 @@ export default function Page() {
   }
 
   return (
-    <div className="container px-4 mb-12 md:mt-4 space-y-12 min-h-screen">
+    <div className="container px-4 mb-12 mt-2 md:mt-4 space-y-12 min-h-screen">
       <div className="space-y-4">
         <div className="flex items-center space-x-4">
           <Image
@@ -68,7 +68,13 @@ export default function Page() {
           />
           <div className="font-serif">
             <div className="text-2xl font-medium">Ashish Agarwal</div>
-            <div className="text-xl text-gray-500">@devashish2024</div>
+            <Link
+              href="https://github.com/devashish2024"
+              target="_blank"
+              className="text-xl text-gray-500 hover:text-primary"
+            >
+              @devashish2024
+            </Link>
           </div>
         </div>
         <p className="text-lg">
@@ -108,7 +114,7 @@ export default function Page() {
       </div>
 
       {formVisible ? (
-        <Card className="w-full max-w-2xl mx-auto">
+        <Card className="w-full max-w-screen-md mx-auto">
           <CardHeader>
             <CardTitle className="text-2xl font-medium text-primary font-serif">
               Get in Touch

diff --git a/app/globals.css b/app/globals.css
@@ -3,81 +3,81 @@
 @tailwind utilities;
 
 body {
-    @apply antialiased font-sans;
+  @apply antialiased font-sans scroll-smooth;
 }
 
 @layer base {
-    :root {
-        --primary: 10 86% 44%;
-        --primary-foreground: 240 5.9% 10%;
-        --secondary: 240 3.7% 15.9%;
-        --secondary-foreground: 0 0% 98%;
+  :root {
+    --primary: 10 86% 44%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
 
-        --background: 0 0% 100%;
-        --foreground: 240 10% 3.9%;
-        --card: 0 0% 100%;
-        --card-foreground: 240 10% 3.9%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 240 10% 3.9%;
-        --muted: 240 4.8% 95.9%;
-        --muted-foreground: 240 3.8% 46.1%;
-        --accent: 240 4.8% 95.9%;
-        --accent-foreground: 240 5.9% 10%;
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 0 0% 98%;
-        --border: 240 5.9% 90%;
-        --input: 240 5.9% 90%;
-        --ring: 240 10% 3.9%;
-        --chart-1: 12 76% 61%;
-        --chart-2: 173 58% 39%;
-        --chart-3: 197 37% 24%;
-        --chart-4: 43 74% 66%;
-        --chart-5: 27 87% 67%;
-        --radius: 0.5rem;
-    }
-    .dark {
-        --background: 240 10% 3.9%;
-        --foreground: 0 0% 98%;
-        --card: 240 10% 3.9%;
-        --card-foreground: 0 0% 98%;
-        --popover: 240 10% 3.9%;
-        --popover-foreground: 0 0% 98%;
-        --muted: 240 3.7% 15.9%;
-        --muted-foreground: 240 5% 64.9%;
-        --accent: 240 3.7% 15.9%;
-        --accent-foreground: 0 0% 98%;
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 0 0% 98%;
-        --border: 240 3.7% 15.9%;
-        --input: 240 3.7% 15.9%;
-        --ring: 240 4.9% 83.9%;
-        --chart-1: 220 70% 50%;
-        --chart-2: 160 60% 45%;
-        --chart-3: 30 80% 55%;
-        --chart-4: 280 65% 60%;
-        --chart-5: 340 75% 55%;
-    }
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
 }
 
 @layer base {
-    * {
-        @apply border-border;
-    }
-    body {
-        @apply bg-background text-foreground;
-    }
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
 
 @media (hover: hover) {
-    .animated-list:hover li {
-        opacity: 0.5;
-    }
+  .animated-list:hover li {
+    opacity: 0.5;
+  }
 
-    .animated-list:hover li:hover {
-        opacity: 1;
-    }
+  .animated-list:hover li:hover {
+    opacity: 1;
+  }
 }
 
 .overflow-x-scroll.snap-x::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
diff --git a/app/interviews/page.tsx b/app/interviews/page.tsx
@@ -1,9 +1,27 @@
 import Articles from "@/components/interviews/articles";
 import VideoInterviews from "@/components/interviews/videointerviews";
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
 
 export default function Page() {
   return (
-    <div className="container px-4 mb-12 md:mt-8 space-y-8 min-h-screen">
+    <div className="container px-4 mb-12 mt-2 md:mt-4 space-y-4 min-h-screen">
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbLink>Interviews</BreadcrumbLink>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
       <section className="space-y-6">
         <div>
           <div className="space-y-2">

diff --git a/app/page.tsx b/app/page.tsx
@@ -5,16 +5,18 @@ import ProjectList from "@/components/portfolio/projects";
 import InterviewList from "@/components/interviews/interviews";
 import ActionLink from "@/components/ui/actionlink";
 import WorkExperience from "@/components/portfolio/experience";
+import Link from "next/link";
 
-import projects from "@/data/projects";
 import { interviews } from "@/data/interviews";
+import { getProjects } from "@/lib/projects";
 import experiences from "@/data/experiences";
 
-const featuredProjects = projects.slice(0, 2);
 const featuredInterviews = interviews.slice(0, 4);
 const currentRole = experiences.slice(0, 1);
 
-export default function Page() {
+export default async function Page() {
+  const projects = await getProjects(2);
+
   return (
     <div className="container px-4 mb-12 mt-2 md:mt-4 space-y-12 min-h-screen">
       <div className="space-y-4">
@@ -27,7 +29,13 @@ export default function Page() {
           />
           <div className="font-serif">
             <div className="text-2xl font-medium">Ashish Agarwal</div>
-            <div className="text-xl text-gray-500">@devashish2024</div>
+            <Link
+              href="https://github.com/devashish2024"
+              target="_blank"
+              className="text-xl text-gray-500 hover:text-primary"
+            >
+              @devashish2024
+            </Link>
           </div>
         </div>
         <p className="text-lg">
@@ -78,7 +86,7 @@ export default function Page() {
         <h2 className="text-2xl font-medium text-primary mb-4 font-serif">
           Featured Projects
         </h2>
-        <ProjectList projects={featuredProjects} />
+        <ProjectList projects={projects} />
         <ActionLink label="View all projects" href="/work" />
       </div>
     </div>

diff --git a/app/work/[slug]/page.tsx b/app/work/[slug]/page.tsx
@@ -0,0 +1,54 @@
+import { getProjectBySlug, getProjects } from "@/lib/projects";
+import { notFound } from "next/navigation";
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import ProjectPage from "@/components/work/projectPage";
+
+export async function generateStaticParams() {
+  const projects = await getProjects();
+  const slugs = projects.map((project) => ({ slug: project.slug }));
+
+  return slugs;
+}
+
+export default async function Project({
+  params,
+}: {
+  params: { slug: string };
+}) {
+  const { slug } = await params;
+  const project = await getProjectBySlug(slug);
+
+  if (!project) {
+    notFound();
+  }
+
+  const { metadata, content } = project;
+
+  return (
+    <div className="container px-4 mb-12 mt-2 md:mt-4 space-y-4 min-h-screen">
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/work">Work</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbLink>{metadata.title}</BreadcrumbLink>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      <ProjectPage {...metadata} content={content} />
+    </div>
+  );
+}
diff --git a/app/work/page.tsx b/app/work/page.tsx
@@ -1,15 +1,31 @@
 import WorkExperience from "@/components/portfolio/experience";
 import ProjectList from "@/components/portfolio/projects";
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
 import experiences from "@/data/experiences";
-import projects from "@/data/projects";
+import { getProjects } from "@/lib/projects";
+
+export default async function Page() {
+  const projects = await getProjects();
 
-export default function Page() {
   return (
-    <div className="container px-4 mb-12 md:mt-8 space-y-8 min-h-screen">
-      <section className="space-y-8">
-        <div className="text-3xl font-medium font-serif">Work Experience</div>
-        <WorkExperience experiences={experiences} />
-      </section>
+    <div className="container px-4 mb-12 md:mt-4 space-y-4 min-h-screen">
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbLink>Work</BreadcrumbLink>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
 
       <section>
         <div className="text-3xl font-medium font-serif">Projects</div>
@@ -18,6 +34,10 @@ export default function Page() {
         </p>
         <ProjectList projects={projects} showSearch />
       </section>
+      <section className="space-y-8">
+        <div className="text-3xl font-medium font-serif">Work Experience</div>
+        <WorkExperience experiences={experiences} />
+      </section>
     </div>
   );
 }