Merge pull request #14 from devlopersabbir/responsiveness

Responsiveness

Author: devlopersabbir

.env.exmaple

@@ -0,0 +1,7 @@
+# neon tech | supabase
+DATABASE_URI=""
+
+# cloudinary
+NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=""
+NEXT_PUBLIC_CLOUDINARY_API_KEY=""
+CLOUDINARY_API_SECRET=""

.gitignore

@@ -4,6 +4,7 @@
 .pnp.js
 .yarn/install-state.gz
 pnpm-lock.yaml
+package-lock.json
 
 # testing
 /coverage

CONTRIBUTING.md

@@ -37,12 +37,13 @@ pnpm install
    cp .env.exmaple .env
    ```
 2. Make your postgresql connection URI and put into your `DATABASE_URI=""`
-   env variable (**[Prefer to use neon tech](https://neon.tech)**)
-3. Generate schema using drizzle kit
+   env variable (**[Prefer to use neon tech](https://neon.tech)** or **[supabase](https://supabase.com)**)
+3. I wish you will create your own cloudinary account to get all informations.
+4. Generate schema using drizzle kit
    ```bash
    pnpm generate
    ```
-4. Push your generated `SQL` table
+5. Push your generated `SQL` table
    ```bash
    pnpm push
    ```
@@ -73,6 +74,14 @@ Make sure you have formated your code using this command.
 pnpm format
 ```
 
+## **Do a simple step**
+
+I wish you will make a simple test on your local mechine help of this command.
+
+```bash
+pnpm lint
+```
+
 ## **Commit Your Changes**
 
 You're ready to immortalize your work. Commit your changes to your local branch using this incantation:
@@ -100,4 +109,4 @@ Your spellbinding creation will be reviewed by fellow wizards and witches to ens
 
 ## **Merge Your Changes**
 
-When your pull request is blessed by the council of wizards and passes all tests, it can be merged into the main codebase. Congratulations, you've successfully left your mark on devFind! 🪄🔮✨
+When your pull request is blessed by the council of wizards and passes all tests, i'll merged into the main codebase. Congratulations, you've successfully left your mark on [finddevs](https://finddevs.vercel.app)! 🪄🔮✨

src/app/layout.tsx

@@ -33,7 +33,7 @@ export default function RootLayout({
         suppressHydrationWarning={true}
         className={cn(
           "relative h-full font-sans antialiased bg-zinc-100 dark:bg-zinc-900",
-          inter.className
+          inter.className,
         )}
       >
         <ThemeProvider
@@ -44,7 +44,7 @@ export default function RootLayout({
         >
           <Toaster />
           <main className="relative flex flex-col min-h-scree">
-            <div className="lg:w-[20rem] lg:fixed lg:left-0 lg:top-0 lg:my-8 lg:px-8 border-r-2 border-gray-200 lg:h-[90vh] z-20 w-[100%]">
+            <div className="lg:w-[20rem] dark:bg-zinc-900 bg-zinc-100 lg:bg-transparent fixed lg:left-0 lg:top-0 lg:my-8 lg:h-[90vh] p-4 lg:px-4 lg:py-0 border-r-2 border-gray-200 z-20 w-full">
               <Sidebar />
             </div>
             <div className="flex-1 flex-grow w-full">

src/cloud/config.ts

@@ -17,26 +17,26 @@ const ProfileCard = ({
   social,
 }: TUserSchema) => {
   return (
-    <Card className="w-full backdrop-blur-3xl shadow flex flex-col dark:bg-zinc-700 border-none">
+    <Card className="w-full backdrop-blur-3xl shadow flex flex-col dark:bg-zinc-700 border-none transition-all ease-out duration-300">
       {/* header */}
-      <CardHeader className="flex justify-between items-stretch flex-row gap-4 overflow-hidden">
-        <Avatar className="w-24 h-24 object-cover">
+      <CardHeader className="flex justify-between items-stretch flex-row lg:gap-4 md:gap-2 gap-1 overflow-hidden">
+        <Avatar className="lg:w-24 md:w-20 w-16 lg:h-24 md:h-20 h-16 object-cover transition-all ease-out duration-300">
           <AvatarImage
             src={profileImage}
             className="object-fill"
             alt="profile photo"
           />
           <AvatarFallback>{name.substring(0, 2).toUpperCase()}</AvatarFallback>
         </Avatar>
-        <div className="flex-start w-full overflow-hidden flex-col gap-1">
-          <h2 className="lg:text-2xl font-semibold text-gray-700 dark:text-zinc-200 text-1xl">
+        <div className="flex-start w-full overflow-hidden flex-col lg:gap-1 gap-0.5">
+          <h2 className="lg:text-2xl md:text-xl sm:text-lg text-base font-semibold text-gray-700 dark:text-zinc-200 ">
             {name}
           </h2>
-          <p className="flex-center gap-2 text-base">
-            <MapPin size={20} />
+          <p className="flex-center lg:gap-2 md:gap-1 gap-0 lg:text-xl md:text-lg sm:text-base text-xs">
+            <MapPin size={16} />
             {location}
           </p>
-          <Carousel className="w-full mt-1.5">
+          <Carousel className="w-full lg:mt-1.5 md:mt-0.5 mt-0">
             <CarouselContent
               id="skills"
               className="flex justify-start items-center"
@@ -45,7 +45,7 @@ const ProfileCard = ({
                 <CarouselItem key={index} className="w-auto basis-[-29-px]">
                   <Badge
                     variant="secondary"
-                    className="text-sm cursor-all-scroll select-none"
+                    className="lg:text-sm text-xs cursor-all-scroll select-none"
                   >
                     {sk}
                   </Badge>
@@ -55,29 +55,23 @@ const ProfileCard = ({
           </Carousel>
         </div>
 
-        <div className="lg:flex-end w-52 hidden">
+        <div>
           <Link
             href={portfolio ?? "https://github.com/devlopersabbir"}
-            className="hover:underline text-green-600 flex-start gap-2"
+            className="hover:underline text-green-600 flex gap-2 font-semibold"
           >
-            View Profile
-            <ArrowRight size={20} />
+            <span className="lg:text-lg md:text-md sm:text-base text-xs">
+              Profile
+            </span>
+            <ArrowRight size={18} />
           </Link>
         </div>
       </CardHeader>
 
-      {/* For Tab & Mobile */}
-      <div className="m-6 w-52 block lg:hidden">
-        <Link
-          href={portfolio ?? "https://github.com/devlopersabbir"}
-          className="hover:underline text-green-600 flex-start gap-2"
-        >
-          View Profile
-          <ArrowRight size={20} />
-        </Link>
-      </div>
       <CardContent>
-        <p className="font-serif text-lg">{description}</p>
+        <p className="font-thin lg:text-lg md:text-base text-xs">
+          {description}
+        </p>
         <div className="flex-start mt-3 gap-4">
           {social?.map((net: TNetwork, i: number) => (
             <Link

src/cloud/index.ts

@@ -26,8 +26,8 @@ const ProfileGrid = async ({ page, searchParams }: Props) => {
           .where(
             or(
               ilike(users.name, `%${searchParams}%`),
-              ilike(users.location, `%${searchParams}%`)
-            )
+              ilike(users.location, `%${searchParams}%`),
+            ),
           )
           .limit(itemPerPage)
           .offset(offset)
@@ -40,7 +40,7 @@ const ProfileGrid = async ({ page, searchParams }: Props) => {
   ]);
   const count = lengths[0].count;
   return (
-    <div className="lg:mt-32 mb-8 border-t-orange-500 lg:ml-[20rem] lg:px-6 overflow-y-scroll p-5 lg:p-0">
+    <div className="lg:mt-32 mt-[10rem] mb-8 border-t-orange-500 lg:ml-[20rem] px-4 lg:px-6 overflow-y-scroll relative">
       <Search />
       <div className="flex-center flex-col gap-3">
         {count <= 0 || profiles.length === 0 ? (

src/components/contents/ProfileCard.tsx

@@ -98,7 +98,7 @@ const CreateProfile = ({
         onSubmit={form.handleSubmit(onSubmitHandler)}
         className="flex-center flex-col md:flex-row-reverse gap-5 px-5 pb-5"
       >
-        <div className="w-[30%] flex-center flex-col gap-3">
+        <div className="w-full md:w-[30%] flex-center flex-col gap-3">
           <h1 className="text-base font-semibold hidden md:visible">
             Upload Profile
           </h1>
@@ -142,7 +142,7 @@ const CreateProfile = ({
           />
         </div>
 
-        <div className="w-[80%] space-y-4">
+        <div className="w-full md:w-[80%] space-y-4">
           <FormField
             control={form.control}
             name="name"
@@ -178,10 +178,7 @@ const CreateProfile = ({
               <FormItem>
                 <FormLabel className="font-semibold">Portfolio url</FormLabel>
                 <FormControl>
-                  <Input
-                    placeholder="https://github.com/devlopersabbir"
-                    {...field}
-                  />
+                  <Input placeholder="https://eample.com" {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>

src/components/contents/ProfileGrid.tsx

@@ -34,7 +34,7 @@ const SearchProfiles = () => {
       <SearchIcon
         size={30}
         className={
-          "absolute lg:right-10 right-2 cursor-pointer hover:text-red-600 transition-all duration-300"
+          "absolute right-2 cursor-pointer hover:text-red-600 transition-all duration-300 hidden md:block"
         }
       />
     </>