├── 01-Countdown-Timer ├── .eslintrc.json ├── app │ ├── globals.css │ ├── favicon.ico │ ├── page.tsx │ └── layout.tsx ├── next.config.mjs ├── postcss.config.mjs ├── lib │ └── utils.ts ├── components.json ├── .gitignore ├── public │ ├── vercel.svg │ └── next.svg ├── tsconfig.json ├── package.json ├── components │ ├── ui │ │ ├── input.tsx │ │ └── button.tsx │ └── Countdown.tsx ├── README.md └── tailwind.config.ts ├── 00-My-Portfolio ├── .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 ├── 02-E-Commerce ├── .eslintrc.json ├── src │ ├── app │ │ ├── globals.css │ │ ├── favicon.ico │ │ ├── about │ │ │ └── page.tsx │ │ ├── fonts │ │ │ ├── GeistVF.woff │ │ │ └── GeistMonoVF.woff │ │ ├── contact │ │ │ └── page.tsx │ │ ├── page.tsx │ │ ├── layout.tsx │ │ ├── products │ │ │ ├── page.tsx │ │ │ └── [id] │ │ │ │ └── page.tsx │ │ └── cart │ │ │ └── page.tsx │ ├── images │ │ ├── T1.webp │ │ ├── T2.jpg │ │ ├── T3.jpg │ │ └── About.png │ └── components │ │ ├── NewsLetter.tsx │ │ ├── Hero.tsx │ │ ├── Testimonials.tsx │ │ ├── AboutUs.tsx │ │ ├── SuccessModal.tsx │ │ ├── Modal.tsx │ │ ├── Navbar.tsx │ │ ├── ContactUs.tsx │ │ └── Footer.tsx ├── postcss.config.mjs ├── next.config.mjs ├── tailwind.config.ts ├── .gitignore ├── package.json ├── tsconfig.json └── README.md ├── 03-Meme-Maker ├── .eslintrc.json ├── src │ └── app │ │ ├── globals.css │ │ ├── favicon.ico │ │ ├── fonts │ │ ├── GeistVF.woff │ │ └── GeistMonoVF.woff │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── creatememe │ │ └── page.tsx ├── postcss.config.mjs ├── next.config.mjs ├── tailwind.config.ts ├── .gitignore ├── tsconfig.json ├── package.json └── README.md ├── 06-dynamic-blog ├── .eslintrc.json ├── src │ ├── app │ │ ├── globals.css │ │ ├── favicon.ico │ │ ├── fonts │ │ │ ├── GeistVF.woff │ │ │ └── GeistMonoVF.woff │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── [id] │ │ │ └── page.tsx │ └── blogs │ │ └── blogs.ts ├── next.config.mjs ├── postcss.config.mjs ├── tailwind.config.ts ├── .gitignore ├── package.json ├── tsconfig.json └── README.md ├── 04-Weather-Widget ├── .eslintrc.json ├── next.config.mjs ├── src │ ├── app │ │ ├── favicon.ico │ │ ├── fonts │ │ │ ├── GeistVF.woff │ │ │ └── GeistMonoVF.woff │ │ ├── page.tsx │ │ ├── layout.tsx │ │ └── globals.css │ ├── lib │ │ └── utils.ts │ └── components │ │ ├── loadingSpinner.tsx │ │ ├── ui │ │ ├── input.tsx │ │ ├── button.tsx │ │ └── card.tsx │ │ └── weather-widget.tsx ├── postcss.config.mjs ├── components.json ├── .gitignore ├── tsconfig.json ├── package.json ├── README.md └── tailwind.config.ts └── 05-Governor-Site ├── public ├── logo.png ├── about1.jpg ├── about2.jpg ├── about3.jpg ├── course1.jpg ├── course2.jpg ├── course3.jpg ├── course4.jpg ├── course5.jpg ├── course6.jpg ├── course7.jpg ├── course8.jpg ├── tiktok.png ├── twitter.png ├── youtube.png ├── course9.jpeg ├── download.jpeg ├── facebook.png ├── governor.png ├── instagram.png ├── slideShow1.jpg ├── slideShow2.jpg ├── slideShow3.jpg ├── slideShow4.jpg ├── slideShow5.jpg ├── slideShow6.jpg ├── slideShow7.jpg └── slideShow8.jpg ├── src ├── app │ ├── favicon.ico │ ├── fonts │ │ ├── GeistVF.woff │ │ └── GeistMonoVF.woff │ ├── page.tsx │ ├── layout.tsx │ └── globals.css ├── lib │ └── utils.ts └── components │ ├── ImageSlider.tsx │ ├── Slider.tsx │ ├── ui │ ├── button.tsx │ ├── card.tsx │ └── carousel.tsx │ ├── About.tsx │ ├── Hero.tsx │ ├── Footer.tsx │ ├── Courses.tsx │ └── Header.tsx ├── .eslintrc.json ├── postcss.config.mjs ├── next.config.mjs ├── components.json ├── .gitignore ├── tsconfig.json ├── package.json ├── README.md └── tailwind.config.ts /01-Countdown-Timer/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /00-My-Portfolio/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /01-Countdown-Timer/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /02-E-Commerce/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /03-Meme-Maker/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /03-Meme-Maker/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /06-dynamic-blog/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /00-My-Portfolio/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /02-E-Commerce/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /04-Weather-Widget/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /06-dynamic-blog/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /01-Countdown-Timer/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /02-E-Commerce/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/02-E-Commerce/src/app/favicon.ico -------------------------------------------------------------------------------- /02-E-Commerce/src/images/T1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/02-E-Commerce/src/images/T1.webp -------------------------------------------------------------------------------- /02-E-Commerce/src/images/T2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/02-E-Commerce/src/images/T2.jpg -------------------------------------------------------------------------------- /02-E-Commerce/src/images/T3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/02-E-Commerce/src/images/T3.jpg -------------------------------------------------------------------------------- /03-Meme-Maker/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/03-Meme-Maker/src/app/favicon.ico -------------------------------------------------------------------------------- /04-Weather-Widget/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /05-Governor-Site/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/logo.png -------------------------------------------------------------------------------- /06-dynamic-blog/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /00-My-Portfolio/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/00-My-Portfolio/src/app/favicon.ico -------------------------------------------------------------------------------- /01-Countdown-Timer/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/01-Countdown-Timer/app/favicon.ico -------------------------------------------------------------------------------- /02-E-Commerce/src/images/About.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/02-E-Commerce/src/images/About.png -------------------------------------------------------------------------------- /05-Governor-Site/public/about1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/about1.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/about2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/about2.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/about3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/about3.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/course1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/course1.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/course2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/course2.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/course3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/course3.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/course4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/course4.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/course5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/course5.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/course6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/course6.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/course7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/course7.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/course8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/course8.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/tiktok.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/tiktok.png -------------------------------------------------------------------------------- /05-Governor-Site/public/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/twitter.png -------------------------------------------------------------------------------- /05-Governor-Site/public/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/youtube.png -------------------------------------------------------------------------------- /06-dynamic-blog/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/06-dynamic-blog/src/app/favicon.ico -------------------------------------------------------------------------------- /04-Weather-Widget/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/04-Weather-Widget/src/app/favicon.ico -------------------------------------------------------------------------------- /05-Governor-Site/public/course9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/course9.jpeg -------------------------------------------------------------------------------- /05-Governor-Site/public/download.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/download.jpeg -------------------------------------------------------------------------------- /05-Governor-Site/public/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/facebook.png -------------------------------------------------------------------------------- /05-Governor-Site/public/governor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/governor.png -------------------------------------------------------------------------------- /05-Governor-Site/public/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/instagram.png -------------------------------------------------------------------------------- /05-Governor-Site/public/slideShow1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/slideShow1.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/slideShow2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/slideShow2.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/slideShow3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/slideShow3.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/slideShow4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/slideShow4.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/slideShow5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/slideShow5.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/slideShow6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/slideShow6.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/slideShow7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/slideShow7.jpg -------------------------------------------------------------------------------- /05-Governor-Site/public/slideShow8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/public/slideShow8.jpg -------------------------------------------------------------------------------- /05-Governor-Site/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/src/app/favicon.ico -------------------------------------------------------------------------------- /02-E-Commerce/src/app/about/page.tsx: -------------------------------------------------------------------------------- 1 | import AboutUs from "@/components/AboutUs"; 2 | 3 | export default function About() { 4 | return 5 | } -------------------------------------------------------------------------------- /02-E-Commerce/src/app/fonts/GeistVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/02-E-Commerce/src/app/fonts/GeistVF.woff -------------------------------------------------------------------------------- /03-Meme-Maker/src/app/fonts/GeistVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/03-Meme-Maker/src/app/fonts/GeistVF.woff -------------------------------------------------------------------------------- /00-My-Portfolio/src/app/fonts/GeistVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/00-My-Portfolio/src/app/fonts/GeistVF.woff -------------------------------------------------------------------------------- /05-Governor-Site/src/app/fonts/GeistVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/src/app/fonts/GeistVF.woff -------------------------------------------------------------------------------- /06-dynamic-blog/src/app/fonts/GeistVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/06-dynamic-blog/src/app/fonts/GeistVF.woff -------------------------------------------------------------------------------- /02-E-Commerce/src/app/contact/page.tsx: -------------------------------------------------------------------------------- 1 | import ContactUs from "@/components/ContactUs"; 2 | 3 | export default function Contact() { 4 | return 5 | } -------------------------------------------------------------------------------- /02-E-Commerce/src/app/fonts/GeistMonoVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/02-E-Commerce/src/app/fonts/GeistMonoVF.woff -------------------------------------------------------------------------------- /03-Meme-Maker/src/app/fonts/GeistMonoVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/03-Meme-Maker/src/app/fonts/GeistMonoVF.woff -------------------------------------------------------------------------------- /04-Weather-Widget/src/app/fonts/GeistVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/04-Weather-Widget/src/app/fonts/GeistVF.woff -------------------------------------------------------------------------------- /00-My-Portfolio/src/app/fonts/GeistMonoVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/00-My-Portfolio/src/app/fonts/GeistMonoVF.woff -------------------------------------------------------------------------------- /04-Weather-Widget/src/app/fonts/GeistMonoVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/04-Weather-Widget/src/app/fonts/GeistMonoVF.woff -------------------------------------------------------------------------------- /05-Governor-Site/src/app/fonts/GeistMonoVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/05-Governor-Site/src/app/fonts/GeistMonoVF.woff -------------------------------------------------------------------------------- /06-dynamic-blog/src/app/fonts/GeistMonoVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/NextJS-Project-Challenge/HEAD/06-dynamic-blog/src/app/fonts/GeistMonoVF.woff -------------------------------------------------------------------------------- /05-Governor-Site/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"], 3 | "rules": { 4 | "@typescript-eslint/no-require-imports": "off" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /00-My-Portfolio/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 | -------------------------------------------------------------------------------- /02-E-Commerce/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 | -------------------------------------------------------------------------------- /03-Meme-Maker/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 | -------------------------------------------------------------------------------- /04-Weather-Widget/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 | -------------------------------------------------------------------------------- /05-Governor-Site/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 | -------------------------------------------------------------------------------- /06-dynamic-blog/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 | -------------------------------------------------------------------------------- /01-Countdown-Timer/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 | -------------------------------------------------------------------------------- /02-E-Commerce/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | images: { 4 | domains: ["fakestoreapi.com"] 5 | } 6 | }; 7 | 8 | export default nextConfig; 9 | -------------------------------------------------------------------------------- /03-Meme-Maker/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | images: { 4 | domains: ["i.imgflip.com"], 5 | } 6 | }; 7 | 8 | export default nextConfig; 9 | -------------------------------------------------------------------------------- /01-Countdown-Timer/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Countdown from "@/components/Countdown"; 2 | 3 | export default function Home() { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /01-Countdown-Timer/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /05-Governor-Site/src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /04-Weather-Widget/src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /05-Governor-Site/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | images: { 4 | domains: ['cdn-icons-png.freepik.com'] 5 | } 6 | }; 7 | 8 | export default nextConfig; 9 | -------------------------------------------------------------------------------- /04-Weather-Widget/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import WeatherWidget from "@/components/weather-widget"; 3 | 4 | export default function Home() { 5 | return ( 6 | <> 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /04-Weather-Widget/src/components/loadingSpinner.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function LoadingSpinner() { 4 | return ( 5 |
6 |
7 |
8 | ); 9 | } -------------------------------------------------------------------------------- /00-My-Portfolio/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 | -------------------------------------------------------------------------------- /05-Governor-Site/src/components/ImageSlider.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CarouselDemo from './Slider' 3 | 4 | const ImageSlider = () => { 5 | return ( 6 |
7 |
8 | 9 |
10 |
11 | ) 12 | } 13 | 14 | export default ImageSlider -------------------------------------------------------------------------------- /02-E-Commerce/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Hero from "@/components/Hero"; 2 | import AboutUs from "@/components/AboutUs"; 3 | import Testimonials from "@/components/Testimonials"; 4 | import Newsletter from "@/components/NewsLetter"; 5 | 6 | export default function Home() { 7 | return ( 8 | <> 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /05-Governor-Site/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import About from "@/components/About"; 2 | import Courses from "@/components/Courses"; 3 | import Footer from "@/components/Footer"; 4 | import Hero from "@/components/Hero"; 5 | import ImageSlider from "@/components/ImageSlider"; 6 | 7 | export default function Home() { 8 | return ( 9 |
10 | 11 | 12 | 13 | 14 |
15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /00-My-Portfolio/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 | -------------------------------------------------------------------------------- /02-E-Commerce/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 | -------------------------------------------------------------------------------- /03-Meme-Maker/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 | -------------------------------------------------------------------------------- /06-dynamic-blog/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 | -------------------------------------------------------------------------------- /01-Countdown-Timer/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": "app/globals.css", 9 | "baseColor": "slate", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | } 20 | } -------------------------------------------------------------------------------- /04-Weather-Widget/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 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | } 20 | } -------------------------------------------------------------------------------- /05-Governor-Site/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "src/app/globals.css", 9 | "baseColor": "zinc", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | } 20 | } -------------------------------------------------------------------------------- /00-My-Portfolio/.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 | -------------------------------------------------------------------------------- /02-E-Commerce/.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 | -------------------------------------------------------------------------------- /03-Meme-Maker/.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 | -------------------------------------------------------------------------------- /06-dynamic-blog/.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 | -------------------------------------------------------------------------------- /01-Countdown-Timer/.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 | -------------------------------------------------------------------------------- /05-Governor-Site/.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 | -------------------------------------------------------------------------------- /04-Weather-Widget/.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 30 | .env*.local 31 | 32 | # vercel 33 | .vercel 34 | 35 | # typescript 36 | *.tsbuildinfo 37 | next-env.d.ts 38 | -------------------------------------------------------------------------------- /01-Countdown-Timer/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Inter } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const inter = Inter({ subsets: ["latin"] }); 6 | 7 | export const metadata: Metadata = { 8 | title: "Create Next App", 9 | description: "Generated by create next app", 10 | }; 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: Readonly<{ 15 | children: React.ReactNode; 16 | }>) { 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /01-Countdown-Timer/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /06-dynamic-blog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "06-dynamic-blog", 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 | "react": "^18", 13 | "react-dom": "^18", 14 | "next": "14.2.15" 15 | }, 16 | "devDependencies": { 17 | "typescript": "^5", 18 | "@types/node": "^20", 19 | "@types/react": "^18", 20 | "@types/react-dom": "^18", 21 | "postcss": "^8", 22 | "tailwindcss": "^3.4.1", 23 | "eslint": "^8", 24 | "eslint-config-next": "14.2.15" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /02-E-Commerce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "e-commerce", 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 | "next": "14.2.11", 13 | "react": "^18", 14 | "react-dom": "^18", 15 | "react-icons": "^5.3.0" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "^20", 19 | "@types/react": "^18", 20 | "@types/react-dom": "^18", 21 | "eslint": "^8", 22 | "eslint-config-next": "14.2.11", 23 | "postcss": "^8", 24 | "tailwindcss": "^3.4.1", 25 | "typescript": "^5" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /00-My-Portfolio/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 | -------------------------------------------------------------------------------- /01-Countdown-Timer/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 | "@/*": ["./*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /02-E-Commerce/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 | -------------------------------------------------------------------------------- /03-Meme-Maker/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 | -------------------------------------------------------------------------------- /06-dynamic-blog/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 | -------------------------------------------------------------------------------- /04-Weather-Widget/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 | -------------------------------------------------------------------------------- /05-Governor-Site/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 | -------------------------------------------------------------------------------- /00-My-Portfolio/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 | -------------------------------------------------------------------------------- /00-My-Portfolio/src/app/about/page.tsx: -------------------------------------------------------------------------------- 1 | import Section from '@/components/Section' 2 | import React from 'react' 3 | 4 | const page = () => { 5 | return ( 6 | <> 7 |
15 | 16 | ) 17 | } 18 | 19 | export default page -------------------------------------------------------------------------------- /03-Meme-Maker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "03-meme-maker", 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 | "file-saver": "^2.0.5", 13 | "next": "14.2.14", 14 | "react": "^18", 15 | "react-dom": "^18" 16 | }, 17 | "devDependencies": { 18 | "@types/file-saver": "^2.0.7", 19 | "@types/node": "^20", 20 | "@types/react": "^18", 21 | "@types/react-dom": "^18", 22 | "eslint": "^8", 23 | "eslint-config-next": "14.2.14", 24 | "i": "^0.3.7", 25 | "npm": "^10.9.0", 26 | "postcss": "^8", 27 | "tailwindcss": "^3.4.1", 28 | "typescript": "^5" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /00-My-Portfolio/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 = ({ text, onClick, href }) => { 10 | return href ? ( 11 | 15 | {text} 16 | 17 | ) : ( 18 | 24 | ); 25 | }; 26 | 27 | export default Button; 28 | -------------------------------------------------------------------------------- /01-Countdown-Timer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01-countdown-timer", 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-slot": "^1.1.0", 13 | "class-variance-authority": "^0.7.0", 14 | "clsx": "^2.1.1", 15 | "lucide-react": "^0.438.0", 16 | "next": "14.2.7", 17 | "react": "^18", 18 | "react-dom": "^18", 19 | "tailwind-merge": "^2.5.2", 20 | "tailwindcss-animate": "^1.0.7" 21 | }, 22 | "devDependencies": { 23 | "@types/node": "^20", 24 | "@types/react": "^18", 25 | "@types/react-dom": "^18", 26 | "eslint": "^8", 27 | "eslint-config-next": "14.2.7", 28 | "postcss": "^8", 29 | "tailwindcss": "^3.4.1", 30 | "typescript": "^5" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /04-Weather-Widget/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "04-weather-widget", 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-slot": "^1.1.0", 13 | "class-variance-authority": "^0.7.0", 14 | "clsx": "^2.1.1", 15 | "lucide-react": "^0.451.0", 16 | "next": "14.2.14", 17 | "react": "^18", 18 | "react-dom": "^18", 19 | "tailwind-merge": "^2.5.3", 20 | "tailwindcss-animate": "^1.0.7" 21 | }, 22 | "devDependencies": { 23 | "@types/node": "^20", 24 | "@types/react": "^18", 25 | "@types/react-dom": "^18", 26 | "eslint": "^8", 27 | "eslint-config-next": "14.2.14", 28 | "postcss": "^8", 29 | "tailwindcss": "^3.4.1", 30 | "typescript": "^5" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /03-Meme-Maker/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import localFont from "next/font/local"; 3 | import "./globals.css"; 4 | 5 | const geistSans = localFont({ 6 | src: "./fonts/GeistVF.woff", 7 | variable: "--font-geist-sans", 8 | weight: "100 900", 9 | }); 10 | const geistMono = localFont({ 11 | src: "./fonts/GeistMonoVF.woff", 12 | variable: "--font-geist-mono", 13 | weight: "100 900", 14 | }); 15 | 16 | export const metadata: Metadata = { 17 | title: "Create Next App", 18 | description: "Generated by create next app", 19 | }; 20 | 21 | export default function RootLayout({ 22 | children, 23 | }: Readonly<{ 24 | children: React.ReactNode; 25 | }>) { 26 | return ( 27 | 28 | 31 | {children} 32 | 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /04-Weather-Widget/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import localFont from "next/font/local"; 3 | import "./globals.css"; 4 | 5 | const geistSans = localFont({ 6 | src: "./fonts/GeistVF.woff", 7 | variable: "--font-geist-sans", 8 | weight: "100 900", 9 | }); 10 | const geistMono = localFont({ 11 | src: "./fonts/GeistMonoVF.woff", 12 | variable: "--font-geist-mono", 13 | weight: "100 900", 14 | }); 15 | 16 | export const metadata: Metadata = { 17 | title: "Weather Widget", 18 | description: "Generated by create next app", 19 | }; 20 | 21 | export default function RootLayout({ 22 | children, 23 | }: Readonly<{ 24 | children: React.ReactNode; 25 | }>) { 26 | return ( 27 | 28 | 31 | {children} 32 | 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /06-dynamic-blog/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import localFont from "next/font/local"; 3 | import "./globals.css"; 4 | 5 | const geistSans = localFont({ 6 | src: "./fonts/GeistVF.woff", 7 | variable: "--font-geist-sans", 8 | weight: "100 900", 9 | }); 10 | const geistMono = localFont({ 11 | src: "./fonts/GeistMonoVF.woff", 12 | variable: "--font-geist-mono", 13 | weight: "100 900", 14 | }); 15 | 16 | export const metadata: Metadata = { 17 | title: "Create Next App", 18 | description: "Generated by create next app", 19 | }; 20 | 21 | export default function RootLayout({ 22 | children, 23 | }: Readonly<{ 24 | children: React.ReactNode; 25 | }>) { 26 | return ( 27 | 28 | 31 | {children} 32 | 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /01-Countdown-Timer/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 {} 7 | 8 | const Input = React.forwardRef( 9 | ({ className, type, ...props }, ref) => { 10 | return ( 11 | 20 | ) 21 | } 22 | ) 23 | Input.displayName = "Input" 24 | 25 | export { Input } 26 | -------------------------------------------------------------------------------- /04-Weather-Widget/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 {} 7 | 8 | const Input = React.forwardRef( 9 | ({ className, type, ...props }, ref) => { 10 | return ( 11 | 20 | ) 21 | } 22 | ) 23 | Input.displayName = "Input" 24 | 25 | export { Input } 26 | -------------------------------------------------------------------------------- /02-E-Commerce/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: "UF-Store", 20 | description: "Generated by create next app", 21 | icons: "https://banner2.cleanpng.com/20180419/sfq/avf7f2ncu.webp", 22 | }; 23 | 24 | export default function RootLayout({ 25 | children, 26 | }: Readonly<{ 27 | children: React.ReactNode; 28 | }>) { 29 | return ( 30 | 31 | 34 | 35 | {children} 36 |
37 | 38 | 39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /00-My-Portfolio/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 | 31 | 34 | 35 | {children} 36 |
37 | 38 | 39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /05-Governor-Site/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import localFont from "next/font/local"; 3 | import "./globals.css"; 4 | import Header from "@/components/Header"; 5 | 6 | const geistSans = localFont({ 7 | src: "./fonts/GeistVF.woff", 8 | variable: "--font-geist-sans", 9 | weight: "100 900", 10 | }); 11 | const geistMono = localFont({ 12 | src: "./fonts/GeistMonoVF.woff", 13 | variable: "--font-geist-mono", 14 | weight: "100 900", 15 | }); 16 | 17 | export const metadata: Metadata = { 18 | title: "Governor Initiative", 19 | description: "Generated by create next app", 20 | }; 21 | 22 | export default function RootLayout({ 23 | children, 24 | }: Readonly<{ 25 | children: React.ReactNode; 26 | }>) { 27 | return ( 28 | 29 | 30 | 31 | 32 | 36 |
37 | {children} 38 | 39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /01-Countdown-Timer/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /05-Governor-Site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "governorweb-assignment", 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 | "@emotion/react": "^11.13.3", 13 | "@emotion/styled": "^11.13.0", 14 | "@mui/icons-material": "^6.1.2", 15 | "@mui/material": "^6.1.2", 16 | "@radix-ui/react-icons": "^1.3.0", 17 | "@radix-ui/react-slot": "^1.1.0", 18 | "class-variance-authority": "^0.7.0", 19 | "clsx": "^2.1.1", 20 | "embla-carousel": "^8.3.0", 21 | "embla-carousel-autoplay": "^8.3.0", 22 | "embla-carousel-react": "^8.3.0", 23 | "lucide-react": "^0.447.0", 24 | "next": "14.2.14", 25 | "react": "^18", 26 | "react-dom": "^18", 27 | "react-slick": "^0.30.2", 28 | "react-slideshow-image": "^4.3.1", 29 | "slick-carousel": "^1.8.1", 30 | "tailwind-merge": "^2.5.2", 31 | "tailwindcss-animate": "^1.0.7" 32 | }, 33 | "devDependencies": { 34 | "@types/node": "^20", 35 | "@types/react": "^18", 36 | "@types/react-dom": "^18", 37 | "@types/react-slick": "^0.23.13", 38 | "eslint": "^8", 39 | "eslint-config-next": "14.2.14", 40 | "postcss": "^8", 41 | "tailwindcss": "^3.4.1", 42 | "typescript": "^5" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /02-E-Commerce/src/components/NewsLetter.tsx: -------------------------------------------------------------------------------- 1 | const Newsletter = () => { 2 | return ( 3 |
4 |
5 |

Stay Updated

6 |

7 | Subscribe to our newsletter to get the latest updates on products, exclusive offers, and more! 8 |

9 |
10 | 16 | 22 |
23 |
24 |
25 | ); 26 | }; 27 | 28 | export default Newsletter; 29 | -------------------------------------------------------------------------------- /06-dynamic-blog/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { blogs, Blogs } from "@/blogs/blogs"; 3 | import Link from "next/link"; 4 | 5 | export default function Home() { 6 | return ( 7 |
8 |

Good Morning Readers

9 |
10 | {blogs.length > 0 && blogs.map((blog: Blogs) => ( 11 |
15 |
16 |

{blog.title}

17 |

By {blog.author} on {blog.date}

18 |

{blog.content.slice(0, 100)}...

19 | 20 | 21 | View More 22 | 23 | 24 |
25 |
26 | ))} 27 |
28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /00-My-Portfolio/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 = ({ 16 | imageSrc, 17 | imageAlt, 18 | title, 19 | description, 20 | buttonText, 21 | buttonLink, 22 | buttonOnClick 23 | }) => { 24 | return ( 25 | <> 26 |
27 |
28 | {imageAlt} 34 |
35 |
36 |

{title}

37 |

{description}

38 | {buttonText && ( 39 |
40 |
42 | )} 43 |
44 |
45 | 46 | ); 47 | }; 48 | 49 | export default ProjectCard; 50 | -------------------------------------------------------------------------------- /01-Countdown-Timer/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/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/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 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/deployment) for more details. 37 | -------------------------------------------------------------------------------- /00-My-Portfolio/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 | -------------------------------------------------------------------------------- /02-E-Commerce/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 | -------------------------------------------------------------------------------- /03-Meme-Maker/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 | -------------------------------------------------------------------------------- /04-Weather-Widget/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 | -------------------------------------------------------------------------------- /05-Governor-Site/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 | -------------------------------------------------------------------------------- /06-dynamic-blog/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 | -------------------------------------------------------------------------------- /05-Governor-Site/src/components/Slider.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import { CardContent } from "@/components/ui/card" 3 | import Autoplay from "embla-carousel-autoplay" 4 | import { 5 | Carousel, 6 | CarouselContent, 7 | CarouselItem, 8 | } from "@/components/ui/carousel" 9 | import Image from "next/image"; 10 | import { useRef } from "react"; 11 | 12 | const images = [ 13 | '/slideShow1.jpg', 14 | '/slideShow2.jpg', 15 | '/slideShow3.jpg', 16 | '/slideShow4.jpg', 17 | '/slideShow5.jpg', 18 | '/slideShow6.jpg', 19 | '/slideShow7.jpg', 20 | '/slideShow8.jpg', 21 | ]; 22 | 23 | const CarouselDemo = () => { 24 | const plugin = useRef( 25 | Autoplay({ delay: 1000, stopOnInteraction: true }) 26 | ) 27 | return ( 28 | 34 | 35 | {images.map((image, index) => ( 36 | 37 |
38 | 39 | {`image-${index}`} 46 | 47 |
48 | 49 | ))} 50 | 51 | 52 | ) 53 | } 54 | export default CarouselDemo; 55 | -------------------------------------------------------------------------------- /04-Weather-Widget/tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | darkMode: ["class"], 5 | content: [ 6 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}", 8 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}", 9 | ], 10 | theme: { 11 | extend: { 12 | colors: { 13 | background: 'hsl(var(--background))', 14 | foreground: 'hsl(var(--foreground))', 15 | card: { 16 | DEFAULT: 'hsl(var(--card))', 17 | foreground: 'hsl(var(--card-foreground))' 18 | }, 19 | popover: { 20 | DEFAULT: 'hsl(var(--popover))', 21 | foreground: 'hsl(var(--popover-foreground))' 22 | }, 23 | primary: { 24 | DEFAULT: 'hsl(var(--primary))', 25 | foreground: 'hsl(var(--primary-foreground))' 26 | }, 27 | secondary: { 28 | DEFAULT: 'hsl(var(--secondary))', 29 | foreground: 'hsl(var(--secondary-foreground))' 30 | }, 31 | muted: { 32 | DEFAULT: 'hsl(var(--muted))', 33 | foreground: 'hsl(var(--muted-foreground))' 34 | }, 35 | accent: { 36 | DEFAULT: 'hsl(var(--accent))', 37 | foreground: 'hsl(var(--accent-foreground))' 38 | }, 39 | destructive: { 40 | DEFAULT: 'hsl(var(--destructive))', 41 | foreground: 'hsl(var(--destructive-foreground))' 42 | }, 43 | border: 'hsl(var(--border))', 44 | input: 'hsl(var(--input))', 45 | ring: 'hsl(var(--ring))', 46 | chart: { 47 | '1': 'hsl(var(--chart-1))', 48 | '2': 'hsl(var(--chart-2))', 49 | '3': 'hsl(var(--chart-3))', 50 | '4': 'hsl(var(--chart-4))', 51 | '5': 'hsl(var(--chart-5))' 52 | } 53 | }, 54 | borderRadius: { 55 | lg: 'var(--radius)', 56 | md: 'calc(var(--radius) - 2px)', 57 | sm: 'calc(var(--radius) - 4px)' 58 | } 59 | } 60 | }, 61 | plugins: [require("tailwindcss-animate")], 62 | }; 63 | export default config; 64 | -------------------------------------------------------------------------------- /05-Governor-Site/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | @layer base { 5 | :root { 6 | --background: 0 0% 100%; 7 | --foreground: 240 10% 3.9%; 8 | --card: 0 0% 100%; 9 | --card-foreground: 240 10% 3.9%; 10 | --popover: 0 0% 100%; 11 | --popover-foreground: 240 10% 3.9%; 12 | --primary: 240 5.9% 10%; 13 | --primary-foreground: 0 0% 98%; 14 | --secondary: 240 4.8% 95.9%; 15 | --secondary-foreground: 240 5.9% 10%; 16 | --muted: 240 4.8% 95.9%; 17 | --muted-foreground: 240 3.8% 46.1%; 18 | --accent: 240 4.8% 95.9%; 19 | --accent-foreground: 240 5.9% 10%; 20 | --destructive: 0 84.2% 60.2%; 21 | --destructive-foreground: 0 0% 98%; 22 | --border: 240 5.9% 90%; 23 | --input: 240 5.9% 90%; 24 | --ring: 240 10% 3.9%; 25 | --chart-1: 12 76% 61%; 26 | --chart-2: 173 58% 39%; 27 | --chart-3: 197 37% 24%; 28 | --chart-4: 43 74% 66%; 29 | --chart-5: 27 87% 67%; 30 | --radius: 0.5rem 31 | } 32 | .dark { 33 | --background: 240 10% 3.9%; 34 | --foreground: 0 0% 98%; 35 | --card: 240 10% 3.9%; 36 | --card-foreground: 0 0% 98%; 37 | --popover: 240 10% 3.9%; 38 | --popover-foreground: 0 0% 98%; 39 | --primary: 0 0% 98%; 40 | --primary-foreground: 240 5.9% 10%; 41 | --secondary: 240 3.7% 15.9%; 42 | --secondary-foreground: 0 0% 98%; 43 | --muted: 240 3.7% 15.9%; 44 | --muted-foreground: 240 5% 64.9%; 45 | --accent: 240 3.7% 15.9%; 46 | --accent-foreground: 0 0% 98%; 47 | --destructive: 0 62.8% 30.6%; 48 | --destructive-foreground: 0 0% 98%; 49 | --border: 240 3.7% 15.9%; 50 | --input: 240 3.7% 15.9%; 51 | --ring: 240 4.9% 83.9%; 52 | --chart-1: 220 70% 50%; 53 | --chart-2: 160 60% 45%; 54 | --chart-3: 30 80% 55%; 55 | --chart-4: 280 65% 60%; 56 | --chart-5: 340 75% 55% 57 | } 58 | } 59 | @layer base { 60 | * { 61 | @apply border-border; 62 | } 63 | body { 64 | @apply bg-background text-foreground; 65 | } 66 | } 67 | 68 | -------------------------------------------------------------------------------- /02-E-Commerce/src/components/Hero.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | const Hero = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 | 21 |
22 |
23 |

24 | Welcome to UF-Store 25 |

26 |

27 | Discover our range of products and enjoy a seamless shopping experience. Explore now! 28 |

29 |
30 | 34 | Shop Now 35 | 36 |
37 |
38 |
39 |
40 |
41 | ); 42 | }; 43 | 44 | export default Hero; 45 | -------------------------------------------------------------------------------- /01-Countdown-Timer/components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { Slot } from "@radix-ui/react-slot" 3 | import { cva, type VariantProps } from "class-variance-authority" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", 9 | { 10 | variants: { 11 | variant: { 12 | default: "bg-primary text-primary-foreground hover:bg-primary/90", 13 | destructive: 14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90", 15 | outline: 16 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground", 17 | secondary: 18 | "bg-secondary text-secondary-foreground hover:bg-secondary/80", 19 | ghost: "hover:bg-accent hover:text-accent-foreground", 20 | link: "text-primary underline-offset-4 hover:underline", 21 | }, 22 | size: { 23 | default: "h-10 px-4 py-2", 24 | sm: "h-9 rounded-md px-3", 25 | lg: "h-11 rounded-md px-8", 26 | icon: "h-10 w-10", 27 | }, 28 | }, 29 | defaultVariants: { 30 | variant: "default", 31 | size: "default", 32 | }, 33 | } 34 | ) 35 | 36 | export interface ButtonProps 37 | extends React.ButtonHTMLAttributes, 38 | VariantProps { 39 | asChild?: boolean 40 | } 41 | 42 | const Button = React.forwardRef( 43 | ({ className, variant, size, asChild = false, ...props }, ref) => { 44 | const Comp = asChild ? Slot : "button" 45 | return ( 46 | 51 | ) 52 | } 53 | ) 54 | Button.displayName = "Button" 55 | 56 | export { Button, buttonVariants } 57 | -------------------------------------------------------------------------------- /04-Weather-Widget/src/components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { Slot } from "@radix-ui/react-slot" 3 | import { cva, type VariantProps } from "class-variance-authority" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", 9 | { 10 | variants: { 11 | variant: { 12 | default: "bg-primary text-primary-foreground hover:bg-primary/90", 13 | destructive: 14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90", 15 | outline: 16 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground", 17 | secondary: 18 | "bg-secondary text-secondary-foreground hover:bg-secondary/80", 19 | ghost: "hover:bg-accent hover:text-accent-foreground", 20 | link: "text-primary underline-offset-4 hover:underline", 21 | }, 22 | size: { 23 | default: "h-10 px-4 py-2", 24 | sm: "h-9 rounded-md px-3", 25 | lg: "h-11 rounded-md px-8", 26 | icon: "h-10 w-10", 27 | }, 28 | }, 29 | defaultVariants: { 30 | variant: "default", 31 | size: "default", 32 | }, 33 | } 34 | ) 35 | 36 | export interface ButtonProps 37 | extends React.ButtonHTMLAttributes, 38 | VariantProps { 39 | asChild?: boolean 40 | } 41 | 42 | const Button = React.forwardRef( 43 | ({ className, variant, size, asChild = false, ...props }, ref) => { 44 | const Comp = asChild ? Slot : "button" 45 | return ( 46 | 51 | ) 52 | } 53 | ) 54 | Button.displayName = "Button" 55 | 56 | export { Button, buttonVariants } 57 | -------------------------------------------------------------------------------- /05-Governor-Site/src/components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { Slot } from "@radix-ui/react-slot" 3 | import { cva, type VariantProps } from "class-variance-authority" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", 9 | { 10 | variants: { 11 | variant: { 12 | default: 13 | "bg-primary text-primary-foreground shadow hover:bg-primary/90", 14 | destructive: 15 | "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", 16 | outline: 17 | "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", 18 | secondary: 19 | "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", 20 | ghost: "hover:bg-accent hover:text-accent-foreground", 21 | link: "text-primary underline-offset-4 hover:underline", 22 | }, 23 | size: { 24 | default: "h-9 px-4 py-2", 25 | sm: "h-8 rounded-md px-3 text-xs", 26 | lg: "h-10 rounded-md px-8", 27 | icon: "h-9 w-9", 28 | }, 29 | }, 30 | defaultVariants: { 31 | variant: "default", 32 | size: "default", 33 | }, 34 | } 35 | ) 36 | 37 | export interface ButtonProps 38 | extends React.ButtonHTMLAttributes, 39 | VariantProps { 40 | asChild?: boolean 41 | } 42 | 43 | const Button = React.forwardRef( 44 | ({ className, variant, size, asChild = false, ...props }, ref) => { 45 | const Comp = asChild ? Slot : "button" 46 | return ( 47 | 52 | ) 53 | } 54 | ) 55 | Button.displayName = "Button" 56 | 57 | export { Button, buttonVariants } 58 | -------------------------------------------------------------------------------- /05-Governor-Site/src/components/About.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image' 2 | import React from 'react' 3 | 4 | const About = () => { 5 | return ( 6 |
7 |
8 |
9 |

Certified Cloud Applied Generative AI Engineer (GenEng) and Solopreneur Developing Billion-Dollar Valued Developers and Solopreneurs

10 |

The pace of technological change is accelerating, big players like Microsoft, Amazon, Google, and OpenAI are winning by providing infrastructure, large AI foundation models, frameworks, 3D Metaverse experiences, and massive distribution networks. Solopreneurs trained in this program will win by automating work typically outsourced to employees, by directly connecting to customers by eliminating the middleman, and by developing vertical metaverses, thus paving the way for the first billion-dollar valued solopreneur businesses. This program has the objective to train this new breed of billion-dollar solopreneurs. These solopreneurs will adopt the ultra-lean business model and work independently and will not need to hire employees or other team members.

11 |
12 |
13 | solopreneur 14 | solopreneur 15 | solopreneur 16 |
17 |
18 |
19 | ) 20 | } 21 | 22 | export default About -------------------------------------------------------------------------------- /01-Countdown-Timer/tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | darkMode: ["class"], 5 | content: [ 6 | "./pages/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./components/**/*.{js,ts,jsx,tsx,mdx}", 8 | "./app/**/*.{js,ts,jsx,tsx,mdx}", 9 | ], 10 | theme: { 11 | extend: { 12 | backgroundImage: { 13 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 14 | 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))' 15 | }, 16 | borderRadius: { 17 | lg: 'var(--radius)', 18 | md: 'calc(var(--radius) - 2px)', 19 | sm: 'calc(var(--radius) - 4px)' 20 | }, 21 | colors: { 22 | background: 'hsl(var(--background))', 23 | foreground: 'hsl(var(--foreground))', 24 | card: { 25 | DEFAULT: 'hsl(var(--card))', 26 | foreground: 'hsl(var(--card-foreground))' 27 | }, 28 | popover: { 29 | DEFAULT: 'hsl(var(--popover))', 30 | foreground: 'hsl(var(--popover-foreground))' 31 | }, 32 | primary: { 33 | DEFAULT: 'hsl(var(--primary))', 34 | foreground: 'hsl(var(--primary-foreground))' 35 | }, 36 | secondary: { 37 | DEFAULT: 'hsl(var(--secondary))', 38 | foreground: 'hsl(var(--secondary-foreground))' 39 | }, 40 | muted: { 41 | DEFAULT: 'hsl(var(--muted))', 42 | foreground: 'hsl(var(--muted-foreground))' 43 | }, 44 | accent: { 45 | DEFAULT: 'hsl(var(--accent))', 46 | foreground: 'hsl(var(--accent-foreground))' 47 | }, 48 | destructive: { 49 | DEFAULT: 'hsl(var(--destructive))', 50 | foreground: 'hsl(var(--destructive-foreground))' 51 | }, 52 | border: 'hsl(var(--border))', 53 | input: 'hsl(var(--input))', 54 | ring: 'hsl(var(--ring))', 55 | chart: { 56 | '1': 'hsl(var(--chart-1))', 57 | '2': 'hsl(var(--chart-2))', 58 | '3': 'hsl(var(--chart-3))', 59 | '4': 'hsl(var(--chart-4))', 60 | '5': 'hsl(var(--chart-5))' 61 | } 62 | } 63 | } 64 | }, 65 | plugins: [require("tailwindcss-animate")], 66 | }; 67 | export default config; 68 | -------------------------------------------------------------------------------- /02-E-Commerce/src/components/Testimonials.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import T1 from "@/images/T1.webp"; 3 | import T2 from "@/images/T2.jpg"; 4 | import T3 from "@/images/T3.jpg"; 5 | 6 | const testimonials = [ 7 | { 8 | name: 'Customer 1', 9 | role: 'Verified Buyer', 10 | quote: 'UF-Store has an amazing selection of products and their customer service is top-notch!', 11 | image: T1, 12 | }, 13 | { 14 | name: 'Customer 2', 15 | role: 'Regular Customer', 16 | quote: 'I love shopping at UF-Store. The site is user-friendly and the delivery is always prompt.', 17 | image: T2, 18 | }, 19 | { 20 | name: 'Customer 3', 21 | role: 'Happy Shopper', 22 | quote: 'Fantastic experience! The product quality is excellent and the prices are unbeatable.', 23 | image: T3, 24 | }, 25 | ]; 26 | 27 | const Testimonials = () => { 28 | return ( 29 |
30 |
31 |

What Our Customers Say

32 |
33 | {testimonials.map((testimonial, index) => ( 34 |
35 |
36 | {`${testimonial.name}'s 43 |
44 |

{testimonial.name}

45 |

{testimonial.role}

46 |
47 |
48 |

{`${testimonial.quote}`}

49 |
50 | ))} 51 |
52 |
53 |
54 | ); 55 | }; 56 | 57 | export default Testimonials; 58 | -------------------------------------------------------------------------------- /05-Governor-Site/src/components/Hero.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image" 2 | 3 | const Hero = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 |

Governor Sindh Kamran Khan Tessori

11 |

Certified Cloud Applied Generative AI Engineer (GenEng)

12 |

Earn up to $5,000 / month

13 |

Now admissions are open in Hyderabad

14 |
15 | 16 |
17 | 562,143 18 | Accepted Applications 19 |
20 |
21 |
22 |
23 | governor 24 |
25 |
26 |
27 |
28 | ) 29 | } 30 | 31 | export default Hero -------------------------------------------------------------------------------- /02-E-Commerce/src/components/AboutUs.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import AboutImage from "@/images/About.png" 3 | import Link from 'next/link'; 4 | 5 | const AboutUs = () => { 6 | return ( 7 |
8 |
9 |
10 |
11 |

About Us

12 |

13 | Welcome to UF-Store, your go-to destination for the best products and unbeatable deals. 14 | We are dedicated to providing you with a seamless shopping experience, top-notch customer service, 15 | and a wide range of high-quality products. Our mission is to make shopping easy and enjoyable for you, 16 | and we’re always here to help with any questions or concerns you may have. 17 |

18 |
19 | 23 | Get in Touch 24 | 25 |
26 |
27 |
28 | About Us Image 35 |
36 |
37 |
38 |
39 | ); 40 | }; 41 | 42 | export default AboutUs; 43 | -------------------------------------------------------------------------------- /05-Governor-Site/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 8 | >(({ className, ...props }, ref) => ( 9 |
17 | )) 18 | Card.displayName = "Card" 19 | 20 | const CardHeader = React.forwardRef< 21 | HTMLDivElement, 22 | React.HTMLAttributes 23 | >(({ className, ...props }, ref) => ( 24 |
29 | )) 30 | CardHeader.displayName = "CardHeader" 31 | 32 | const CardTitle = React.forwardRef< 33 | HTMLParagraphElement, 34 | React.HTMLAttributes 35 | >(({ className, ...props }, ref) => ( 36 |

41 | )) 42 | CardTitle.displayName = "CardTitle" 43 | 44 | const CardDescription = React.forwardRef< 45 | HTMLParagraphElement, 46 | React.HTMLAttributes 47 | >(({ className, ...props }, ref) => ( 48 |

53 | )) 54 | CardDescription.displayName = "CardDescription" 55 | 56 | const CardContent = React.forwardRef< 57 | HTMLDivElement, 58 | React.HTMLAttributes 59 | >(({ className, ...props }, ref) => ( 60 |

61 | )) 62 | CardContent.displayName = "CardContent" 63 | 64 | const CardFooter = React.forwardRef< 65 | HTMLDivElement, 66 | React.HTMLAttributes 67 | >(({ className, ...props }, ref) => ( 68 |
73 | )) 74 | CardFooter.displayName = "CardFooter" 75 | 76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } 77 | -------------------------------------------------------------------------------- /02-E-Commerce/src/components/SuccessModal.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useRouter } from 'next/navigation'; 3 | 4 | interface SuccessModalProps { 5 | isOpen: boolean; 6 | onClose: () => void; 7 | message: string; 8 | vCart?: boolean; 9 | } 10 | 11 | const SuccessModal: React.FC = ({ isOpen, onClose, message, vCart }) => { 12 | const router = useRouter(); 13 | 14 | if (!isOpen) return null; 15 | 16 | return ( 17 |
18 |
19 | 25 |
26 | 27 | 28 | 29 | {message} 30 |
31 |
32 | 38 | {vCart && } 44 |
45 |
46 |
47 | ); 48 | }; 49 | 50 | export default SuccessModal; 51 | -------------------------------------------------------------------------------- /04-Weather-Widget/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 8 | >(({ className, ...props }, ref) => ( 9 |
17 | )) 18 | Card.displayName = "Card" 19 | 20 | const CardHeader = React.forwardRef< 21 | HTMLDivElement, 22 | React.HTMLAttributes 23 | >(({ className, ...props }, ref) => ( 24 |
29 | )) 30 | CardHeader.displayName = "CardHeader" 31 | 32 | const CardTitle = React.forwardRef< 33 | HTMLParagraphElement, 34 | React.HTMLAttributes 35 | >(({ className, ...props }, ref) => ( 36 |

44 | )) 45 | CardTitle.displayName = "CardTitle" 46 | 47 | const CardDescription = React.forwardRef< 48 | HTMLParagraphElement, 49 | React.HTMLAttributes 50 | >(({ className, ...props }, ref) => ( 51 |

56 | )) 57 | CardDescription.displayName = "CardDescription" 58 | 59 | const CardContent = React.forwardRef< 60 | HTMLDivElement, 61 | React.HTMLAttributes 62 | >(({ className, ...props }, ref) => ( 63 |

64 | )) 65 | CardContent.displayName = "CardContent" 66 | 67 | const CardFooter = React.forwardRef< 68 | HTMLDivElement, 69 | React.HTMLAttributes 70 | >(({ className, ...props }, ref) => ( 71 |
76 | )) 77 | CardFooter.displayName = "CardFooter" 78 | 79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } 80 | -------------------------------------------------------------------------------- /00-My-Portfolio/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 = ({ 18 | imageSrc, 19 | imageAlt, 20 | heading, 21 | text, 22 | marginTop, 23 | buttonText, 24 | buttonLink, 25 | reverse = false, 26 | isCircular = false, 27 | }) => { 28 | return ( 29 |
30 |
31 | {/* Image */} 32 |
33 |
34 | {imageAlt} 41 |
42 |
43 | 44 |
45 |

{heading}

46 |

{text}

47 | {buttonText && buttonLink && ( 48 | 49 | {buttonText} 50 | 51 | )} 52 |
53 |
54 |
55 | ); 56 | }; 57 | 58 | export default Section; 59 | -------------------------------------------------------------------------------- /03-Meme-Maker/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import Link from "next/link"; 3 | import React from "react"; 4 | 5 | interface Memes { 6 | name: string; 7 | url: string; 8 | id: number; 9 | box_count: number; 10 | } 11 | 12 | export default async function Home() { 13 | const data = await fetch("https://api.imgflip.com/get_memes"); 14 | const response = await data.json(); 15 | 16 | return ( 17 |
18 |

19 | Meme Generator 20 |

21 |
22 | {response && response.data.memes.map((item: Memes) => ( 23 |
24 |
25 | {item.name} 32 |
33 |
34 |

{item.name}

35 | 44 | 47 | 48 |
49 |
50 | ))} 51 |
52 |
53 | ); 54 | } 55 | -------------------------------------------------------------------------------- /05-Governor-Site/tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | darkMode: ["class"], 5 | content: [ 6 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}", 8 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}", 9 | ], 10 | theme: { 11 | screens: { 12 | 'sm': '640px', 13 | // => @media (min-width: 640px) { ... } 14 | 15 | 'md': '768px', 16 | // => @media (min-width: 768px) { ... } 17 | 18 | 'lg': '1024px', 19 | // => @media (min-width: 1024px) { ... } 20 | 21 | 'xl': '1280px', 22 | // => @media (min-width: 1280px) { ... } 23 | 24 | '2xl': '1536px', 25 | // => @media (min-width: 1536px) { ... } 26 | }, 27 | extend: { 28 | colors: { 29 | background: 'hsl(var(--background))', 30 | foreground: 'hsl(var(--foreground))', 31 | card: { 32 | DEFAULT: 'hsl(var(--card))', 33 | foreground: 'hsl(var(--card-foreground))' 34 | }, 35 | popover: { 36 | DEFAULT: 'hsl(var(--popover))', 37 | foreground: 'hsl(var(--popover-foreground))' 38 | }, 39 | primary: { 40 | DEFAULT: 'hsl(var(--primary))', 41 | foreground: 'hsl(var(--primary-foreground))' 42 | }, 43 | secondary: { 44 | DEFAULT: 'hsl(var(--secondary))', 45 | foreground: 'hsl(var(--secondary-foreground))' 46 | }, 47 | muted: { 48 | DEFAULT: 'hsl(var(--muted))', 49 | foreground: 'hsl(var(--muted-foreground))' 50 | }, 51 | accent: { 52 | DEFAULT: 'hsl(var(--accent))', 53 | foreground: 'hsl(var(--accent-foreground))' 54 | }, 55 | destructive: { 56 | DEFAULT: 'hsl(var(--destructive))', 57 | foreground: 'hsl(var(--destructive-foreground))' 58 | }, 59 | border: 'hsl(var(--border))', 60 | input: 'hsl(var(--input))', 61 | ring: 'hsl(var(--ring))', 62 | chart: { 63 | '1': 'hsl(var(--chart-1))', 64 | '2': 'hsl(var(--chart-2))', 65 | '3': 'hsl(var(--chart-3))', 66 | '4': 'hsl(var(--chart-4))', 67 | '5': 'hsl(var(--chart-5))' 68 | } 69 | }, 70 | borderRadius: { 71 | lg: 'var(--radius)', 72 | md: 'calc(var(--radius) - 2px)', 73 | sm: 'calc(var(--radius) - 4px)' 74 | } 75 | } 76 | }, 77 | plugins: [require("tailwindcss-animate")], 78 | }; 79 | export default config; 80 | -------------------------------------------------------------------------------- /00-My-Portfolio/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 |
35 |
36 |

Projects

37 |
38 | {projects.map((project, index) => ( 39 | 48 | ))} 49 |
50 |
51 |
52 | ) 53 | } 54 | 55 | export default page -------------------------------------------------------------------------------- /02-E-Commerce/src/app/products/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useEffect, useState } from 'react'; 4 | import { useRouter } from 'next/navigation'; 5 | import Image from 'next/image'; 6 | 7 | interface Product { 8 | id: number; 9 | title: string; 10 | price: number; 11 | description: string; 12 | image: string; 13 | } 14 | 15 | const ProductsPage = () => { 16 | const [data, setData] = useState(null); 17 | const router = useRouter(); 18 | 19 | useEffect(() => { 20 | // Fetching API For Products Data 21 | fetch('https://fakestoreapi.com/products') 22 | .then((res) => res.json()) 23 | .then((res) => { 24 | setData(res); 25 | }) 26 | .catch((err) => { 27 | console.error(err); 28 | }); 29 | }, []); 30 | 31 | const viewSingleProduct = (productId: number) => { 32 | router.push(`/products/${productId}`); // Navigate to the single product page 33 | }; 34 | 35 | return ( 36 |
37 |
38 |

Our Products

39 | {!data ? ( 40 |
41 |

Loading products....

42 |
43 | ) : ( 44 |
45 | {data.map((product) => ( 46 |
47 | {product.title} 54 |

{product.title}

55 |

${product.price.toFixed(2)}

56 | 62 |
63 | ))} 64 |
65 | )} 66 |
67 |
68 | ); 69 | }; 70 | 71 | export default ProductsPage; 72 | -------------------------------------------------------------------------------- /00-My-Portfolio/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 |
8 |
9 |
10 | 11 | {/* Contact Information */} 12 |
13 |

Contact Us

14 |

Orangi Town, Karachi

15 |

Pakistan

16 |

+92 317 2472531

17 |

Email: umarofficial0121@gmail.com

18 |
19 | 20 | {/* Quick Links */} 21 |
22 |

Quick Links

23 |
    24 |
  • Home
    • 25 |
  • About Us
    • 26 |
  • Projects
    • 27 |
  • Contact
    • 28 |
29 |
30 | 31 | {/* Social Media */} 32 |
33 |

Follow Us

34 | 48 |
49 |
50 | 51 |
52 |

© {new Date().getFullYear()} Umar Farooq. All rights reserved.

53 |
54 |
55 |
56 | ); 57 | }; 58 | 59 | export default Footer; 60 | -------------------------------------------------------------------------------- /05-Governor-Site/src/components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image' 2 | import Link from 'next/link' 3 | import React from 'react' 4 | 5 | const Footer = () => { 6 | return ( 7 |
8 |
9 |
10 |
11 |
    12 |

    Core Courses

    13 |
  • Programming Fundamentals
    • 14 |
  • Web2 Using NextJs
    • 15 |
  • Earn as You Learn
    • 16 |
17 |
18 |
19 |
    20 |

    Advanced Courses

    21 |
  • Artificial Intelligence
    • 22 |
  • Web3 and Metaverse
    • 23 |
  • Cloud-Native Computing
    • 24 |
  • Ambient Computing and IoT
    • 25 |
  • Genomics and Bioinformatics
    • 26 |
  • Network Programmability and Automation
    • 27 |
28 |
29 |
30 |
31 |

Social Links

32 |
    33 | facebook 34 | youtube 35 | twitter 36 | istagram 37 | tiktok 38 |
39 | 40 | education@governorsindh.com 41 | 42 | 43 | {/*
  • 44 | 45 |
    • */} 46 |
    47 |
    48 |
    49 |
    50 |
    51 | ) 52 | } 53 | 54 | export default Footer -------------------------------------------------------------------------------- /04-Weather-Widget/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | :root { 7 | --background: 0 0% 100%; 8 | --foreground: 222.2 84% 4.9%; 9 | 10 | --card: 0 0% 100%; 11 | --card-foreground: 222.2 84% 4.9%; 12 | 13 | --popover: 0 0% 100%; 14 | --popover-foreground: 222.2 84% 4.9%; 15 | 16 | --primary: 222.2 47.4% 11.2%; 17 | --primary-foreground: 210 40% 98%; 18 | 19 | --secondary: 210 40% 96.1%; 20 | --secondary-foreground: 222.2 47.4% 11.2%; 21 | 22 | --muted: 210 40% 96.1%; 23 | --muted-foreground: 215.4 16.3% 46.9%; 24 | 25 | --accent: 210 40% 96.1%; 26 | --accent-foreground: 222.2 47.4% 11.2%; 27 | 28 | --destructive: 0 84.2% 60.2%; 29 | --destructive-foreground: 210 40% 98%; 30 | 31 | --border: 214.3 31.8% 91.4%; 32 | --input: 214.3 31.8% 91.4%; 33 | --ring: 222.2 84% 4.9%; 34 | 35 | --radius: 0.5rem; 36 | } 37 | 38 | .dark { 39 | --background: 222.2 84% 4.9%; 40 | --foreground: 210 40% 98%; 41 | 42 | --card: 222.2 84% 4.9%; 43 | --card-foreground: 210 40% 98%; 44 | 45 | --popover: 222.2 84% 4.9%; 46 | --popover-foreground: 210 40% 98%; 47 | 48 | --primary: 210 40% 98%; 49 | --primary-foreground: 222.2 47.4% 11.2%; 50 | 51 | --secondary: 217.2 32.6% 17.5%; 52 | --secondary-foreground: 210 40% 98%; 53 | 54 | --muted: 217.2 32.6% 17.5%; 55 | --muted-foreground: 215 20.2% 65.1%; 56 | 57 | --accent: 217.2 32.6% 17.5%; 58 | --accent-foreground: 210 40% 98%; 59 | 60 | --destructive: 0 62.8% 30.6%; 61 | --destructive-foreground: 210 40% 98%; 62 | 63 | --border: 217.2 32.6% 17.5%; 64 | --input: 217.2 32.6% 17.5%; 65 | --ring: 212.7 26.8% 83.9%; 66 | } 67 | } 68 | 69 | body { 70 | font-family: var(--font-inter), sans-serif; 71 | } 72 | 73 | h1, 74 | h2, 75 | h3, 76 | h4, 77 | h5, 78 | h6 { 79 | font-family: var(--font-inter), sans-serif; 80 | } 81 | 82 | @layer base { 83 | * { 84 | @apply border-border; 85 | } 86 | 87 | body { 88 | @apply bg-background text-foreground; 89 | } 90 | } 91 | 92 | /* Loading Spinner Code */ 93 | .spinner-container { 94 | display: flex; 95 | justify-content: center; 96 | align-items: center; 97 | height: 100%; 98 | } 99 | 100 | .loading-spinner { 101 | border: 4px solid rgba(0, 0, 0, 0.08); 102 | border-left-color: rgb(204, 255, 0); 103 | border-radius: 50%; 104 | width: 30px; 105 | height: 30px; 106 | animation: spin 2s linear infinite; 107 | } 108 | 109 | @keyframes spin { 110 | 0% { 111 | transform: rotate(0deg); 112 | } 113 | 114 | 100% { 115 | transform: rotate(360deg); 116 | } 117 | } -------------------------------------------------------------------------------- /05-Governor-Site/src/components/Courses.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image" 2 | 3 | const CourseData = [ 4 | { 5 | title: "Programming Fundamentals", 6 | img: "/course1.jpg" 7 | }, 8 | { 9 | title: "Web2 Using NextJs", 10 | img: "/course2.jpg" 11 | }, 12 | { 13 | title: "Earn as You Learn", 14 | img: "/course3.jpg" 15 | }, 16 | ] 17 | const newCourseData = [ 18 | { 19 | title: "Artificial Intelligence", 20 | img: "/course4.jpg" 21 | }, 22 | { 23 | title: "Web3 and Metaverse", 24 | img: "/course5.jpg" 25 | }, 26 | { 27 | title: "Cloud-Native Computing", 28 | img: "/course6.jpg" 29 | }, 30 | { 31 | title: "Ambient Computing and IoT", 32 | img: "/course7.jpg" 33 | }, 34 | { 35 | title: "Genomics and Bioinformatics", 36 | img: "/course8.jpg" 37 | }, 38 | { 39 | title: "Network Programmability", 40 | img: "/course9.jpeg" 41 | }, 42 | ] 43 | const Courses = () => { 44 | return ( 45 |
    46 |
    47 |

    Core Courses Sequence

    48 |
    49 | { 50 | CourseData.map((ele, id) => { 51 | return ( 52 |
    53 | img 54 |

    {ele.title}

    55 |
    56 | ) 57 | }) 58 | } 59 |
    60 |

    Advanced Courses

    61 |
    62 | { 63 | newCourseData.map((ele, id) => { 64 | return ( 65 |
    66 | img 67 |

    {ele.title}

    68 |
    69 | ) 70 | }) 71 | } 72 |
    73 |
    74 |
    75 | ) 76 | } 77 | 78 | export default Courses -------------------------------------------------------------------------------- /05-Governor-Site/src/components/Header.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import Image from 'next/image' 3 | import Link from 'next/link' 4 | import React, { useState } from 'react' 5 | import MenuIcon from '@mui/icons-material/Menu'; 6 | import CloseIcon from '@mui/icons-material/Close'; 7 | const Header = () => { 8 | const [isOpen, setIsOpen] = useState(false) 9 | return ( 10 |
    11 |
    12 |
    13 |
    14 | logo 15 |
    16 |
    17 |

    Tuition Free Education Program on Latest Technologies

    18 |
    19 |
    20 | 29 |
    30 |
    31 |
    32 |
    33 | logo 34 |
    35 |
    36 |

    Tuition Free Program

    37 |
    38 |
    39 | { 40 | isOpen ? setIsOpen(!isOpen)} className='cursor-pointer text-3xl' /> : setIsOpen(!isOpen)} className='cursor-pointer' /> 41 | 42 | } 43 |
    44 | { 45 | isOpen ?
    46 | 55 |
    : null 56 | } 57 |
    58 |
    59 |
    60 | ) 61 | } 62 | 63 | export default Header -------------------------------------------------------------------------------- /06-dynamic-blog/src/app/[id]/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React, { useRef, useState } from 'react'; 3 | import { Blogs, blogs } from "@/blogs/blogs"; 4 | 5 | export default function Blog(props: { params: { id: string } }) { 6 | const getBlogs = blogs.find((item: Blogs) => item.id === parseInt(props.params.id)); 7 | if (!getBlogs) { 8 | return

    Blog Not Found

    ; 9 | } 10 | 11 | const [comments, setComments] = useState([]); 12 | const getText = useRef(null); 13 | 14 | const addComment = (event: React.FormEvent) => { 15 | event.preventDefault(); 16 | if (getText.current?.value) { 17 | setComments([...comments, getText.current.value]); 18 | getText.current.value = ""; 19 | } else { 20 | alert("Please Write Comment Before Add...") 21 | } 22 | } 23 | 24 | const deleteComment = (index: number) => { 25 | setComments(comments.filter((_: string, i: number) => i !== index)); 26 | } 27 | 28 | return ( 29 |
    30 |
    31 |

    {getBlogs.title}

    32 |

    By {getBlogs.author} on {getBlogs.date}

    33 |
    34 |

    {getBlogs.content}

    35 |
    36 |
    37 | 38 | {/* Comment Form */} 39 |
    40 |

    Add a Comment

    41 |
    42 | 76 |
    77 | 83 | 84 |
    85 |
    86 |
    87 |

    88 | ); 89 | }; 90 | 91 | export default Contact; 92 | -------------------------------------------------------------------------------- /03-Meme-Maker/src/app/creatememe/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import Image from 'next/image'; 3 | import React, { use, useState } from 'react'; 4 | import { saveAs } from 'file-saver'; 5 | 6 | interface Meme { 7 | name: string; 8 | id: string; 9 | url: string; 10 | box_count: number; 11 | } 12 | 13 | const CreateMeme = ({ searchParams }: { searchParams: Meme }) => { 14 | const [generatedMemeImage, setGeneratedMemeImage] = useState(null); 15 | const [inputTexts, setInputTexts] = useState<{ [key: string]: string }>({}); 16 | const [loading, setLoading] = useState(false); 17 | const userName: string = "umarprogrammer19"; 18 | const password: string = "Ugsofficial190807" 19 | 20 | const handleInputChange = (index: number, value: string) => { 21 | setInputTexts(prev => ({ ...prev, [`text_${index}`]: value })); 22 | }; 23 | 24 | const generateMeme = async (event: React.FormEvent) => { 25 | event.preventDefault(); 26 | setLoading(true); 27 | 28 | const filledInputs = Object.values(inputTexts).filter(text => text.trim() !== ''); 29 | const boxesParams = filledInputs.map((text, index) => `boxes[${index}][text]=${encodeURIComponent(text)}`).join('&'); 30 | const apiUrl = `https://api.imgflip.com/caption_image?template_id=${searchParams.id}&username=${userName}&password=${password}&${boxesParams}`; 31 | 32 | try { 33 | const response = await fetch(apiUrl); 34 | const data = await response.json(); 35 | 36 | if (data.success) { 37 | setGeneratedMemeImage(data.data.url); 38 | setInputTexts({}); 39 | } else { 40 | alert('Error generating meme: ' + data.error_message); 41 | } 42 | } catch (error) { 43 | alert('Error generating meme: ' + (error as Error).message); 44 | } finally { 45 | setLoading(false); 46 | } 47 | }; 48 | 49 | const gettingNumberOfInput = (): JSX.Element[] => { 50 | const inputs: JSX.Element[] = []; 51 | for (let i = 0; i < searchParams.box_count; i++) { 52 | inputs.push( 53 | handleInputChange(i, e.target.value)} 59 | className="w-full p-3 my-2 rounded-md border border-gray-600 bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-400 transition duration-300" 60 | /> 61 | ); 62 | } 63 | return inputs; 64 | }; 65 | 66 | const handleDownload = () => { 67 | if (generatedMemeImage) { 68 | saveAs(generatedMemeImage, 'meme.png'); 69 | } 70 | }; 71 | 72 | return ( 73 |
    74 |

    75 | Create Your Meme 76 |

    77 |
    78 | {/* Meme Template Card */} 79 |
    80 | Meme Template 81 |
    82 | {gettingNumberOfInput()} 83 | 90 |
    91 |
    92 | 93 | {/* Generated Meme Card */} 94 | {generatedMemeImage && ( 95 |
    96 | Generated Meme 97 | 103 |
    104 | )} 105 |
    106 |
    107 | ); 108 | }; 109 | 110 | export default CreateMeme; 111 | -------------------------------------------------------------------------------- /02-E-Commerce/src/components/ContactUs.tsx: -------------------------------------------------------------------------------- 1 | const ContactUs = () => { 2 | return ( 3 |
    4 |
    5 |

    Contact Us

    6 |

    7 | Feel free to reach out to us by using the form below or contact us directly. 8 |

    9 | 10 |
    11 | {/* Contact Details */} 12 |
    13 |

    Contact Information

    14 |

    15 | Feel free to contact us using the following details: 16 |

    17 | 37 |
    38 | 39 | {/* Contact Form */} 40 |
    41 |

    Send Us a Message

    42 |
    43 |
    44 | 47 | 54 |
    55 | 56 |
    57 | 60 | 67 |
    68 | 69 |
    70 | 73 |