├── .env
├── .eslintrc.json
├── public
    ├── og-image.png
    └── portfolioLogo.png
├── src
    ├── app
    │   ├── favicon.ico
    │   ├── loading.tsx
    │   ├── contact
    │   │   └── page.tsx
    │   ├── page.tsx
    │   ├── education
    │   │   └── page.tsx
    │   ├── about
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   ├── globals.css
    │   ├── more
    │   │   └── page.tsx
    │   ├── projects
    │   │   └── page.tsx
    │   └── skills
    │   │   └── page.tsx
    ├── lib
    │   └── utils.ts
    └── components
    │   ├── HeroTexts.tsx
    │   ├── HeroImage.tsx
    │   ├── Heading.tsx
    │   ├── DownLoadResumeBtn.tsx
    │   ├── animation
    │       ├── GithubBtn.tsx
    │       ├── FramerWrapper.tsx
    │       ├── HackerBtn.tsx
    │       └── DockAnimation.tsx
    │   ├── ui
    │       ├── label.tsx
    │       ├── input.tsx
    │       ├── tooltip.tsx
    │       ├── badge.tsx
    │       ├── card.tsx
    │       └── button.tsx
    │   ├── SendEmail.ts
    │   ├── SkillsFotter.tsx
    │   ├── TextRotator.tsx
    │   ├── Aboutfooter.tsx
    │   ├── SocialLinks.tsx
    │   ├── ContactForm.tsx
    │   ├── Navbar.tsx
    │   └── ProjectsCard.tsx
├── postcss.config.js
├── components.json
├── next.config.js
├── .gitignore
├── tsconfig.json
├── README.md
├── package.json
└── tailwind.config.ts


/.env:
--------------------------------------------------------------------------------
1 | RESEND_API_KEY= Your Render Api Key
2 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/og-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/darkmoon810/Portfolio/HEAD/public/og-image.png


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/darkmoon810/Portfolio/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/public/portfolioLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/darkmoon810/Portfolio/HEAD/public/portfolioLogo.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |  
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/src/app/loading.tsx:
--------------------------------------------------------------------------------
1 | import { Loader } from "lucide-react";
2 | 
3 | 
4 | export default function Loading() {
5 |     return (
6 |         <Loader className="h-11 w-11 absolute m-auto top-0 bottom-0 right-0 left-0 animate-spin text-[#2f7df4] z-50"/>
7 |        
8 |     )
9 |   }


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "src/app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true
11 |   },
12 |   "aliases": {
13 |     "components": "@/components",
14 |     "utils": "@/lib/utils"
15 |   }
16 | }


--------------------------------------------------------------------------------
/src/components/HeroTexts.tsx:
--------------------------------------------------------------------------------
 1 | import TextRotator from "./TextRotator";
 2 | 
 3 |  
 4 | const HeroTexts = () => {
 5 |  
 6 |   
 7 |   return (
 8 |     <>
 9 |       <h3 className="font-poppins text-2xl max-sm:text-xl" >I am</h3>
10 |       <h1 className="font-rubik text-8xl name_underline text-primary max-sm:text-6xl " >
11 |         Dark Moon
12 |       </h1>
13 |         <TextRotator/>
14 |      
15 |     </>
16 |   );
17 | };
18 | export default HeroTexts


--------------------------------------------------------------------------------
/src/components/HeroImage.tsx:
--------------------------------------------------------------------------------
 1 | import logo from "../../public/portfolioLogo.png";
 2 | import Image from "next/image"
 3 | 
 4 | const HeroImage = ()  => {
 5 | 
 6 | 
 7 | 
 8 |     return(
 9 |         <>
10 |           <Image
11 |           src={logo}
12 |           alt="logo"
13 |           loading="eager"
14 |           priority
15 |           height={1000}
16 |           width={1000}
17 |         />
18 |         </>
19 |     )
20 | }
21 | export default HeroImage


--------------------------------------------------------------------------------
/src/components/Heading.tsx:
--------------------------------------------------------------------------------
 1 | import FramerWrapper from "./animation/FramerWrapper";
 2 | 
 3 | const Heading = ({ children }: { children: React.ReactNode }) => {
 4 |   // CUSTOM HEADING FOR ALL PAGE
 5 |   return (
 6 |     <FramerWrapper y={0} x={-100}>
 7 |       <h1 className="font-poppins text-primary font-bold text-4xl name_underline max-sm:text-2xl">
 8 |         {children}
 9 |       </h1>
10 |     </FramerWrapper>
11 |   );
12 | };
13 | 
14 | export default Heading;
15 | 


--------------------------------------------------------------------------------
/src/components/DownLoadResumeBtn.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from '@/lib/utils'
 2 | import { Download } from 'lucide-react'
 3 | import Link from 'next/link'
 4 | import React from 'react'
 5 | import { buttonVariants } from './ui/button'
 6 | import HackerBtn from './animation/HackerBtn'
 7 | 
 8 | function DownLoadResumeBtn() {
 9 |   return (
10 |     <div className="h-fit w-full mt-2 py-2 px-4">
11 |   
12 |     <HackerBtn label='Download Resume' />
13 |   </div>
14 |   )
15 | }
16 | 
17 | export default DownLoadResumeBtn


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |     experimental:{
 4 |         serverComponentsExternalPackages: [
 5 |             '@react-email/render',
 6 |         ],
 7 |         // images:{
 8 |         //     remotePatterns:[
 9 |         //         {
10 |         //             protocol: 'https',
11 |         //             hostname: 'cdn.jsdelivr.net',
12 |         //         }
13 |         //     ]
14 |         // }
15 |     }
16 | }
17 | 
18 | module.exports = nextConfig
19 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/src/components/animation/GithubBtn.tsx:
--------------------------------------------------------------------------------
 1 | import { Github } from "lucide-react";
 2 | import Link from "next/link";
 3 | 
 4 | const GithubBtn = () => {
 5 |   return (
 6 |     <Link href={"https://github.com/taqui-786"} target="blank" className=" animate-pulse absolute left-0 bottom-16 sm:bottom-5 flex rounded-r-full justify-center items-center gap-2 z-50 w-fit h-fit p-2 shadow-md  border-y border-r  border-black hover:bg-primary hover:text-white hover:animate-none ">
 7 |       <Github />
 8 |       <span className="font-rubik text-2xl max-sm:text-xl">Github</span>
 9 |     </Link>
10 |   );
11 | };
12 | 
13 | export default GithubBtn;
14 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./src/*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Project Portfolio
 2 | 
 3 | A simple and Beautiful Porfolio made with Nextjs and Shadcn Ui.
 4 | 
 5 | ![Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7eq68h0uvs6xqgw3yqe.jpeg)
 6 | 
 7 | ## Getting Started
 8 | 
 9 | First, run the development server:
10 | 
11 | ```bash
12 | npm run dev
13 | # or
14 | yarn dev
15 | # or
16 | pnpm dev
17 | # or
18 | bun dev
19 | ```
20 | 
21 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
22 | 
23 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
24 | 
25 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
26 | 
27 | 
28 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/src/components/SendEmail.ts:
--------------------------------------------------------------------------------
 1 | import { Resend } from "resend";
 2 | import {redirect} from  'next/navigation'
 3 | 
 4 | 
 5 | // EMAIL SENDGING FUCTIONALITY 
 6 | // ADD RESEND_API_KEY IN YOUR .ENV FILE 
 7 | const resend = new Resend(process.env.RESEND_API_KEY);
 8 | export const SendEmail = async (formdata: FormData) => {
 9 |   const message = formdata.get("message");
10 |   const name = formdata.get("name");
11 |   const SenderEmail = formdata.get("SenderEmail");
12 |   if (!message) {
13 |     return {
14 |       error: "Invalid message",
15 |     };
16 |   }
17 |   await resend.emails.send({
18 |     from: "Contact Form <onboarding@resend.dev>",
19 |     to: `mdtaqui.jhar@gmail.com`,
20 |     subject: `${name} From Contact Form.`,
21 |     reply_to: `${SenderEmail}`,
22 |     text: `sender email: ${SenderEmail} 
23 |      ${message}`,
24 |   });
25 | 
26 | return redirect('/')
27 |  
28 |   
29 | };
30 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/src/components/SkillsFotter.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import React from "react";
 3 | 
 4 | interface MyComponentProps {
 5 |   items: Array<{ alt?: string; img?: any; name?: string; icon?: string }>;
 6 | }
 7 | 
 8 | const SkillsFooter: React.FC<MyComponentProps> = ({ items }) => {
 9 |   return (
10 |     <>
11 |       {items &&
12 |         items.map((item, index) => {
13 |           return (
14 |    
15 |             <div 
16 |             key={index} 
17 |             className="flex flex-col items-center justify-center gap-2 p-4 rounded-lg hover:bg-accent transition-colors"
18 |           >
19 |             <img 
20 |               src={item.icon} 
21 |               alt={item.name} 
22 |               className="w-12 h-12 object-contain"
23 |             />
24 |             <span className="text-sm text-center font-medium text-muted-foreground">
25 |               {item.name}
26 |             </span>
27 |           </div>
28 |           );
29 |         })}
30 |     </>
31 |   );
32 | };
33 | 
34 | export default SkillsFooter;
35 | 


--------------------------------------------------------------------------------
/src/components/animation/FramerWrapper.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import React, { useState } from "react";
 3 | import { motion, AnimatePresence } from "framer-motion";
 4 | type FramerMotionProps = {
 5 |     children: React.ReactNode,
 6 |     className?:any,
 7 |     y?:number
 8 |     x?:number
 9 |     delay?:number
10 |     duration?: number
11 |     scale?:number
12 | }
13 | function FramerWrapper({children,delay = 0.25 ,y = 15, x = 0,duration = 0.20,scale = 0, className}:FramerMotionProps) {
14 |     const [animateConfig, setAnimateConfig] = useState({
15 |         opacity:1, y:0, x:0
16 |     })
17 |   return (
18 |     <AnimatePresence>
19 |       <motion.div
20 |       initial={scale === 0 ?{opacity:0, y:y, x:x,}:{opacity:0, y:y, x:x, scale:scale}}
21 |       animate={scale === 0 ? {opacity:1, y:0, x:0} : {opacity:1, y:0, x:0, scale: 1}}
22 |       exit={{opacity:0, y:15}}
23 |       transition={{delay:delay, duration:duration}}
24 |       className={className}
25 |       >{children}</motion.div>
26 |     </AnimatePresence>
27 |   );
28 | }
29 | 
30 | export default FramerWrapper;


--------------------------------------------------------------------------------
/src/app/contact/page.tsx:
--------------------------------------------------------------------------------
 1 | import ContactForm from "@/components/ContactForm";
 2 | import FramerWrapper from "@/components/animation/FramerWrapper";
 3 | import Heading from "@/components/Heading";
 4 | import { Badge } from "@/components/ui/badge";
 5 | import { Phone } from "lucide-react";
 6 | 
 7 | const contactPage = () => {
 8 |   return (
 9 |     // PROJECT PAGE
10 |     <div className="h-full w-full relative flex flex-col items-start gap-5 overflow-hidden">
11 |       <Badge variant="secondary" className="gap-1.5 py-1 ">
12 |         <Phone className="h-4 w-4" />
13 |         Contact Us
14 |       </Badge>
15 |       <div className="flex flex-col gap-3 w-full">
16 |         <Heading>Contact Me!</Heading>
17 |         <div className="h-auto w-full flex justify-center items-center">
18 |           <FramerWrapper y={0} scale={0.8}>
19 |             <ContactForm />
20 |           </FramerWrapper>
21 |         </div>
22 |         <p className=" font-poppins text-lg w-full text-primary max-sm:text-base"></p>
23 |       </div>
24 |     </div>
25 |   );
26 | };
27 | 
28 | export default contactPage;
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@radix-ui/react-label": "^2.0.2",
13 |     "@radix-ui/react-toast": "^1.1.5",
14 |     "@radix-ui/react-tooltip": "^1.0.7",
15 |     "@vercel/og": "^0.5.20",
16 |     "class-variance-authority": "^0.7.0",
17 |     "clsx": "^2.0.0",
18 |     "framer-motion": "^11.2.13",
19 |     "lucide-react": "^0.292.0",
20 |     "next": "^15.0.3",
21 |     "react": "^18.3.1",
22 |     "react-dom": "^18.3.1",
23 |     "resend": "^0.16.0",
24 |     "tailwind-merge": "^2.0.0",
25 |     "tailwindcss-animate": "^1.0.7"
26 |   },
27 |   "devDependencies": {
28 |     "@types/node": "^20",
29 |     "@types/react": "^18",
30 |     "@types/react-dom": "^18",
31 |     "autoprefixer": "^10.0.1",
32 |     "eslint": "^8",
33 |     "eslint-config-next": "14.0.2",
34 |     "postcss": "^8",
35 |     "tailwindcss": "^3.3.0",
36 |     "typescript": "^5"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/TextRotator.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function TextRotator() {
 4 |   return (
 5 |    
 6 |     <div
 7 |     className="py-4  rounded-md flex flex-col justify-center items-center overflow-hidden"
 8 |   >
 9 |     <div className="font-poppins text-base sm:text-2xl [text-wrap:balance] text-gray-700">
10 |     I am a Software Developer &
11 |       <span
12 |         className="inline-flex ml-2 flex-col h-[calc(theme(fontSize.lg)*theme(lineHeight.tight))] sm:h-[calc(theme(fontSize.3xl)*theme(lineHeight.tight))] overflow-hidden"
13 |       >
14 |         <ul
15 |           className="block text-left font-rubik text-lg sm:text-3xl leading-tight [&_li]:block animate-text-slide"
16 |         >
17 |           <li className="text-[#2f7df4]">Freelancer</li>
18 |           <li className="text-[#2f7df4]">Creator</li>
19 |           <li className="text-[#2f7df4]">Contributer</li>
20 |           <li className="text-[#2f7df4]">Developer</li>
21 |           <li className="text-[#2f7df4]">Designer</li>
22 |         </ul>
23 |       </span>
24 |     </div>
25 |   </div>
26 |   )
27 | }
28 | 
29 | export default TextRotator


--------------------------------------------------------------------------------
/src/components/Aboutfooter.tsx:
--------------------------------------------------------------------------------
 1 | import {Circle, Dna, Globe2, Languages} from "lucide-react"
 2 | 
 3 | const Aboutfooter = () => {
 4 | 
 5 | 
 6 |     const items = [
 7 |         {name:"Language", answer:"English US", icon:<Languages className="h-11 w-11" />},
 8 |         {name:"Nationality",answer:"America", icon:<Globe2   className="h-8 w-8" />},
 9 |         {name:"Gender",answer:"Male", icon:<Dna  className="h-8 w-8" />},
10 |     ]
11 | 
12 | 
13 |     return(
14 |         <>
15 |         {
16 |             items.map((val, indx) => {
17 |               return(
18 |                 <div className="p-1 w-fit relative" key={indx}>
19 |                 <h1 className="gap-2 text-3xl font-poppins text-primary font-semibold relative flex icon_underline max-sm:text-2xl">{val.icon}{val.name}</h1>
20 |                 <div className="flex gap-2 justify-center items-center flex-row text-xl text-primary pt-3 max-lg:justify-start">
21 |                 <Circle className="h-3 w-3" /> {val.answer}
22 |                 </div>
23 |             </div>
24 |               )
25 |             })
26 |           }
27 |          
28 |         </>
29 |     )
30 | }
31 | 
32 | export default Aboutfooter


--------------------------------------------------------------------------------
/src/components/SocialLinks.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | import { Facebook, Linkedin, Twitter, ExternalLink } from "lucide-react";
 3 | import { buttonVariants } from "./ui/button";
 4 | import Link from "next/link";
 5 | import FramerWrapper from "./animation/FramerWrapper";
 6 | 
 7 | const SocialLinks = () => {
 8 |   const links = [
 9 |     { name: "Facebook", link: "https://www.facebook.com/shahina.khatun.1044", icon: <Facebook /> },
10 |     { name: "Twitter", link: "https://twitter.com/Taquiimam14", icon: <Twitter /> },
11 |     { name: "Linkedin", link: "https://www.linkedin.com/in/taqui-imam", icon: <Linkedin /> },
12 |     { name: "External", link: "https://tinyurl.com/MdTaquiImam", icon: <ExternalLink /> },
13 |   ];
14 |   return (
15 |     <>
16 |       {links.map((itm, indx) => {
17 |         const timing = 0.55 + indx * 0.125
18 |         
19 |         return (
20 |           <FramerWrapper key={indx} delay={timing} y={50}>
21 | 
22 |           <Link  target="blank"
23 |             href={itm.link}
24 |             className={cn(buttonVariants({ variant: "outline", size: "icon" }))}
25 |             >{itm.icon}</Link>
26 |             </FramerWrapper>
27 |         );
28 |       })}
29 |     </>
30 |   );
31 | };
32 | 
33 | export default SocialLinks;
34 | 


--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const TooltipProvider = TooltipPrimitive.Provider
 9 | 
10 | const Tooltip = TooltipPrimitive.Root
11 | 
12 | const TooltipTrigger = TooltipPrimitive.Trigger
13 | 
14 | const TooltipContent = React.forwardRef<
15 |   React.ElementRef<typeof TooltipPrimitive.Content>,
16 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
17 | >(({ className, sideOffset = 4, ...props }, ref) => (
18 |   <TooltipPrimitive.Content
19 |     ref={ref}
20 |     sideOffset={sideOffset}
21 |     className={cn(
22 |       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |       className
24 |     )}
25 |     {...props}
26 |   />
27 | ))
28 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
29 | 
30 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
31 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | import SocialLinks from "@/components/SocialLinks";
 4 | import HeroTexts from "@/components/HeroTexts";
 5 | import HeroImage from "@/components/HeroImage";
 6 | import GithubBtn from "@/components/animation/GithubBtn";
 7 | import DownLoadResumeBtn from "@/components/DownLoadResumeBtn";
 8 | import FramerWrapper from "@/components/animation/FramerWrapper";
 9 | 
10 | export const siteConfig = {
11 |   name: "Md Taqui Imam",
12 |   description: "I am a Passionate Software Developer",
13 |   ogImage: "https://mdTaquiImam.vercel.app/og-image.png",
14 |   url: "https://mdTaquiImam.vercel.app",
15 | }
16 | export default function Home() {
17 |   return (
18 |    <>
19 |       {/* LEFT SIDE  */}
20 |       <FramerWrapper className=" h-full w-auto flex flex-col justify-start gap-4" y={0} x={-100}>
21 |         <HeroTexts />
22 |         <div className="h-fit w-full p-4 flex gap-4">
23 |           <SocialLinks />
24 |         </div>
25 |        <DownLoadResumeBtn/>
26 |       </FramerWrapper>
27 |       {/* RIGHT SIDE image  */}
28 |       <FramerWrapper className="h-full w-[47%] relative block   max-lg:hidden" y={0} x={100}>
29 |        
30 |       {/* IMAGE  */}
31 |         <HeroImage />
32 |       </FramerWrapper>
33 |      
34 |       {/* GITHUB BUTTON  */}
35 |       <GithubBtn/>
36 |       </>
37 |   );
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/animation/HackerBtn.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { useState, useEffect } from 'react';
 3 | import { Download } from 'lucide-react';
 4 | import { Button } from '../ui/button';
 5 | 
 6 | const HackerBtn = ({ label }: { label: string }) => {
 7 |   const [displayText, setDisplayText] = useState(label);
 8 |   const charset = "abcdefghijklmnopqrstuvwxyz";
 9 | 
10 |   const randomChars = (length: number) => {
11 |     return Array.from(
12 |       { length },
13 |       () => charset[Math.floor(Math.random() * charset.length)]
14 |     ).join("");
15 |   };
16 | 
17 |   const scramble = async (input: string) => {
18 |     let prefix = "";
19 |     for (let index = 0; index < input.length; index++) {
20 |       await new Promise((resolve) => setTimeout(resolve, 50));
21 |       prefix += input.charAt(index);
22 |       setDisplayText(prefix + randomChars(input.length - prefix.length));
23 |     }
24 |   };
25 | 
26 |   const startScrambling = () => {
27 |     scramble(label);
28 |     setTimeout(() => console.log("Submitted"), label.length * 50);
29 |   };
30 | 
31 |   useEffect(() => {
32 |     setDisplayText(label);
33 |   }, [label]);
34 | 
35 |   return (
36 |     <Button size={'lg'} className='text-base px-5 py-6'       onMouseEnter={startScrambling}
37 |     >   <Download className="mx-1" />
38 |         {displayText}
39 |     </Button>
40 |   );
41 | };
42 | 
43 | export default HackerBtn;
44 | 


--------------------------------------------------------------------------------
/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | import FramerWrapper from "../animation/FramerWrapper"
 6 | 
 7 | const badgeVariants = cva(
 8 |   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
14 |         secondary:
15 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
16 |         destructive:
17 |           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
18 |         outline: "text-foreground",
19 |       },
20 |     },
21 |     defaultVariants: {
22 |       variant: "default",
23 |     },
24 |   }
25 | )
26 | 
27 | export interface BadgeProps
28 |   extends React.HTMLAttributes<HTMLDivElement>,
29 |     VariantProps<typeof badgeVariants> {}
30 | 
31 | function Badge({ className, variant, ...props }: BadgeProps) {
32 |   return (
33 |     <FramerWrapper y={0} scale={0.5}>
34 | 
35 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
36 |     </FramerWrapper>
37 |   )
38 | }
39 | 
40 | export { Badge, badgeVariants }
41 | 


--------------------------------------------------------------------------------
/src/app/education/page.tsx:
--------------------------------------------------------------------------------
 1 | import FramerWrapper from "@/components/animation/FramerWrapper";
 2 | import Heading from "@/components/Heading";
 3 | import { Badge } from "@/components/ui/badge";
 4 | import { Briefcase } from "lucide-react";
 5 | 
 6 | const educationPage = () => {
 7 |   return (
 8 |     // ABOUT PAGE
 9 |     <div className="h-full w-full relative flex flex-col items-start gap-5 overflow-hidden">
10 |       <Badge variant="secondary" className="gap-1.5 py-1 ">
11 |         <Briefcase className="h-4 w-4" />
12 |         Education
13 |       </Badge>
14 |       <div className="flex flex-col gap-3">
15 |         <Heading>My Education</Heading>
16 |       </div>
17 |       <div className="w-full h-fit flex flex-col">
18 |         <div className="w-full h-fit flex">
19 |           <FramerWrapper
20 |             y={0}
21 |             x={-100}
22 |             delay={0.35}
23 |             className="w-1/4 font-rubik flex items-center justify-evenly text-lg max-sm:text-base "
24 |           >
25 |             July 2017 - 2021
26 |           </FramerWrapper>
27 |           <FramerWrapper
28 |             y={0}
29 |             x={100}
30 |             delay={0.35}
31 |             className="relative w-3/4 border-l-4 border-l-[#3c3c3c] p-4 gap-3 education_point "
32 |           >
33 |             <div className="text-2xl font-rubik max-sm:text-xl">
34 |               Bachelor of Science in Computer Science (BSCS):, <br /> Dakota State University -
35 |               Madison, South Dakota
36 |             </div>
37 |             <p className=" font-poppins text-base w-full text-primary  max-sm:text-xs">
38 |               Dakota State University had strong programs in technology, especially in computer science, cybersecurity, and AI. During my time there, I specialized in a particular field, exploring courses, research opportunities, and career paths related to DSU.
39 |             </p>
40 |           </FramerWrapper>
41 |         </div>
42 |       </div>
43 |     </div>
44 |   );
45 | };
46 | 
47 | export default educationPage;
48 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 | 


--------------------------------------------------------------------------------
/src/components/ContactForm.tsx:
--------------------------------------------------------------------------------
 1 | import { Input } from "@/components/ui/input";
 2 | import { Label } from "@/components/ui/label";
 3 | 
 4 | import {
 5 |   Card,
 6 |   CardContent,
 7 |   CardDescription,
 8 |   CardFooter,
 9 |   CardHeader,
10 |   CardTitle,
11 | } from "@/components/ui/card";
12 | import { Button } from "./ui/button";
13 | import { SendEmail } from "./SendEmail";
14 | 
15 | const ContactForm = () => {
16 |   return (
17 |     <Card>
18 |       <form
19 |         action={async (FormData) => {
20 |           "use server";
21 |           await SendEmail(FormData);
22 |         }}
23 |       >
24 |         <CardHeader>
25 |           <CardTitle className="icon_underline">Send me a mail.</CardTitle>
26 |           <CardDescription>
27 |             Once form is submit you will be redirect to home page.
28 |           </CardDescription>
29 |         </CardHeader>
30 |         <CardContent>
31 |           <div className="grid w-full max-w-sm items-center gap-1.5 mt-2">
32 |             <Label htmlFor="name">Name</Label>
33 |             <Input
34 |               type="text"
35 |               name="name"
36 |               required
37 |               placeholder="Enter your name"
38 |             />
39 |           </div>
40 |           <div className="grid w-full max-w-sm items-center gap-1.5 mt-2">
41 |             <Label htmlFor="email">Email</Label>
42 |             <Input
43 |               type="email"
44 |               name="SenderEmail"
45 |               required
46 |               placeholder="Enter your email"
47 |             />
48 |           </div>
49 |           <div className="grid w-full max-w-sm items-center gap-1.5 mt-2">
50 |             <Label htmlFor="message">Your Message</Label>
51 |             <textarea
52 |               placeholder="Your message here..."
53 |               name="message"
54 |               required
55 |               className=" resize-none flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
56 |             ></textarea>
57 |           </div>
58 |         </CardContent>
59 |         <CardFooter>
60 |           <Button type="submit" className="w-full">
61 |             Submit
62 |           </Button>
63 |         </CardFooter>
64 |       </form>
65 |     </Card>
66 |   );
67 | };
68 | 
69 | export default ContactForm;
70 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from '@/lib/utils'
 2 | import { cva, VariantProps } from 'class-variance-authority'
 3 | import { Loader2 } from 'lucide-react'
 4 | import * as React from 'react'
 5 | 
 6 | const buttonVariants = cva(
 7 |   'active:scale-95 inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900',
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
12 |         destructive:
13 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
14 |         outline:
15 |           'border border-[#000] bg-transparent hover:bg-accent hover:text-accent-foreground',
16 |         custom:
17 |           ' bg-[#020817] text-white  hover:bg-[#020817d6]  hover:shadow-lg',
18 |         subtle:
19 |           'border border-input bg-background hover:bg-[#6aa2e6] hover:text-white',
20 |         ghost:
21 |           'bg-transparent hover:bg-zinc-100 text-zinc-800 data-[state=open]:bg-transparent data-[state=open]:bg-transparent',
22 |         link: 'bg-transparent dark:bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent',
23 |       },
24 |       size: {
25 |         default: 'h-10 py-2 px-4',
26 |         sm: 'h-9 px-2 rounded-md',
27 |         xs: 'h-8 px-1.5 rounded-sm',
28 |         lg: 'h-11 px-8 rounded-md',
29 |         icon: "h-10 w-10",
30 |         notch:"text-2xl px-2"
31 |       },
32 |     },
33 |     defaultVariants: {
34 |       variant: 'default',
35 |       size: 'default',
36 |     },
37 |   }
38 | )
39 | 
40 | export interface ButtonProps
41 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
42 |   VariantProps<typeof buttonVariants> {
43 |   isLoading?: boolean
44 | }
45 | 
46 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
47 |   ({ className, children, variant, isLoading, size, ...props }, ref) => {
48 |     return (
49 |       <button
50 |         className={cn(buttonVariants({ variant, size, className }))}
51 |         ref={ref}
52 |         disabled={isLoading}
53 |         {...props}>
54 |         {isLoading ? <Loader2 className='mr-2 h-4 w-4 animate-spin' /> : null}
55 |         {children}
56 |       </button>
57 |     )
58 |   }
59 | )
60 | Button.displayName = 'Button'
61 | 
62 | export { Button, buttonVariants }


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   content: [
 5 |     './pages/**/*.{ts,tsx}',
 6 |     './components/**/*.{ts,tsx}',
 7 |     './app/**/*.{ts,tsx}',
 8 |     './src/**/*.{ts,tsx}',
 9 | 	],
10 |   theme: {
11 |     screens: {
12 |       sm: '480px',
13 |       md: '720px',
14 |       lg: '976px',
15 |       xl: '1440px',
16 |     },
17 |     container: {
18 |       center: true,
19 |       padding: "2rem",
20 |       screens: {
21 |         "2xl": "1400px",
22 |       },
23 |       
24 |     },
25 |     extend: {
26 |       fontFamily:{
27 |         poppins: ['var(--font-poppins)'],
28 |         rubik: ['var(--font-rubik)']
29 |       },
30 |       colors: {
31 |         border: "hsl(var(--border))",
32 |         input: "hsl(var(--input))",
33 |         ring: "hsl(var(--ring))",
34 |         background: "hsl(var(--background))",
35 |         foreground: "hsl(var(--foreground))",
36 |         primary: {
37 |           DEFAULT: "hsl(var(--primary))",
38 |           foreground: "hsl(var(--primary-foreground))",
39 |           sky: "hsl(var(--primary-sky))",
40 |         },
41 |         secondary: {
42 |           DEFAULT: "hsl(var(--secondary))",
43 |           foreground: "hsl(var(--secondary-foreground))",
44 |         },
45 |         destructive: {
46 |           DEFAULT: "hsl(var(--destructive))",
47 |           foreground: "hsl(var(--destructive-foreground))",
48 |         },
49 |         muted: {
50 |           DEFAULT: "hsl(var(--muted))",
51 |           foreground: "hsl(var(--muted-foreground))",
52 |         },
53 |         accent: {
54 |           DEFAULT: "hsl(var(--accent))",
55 |           foreground: "hsl(var(--accent-foreground))",
56 |         },
57 |         popover: {
58 |           DEFAULT: "hsl(var(--popover))",
59 |           foreground: "hsl(var(--popover-foreground))",
60 |         },
61 |         card: {
62 |           DEFAULT: "hsl(var(--card))",
63 |           foreground: "hsl(var(--card-foreground))",
64 |         },
65 |       },
66 |       borderRadius: {
67 |         lg: "var(--radius)",
68 |         md: "calc(var(--radius) - 2px)",
69 |         sm: "calc(var(--radius) - 4px)",
70 |       },
71 |       keyframes: {
72 |         "accordion-down": {
73 |           from: { height: 0 },
74 |           to: { height: "var(--radix-accordion-content-height)" },
75 |         },
76 |         "accordion-up": {
77 |           from: { height: "var(--radix-accordion-content-height)" },
78 |           to: { height: 0 },
79 |         },
80 |       },
81 |       animation: {
82 |         "accordion-down": "accordion-down 0.2s ease-out",
83 |         "accordion-up": "accordion-up 0.2s ease-out",
84 |       },
85 |     },
86 |   },
87 |   plugins: [require("tailwindcss-animate")],
88 | }


--------------------------------------------------------------------------------
/src/app/about/page.tsx:
--------------------------------------------------------------------------------
 1 | import Aboutfooter from "@/components/Aboutfooter";
 2 | import FramerWrapper from "@/components/animation/FramerWrapper";
 3 | import Heading from "@/components/Heading";
 4 | import { Badge } from "@/components/ui/badge";
 5 | import { Circle, Heart, User2 } from "lucide-react";
 6 | const page = () => {
 7 |   const items = [
 8 |     { hobby: "Coding" },
 9 |     { hobby: "Walking" },
10 |     { hobby: "Basketball" },
11 |     { hobby: "Thinking" },
12 |     { hobby: "Creating Cool Projects" },
13 |   ];
14 | 
15 |   return (
16 |     // ABOUT PAGE
17 |     <div className="h-full w-full relative flex flex-col items-start gap-5 overflow-hidden">
18 |       <Badge variant="secondary" className="gap-1.5 py-1 ">
19 |         <User2 className="h-4 w-4" />
20 |         About me
21 |       </Badge>
22 |       <div className="flex flex-col gap-5">
23 |         <Heading>
24 |           Software Engineer And Web <br /> Developer, 
25 |         </Heading>
26 | 
27 |         <FramerWrapper y={0} x={100}>
28 |           <p className=" font-poppins text-xl w-full text-primary max-sm:text-lg ">
29 |             I am a Full Stack Web Developer with 5 years of experience. I&apos;m passionate about crafting web projects and
30 |             contributing to open-source communities. I specialize in modern
31 |             JavaScript frameworks and responsive CSS design, focusing on
32 |             creating pixel-perfect, user-friendly interfaces. With strong
33 |             attention to detail and efficient delivery, I build seamless web
34 |             experiences that combine functionality with elegant design.
35 |           </p>
36 |         </FramerWrapper>
37 |       </div>
38 |       <FramerWrapper
39 |         className="w-full flex flex-row justify-between max-lg:flex-col "
40 |         y={100}
41 |         delay={0.3}
42 |       >
43 |         <Aboutfooter />
44 |       </FramerWrapper>
45 |       <FramerWrapper className="block" y={100} delay={0.31}>
46 |         <h1 className="gap-2 text-3xl font-poppins text-primary font-semibold flex icon_underline relative max-sm:text-2xl">
47 |           {" "}
48 |           <Heart className="h-8 w-8" /> Hobbies
49 |         </h1>
50 |         <div className="w-full h-fit p-2 flex flex-row justify-between gap-7 max-lg:flex-col">
51 |           {items.map((val, indx) => {
52 |             return (
53 |               <div
54 |                 key={indx}
55 |                 className="flex gap-2 justify-center items-center flex-row text-xl text-primary pt-3 max-lg:justify-start "
56 |               >
57 |                 <Circle className="h-3 w-3" /> {val.hobby}
58 |               </div>
59 |             );
60 |           })}
61 |         </div>
62 |       </FramerWrapper>
63 |     </div>
64 |   );
65 | };
66 | 
67 | export default page;
68 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
  1 | import type { Metadata } from "next";
  2 | import {  Poppins, Rubik } from "next/font/google";
  3 | import "./globals.css";
  4 | import { cn } from "@/lib/utils";
  5 | import Navbar from "@/components/Navbar";
  6 | import { siteConfig } from "./page";
  7 | const poppins = Poppins({
  8 |   subsets: ["latin"],
  9 |   weight: "400",
 10 |   variable: "--font-poppins",
 11 | });
 12 | const rubik = Rubik({
 13 |   subsets: ["latin"],
 14 |   weight: "600",
 15 |   variable: "--font-rubik",
 16 | });
 17 | 
 18 | export const metadata: Metadata = {
 19 |   metadataBase: new URL("https://mdTaquiImam.vercel.app"),
 20 |   title: {
 21 |     default: siteConfig.name,
 22 |     template: `%s - Software Engineer`,
 23 |   },
 24 |   description: siteConfig.description,
 25 | 
 26 |   // added new keywords for seo
 27 |   keywords: [
 28 |     "md",
 29 |     "taqui",
 30 |     "imam",
 31 |     "Md",
 32 |     "MD",
 33 |     "TAQUI",
 34 |     "Taqui",
 35 |     "Imam",
 36 |     "Imam",
 37 |     "Md Taqui Imam",
 38 |     "md taqui imam",
 39 |     "mdtaqui",
 40 |     "mdtaquiimam",
 41 |     "taqui imam",
 42 |     "Taqui Imam",
 43 |     "Taquiimam",
 44 |     "portfolio",
 45 |     "web developer",
 46 |     "web",
 47 |     "web dev",
 48 |     "developer",
 49 |     "PROGRAMMER ",
 50 |     "programmer ",
 51 |     "MD TAQUI IMAM ",
 52 |     "website",
 53 |     "@Taquiimam",
 54 |     "Taquiimam",
 55 |     "taqui developer",
 56 |   ],
 57 |   authors: [
 58 |     {
 59 |       name: "Taqui Imam",
 60 |       url: "https://github.com/taqui-786",
 61 |     },
 62 |   ],
 63 |   creator: "Taqui imam",
 64 | 
 65 |   openGraph: {
 66 |     type: "website",
 67 |     locale: "en_US",
 68 |     url: siteConfig.url,
 69 |     title: siteConfig.name,
 70 |     description: siteConfig.description,
 71 |     images: [`${siteConfig.url}/og-image.png`],
 72 |     siteName: siteConfig.name,
 73 |   },
 74 |   twitter: {
 75 |     card: "summary_large_image",
 76 |     title: siteConfig.name,
 77 |     description: siteConfig.description,
 78 |     images: [`${siteConfig.url}/og-image.png`],
 79 |     creator: "@Taquiimam14",
 80 |   },
 81 |   icons: {
 82 |     icon: "/favicon.ico",
 83 |   },
 84 | };
 85 | 
 86 | export default function RootLayout({
 87 |   children,
 88 | }: {
 89 |   children: React.ReactNode;
 90 | }) {
 91 |   return (
 92 |     <html lang="en">
 93 |       <body className={`${poppins.variable} ${rubik.variable}`}>
 94 |         <main
 95 |           className={cn(
 96 |             "flex  relative  break-words h-dvh min-h-screen items-center justify-between pt-14 pb-4 px-40 max-md:p-4 bg-transparent max-sm:pt-20 bg-[radial-gradient(#2f7df4_1px,transparent_1px)] [background-size:16px_16px]",
 97 |             { "bg-white": "#E6E7EB" }
 98 |           )}
 99 |         >
100 |           {/* NAVBAR ->  */}
101 |           <Navbar />
102 |           {children}
103 |         </main>
104 |       </body>
105 |     </html>
106 |   );
107 | }
108 | 


--------------------------------------------------------------------------------
/src/components/Navbar.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | import { cn } from "@/lib/utils";
  3 | 
  4 | 
  5 | import {
  6 |   Briefcase,
  7 |   FolderGit2,
  8 |   GraduationCap,
  9 |   HomeIcon,
 10 |   LightbulbIcon,
 11 |   Mail,
 12 |   MoreHorizontal,
 13 |  
 14 |   User,
 15 | } from 'lucide-react';
 16 | 
 17 | import { Dock, DockIcon, DockItem, DockLabel } from '@/components/animation/DockAnimation';
 18 | 
 19 | import Link from "next/link";
 20 | import { useEffect, useState } from "react";
 21 | import FramerWrapper from "./animation/FramerWrapper";
 22 | import { usePathname } from "next/navigation";
 23 | 
 24 | const Navbar = () => {
 25 | 
 26 |   const data = [
 27 |     {
 28 |       title: 'Home',
 29 |       icon: (
 30 |         <HomeIcon className='h-full w-full ' />
 31 |       ),
 32 |       href: '/',
 33 |     },
 34 |     {
 35 |       title: 'About',
 36 |       icon: (
 37 |         <User className='h-full w-full ' />
 38 |       ),
 39 |       href: '/about',
 40 |     },
 41 |     {
 42 |       title: 'Skills',
 43 |       icon: (
 44 |         <LightbulbIcon className='h-full w-full ' />
 45 |       ),
 46 |       href: '/skills',
 47 |     },
 48 |     {
 49 |       title: 'Education',
 50 |       icon: (
 51 |         <GraduationCap className='h-full w-full ' />
 52 |       ),
 53 |       href: '/education',
 54 |     },
 55 |     {
 56 |       title: 'Projects',
 57 |       icon: (
 58 |         <FolderGit2 className='h-full w-full ' />
 59 |       ),
 60 |       href: '/projects',
 61 |     },
 62 |    
 63 |     {
 64 |       title: 'Contact us',
 65 |       icon: (
 66 |         <Mail className='h-full w-full ' />
 67 |       ),
 68 |       href: '/contact',
 69 |     },
 70 |     {
 71 |       title: 'More',
 72 |       icon: (
 73 |         <MoreHorizontal className='h-full w-full ' />
 74 |       ),
 75 |       href: '/more',
 76 |     },
 77 |   ];
 78 |   const [scrolling, setScrolling] = useState(false);
 79 |   const pathname = usePathname()
 80 |   
 81 |   useEffect(() => {
 82 |     const handleScroll = () => {
 83 |       if (window.scrollY > 0) {
 84 |         setScrolling(true);
 85 |       } else {
 86 |         setScrolling(false);
 87 |       }
 88 |     };
 89 | 
 90 |     window.addEventListener('scroll', handleScroll);
 91 | 
 92 |     return () => {
 93 |       window.removeEventListener('scroll', handleScroll);
 94 |     };
 95 |   }, []);
 96 | 
 97 | 
 98 |   return (
 99 | 
100 |     <div className={`fixed top-5 right-0 left-0 px-0 sm:px-5 m-auto w-full sm:w-fit bg-transparent z-[+9999999] ${scrolling ? "hidden":"block"}`}>
101 |     <Dock className='items-end pb-3 rounded-full'>
102 |       {data.map((item, idx) => (
103 |         <Link href={item.href} key={idx}>
104 | 
105 |         <DockItem
106 |           className={cn("aspect-square rounded-full bg-gray-200 dark:bg-neutral-800",pathname === item.href && " bg-gray-100 !border !border-primary-sky")}
107 |           >
108 |           <DockLabel >{item.title}</DockLabel>
109 |           <DockIcon className={cn(pathname === item.href && "text-[#2f7df4]")}>{item.icon}</DockIcon>
110 |         </DockItem>
111 |           </Link>
112 |       ))}
113 |     </Dock>
114 |     </div>
115 |   );
116 | };
117 | 
118 | export default Navbar;
119 | 


--------------------------------------------------------------------------------
/src/components/ProjectsCard.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | import Link from "next/link";
 3 | import { buttonVariants } from "./ui/button";
 4 | import {
 5 |   Card,
 6 |   CardContent,
 7 |   CardFooter,
 8 |   CardHeader,
 9 |   CardTitle,
10 | } from "@/components/ui/card";
11 | import FramerWrapper from "./animation/FramerWrapper";
12 | import { ArrowUpRight } from "lucide-react";
13 | 
14 | interface ProjectCardProps {
15 |   value: {
16 |     title: string;
17 |     description: string;
18 |     tags: string[];
19 |     link: string;
20 |   };
21 |   num: number;
22 | }
23 | 
24 | const ProjectCards: React.FC<ProjectCardProps> = ({ value, num }) => {
25 |   return (
26 |     <FramerWrapper 
27 |       className="max-w-[32%] max-lg:max-w-full" 
28 |       y={0} 
29 |       scale={0.8} 
30 |       delay={num/4} 
31 |       duration={0.15}
32 |     >
33 |       <Card className="w-full h-full flex flex-col hover:shadow-lg transition-all duration-300 border-2">
34 |         <CardHeader className="pb-2">
35 |           <CardTitle className="text-xl font-bold text-primary">{value.title}</CardTitle>
36 |         </CardHeader>
37 |         
38 |         <CardContent className="flex-grow flex flex-col gap-4">
39 |           <p className="text-sm text-muted-foreground leading-relaxed">{value.description}</p>
40 |           
41 |           <div className="flex flex-wrap gap-2">
42 |             {value.tags.map((tag: string, index: number) => {
43 |               const tagStyles = {
44 |                 'Nextjs': 'bg-teal-100 text-teal-800',
45 |                 'Freelancing': 'bg-yellow-100 text-yellow-800',
46 |                 'Shadcn Ui': 'bg-blue-100 text-blue-800',
47 |                 'Typescript': 'bg-red-100 text-red-800',
48 |                 'MySQL': 'bg-orange-100 text-orange-800',
49 |                 'Zustand': 'bg-purple-100 text-purple-800',
50 |                 'Supabase': 'bg-emerald-100 text-emerald-800',
51 |                 'Npx': 'bg-indigo-100 text-indigo-800',
52 |                 'Library': 'bg-pink-100 text-pink-800',
53 |                 'Zod': 'bg-cyan-100 text-cyan-800',
54 |                 'React Hook Form': 'bg-violet-100 text-violet-800'
55 |               }[tag] || 'bg-gray-100 text-gray-800';
56 | 
57 |               return (
58 |                 <span 
59 |                   key={index}
60 |                   className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${tagStyles}`}
61 |                 >
62 |                   {tag}
63 |                 </span>
64 |               );
65 |             })}
66 |           </div>
67 |         </CardContent>
68 | 
69 |         <CardFooter className="pt-2 ">
70 |           <Link
71 |             href={value.link}
72 |             target="_blank"
73 |             rel="noopener noreferrer"
74 |             className={cn(
75 |               buttonVariants({ 
76 |                 variant: "default", 
77 |                 size: "sm" 
78 |               }),
79 |               "w-fit transition-all hover:translate-y-[-2px] hover:shadow-md group"
80 |             )}
81 |           >
82 |             Visit Project 
83 |             <ArrowUpRight className="h-4 w-4 ml-1 hidden group-hover:block -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" />
84 |           </Link>
85 |         </CardFooter>
86 |       </Card>
87 |     </FramerWrapper>
88 |   );
89 | };
90 | 
91 | export default ProjectCards;
92 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 |  
  5 | 
  6 | @layer base {
  7 |   :root {
  8 |     --background: 0 0% 100%;
  9 |     --foreground: 222.2 84% 4.9%;
 10 | 
 11 |     --card: 0 0% 100%;
 12 |     --card-foreground: 222.2 84% 4.9%;
 13 |  
 14 |     --popover: 0 0% 100%;
 15 |     --popover-foreground: 222.2 84% 4.9%;
 16 |  
 17 |     --primary: 222.2 47.4% 11.2%;
 18 |     --primary-foreground: 210 40% 98%;
 19 |     --primary-sky: 216.24deg 89.95% 57.06%;
 20 |  
 21 |     --secondary: 210 40% 96.1%;
 22 |     --secondary-foreground: 222.2 47.4% 11.2%;
 23 |  
 24 |     --muted: 210 40% 96.1%;
 25 |     --muted-foreground: 215.4 16.3% 46.9%;
 26 |  
 27 |     --accent: 210 40% 96.1%;
 28 |     --accent-foreground: 222.2 47.4% 11.2%;
 29 |  
 30 |     --destructive: 0 84.2% 60.2%;
 31 |     --destructive-foreground: 210 40% 98%;
 32 | 
 33 |     --border: 214.3 31.8% 91.4%;
 34 |     --input: 214.3 31.8% 91.4%;
 35 |     --ring: 222.2 84% 4.9%;
 36 |  
 37 |     --radius: 0.5rem;
 38 |   }
 39 |  
 40 |   .dark {
 41 |     --background: 222.2 84% 4.9%;
 42 |     --foreground: 210 40% 98%;
 43 |  
 44 |     --card: 222.2 84% 4.9%;
 45 |     --card-foreground: 210 40% 98%;
 46 |  
 47 |     --popover: 222.2 84% 4.9%;
 48 |     --popover-foreground: 210 40% 98%;
 49 |  
 50 |     --primary: 210 40% 98%;
 51 |     --primary-foreground: 222.2 47.4% 11.2%;
 52 |  
 53 |     --secondary: 217.2 32.6% 17.5%;
 54 |     --secondary-foreground: 210 40% 98%;
 55 |  
 56 |     --muted: 217.2 32.6% 17.5%;
 57 |     --muted-foreground: 215 20.2% 65.1%;
 58 |  
 59 |     --accent: 217.2 32.6% 17.5%;
 60 |     --accent-foreground: 210 40% 98%;
 61 |  
 62 |     --destructive: 0 62.8% 30.6%;
 63 |     --destructive-foreground: 210 40% 98%;
 64 |  
 65 |     --border: 217.2 32.6% 17.5%;
 66 |     --input: 217.2 32.6% 17.5%;
 67 |     --ring: 212.7 26.8% 83.9%;
 68 |   }
 69 | }
 70 |  
 71 | @layer base {
 72 |   * {
 73 |     @apply border-border;
 74 |   }
 75 |   body {
 76 |     @apply bg-background text-foreground;
 77 |   }
 78 | }
 79 | 
 80 | /* CUSTOM CSS  */
 81 | .name_underline::after{
 82 |   content: "";
 83 |   display: block;
 84 |   width: 6rem;
 85 |   height: .6rem;
 86 |   background-color: hsl(var(--primary-sky));
 87 | }
 88 | .icon_underline::after{
 89 |   content: "";
 90 |     position: absolute;
 91 |     top: 100%;
 92 |     display: block;
 93 |     width: 2rem;
 94 |     height: .3rem;
 95 |     background-color: hsl(var(--primary-sky));
 96 |     margin-bottom: 2rem;
 97 | }
 98 | .education_point::before{
 99 |   content: "";
100 |     display: block;
101 |     position: absolute;
102 |     top: 46.7%;
103 |     left: -7px;
104 |     width: 10px;
105 |     height: 10px;
106 |     border-radius: 50%;
107 |     background-color: hsl(var(--primary-sky));
108 |     outline: 3px solid hsl(var(--primary));
109 |     box-shadow: 0 2px 5px 2px hsl(var(--primary-sky));
110 | }
111 | /* TEXT ROTATOR STYLES  */
112 | .animate-text-slide {
113 |   animation: text-slide 12.5s cubic-bezier(0.83, 0, 0.17, 1) infinite;
114 | }
115 | 
116 | @keyframes text-slide {
117 |   0%,
118 |   16% {
119 |     transform: translateY(0%);
120 |   }
121 | 
122 |   20%,
123 |   36% {
124 |     transform: translateY(-16.66%);
125 |   }
126 | 
127 |   40%,
128 |   56% {
129 |     transform: translateY(-33.33%);
130 |   }
131 | 
132 |   60%,
133 |   76% {
134 |     transform: translateY(-50%);
135 |   }
136 | 
137 |   80%,
138 |   96% {
139 |     transform: translateY(-66.66%);
140 |   }
141 | 
142 |   100% {
143 |     transform: translateY(-83.33%);
144 |   }
145 | }


--------------------------------------------------------------------------------
/src/app/more/page.tsx:
--------------------------------------------------------------------------------
  1 | import Heading from "@/components/Heading";
  2 | import { Badge } from "@/components/ui/badge";
  3 | import { ExternalLink, PackagePlus } from "lucide-react";
  4 | import {
  5 |   Card,
  6 |   CardContent,
  7 |   CardFooter,
  8 |   CardHeader,
  9 |   CardTitle,
 10 | } from "@/components/ui/card";
 11 | import Link from "next/link";
 12 | import { cn } from "@/lib/utils";
 13 | import { buttonVariants } from "@/components/ui/button";
 14 | import FramerWrapper from "@/components/animation/FramerWrapper";
 15 | 
 16 | const morePage = () => {
 17 |   const morelink = [
 18 |     {
 19 |       title: "Dev.to",
 20 |       description:
 21 |         "I write blogs on web development, trending tech stacks or javascript guide or tips in Dev.to ",
 22 |       link: "https://dev.to/random_ti",
 23 |     },
 24 |     {
 25 |       title: "Hashnode",
 26 |       description:
 27 |         "I write blogs on web development, trending tech stacks or javascript guide or tips in Hashnode",
 28 |       link: "https://mdtaquiimam.hashnode.dev/",
 29 |     },
 30 |     {
 31 |       title: "Medium",
 32 |       description:
 33 |         "I write blogs on web development, trending tech stacks or javascript guide or tips in Medium",
 34 |       link: "https://medium.com/@mdtaqui.jhar",
 35 |     },
 36 | 
 37 |     {
 38 |       title: "Daily.Dev",
 39 |       description:
 40 |         "I am also the member of Daily Dev squads and i also upload post on some squads.",
 41 |       link: "https://app.daily.dev/taqui_786",
 42 |     },
 43 |     {
 44 |       title: "Gumroad",
 45 |       description:
 46 |         "I also sell digital products on gumroad like Notion Templates and web projects etc.",
 47 |       link: "https://mdtaquijhar.gumroad.com/",
 48 |     },
 49 |     {
 50 |       title: "Buy Me a coffee",
 51 |       description:
 52 |         "Supports my content quality, new topics, and project creation.",
 53 |       link: "https://www.buymeacoffee.com/taquidevloper",
 54 |     },
 55 |   ];
 56 | 
 57 |   return (
 58 |     // ABOUT PAGE
 59 |     <div className="h-full w-full relative flex flex-col items-start gap-5 overflow-hidden">
 60 |       <Badge variant="secondary" className="gap-1.5 py-1 ">
 61 |         <PackagePlus className="h-4 w-4" />
 62 |         More
 63 |       </Badge>
 64 |       <div className="flex flex-col gap-3">
 65 |         <Heading>More</Heading>
 66 |       </div>
 67 |       <div className="h-auto w-full flex flex-wrap gap-3 p-2">
 68 |         {morelink.map((value, indx) => {
 69 |           
 70 |           return (
 71 |             <FramerWrapper key={indx} className="max-w-[32%] max-lg:max-w-full" y={0} scale={0.8} delay={indx/4} duration={0.15}>
 72 |             <Card  className="w-full">
 73 |               <CardHeader>
 74 |                 <CardTitle>{value.title}</CardTitle>
 75 |               </CardHeader>
 76 |               <CardContent>
 77 |                 <p className="text-base font-poppins ">{value.description}</p>
 78 |               </CardContent>
 79 |               <CardFooter>
 80 |                 <Link
 81 |                   href={value.link}
 82 |                   target="blank"
 83 |                   className={cn(
 84 |                     buttonVariants({ variant: "default", size: "lg" }),
 85 |                     "w-full gap-3"
 86 |                   )}
 87 |                 >
 88 |                   {" "}
 89 |                   <ExternalLink />
 90 |                   Visit here
 91 |                 </Link>
 92 |               </CardFooter>
 93 |             </Card>
 94 |             </FramerWrapper>
 95 |           );
 96 |         })}
 97 |       </div>
 98 |     </div>
 99 |   );
100 | };
101 | 
102 | export default morePage;
103 | 


--------------------------------------------------------------------------------
/src/app/projects/page.tsx:
--------------------------------------------------------------------------------
  1 | import FramerWrapper from "@/components/animation/FramerWrapper";
  2 | import Heading from "@/components/Heading";
  3 | import ProjectCards from "@/components/ProjectsCard";
  4 | import { Badge } from "@/components/ui/badge";
  5 | import { Layers } from "lucide-react";
  6 | 
  7 | const projectsPage = () => {
  8 |   // PROJECTS DATA
  9 |   const Projects = [
 10 |     {
 11 |       title: "Devzone - A community chat app for devs",
 12 |       description:
 13 |         `DevZone is the ultimate chat platform for developers
 14 | to connect, collaborate, and code together. Join the conversation and level up your coding journey.`,
 15 |       tags: ["Zustand", "Supabase", "Shadcn Ui", "Nextjs"],
 16 |       link: "https://devzone-ti.vercel.app/",
 17 |     },
 18 |    
 19 |     {
 20 |       title: "itZmyLink- One Page many Links",
 21 |       description:
 22 |         "itZmyLink is a simple platform where user can create a personalized page to showcase all your social media profiles in one place. ",
 23 |       tags: ["Nextjs", "Typescript", "Shadcn Ui"],
 24 |       link: "https://github.com/taqui-786/itZmyLink",
 25 |     },
 26 |     {
 27 |       title: "GitEstimate- Github estimate worth generator",
 28 |       description:
 29 |         "GitEstimate is a simple fun tool where user can generate their github estimate worth card just by entering their github username. ",
 30 |       tags: ["Nextjs", "Typescript", "Shadcn Ui"],
 31 |       link: "https://github.com/taqui-786/GitEstimate",
 32 |     },
 33 |     {
 34 |       title: "Mixcn-ui- Reusable components for Nextjs",
 35 |       description:
 36 |         "This is Nextjs app with a Collection of Nextjs Components - (Currently under Devlelopment) ",
 37 |       tags: ["Nextjs", "Shadcnui", "Npx","Library"],
 38 |       link: "https://mixcn-ui.vercel.app",
 39 |     },
 40 |     {
 41 |       title: "Rupeespot- All deals Product in one place",
 42 |       description:
 43 |         "This is a free tool to check price history charts for millions of products for popular Indian stores such as Amazon and Flipkart. ",
 44 |       tags: ["Nextjs", "Freelancing", "MySQL"],
 45 |       link: "https://rupeespot.com/",
 46 |     },
 47 |     {
 48 |       title: "Formcraft- Build Type-Safe Forms with Zero Effort",
 49 |       description:
 50 |         "Create production-ready forms with Zod validation, React Hook Form, and TypeScript. Design, customize, and deploy in minutes.",
 51 |       tags: ["Nextjs", "Shadcnui", "Zod", "React Hook Form "],
 52 |       link: "https://formcraft-ti.vercel.app/",
 53 |     },
 54 |     
 55 |     {
 56 |       title: "KryptoKapital- Investing in Cryptocurreny",
 57 |       description:
 58 |         "This is a platform for learning about cryptocurrency with many tools and festures. It is very big project. ",
 59 |       tags: ["Nextjs", "Freelancing", "Supabase"],
 60 |       link: "https://pro.kryptokapital.info/",
 61 |     },
 62 |     {
 63 |       title: "FriendZ - A social media Platform",
 64 |       description:
 65 |         "FriendZ is a social media app made with modern tech stacks such as redis, Authjs etc. A user can Create, delete, like, comment Post. ",
 66 |       tags: ["Redis", "Authjs", "Typescript", "Nextjs"],
 67 |       link: "https://github.com/taqui-786/project-friendz",
 68 |     },
 69 |     {
 70 |       title: "ChatApp- Simple instagram clone",
 71 |       description:
 72 |         "ChatApp is similar to instagram, you can create, edit, delete, like,comment, post and  Follow, unfollow users",
 73 |       tags: ["Reactjs", "Javascript"],
 74 |       link: "https://github.com/taqui-786/chatapp-api",
 75 |     },
 76 |     {
 77 |       title: "Devletter - A Newsletter for devs",
 78 |       description:
 79 |         "Devletter ia a newsletter subscribing single page app made with Nextjs and Tailwindcss.",
 80 |       tags: ["Nextjs", "Tailwindcss"],
 81 |       link: "https://github.com/taqui-786/Devletter",
 82 |     },
 83 |     {
 84 |       title: "CrouMaker - A Crousal Maker App",
 85 |       description:
 86 |         "Crousal Maker is a tool with in-built crousals templates edit and download it in any format.",
 87 |       tags: ["Nextjs", "jsPDF", "html2canvas", "Shadcn Ui"],
 88 |       link: "https://github.com/taqui-786/crousal-maker",
 89 |     },
 90 |   ];
 91 | 
 92 |   return (
 93 |     // PROJECT PAGE
 94 |     <div className="h-full w-full relative flex flex-col items-start gap-5 overflow-hidden">
 95 |       <Badge variant="secondary" className="gap-1.5 py-1 ">
 96 |         <Layers className="h-4 w-4" />
 97 |         Projects
 98 |       </Badge>
 99 |       <div className="flex flex-col gap-3">
100 |         <Heading>My Projects</Heading>
101 |         <FramerWrapper y={0} x={200}>
102 |           <p className=" font-poppins text-lg w-full text-primary max-sm:text-base">
103 |             I love to Build Cool Projects. Here, you&#x27;ll find a curated
104 |             collection of my creative endeavors and technical projects. Each
105 |             piece represents a journey of innovation, problem-solving, and
106 |             continuous learning. Feel free to explore this showcase of my
107 |             passion and expertise in action.
108 |           </p>
109 |         </FramerWrapper>
110 |       </div>
111 | 
112 |       <div className=" w-full flex flex-row flex-wrap gap-3 max-lg:flex-col">
113 |         {Projects.map((val, indx) => {
114 |           return <ProjectCards key={indx} value={val} num={indx} />;
115 |         })}
116 |       </div>
117 |     </div>
118 |   );
119 | };
120 | 
121 | export default projectsPage;
122 | 


--------------------------------------------------------------------------------
/src/app/skills/page.tsx:
--------------------------------------------------------------------------------
  1 | import Heading from "@/components/Heading";
  2 | import SkillsFooter from "@/components/SkillsFotter";
  3 | import { Badge } from "@/components/ui/badge";
  4 | import { LightbulbIcon } from "lucide-react";
  5 | 
  6 | import FramerWrapper from "@/components/animation/FramerWrapper";
  7 | const skillPage = () => {
  8 |   const programmingLanguages = [
  9 |     {
 10 |       name: "HTML5",
 11 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg",
 12 |     },
 13 |     {
 14 |       name: "CSS3",
 15 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg",
 16 |     },
 17 |     {
 18 |       name: "JavaScript",
 19 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg",
 20 |     },
 21 |     {
 22 |       name: "TypeScript",
 23 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg",
 24 |     },
 25 |     {
 26 |       name: "C++",
 27 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/cplusplus/cplusplus-original.svg",
 28 |     },
 29 |     {
 30 |       name: "Python",
 31 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
 32 |     },
 33 |     {
 34 |       name: "Java",
 35 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
 36 |     },
 37 |   ];
 38 | 
 39 |   const frameworks = [
 40 |     {
 41 |       name: "React",
 42 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
 43 |     },
 44 |     {
 45 |       name: "Next.js",
 46 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg",
 47 |     },
 48 |     {
 49 |       name: "Vue.js",
 50 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
 51 |     },
 52 |     {
 53 |       name: "Svelte",
 54 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/svelte/svelte-original.svg",
 55 |     },
 56 |     {
 57 |       name: "Tailwind CSS",
 58 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-original.svg",
 59 |     },
 60 |     {
 61 |       name: "Bootstrap",
 62 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bootstrap/bootstrap-original.svg",
 63 |     },
 64 |     {
 65 |       name: "Material UI",
 66 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/materialui/materialui-original.svg",
 67 |     },
 68 |   ];
 69 | 
 70 |   const tools = [
 71 |     {
 72 |       name: "Git",
 73 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg",
 74 |     },
 75 |     {
 76 |       name: "GitHub",
 77 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg",
 78 |     },
 79 |     {
 80 |       name: "VS Code",
 81 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg",
 82 |     },
 83 |     {
 84 |       name: "Docker",
 85 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg",
 86 |     },
 87 |     {
 88 |       name: "Firebase",
 89 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg",
 90 |     },
 91 |     {
 92 |       name: "MongoDB",
 93 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
 94 |     },
 95 |     {
 96 |       name: "PostgreSQL",
 97 |       icon: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
 98 |     },
 99 |   ];
100 | 
101 |   return (
102 |     // SKILLS PAGE
103 |     <div className="h-full w-full relative flex flex-col items-start gap-5 overflow-hidden">
104 |       <Badge variant="secondary" className="gap-1.5 py-1 ">
105 |         <LightbulbIcon className="w-4 h-4" />
106 |         My Skills
107 |       </Badge>
108 |       <div className="flex flex-col gap-3">
109 |         <Heading>My Technical Experience/Skills.</Heading>
110 |         <FramerWrapper y={0} x={200}>
111 |           <p className="font-poppins text-xl w-full text-primary max-sm:text-lg">
112 |           As a frontend-focused full-stack developer, I specialize in building scalable and high-performance web applications using JavaScript, TypeScript, React, Next.js, and Node.js. With a strong foundation in HTML5, CSS3, and responsive design principles, I develop modern, user-centric interfaces that deliver seamless experiences across devices. My expertise extends to crafting efficient and maintainable code, leveraging best practices in component-based architecture and state management.
113 |           </p>
114 |         </FramerWrapper>
115 |         <FramerWrapper y={100} delay={0.3} className="block w-full">
116 |           <h1 className="gap-2 text-2xl font-poppins text-primary font-semibold flex text_underline relative max-sm:text-xl mb-4">
117 |             Programming Languages
118 |           </h1>
119 |           <div className="w-full grid grid-cols-7 max-lg:grid-cols-4 max-md:grid-cols-3 max-sm:grid-cols-2 gap-4">
120 |             <SkillsFooter items={programmingLanguages} />
121 |           </div>
122 |         </FramerWrapper>
123 |         <FramerWrapper className="block w-full" y={100} delay={0.32}>
124 |           <h1 className="gap-2 text-2xl font-poppins text-primary font-semibold flex text_underline relative max-sm:text-xl mb-4">
125 |             Framework/Libraries
126 |           </h1>
127 |           <div className="w-full grid grid-cols-7 max-lg:grid-cols-4 max-md:grid-cols-3 max-sm:grid-cols-2 gap-4">
128 |             <SkillsFooter items={frameworks} />
129 |           </div>
130 |         </FramerWrapper>
131 |         <FramerWrapper className="block w-full" y={100} delay={0.34}>
132 |           <h1 className="gap-2 text-2xl font-poppins text-primary font-semibold flex text_underline relative max-sm:text-xl mb-4">
133 |             Tools & Technologies
134 |           </h1>
135 |           <div className="w-full grid grid-cols-7 max-lg:grid-cols-4 max-md:grid-cols-3 max-sm:grid-cols-2 gap-4">
136 |             <SkillsFooter items={tools} />
137 |           </div>
138 |         </FramerWrapper>
139 |       </div>
140 |     </div>
141 |   );
142 | };
143 | 
144 | export default skillPage;
145 | 


--------------------------------------------------------------------------------
/src/components/animation/DockAnimation.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import {
  4 |   motion,
  5 |   MotionValue,
  6 |   useMotionValue,
  7 |   useSpring,
  8 |   useTransform,
  9 |   type SpringOptions,
 10 |   AnimatePresence,
 11 | } from 'framer-motion';
 12 | import {
 13 |   Children,
 14 |   cloneElement,
 15 |   createContext,
 16 |   useContext,
 17 |   useEffect,
 18 |   useMemo,
 19 |   useRef,
 20 |   useState,
 21 | } from 'react';
 22 | import { cn } from '@/lib/utils';
 23 | 
 24 | const DOCK_HEIGHT = 128;
 25 | const DEFAULT_MAGNIFICATION = 80;
 26 | const DEFAULT_DISTANCE = 150;
 27 | const DEFAULT_PANEL_HEIGHT = 64;
 28 | 
 29 | type DockProps = {
 30 |   children: React.ReactNode;
 31 |   className?: string;
 32 |   distance?: number;
 33 |   panelHeight?: number;
 34 |   magnification?: number;
 35 |   spring?: SpringOptions;
 36 | };
 37 | type DockItemProps = {
 38 |   className?: string;
 39 |   children: React.ReactNode;
 40 | };
 41 | type DockLabelProps = {
 42 |   className?: string;
 43 |   children: React.ReactNode;
 44 | };
 45 | type DockIconProps = {
 46 |   className?: string;
 47 |   children: React.ReactNode;
 48 | };
 49 | 
 50 | type DocContextType = {
 51 |   mouseX: MotionValue;
 52 |   spring: SpringOptions;
 53 |   magnification: number;
 54 |   distance: number;
 55 | };
 56 | type DockProviderProps = {
 57 |   children: React.ReactNode;
 58 |   value: DocContextType;
 59 | };
 60 | 
 61 | const DockContext = createContext<DocContextType | undefined>(undefined);
 62 | 
 63 | function DockProvider({ children, value }: DockProviderProps) {
 64 |   return <DockContext.Provider value={value}>{children}</DockContext.Provider>;
 65 | }
 66 | 
 67 | function useDock() {
 68 |   const context = useContext(DockContext);
 69 |   if (!context) {
 70 |     throw new Error('useDock must be used within an DockProvider');
 71 |   }
 72 |   return context;
 73 | }
 74 | 
 75 | function Dock({
 76 |   children,
 77 |   className,
 78 |   spring = { mass: 0.1, stiffness: 150, damping: 12 },
 79 |   magnification = DEFAULT_MAGNIFICATION,
 80 |   distance = DEFAULT_DISTANCE,
 81 |   panelHeight = DEFAULT_PANEL_HEIGHT,
 82 | }: DockProps) {
 83 |   const mouseX = useMotionValue(Infinity);
 84 |   const isHovered = useMotionValue(0);
 85 | 
 86 |   const maxHeight = useMemo(() => {
 87 |     return Math.max(DOCK_HEIGHT, magnification + magnification / 2 + 4);
 88 |   }, [magnification]);
 89 | 
 90 |   const heightRow = useTransform(isHovered, [0, 1], [panelHeight, maxHeight]);
 91 |   const height = useSpring(heightRow, spring);
 92 | 
 93 |   return (
 94 |     <motion.div
 95 |       style={{
 96 |         height: height,
 97 |         scrollbarWidth: 'none',
 98 |       }}
 99 |       className='mx-0 sm:mx-2 flex max-w-full items-end overflow-x-auto'
100 |     >
101 |       <motion.div
102 |         onMouseMove={({ pageX }) => {
103 |           isHovered.set(1);
104 |           mouseX.set(pageX);
105 |         }}
106 |         onMouseLeave={() => {
107 |           isHovered.set(0);
108 |           mouseX.set(Infinity);
109 |         }}
110 |         className={cn(
111 |           'mx-auto flex w-fit gap-1.5 sm:gap-4 rounded-2xl bg-gray-50 px-4 dark:bg-neutral-900',
112 |           className
113 |         )}
114 |         style={{ height: panelHeight }}
115 |         role='toolbar'
116 |         aria-label='Application dock'
117 |       >
118 |         <DockProvider value={{ mouseX, spring, distance, magnification }}>
119 |           {children}
120 |         </DockProvider>
121 |       </motion.div>
122 |     </motion.div>
123 |   );
124 | }
125 | 
126 | function DockItem({ children, className }: DockItemProps) {
127 |   const ref = useRef<HTMLDivElement>(null);
128 | 
129 |   const { distance, magnification, mouseX, spring } = useDock();
130 | 
131 |   const isHovered = useMotionValue(0);
132 | 
133 |   const mouseDistance = useTransform(mouseX, (val) => {
134 |     const domRect = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
135 |     return val - domRect.x - domRect.width / 2;
136 |   });
137 | 
138 |   const widthTransform = useTransform(
139 |     mouseDistance,
140 |     [-distance, 0, distance],
141 |     [40, magnification, 40]
142 |   );
143 | 
144 |   const width = useSpring(widthTransform, spring);
145 | 
146 |   return (
147 |     <motion.div
148 |       ref={ref}
149 |       style={{ width }}
150 |       onHoverStart={() => isHovered.set(1)}
151 |       onHoverEnd={() => isHovered.set(0)}
152 |       onFocus={() => isHovered.set(1)}
153 |       onBlur={() => isHovered.set(0)}
154 |       className={cn(
155 |         'relative inline-flex items-center justify-center',
156 |         className
157 |       )}
158 |       tabIndex={0}
159 |       role='button'
160 |       aria-haspopup='true'
161 |     >
162 |       {Children.map(children, (child) =>
163 |         cloneElement(child as React.ReactElement, { width, isHovered })
164 |       )}
165 |     </motion.div>
166 |   );
167 | }
168 | 
169 | function DockLabel({ children, className, ...rest }: DockLabelProps) {
170 |   const restProps = rest as Record<string, unknown>;
171 |   const isHovered = restProps['isHovered'] as MotionValue<number>;
172 |   const [isVisible, setIsVisible] = useState(false);
173 | 
174 |   useEffect(() => {
175 |     const unsubscribe = isHovered.on('change', (latest) => {
176 |       setIsVisible(latest === 1);
177 |     });
178 | 
179 |     return () => unsubscribe();
180 |   }, [isHovered]);
181 | 
182 |   return (
183 |     <AnimatePresence>
184 |       {isVisible && (
185 |         <motion.div
186 |           initial={{ opacity: 0, y: 0 }}
187 |           animate={{ opacity: 1, y: -10 }}
188 |           exit={{ opacity: 0, y: 0 }}
189 |           transition={{ duration: 0.2 }}
190 |           className={cn(
191 |             'absolute -top-6 left-1/2 w-fit whitespace-pre rounded-md border border-gray-200 bg-gray-100 px-2 py-0.5 text-xs text-neutral-700 dark:border-neutral-900 dark:bg-neutral-800 dark:text-white',
192 |             className
193 |           )}
194 |           role='tooltip'
195 |           style={{ x: '-50%' }}
196 |         >
197 |           {children}
198 |         </motion.div>
199 |       )}
200 |     </AnimatePresence>
201 |   );
202 | }
203 | 
204 | function DockIcon({ children, className, ...rest }: DockIconProps) {
205 |   const restProps = rest as Record<string, unknown>;
206 |   const width = restProps['width'] as MotionValue<number>;
207 | 
208 |   const widthTransform = useTransform(width, (val) => val / 2);
209 | 
210 |   return (
211 |     <motion.div
212 |       style={{ width: widthTransform }}
213 |       className={cn('flex items-center justify-center ', className)}
214 |     >
215 |       {children}
216 |     </motion.div>
217 |   );
218 | }
219 | 
220 | export { Dock, DockIcon, DockItem, DockLabel };
221 | 


--------------------------------------------------------------------------------