├── .eslintrc.json
├── src
    ├── app
    │   ├── globals.css
    │   ├── favicon.ico
    │   ├── fonts
    │   │   ├── GeistVF.woff
    │   │   └── GeistMonoVF.woff
    │   ├── about
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   ├── project
    │   │   └── page.tsx
    │   ├── page.tsx
    │   └── contact
    │   │   └── page.tsx
    └── components
    │   ├── Button.tsx
    │   ├── Card.tsx
    │   ├── Section.tsx
    │   ├── Footer.tsx
    │   └── Navbar.tsx
├── postcss.config.mjs
├── next.config.mjs
├── tailwind.config.ts
├── .gitignore
├── tsconfig.json
├── package.json
└── README.md


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


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


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


--------------------------------------------------------------------------------
/src/app/fonts/GeistVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/umarprogrammer19/NextJs-Portfolio/HEAD/src/app/fonts/GeistVF.woff


--------------------------------------------------------------------------------
/src/app/fonts/GeistMonoVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/umarprogrammer19/NextJs-Portfolio/HEAD/src/app/fonts/GeistMonoVF.woff


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |     images: {
4 |         domains: ['i.pinimg.com','m.media-amazon.com','cdn.prod.website-files.com','assets.weforum.org','media.licdn.com'],
5 |     },
6 | };
7 | 
8 | export default nextConfig;
9 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 4 |   content: [
 5 |     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
 6 |     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       colors: {
12 |         background: "var(--background)",
13 |         foreground: "var(--foreground)",
14 |       },
15 |     },
16 |   },
17 |   plugins: [],
18 | };
19 | export default config;
20 | 


--------------------------------------------------------------------------------
/.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 | 


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-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 |     "framer-motion": "^11.5.4",
13 |     "next": "14.2.11",
14 |     "react": "^18",
15 |     "react-dom": "^18",
16 |     "react-icons": "^5.3.0"
17 |   },
18 |   "devDependencies": {
19 |     "@types/node": "^20",
20 |     "@types/react": "^18",
21 |     "@types/react-dom": "^18",
22 |     "eslint": "^8",
23 |     "eslint-config-next": "14.2.11",
24 |     "postcss": "^8",
25 |     "tailwindcss": "^3.4.1",
26 |     "typescript": "^5"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/app/about/page.tsx:
--------------------------------------------------------------------------------
 1 | import Section from '@/components/Section'
 2 | import React from 'react'
 3 | 
 4 | const page = () => {
 5 |   return (
 6 |     <>
 7 |     <Section
 8 |         imageSrc="https://m.media-amazon.com/images/I/61ZfnhNeETL._AC_UF1000,1000_QL80_.jpg"
 9 |         imageAlt="About Me Image"
10 |         heading="About Me"
11 |         text="I am a dedicated and detail-oriented developer with a passion for creating beautiful, user-friendly digital experiences. With years of experience in web development, I have worked on a range of projects, from simple websites to complex applications."
12 |         marginTop={true}
13 |         isCircular={true} // Circular image
14 |       />
15 |     </>
16 |   )
17 | }
18 | 
19 | export default page


--------------------------------------------------------------------------------
/src/components/Button.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | interface ButtonProps {
 4 |     text: string;
 5 |     onClick?: () => void; 
 6 |     href?: string;
 7 | }
 8 | 
 9 | const Button: React.FC<ButtonProps> = ({ text, onClick, href }) => {
10 |     return href ? (
11 |         <a
12 |             href={href}
13 |             className="bg-blue-600 text-white px-5 py-2 rounded-md font-medium hover:bg-blue-700" target="_blank"
14 |         >
15 |             {text}
16 |         </a>
17 |     ) : (
18 |         <button
19 |             onClick={onClick}
20 |             className="bg-blue-600 text-white px-5 py-2 rounded-md font-medium hover:bg-blue-700"
21 |         >
22 |             {text}
23 |         </button>
24 |     );
25 | };
26 | 
27 | export default Button;
28 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import localFont from "next/font/local";
 3 | import "./globals.css";
 4 | import Navbar from "@/components/Navbar";
 5 | import Footer from "@/components/Footer";
 6 | 
 7 | const geistSans = localFont({
 8 |   src: "./fonts/GeistVF.woff",
 9 |   variable: "--font-geist-sans",
10 |   weight: "100 900",
11 | });
12 | const geistMono = localFont({
13 |   src: "./fonts/GeistMonoVF.woff",
14 |   variable: "--font-geist-mono",
15 |   weight: "100 900",
16 | });
17 | 
18 | export const metadata: Metadata = {
19 |   title: "My Portfolio",
20 |   description: "Generated by create next app",
21 |   icons: "https://cdn-icons-png.flaticon.com/512/2720/2720550.png",
22 | };
23 | 
24 | export default function RootLayout({
25 |   children,
26 | }: Readonly<{
27 |   children: React.ReactNode;
28 | }>) {
29 |   return (
30 |     <html lang="en">
31 |       <body
32 |         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
33 |       >
34 |         <Navbar />
35 |         {children}
36 |         <Footer/>
37 |       </body>
38 |     </html>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/Card.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Image from 'next/image';
 3 | import Button from './Button';
 4 | 
 5 | interface ProjectCardProps {
 6 |   imageSrc: string;
 7 |   imageAlt: string;
 8 |   title: string;
 9 |   description: string;
10 |   buttonText: string;
11 |   buttonLink?: string;
12 |   buttonOnClick?: () => void;
13 | }
14 | 
15 | const ProjectCard: React.FC<ProjectCardProps> = ({
16 |   imageSrc,
17 |   imageAlt,
18 |   title,
19 |   description,
20 |   buttonText,
21 |   buttonLink,
22 |   buttonOnClick
23 | }) => {
24 |   return (
25 |     <>
26 |       <div className="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out overflow-hidden max-w-sm mx-auto">
27 |         <div className="relative h-40">
28 |           <Image
29 |             src={imageSrc}
30 |             alt={imageAlt}
31 |             className="object-cover w-full h-full"
32 |             layout="fill"
33 |           />
34 |         </div>
35 |         <div className="p-4">
36 |           <h3 className="text-xl font-bold text-gray-800 mb-2">{title}</h3>
37 |           <p className="text-gray-600 mb-4">{description}</p>
38 |           {buttonText && (
39 |             <div className="my-6">
40 |               <Button text={buttonText} href={buttonLink} onClick={buttonOnClick} />
41 |             </div>
42 |           )}
43 |         </div>
44 |       </div>
45 |     </>
46 |   );
47 | };
48 | 
49 | export default ProjectCard;
50 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
37 | 


--------------------------------------------------------------------------------
/src/components/Section.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Image from 'next/image';
 3 | import Link from 'next/link';
 4 | 
 5 | interface SectionProps {
 6 |     imageSrc: string;
 7 |     imageAlt: string;
 8 |     heading: string;
 9 |     text: string;
10 |     buttonText?: string;
11 |     buttonLink?: string;
12 |     reverse?: boolean;
13 |     marginTop?: boolean;
14 |     isCircular?: boolean;
15 | }
16 | 
17 | const Section: React.FC<SectionProps> = ({
18 |     imageSrc,
19 |     imageAlt,
20 |     heading,
21 |     text,
22 |     marginTop,
23 |     buttonText,
24 |     buttonLink,
25 |     reverse = false,
26 |     isCircular = false,
27 | }) => {
28 |     return (
29 |         <section className="py-20 bg-gray-100">
30 |             <div className={`container mx-auto px-6 flex flex-col ${reverse ? 'md:flex-row-reverse' : 'md:flex-row'} items-center justify-between ${marginTop && 'mt-24'} max-w-screen-xl`}>
31 |                 {/* Image */}
32 |                 <div className={`md:w-1/2 flex justify-center mb-8 md:mb-0 ${isCircular ? 'w-64 h-64' : ''}`}>
33 |                     <div className={`relative ${isCircular ? 'rounded-full overflow-hidden' : ''}`}>
34 |                         <Image
35 |                             src={imageSrc}
36 |                             alt={imageAlt}
37 |                             className="object-cover"
38 |                             width={isCircular ? 256 : 600}
39 |                             height={isCircular ? 256 : 400}
40 |                         />
41 |                     </div>
42 |                 </div>
43 | 
44 |                 <div className="md:w-1/2 text-center md:text-left">
45 |                     <h2 className="text-5xl font-bold text-gray-800 mb-4">{heading}</h2>
46 |                     <p className="text-xl text-gray-600 mb-6">{text}</p>
47 |                     {buttonText && buttonLink && (
48 |                         <Link href={buttonLink} className="bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700">
49 |                             {buttonText}
50 |                         </Link>
51 |                     )}
52 |                 </div>
53 |             </div>
54 |         </section>
55 |     );
56 | };
57 | 
58 | export default Section;
59 | 


--------------------------------------------------------------------------------
/src/app/project/page.tsx:
--------------------------------------------------------------------------------
 1 | import ProjectCard from '@/components/Card';
 2 | import React from 'react';
 3 | 
 4 | const projects = [
 5 |     {
 6 |         imageSrc: 'https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/634d61ab95ff7003477f6c1f_d28Qv2T_gk1iZiHd2jgwYTCtdKB0cEX-hQmhwLIbzglorQzErM9tLeq0Sw0jp4j37mXfa6YP9zQA2ZcaW1D5DdjqOBmvB8kH3yd-F9dcEpxvDwlSxao1Qlgn24KC_GDcRdsd7TJ0zJjTTVURHJX3A-hrjWKp0JpuAPL28G6nrXA55Sad6Ujn-A79sA.jpeg',
 7 |         imageAlt: 'Project 1 Image',
 8 |         title: 'Apple Website',
 9 |         description: 'I Developed Responsive Apple Website For Testing My Basic Skills.',
10 |         buttonText: 'View Project',
11 |         buttonLink: 'https://up-iclone-home.netlify.app/',
12 |     },
13 |     {
14 |         imageSrc: 'https://assets.weforum.org/article/image/f1rGh3mhhk-oj1fj1qjwJ56U37_dJ-MGTGGFHzBp25Q.jpg',
15 |         imageAlt: 'Project 2 Image',
16 |         title: 'Responsive Crypto',
17 |         description: 'Programmed Normal Crypto Website Used Media Queries',
18 |         buttonText: 'View Project',
19 |         buttonLink: 'https://umarprogrammer19-crypto.netlify.app/',
20 |     },
21 |     {
22 |         imageSrc: 'https://media.licdn.com/dms/image/D4D12AQFq9CAlVcXr3g/article-cover_image-shrink_720_1280/0/1673980988900?e=2147483647&v=beta&t=g_VjCi_pbE-J4RQRh6xAUZsWh3HQ6jVpIJaw4tEsFaE',
23 |         imageAlt: 'Project 3 Image',
24 |         title: 'Currency Converter',
25 |         description: 'Currency Convertor With Life Time Rates Developed Using Javascript.',
26 |         buttonText: 'View Project',
27 |         buttonLink: 'https://up-currency-convertor.netlify.app/',
28 |     },
29 | ];
30 | 
31 | 
32 | const page = () => {
33 |     return (
34 |         <section className="py-20 bg-gray-100">
35 |             <div className="container mx-auto px-4">
36 |                 <h2 className="text-4xl font-bold text-gray-800 mb-8 text-center">Projects</h2>
37 |                 <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
38 |                     {projects.map((project, index) => (
39 |                         <ProjectCard
40 |                             key={index}
41 |                             imageSrc={project.imageSrc}
42 |                             imageAlt={project.imageAlt}
43 |                             title={project.title}
44 |                             description={project.description}
45 |                             buttonText={project.buttonText}
46 |                             buttonLink={project.buttonLink}
47 |                         />
48 |                     ))}
49 |                 </div>
50 |             </div>
51 |         </section>
52 |     )
53 | }
54 | 
55 | export default page


--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | import React from 'react';
 3 | import { FaFacebookF, FaTwitter, FaInstagram, FaLinkedinIn } from 'react-icons/fa';
 4 | 
 5 | const Footer: React.FC = () => {
 6 |   return (
 7 |     <footer className="bg-gray-900 text-white py-12">
 8 |       <div className="container mx-auto px-6 lg:px-16">
 9 |         <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
10 |           
11 |           {/* Contact Information */}
12 |           <div>
13 |             <h3 className="text-xl font-semibold mb-4">Contact Us</h3>
14 |             <p className="mb-2">Orangi Town, Karachi</p>
15 |             <p className="mb-2">Pakistan</p>
16 |             <p className="mb-2">+92 317 2472531</p>
17 |             <p>Email: <a href="mailto:umarofficial0121@gmail.com" className="text-blue-400 hover:underline">umarofficial0121@gmail.com</a></p>
18 |           </div>
19 | 
20 |           {/* Quick Links */}
21 |           <div>
22 |             <h3 className="text-xl font-semibold mb-4">Quick Links</h3>
23 |             <ul className="space-y-2">
24 |               <li><Link href="/" className="hover:text-blue-400">Home</Link></li>
25 |               <li><Link href="/about" className="hover:text-blue-400">About Us</Link></li>
26 |               <li><Link href="/project" className="hover:text-blue-400">Projects</Link></li>
27 |               <li><Link href="/contact" className="hover:text-blue-400">Contact</Link></li>
28 |             </ul>
29 |           </div>
30 | 
31 |           {/* Social Media */}
32 |           <div>
33 |             <h3 className="text-xl font-semibold mb-4">Follow Us</h3>
34 |             <div className="flex space-x-4">
35 |               <a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
36 |                 <FaFacebookF className="text-white text-2xl hover:text-blue-600 transition-colors duration-300" />
37 |               </a>
38 |               <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
39 |                 <FaTwitter className="text-white text-2xl hover:text-blue-400 transition-colors duration-300" />
40 |               </a>
41 |               <a href="https://instagram.com" target="_blank" rel="noopener noreferrer">
42 |                 <FaInstagram className="text-white text-2xl hover:text-pink-600 transition-colors duration-300" />
43 |               </a>
44 |               <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
45 |                 <FaLinkedinIn className="text-white text-2xl hover:text-blue-700 transition-colors duration-300" />
46 |               </a>
47 |             </div>
48 |           </div>
49 |         </div>
50 | 
51 |         <div className="text-center mt-10">
52 |           <p className="text-sm text-gray-400">&copy; {new Date().getFullYear()} Umar Farooq. All rights reserved.</p>
53 |         </div>
54 |       </div>
55 |     </footer>
56 |   );
57 | };
58 | 
59 | export default Footer;
60 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import ProjectCard from '@/components/Card';
 2 | import Section from '@/components/Section';
 3 | import Link from 'next/link';
 4 | 
 5 | const projects = [
 6 |   {
 7 |     imageSrc: 'https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/634d61ab95ff7003477f6c1f_d28Qv2T_gk1iZiHd2jgwYTCtdKB0cEX-hQmhwLIbzglorQzErM9tLeq0Sw0jp4j37mXfa6YP9zQA2ZcaW1D5DdjqOBmvB8kH3yd-F9dcEpxvDwlSxao1Qlgn24KC_GDcRdsd7TJ0zJjTTVURHJX3A-hrjWKp0JpuAPL28G6nrXA55Sad6Ujn-A79sA.jpeg',
 8 |     imageAlt: 'Project 1 Image',
 9 |     title: 'Apple Website',
10 |     description: 'I Developed Responsive Apple Website For Testing My Basic Skills.',
11 |     buttonText: 'View Project',
12 |     buttonLink: 'https://up-iclone-home.netlify.app/',
13 |   },
14 |   {
15 |     imageSrc: 'https://assets.weforum.org/article/image/f1rGh3mhhk-oj1fj1qjwJ56U37_dJ-MGTGGFHzBp25Q.jpg',
16 |     imageAlt: 'Project 2 Image',
17 |     title: 'Responsive Crypto',
18 |     description: 'Programmed Normal Crypto Website Used Media Queries',
19 |     buttonText: 'View Project',
20 |     buttonLink: 'https://umarprogrammer19-crypto.netlify.app/',
21 |   },
22 |   {
23 |     imageSrc: 'https://media.licdn.com/dms/image/D4D12AQFq9CAlVcXr3g/article-cover_image-shrink_720_1280/0/1673980988900?e=2147483647&v=beta&t=g_VjCi_pbE-J4RQRh6xAUZsWh3HQ6jVpIJaw4tEsFaE',
24 |     imageAlt: 'Project 3 Image',
25 |     title: 'Currency Converter',
26 |     description: 'Currency Convertor With Life Time Rates Developed Using Javascript.',
27 |     buttonText: 'View Project',
28 |     buttonLink: 'https://up-currency-convertor.netlify.app/',
29 |   },
30 | ];
31 | 
32 | export default function Home() {
33 |   return (
34 |     <div>
35 | 
36 |       {/* Hero Section */}
37 |       <Section
38 |         imageSrc="https://i.pinimg.com/736x/2a/28/92/2a2892f2f154e1078923681436f30c4e.jpg"
39 |         imageAlt="Hero Image"
40 |         heading="Hi, I'm Umar Farooq"
41 |         text="I'm a passionate developer who loves crafting exceptional digital experiences. I build websites and applications that are both functional and aesthetically pleasing."
42 |         buttonText="View My Work"
43 |         buttonLink="/project"
44 |         marginTop={true}
45 |         reverse={true}
46 |         isCircular={true}
47 |       />
48 | 
49 |       {/* About Section with Circular Image */}
50 |       <Section
51 |         imageSrc="https://m.media-amazon.com/images/I/61ZfnhNeETL._AC_UF1000,1000_QL80_.jpg"
52 |         imageAlt="About Me Image"
53 |         heading="About Me"
54 |         text="I am a dedicated and detail-oriented developer with a passion for creating beautiful, user-friendly digital experiences. With years of experience in web development, I have worked on a range of projects, from simple websites to complex applications."
55 |         isCircular={true} // Circular image
56 |       />
57 | 
58 |       {/* Projects Section */}
59 |       <section className="py-20 bg-gray-100">
60 |         <div className="container mx-auto px-6 lg:px-16">
61 |           <h2 className="text-4xl font-bold text-gray-800 mb-12 text-center">Projects</h2>
62 | 
63 |           <div className="grid gap-8 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
64 |             {projects.map((project, index) => (
65 |               <ProjectCard
66 |                 key={index}
67 |                 imageSrc={project.imageSrc}
68 |                 imageAlt={project.imageAlt}
69 |                 title={project.title}
70 |                 description={project.description}
71 |                 buttonText={project.buttonText}
72 |                 buttonLink={project.buttonLink}
73 |               />
74 |             ))}
75 |           </div>
76 |         </div>
77 |       </section>
78 | 
79 | 
80 | 
81 |       {/* Contact Section */}
82 |       <section className="bg-blue-600 text-white py-20">
83 |         <div className="container mx-auto px-4 text-center">
84 |           <h2 className="text-4xl font-bold mb-6">Get in Touch</h2>
85 |           <p className="text-xl mb-8">Interested in working with us? Contact us today!</p>
86 |           <Link href="/contact" className="bg-white text-blue-600 px-6 py-3 rounded-md font-medium hover:bg-gray-100">
87 |             Contact Us
88 |           </Link>
89 |         </div>
90 |       </section>
91 |     </div>
92 |   );
93 | }
94 | 


--------------------------------------------------------------------------------
/src/app/contact/page.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { FaPhone, FaEnvelope, FaMapMarkerAlt } from 'react-icons/fa';
 3 | 
 4 | const Contact: React.FC = () => {
 5 |     return (
 6 |         <section className="py-20 bg-gray-100">
 7 |             <div className="container mx-auto px-4 lg:px-12">
 8 |                 <h2 className="text-4xl font-bold text-gray-800 mb-12 text-center">Contact Us</h2>
 9 |                 <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
10 |                     
11 |                     {/* Contact Details */}
12 |                     <div className="bg-white p-8 rounded-lg shadow-md">
13 |                         <h3 className="text-2xl font-bold text-gray-800 mb-6">Get in Touch</h3>
14 |                         <div className="flex items-start mb-6">
15 |                             <FaPhone className="text-blue-600 mr-4 text-2xl" />
16 |                             <div>
17 |                                 <p className="text-gray-700 font-semibold">Phone:</p>
18 |                                 <p className="text-gray-600">+92 317 2472531</p>
19 |                             </div>
20 |                         </div>
21 |                         <div className="flex items-start mb-6">
22 |                             <FaEnvelope className="text-blue-600 mr-4 text-2xl" />
23 |                             <div>
24 |                                 <p className="text-gray-700 font-semibold">Email:</p>
25 |                                 <p className="text-gray-600">umarofficial0121@gmail.com</p>
26 |                             </div>
27 |                         </div>
28 |                         <div className="flex items-start">
29 |                             <FaMapMarkerAlt className="text-blue-600 mr-4 text-2xl" />
30 |                             <div>
31 |                                 <p className="text-gray-700 font-semibold">Address:</p>
32 |                                 <p className="text-gray-600">Pakistan, Karachi</p>
33 |                             </div>
34 |                         </div>
35 |                     </div>
36 | 
37 |                     {/* Contact Form */}
38 |                     <div className="bg-white p-8 rounded-lg shadow-md">
39 |                         <h3 className="text-2xl font-bold text-gray-800 mb-6">Send Us a Message</h3>
40 |                         <form>
41 |                             <div className="mb-6">
42 |                                 <label htmlFor="name" className="block text-gray-700 text-sm font-bold mb-2">
43 |                                     Name
44 |                                 </label>
45 |                                 <input
46 |                                     type="text"
47 |                                     id="name"
48 |                                     name="name"
49 |                                     className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-600 focus:outline-none"
50 |                                     placeholder="Your Name"
51 |                                 />
52 |                             </div>
53 |                             <div className="mb-6">
54 |                                 <label htmlFor="email" className="block text-gray-700 text-sm font-bold mb-2">
55 |                                     Email
56 |                                 </label>
57 |                                 <input
58 |                                     type="email"
59 |                                     id="email"
60 |                                     name="email"
61 |                                     className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-600 focus:outline-none"
62 |                                     placeholder="Your Email"
63 |                                 />
64 |                             </div>
65 |                             <div className="mb-6">
66 |                                 <label htmlFor="message" className="block text-gray-700 text-sm font-bold mb-2">
67 |                                     Message
68 |                                 </label>
69 |                                 <textarea
70 |                                     id="message"
71 |                                     name="message"
72 |                                     rows={4}
73 |                                     className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-600 focus:outline-none"
74 |                                     placeholder="Your Message"
75 |                                 ></textarea>
76 |                             </div>
77 |                             <button
78 |                                 type="submit"
79 |                                 className="w-full bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700 transition-colors duration-300"
80 |                             >
81 |                                 Send Message
82 |                             </button>
83 |                         </form>
84 |                     </div>
85 |                 </div>
86 |             </div>
87 |         </section>
88 |     );
89 | };
90 | 
91 | export default Contact;
92 | 


--------------------------------------------------------------------------------
/src/components/Navbar.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState } from 'react';
  4 | import Link from 'next/link';
  5 | 
  6 | const Navbar = () => {
  7 |     const [isOpen, setIsOpen] = useState(false);
  8 | 
  9 |     const toggleMenu = () => {
 10 |         setIsOpen(!isOpen);
 11 |     };
 12 | 
 13 |     const closeMenu = () => {
 14 |         setIsOpen(false);
 15 |     };
 16 | 
 17 |     return (
 18 |         <nav className="bg-white shadow-md fixed w-full z-10">
 19 |             <div className="container mx-auto px-4 sm:px-6 lg:px-8">
 20 |                 <div className="flex justify-between items-center h-16">
 21 | 
 22 |                     {/* Logo */}
 23 |                     <div className="flex-shrink-0">
 24 |                         <Link href="/" className="text-2xl font-bold text-blue-600">
 25 |                             UF-Coder
 26 |                         </Link>
 27 |                     </div>
 28 | 
 29 |                     {/* Desktop Menu */}
 30 |                     <div className="hidden md:flex space-x-6">
 31 |                         <Link href="/" className="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">
 32 |                             Home
 33 |                         </Link>
 34 |                         <Link href="/about" className="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">
 35 |                             About
 36 |                         </Link>
 37 |                         <Link href="/project" className="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">
 38 |                             Project
 39 |                         </Link>
 40 |                         <Link href="/contact" className="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">
 41 |                             Contact
 42 |                         </Link>
 43 |                     </div>
 44 | 
 45 |                     {/* Mobile Menu Button */}
 46 |                     <div className="md:hidden flex items-center">
 47 |                         <button
 48 |                             onClick={toggleMenu}
 49 |                             type="button"
 50 |                             className="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
 51 |                             aria-controls="mobile-menu"
 52 |                             aria-expanded={isOpen}
 53 |                         >
 54 |                             <span className="sr-only">Open main menu</span>
 55 |                             {isOpen ? (
 56 |                                 <svg
 57 |                                     className="block h-6 w-6"
 58 |                                     xmlns="http://www.w3.org/2000/svg"
 59 |                                     fill="none"
 60 |                                     viewBox="0 0 24 24"
 61 |                                     stroke="currentColor"
 62 |                                     aria-hidden="true"
 63 |                                 >
 64 |                                     <path
 65 |                                         strokeLinecap="round"
 66 |                                         strokeLinejoin="round"
 67 |                                         strokeWidth={2}
 68 |                                         d="M6 18L18 6M6 6l12 12"
 69 |                                     />
 70 |                                 </svg>
 71 |                             ) : (
 72 |                                 <svg
 73 |                                     className="block h-6 w-6"
 74 |                                     xmlns="http://www.w3.org/2000/svg"
 75 |                                     fill="none"
 76 |                                     viewBox="0 0 24 24"
 77 |                                     stroke="currentColor"
 78 |                                     aria-hidden="true"
 79 |                                 >
 80 |                                     <path
 81 |                                         strokeLinecap="round"
 82 |                                         strokeLinejoin="round"
 83 |                                         strokeWidth={2}
 84 |                                         d="M4 6h16M4 12h16m-7 6h7"
 85 |                                     />
 86 |                                 </svg>
 87 |                             )}
 88 |                         </button>
 89 |                     </div>
 90 |                 </div>
 91 |             </div>
 92 | 
 93 |             {/* Mobile Menu */}
 94 |             <div className={`${isOpen ? 'block' : 'hidden'} md:hidden`} id="mobile-menu">
 95 |                 <div className="px-4 pt-4 pb-4 space-y-1 sm:px-3">
 96 |                     <Link href="/" onClick={closeMenu} className="text-gray-700 hover:bg-gray-100 hover:text-blue-600 block px-3 py-2 rounded-md text-lg font-medium">
 97 |                         Home
 98 |                     </Link>
 99 |                     <Link href="/about" onClick={closeMenu} className="text-gray-700 hover:bg-gray-100 hover:text-blue-600 block px-3 py-2 rounded-md text-lg font-medium">
100 |                         About
101 |                     </Link>
102 |                     <Link href="/project" onClick={closeMenu} className="text-gray-700 hover:bg-gray-100 hover:text-blue-600 block px-3 py-2 rounded-md text-lg font-medium">
103 |                         Project
104 |                     </Link>
105 |                     <Link href="/contact" onClick={closeMenu} className="text-gray-700 hover:bg-gray-100 hover:text-blue-600 block px-3 py-2 rounded-md text-lg font-medium">
106 |                         Contact
107 |                     </Link>
108 |                 </div>
109 |             </div>
110 |         </nav>
111 |     );
112 | };
113 | 
114 | export default Navbar;
115 | 


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