chore: completed the ui of project details

anujbhati1 · Nov 23, 2024 · 5718cb5 · 5718cb5
1 parent 69cf45e
commit 5718cb5
Show file tree

Hide file tree

Showing 42 changed files with 649 additions and 161 deletions.
diff --git a/public/ae.webp b/public/ae.webp
diff --git a/public/behanceIcon.png b/public/behanceIcon.png
diff --git a/public/digi1.webp b/public/digi1.webp
diff --git a/public/digi2.webp b/public/digi2.webp
diff --git a/public/digi3.webp b/public/digi3.webp
diff --git a/public/digi4.webp b/public/digi4.webp
diff --git a/public/digi5.webp b/public/digi5.webp
diff --git a/public/digi6.webp b/public/digi6.webp
diff --git a/public/digi7.webp b/public/digi7.webp
diff --git a/public/digi8.webp b/public/digi8.webp
diff --git a/public/digilegalbooks.webp b/public/digilegalbooks.webp
diff --git a/public/digimain.jpg b/public/digimain.jpg
diff --git a/public/digireader.webp b/public/digireader.webp
diff --git a/public/githubIcon.png b/public/githubIcon.png
diff --git a/public/lgmain.jpg b/public/lgmain.jpg
diff --git a/public/linkedinIcon.png b/public/linkedinIcon.png
diff --git a/public/lq1.webp b/public/lq1.webp
diff --git a/public/lq10.webp b/public/lq10.webp
diff --git a/public/lq11.webp b/public/lq11.webp
diff --git a/public/lq12.webp b/public/lq12.webp
diff --git a/public/lq13.webp b/public/lq13.webp
diff --git a/public/lq2.webp b/public/lq2.webp
diff --git a/public/lq3.webp b/public/lq3.webp
diff --git a/public/lq4.webp b/public/lq4.webp
diff --git a/public/lq5.webp b/public/lq5.webp
diff --git a/public/lq6.webp b/public/lq6.webp
diff --git a/public/lq7.webp b/public/lq7.webp
diff --git a/public/lq8.webp b/public/lq8.webp
diff --git a/public/lq9.webp b/public/lq9.webp
diff --git a/public/pric.webp b/public/pric.webp
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -25,3 +25,14 @@ body {
     text-wrap: balance;
   }
 } */
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,26 +1,29 @@
-import type { Metadata } from 'next';
-import localFont from 'next/font/local';
-import './globals.css';
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+import { Raleway } from "next/font/google";
 
 const geistSans = localFont({
-  src: './fonts/GeistVF.woff',
-  variable: '--font-geist-sans',
-  weight: '100 900',
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
 });
 const geistMono = localFont({
-  src: './fonts/GeistMonoVF.woff',
-  variable: '--font-geist-mono',
-  weight: '100 900',
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
 });
 const railwayBold = localFont({
-  src: './fonts/ralewayBold.woff',
-  variable: '--font-raleway-bold',
-  weight: '100 900',
+  src: "./fonts/ralewayBold.woff",
+  variable: "--font-raleway-bold",
+  weight: "100 900",
 });
 
+const inter = Raleway({ subsets: ["latin"] });
+
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: "Portfolio · Anuj Bhati",
+  description: "This is portfolio website of Anuj Bhati",
 };
 
 export default function RootLayout({
@@ -29,9 +32,9 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang='en'>
       <body
-        className={`${railwayBold.variable} ${geistSans.variable} ${geistMono.variable} antialiased bg-black`}
+        className={`${inter.className} ${railwayBold.variable} ${geistSans.variable} ${geistMono.variable} antialiased bg-black`}
       >
         {children}
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,41 +10,46 @@ import { extraSkills, projects, skills } from "@/lib/constants";
 export default function Home() {
   return (
     <>
-      <div className="bg-black container mx-auto">
+      <div className='bg-black container mx-auto'>
         <Header />
         <Hero />
         <div>
-          <div className="mb-8 mx-4">
-            <div className="text-[#7b4ae2] w-fit bg-[#7b4ae2]/10 text-sm font-bold px-2 py-1 rounded-lg mx-1">
+          <div className='mb-8 mx-4'>
+            <div className='text-[#7b4ae2] w-fit bg-[#7b4ae2]/10 text-sm font-bold px-2 py-1 rounded-lg mx-1'>
               🔗 Portfolio
             </div>
-            <h1 className="text-2xl md:text-4xl font-bold text-white mt-3">
+            <h1 className='text-2xl md:text-4xl font-bold text-white mt-3'>
               Works and projects
             </h1>
           </div>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 justify-between mx-3">
+          <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 justify-between mx-3'>
             {projects.map((item) => (
               <ProjectCard
                 key={item.id}
+                id={item.id}
+                url={item.url}
+                status={item.status}
+                tech={item.tech}
                 title={item.title}
                 image={item.image}
+                type={item.type}
               />
             ))}
           </div>
-          <div className="my-10 w-full">
-            <div className="flex justify-center items-center mb-12">
-              <div className="mx-4">
-                <div className="flex justify-center">
-                  <div className="text-[#7b4ae2] w-fit text-center bg-[#7b4ae2]/10 text-sm font-bold px-2 py-1 rounded-lg mx-1">
+          <div className='my-10 w-full'>
+            <div className='flex justify-center items-center mb-12'>
+              <div className='mx-4'>
+                <div className='flex justify-center'>
+                  <div className='text-[#7b4ae2] w-fit text-center bg-[#7b4ae2]/10 text-sm font-bold px-2 py-1 rounded-lg mx-1'>
                     🧑‍💻 Skills · Experiences
                   </div>
                 </div>
-                <h1 className="text-2xl md:text-4xl font-bold text-white mt-3">
+                <h1 className='text-2xl md:text-4xl font-bold text-white mt-3'>
                   My technical arsenal includes:
                 </h1>
               </div>
             </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 justify-between">
+            <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 justify-between'>
               {skills.map((item) => (
                 <SkillCard
                   key={item.id}
@@ -55,36 +60,36 @@ export default function Home() {
               ))}
             </div>
           </div>
-          <div className="mb-20 mt-10">
-            <div className="flex justify-center items-center mb-12">
-              <div className="mx-4">
+          <div className='mb-20 mt-10'>
+            <div className='flex justify-center items-center mb-12'>
+              <div className='mx-4'>
                 {/* <div className="flex justify-center">
                   <div className="text-[#7b4ae2] w-fit text-center bg-[#7b4ae2]/10 text-sm font-bold px-2 py-1 rounded-lg mx-1">
                     🧑‍💻 Skills · Experiências
                   </div>
                 </div> */}
-                <h1 className="text-2xl md:text-4xl font-bold text-center text-white mt-3">
+                <h1 className='text-2xl md:text-4xl font-bold text-center text-white mt-3'>
                   Additional Tools and Expertise
                 </h1>
               </div>
             </div>
-            <div className="flex gap-4 justify-center flex-wrap max-w-2xl mx-auto">
+            <div className='flex gap-4 justify-center flex-wrap max-w-2xl mx-auto'>
               {extraSkills.map((item) => (
-                <div key={item.id} className="text-white">
-                  <item.icon size={50} color="#7B4AE280" />
+                <div key={item.id} className='text-white'>
+                  <item.icon size={50} color='#7B4AE280' />
                 </div>
               ))}
             </div>
           </div>
-          <div className="mb-20 mt-10">
-            <div className="flex justify-center items-center mb-12">
-              <div className="mx-4">
-                <div className="flex justify-center">
-                  <div className="text-[#7b4ae2] w-fit text-center bg-[#7b4ae2]/10 text-sm font-bold px-2 py-1 rounded-lg mx-1">
+          <div className='mb-20 mt-10'>
+            <div className='flex justify-center items-center mb-12'>
+              <div className='mx-4'>
+                <div className='flex justify-center'>
+                  <div className='text-[#7b4ae2] w-fit text-center bg-[#7b4ae2]/10 text-sm font-bold px-2 py-1 rounded-lg mx-1'>
                     📬 Contacts
                   </div>
                 </div>
-                <h1 className="text-2xl md:text-4xl font-bold text-center text-white mt-3">
+                <h1 className='text-2xl md:text-4xl font-bold text-center text-white mt-3'>
                   Let&apos;s Talk!
                 </h1>
               </div>

diff --git a/src/app/project-details/[id]/page.tsx b/src/app/project-details/[id]/page.tsx
@@ -0,0 +1,79 @@
+"use client";
+import Footer from "@/components/footer";
+import Header from "@/components/header";
+import { projects } from "@/lib/constants";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import React from "react";
+import { IoIosArrowRoundBack } from "react-icons/io";
+
+function ProjectDetails({ params }: { params: { id: string } }) {
+  const router = useRouter();
+  const pData = projects[parseInt(params.id) - 1];
+
+  return (
+    <>
+      <div className='bg-black container mx-auto min-h-svh'>
+        <Header />
+        <div className='h-full max-sm:p-3 max-lg:p-3 text-gray-200'>
+          <div className='sm:py-10'>
+            <div>
+              <div className='sm:flex sm:items-center sm:mt-5 mb-10'>
+                <button
+                  onClick={() => {
+                    router.back();
+                  }}
+                  className='mr-5'
+                >
+                  <IoIosArrowRoundBack size={40} color='#ffffff' />
+                </button>
+                <div className='flex flex-col-reverse sm:flex-row items-start sm:items-center justify-between sm:flex-grow'>
+                  <h1 className='text-2xl sm:text-3xl md:text-4xl font-bold text-white'>
+                    {pData.title}
+                  </h1>
+                  <button className='text-[#4ae290] bg-[#4ae290]/30 text-sm max-sm:self-end font-bold px-2 py-1 rounded-lg mx-1 max-sm:mb-4'>
+                    Online
+                  </button>
+                </div>
+              </div>
+              <div className='space-y-5'>
+                {pData.des.map((item) => (
+                  <p className='max-sm:text-sm'>{item.para}</p>
+                ))}
+              </div>
+              {pData.type === "mobile" ? (
+                <div className='flex mt-10 overflow-x-scroll sm:justify-center no-scrollbar sm:flex-wrap'>
+                  {pData.images.map((item) => (
+                    <div
+                      key={item.id}
+                      className='m-2 w-60 max-sm:64 flex-shrink-0'
+                    >
+                      <img
+                        src={item.url}
+                        alt='Project Images'
+                        className='max-sm:w-64 w-60 rounded'
+                      />
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className='mt-10 max-w-4xl mx-auto'>
+                  <Link target='_blank' href={pData.url}>
+                    <img
+                      src={pData.image}
+                      alt='Project Images'
+                      className='rounded hover:brightness-90 duration-200'
+                    />
+                  </Link>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+}
+
+export default ProjectDetails;
diff --git a/src/components/contactMe.tsx b/src/components/contactMe.tsx
@@ -78,24 +78,26 @@ function ContactMe() {
   };
 
   return (
-    <div className="flex flex-col sm:flex-row gap-7 items-center justify-center">
-      <button
-        onClick={contactMeOnWhatsapp}
-        className="text-[#7b4ae2] flex items-center justify-center gap-3 border-[0.5px] border-[#7b4ae2] px-4 py-2 rounded-xl"
-      >
-        <PiWhatsappLogoThin size={30} color="#7b4ae2" />
-        <p className="text-xl font-semibold">Let&apos;s talk!</p>
-      </button>
-      <div className="text-[#7b4ae2] flex flex-col items-center space-y-2">
-        <BsSend size={20} color="#7b4ae2" />
+    <div className='flex flex-col sm:flex-row gap-7 items-center justify-center'>
+      <div>
+        <button
+          onClick={contactMeOnWhatsapp}
+          className='text-[#7b4ae2] flex items-center justify-center gap-3 border-[0.5px] border-[#7b4ae2] px-4 py-2 rounded-xl'
+        >
+          <PiWhatsappLogoThin size={30} color='#7b4ae2' />
+          <p className='text-xl font-semibold'>Let&apos;s talk!</p>
+        </button>
+      </div>
+      <div className='text-[#7b4ae2] flex flex-col items-center space-y-2'>
+        <BsSend size={20} color='#7b4ae2' />
         <div>E-mail:</div>
-        <div className="text-white/50">anujbhati7488@gmail.com</div>
+        <div className='text-white/50'>anujbhati7488@gmail.com</div>
         <button onClick={handleCopyEmail}>
-          <PiCopySimpleLight size={20} color="#7b4ae2" />
+          <PiCopySimpleLight size={20} color='#7b4ae2' />
         </button>
         <div>
           {copyStatus.message ? (
-            <p className="text-xs font-normal">{copyStatus.message}</p>
+            <p className='text-xs font-normal'>{copyStatus.message}</p>
           ) : null}
         </div>
       </div>

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -1,35 +1,39 @@
-import Image from "next/image";
+import Link from "next/link";
 import React from "react";
+import { FaGithub, FaLinkedin } from "react-icons/fa";
+import { FaSquareXTwitter } from "react-icons/fa6";
 
 function Footer() {
   return (
     <div>
-      <div className="flex flex-col-reverse sm:flex-row items-center justify-between bg-[#7b4ae2]/10 py-5 sm:py-7 sm:px-10 md:px-24">
+      <div className='flex flex-col-reverse sm:flex-row items-center justify-between bg-[#7b4ae2]/10 py-5 sm:py-7 sm:px-10 md:px-24'>
         <div>
-          <p className="text-white/50 text-sm max-sm:mt-5">
-            Copyright © Anuj Bhati · 2024
+          <p className='text-white/50 text-sm max-sm:mt-5'>
+            Copyright © Anuj Bhati · {new Date().getFullYear()}
           </p>
         </div>
-        <div className="flex items-center justify-center gap-4">
-          <Image
-            src={"/linkedinIcon.png"}
-            height={30}
-            width={30}
-            alt="github icon"
-          />
-          <Image
-            src={"/githubIcon.png"}
-            height={30}
-            width={30}
-            alt="github icon"
-          />
-
-          <Image
-            src={"/behanceIcon.png"}
-            height={30}
-            width={30}
-            alt="github icon"
-          />
+        <div className='flex items-center justify-center gap-4'>
+          <Link
+            target='_blank'
+            href={"https://www.linkedin.com/in/anujbhati11"}
+            className='md:hover:scale-110 duration-200'
+          >
+            <FaLinkedin size={30} color='#8a8a95' />
+          </Link>
+          <Link
+            target='_blank'
+            href={"https://github.com/anujbhati1"}
+            className='md:hover:scale-110 duration-200'
+          >
+            <FaGithub size={30} color='#8a8a95' />
+          </Link>
+          <Link
+            target='_blank'
+            href={"https://x.com/anuj_bhati99"}
+            className='md:hover:scale-110 duration-200'
+          >
+            <FaSquareXTwitter size={30} color='#8a8a95' />
+          </Link>
         </div>
         {/* <div></div> */}
       </div>