feat: add projects/works page

vignesh-gupta · Oct 31, 2024 · 48f5f04 · 48f5f04
1 parent 23f816b
commit 48f5f04
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 13 deletions.
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -1,20 +1,13 @@
-import PageContainer from "@/components/common/page-container";
+import PageContainer from "@/components/page/page-container";
 import GetInTouch from "@/components/get-in-touch";
 import Image from "next/image";
 import Link from "next/link";
+import PageHeader from "@/components/page/page-header";
 
 const AboutPage = () => {
   return (
     <>
-      <div className="py-16 pt-32 container max-w-[1024px] mx-auto">
-        <h1 className="text-4xl font-bold md:text-5xl lg:text-6xl text-primary">
-          A little bit about me
-        </h1>
-        <p className="mb-16 mt-4 text-base text-muted/60 md:text-2xl">
-          Who I am and what I do.
-        </p>
-      </div>
-      <div className="h-[1px] w-full bg-black/10 dark:bg-white/10" />
+      <PageHeader title="A little bit about me" subtitle="Who I am and what I do." />
       <PageContainer>
         <div className="grid w-full grid-cols-1 md:grid-cols-12">
           <div className="col-span-12 flex flex-col gap-12 md:col-span-8 md:pr-12 text-pretty">

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -5,7 +5,7 @@ import InfoCards, { InfoCardsProps } from "@/components/info/info-cards";
 import ProjectSection from "@/components/project/project-section";
 import { Button } from "@/components/ui/button";
 import { SendHorizontal } from "lucide-react";
-import PageContainer from "@/components/common/page-container";
+import PageContainer from "@/components/page/page-container";
 
 const info: InfoCardsProps[] = [
   {

diff --git a/src/app/work/page.tsx b/src/app/work/page.tsx
@@ -0,0 +1,35 @@
+import { StarsIcon } from "lucide-react";
+import Link from "next/link";
+
+import PageContainer from "@/components/page/page-container";
+import PageHeader from "@/components/page/page-header";
+import ProjectCard from "@/components/project/project-card";
+import { Card, CardDescription, CardTitle } from "@/components/ui/card";
+
+const WorkPage = () => {
+  return (
+    <>
+      <PageHeader
+        title="Projects"
+        subtitle="Projects and ideas I’ve worked on"
+      />
+      <PageContainer>
+        <section className="space-y-5">
+          {Array.from({ length: 3 }).map((_, index) => (
+            <ProjectCard key={index} />
+          ))}
+
+          <Card className="w-full overflow-hidden lg:h-[500px] relative bg-card/50 border-4 border-dashed flex items-center justify-center flex-col">
+            <StarsIcon className="size-24 text-foreground" />
+            <CardTitle className="my-5">Want to see more?</CardTitle>
+            <CardDescription className="text-muted/80">
+              I have more projects on my <Link href="https://github.com/vignesh-gupta/" className="underline underline-offset-2 text-primary/55 hover:text-primary/80">Github</Link>
+            </CardDescription>
+          </Card>
+        </section>
+      </PageContainer>
+    </>
+  );
+};
+
+export default WorkPage;
diff --git a/src/components/common/header.tsx b/src/components/common/header.tsx
@@ -51,6 +51,13 @@ const Header = () => {
           </div>
         </div>
       </header>
+      <Link href="/" aria-label="Vignesh Gupta Logo" className="fixed top-0 left-0 right-0 pt-5">
+        <Logo
+          width={50}
+          height={50}
+          className="block mx-auto md:hidden opacity-60"
+        />
+      </Link>
       <MobileNav />
     </>
   );

diff --git a/src/components/common/mobile-nav.tsx b/src/components/common/mobile-nav.tsx
@@ -12,7 +12,7 @@ const MobileNav = () => {
             <Logo width={50} height={50} />
           </Link>
           <nav className="relative flex justify-center flex-1">
-            <ul className="m-0 flex list-none items-center gap-5 sm:gap-10 rounded-[6px] p-1 justify-evenly shrink">
+            <ul className="m-0 flex list-none items-center gap-5 sm:gap-10 rounded-[6px] p-1 justify-evenly shrink flex-1">
               {navLinks.map((link) => (
                 <li key={`nav-link-${link.name}`}>
                   <Tooltip delayDuration={100}>
@@ -33,7 +33,7 @@ const MobileNav = () => {
             </ul>
           </nav>
         </div>
-        <div className="flex items-center gap-4">
+        <div className="hidden items-center gap-4 sm:flex">
           <div className="flex gap-6 text-onyx/70 dark:text-white/70">
             {socials.map((social) => (
               <Link

diff --git a/src/components/common/page-container.tsx → src/components/page/page-container.tsx b/src/components/common/page-container.tsx → src/components/page/page-container.tsx
diff --git a/src/components/page/page-header.tsx b/src/components/page/page-header.tsx
@@ -0,0 +1,22 @@
+type PageHeaderProps = {
+  title: string;
+  subtitle: string;
+};
+
+const PageHeader = ({ subtitle, title }: PageHeaderProps) => {
+  return (
+    <>
+      <div className="py-16 pt-32 px-4 container max-w-[1024px] mx-auto">
+        <h1 className="text-4xl font-bold md:text-5xl lg:text-6xl text-primary">
+          {title}
+        </h1>
+        <p className="my-4 text-base text-muted/60 md:text-2xl">
+          {subtitle}
+        </p>
+      </div>
+      <div className="h-[1px] w-full bg-black/10 dark:bg-white/10" />
+    </>
+  );
+};
+
+export default PageHeader;