src/app/(__PAGES__)/layout.tsx

@@ -6,7 +6,7 @@ function Layout({ children }: { children: JSX.Element }) {
   return (
     <div className="space-y-4 ">
       <Navbar />
-      <main className="container min-h-screen py-20">
+      <main className="container min-h-screen py-4">
         {children}
 
         {/* <div className="absolute w-1 h-screen top-0 left-1/2 -translate-x-1/2 transform bg-foreground" /> */}

src/components/contact-form.tsx

@@ -48,7 +48,7 @@ function ContactForm() {
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <div className="flex gap-4 w-full">
+        <div className="flex flex-col md:flex-row gap-4 w-full">
           <FormField
             control={form.control}
             name="name"

src/components/heading.tsx

@@ -13,11 +13,13 @@ function Heading({
   return (
     <h2
       className={cn(
-        "text-5xl lg:text-8xl text-center md:text-left pb-4 font-black  bg-background",
+        "text-6xl lg:text-8xl text-center md:text-left pb-4 font-black  bg-background",
         className
       )}
     >
-      <span className="text-muted-foreground">{subTitle}</span>
+      <span className="text-muted-foreground text-5xl lg:text-7xl">
+        {subTitle}
+      </span>
       <br />
       {title}
     </h2>

src/components/me-card.tsx

@@ -33,24 +33,18 @@ const icons = {
   ),
 };
 
-function MeCard({
+function MeCard({ className }: { className?: string }) {
-  className,
-  button,
-}: {
-  button: { label: string; link: string };
-  className?: string;
-}) {
   return (
     <div
       className={cn(
-        `group overflow-hidden w-full max-w-xs h-[80vh] bg-muted 
+        `group overflow-hidden w-full max-w-xs h-[28rem] bg-muted 
                       rounded-xl space-y-8 p-4 flex flex-col 
                       justify-between pb-20 relative`,
         className
       )}
     >
       <div className="space-y-4">
-        <div className="h-64 w-3/4 mx-auto relative rounded-xl overflow-hidden z-10">
+        <div className="h-52 w-3/4 mx-auto relative rounded-xl overflow-hidden z-10">
           <Image src="/me.jpg" alt="me" fill className="object-cover " />
         </div>
 
@@ -79,8 +73,8 @@ function MeCard({
         </div>
       </div>
 
-      <p className="text-center text-muted-foreground text-sm md:text-lg font-bold">
+      <p className="text-center text-muted-foreground text-lg font-bold">
-        A Software Engineer who has developed countless innovative solutions.
+        Web Developer
       </p>
 
       <div className="w-full h-40 halftone absolute left-0 group-hover:scale-[102.5%] transition-all duration-300 top-0 z-0" />

src/components/setions/projects.tsx

@@ -7,14 +7,9 @@ import MeCard from "../me-card";
 import Heading from "../heading";
 
 const ProjectCard = (p: Project) => (
-  <Link
+  <Link href={p.link} target="_blank">
-    href={p.link}
+    <div className="group max-w-xs lg:max-w-none mx-auto md:mx-0 flex flex-col lg:flex-row items-center gap-4 cursor-pointer hover:bg-muted w-full rounded-xl relative">
-    className="flex gap-12 items-center w-full group"
+      <div className="h-40 w-full lg:max-w-32 relative rounded-xl overflow-hidden">
-    target="_blank"
-  >
-    {/* <div className="font-serif text-muted-foreground w-20">{`[ ${p.year} ]`}</div> */}
-    <div className="flex items-center gap-4 cursor-pointer hover:bg-muted w-full rounded-xl relative">
-      <div className="h-40 w-full max-w-32 relative rounded-xl overflow-hidden">
         <Image
           src={p.image}
           alt="project-image"
@@ -22,7 +17,7 @@ const ProjectCard = (p: Project) => (
           className="object-cover"
         />
       </div>
-      <div className="space-y-1 w-full">
+      <div className="space-y-1 w-full p-4">
         <span className="text-xs text-muted-foreground ">{`[ ${p.year} ]`}</span>
         <h3 className="text-2xl md:text-3xl font-black">{p.name}</h3>
         <p className="text-muted-foreground text-sm md:text-lg">
@@ -30,28 +25,22 @@ const ProjectCard = (p: Project) => (
         </p>
       </div>
 
-      <ArrowRight className="size-6 text-primary absolute right-4 top-8 -rotate-45 group-hover:-translate-y-4 group-hover:translate-x-2 transition-all duration-300" />
+      <ArrowRight className="size-6 text-primary absolute bottom-4 right-4 lg:top-8 -rotate-45 group-hover:-translate-y-4 group-hover:translate-x-2 transition-all duration-300" />
     </div>
   </Link>
 );
 
 function Projects() {
   return (
-    <div className="flex flex-col lg:flex-row gap-8 container lg:px-20">
+    <div className="flex flex-col md:flex-row gap-8 container lg:px-20">
-      <MeCard
+      <MeCard className="mx-auto order-last md:order-first md:sticky md:top-20" />
-        className="mx-auto order-last lg:order-first lg:sticky lg:top-20"
-        button={{
-          label: "Contact Me",
-          link: "/contact",
-        }}
-      />
       <div className="space-y-8  w-full p-4">
         <Heading
           title="Projects"
           subTitle="Recent"
           // className="sticky top-0 z-50 pb-6"
         />
-        <menu className=" flex flex-col items-center gap-8 pb-20 w-full">
+        <menu className=" flex flex-col items-center gap-8 lg:pb-20 w-full">
           {projects.map((p) => (
             <li key={p.link} className="w-full">
               <ProjectCard {...p} />