├── README.md
├── app
    ├── about
    │   ├── loading.tsx
    │   └── page.tsx
    ├── blog
    │   └── page.tsx
    ├── blogpost
    │   └── [slug]
    │   │   └── page.tsx
    ├── contact
    │   └── page.tsx
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    └── page.tsx
├── components.json
├── components
    ├── MaxWidthWrapper.tsx
    ├── NavBar.tsx
    ├── Onthispage.tsx
    ├── mobile-nav.tsx
    ├── theme-provider.tsx
    ├── theme-toggle.tsx
    └── ui
    │   ├── button.tsx
    │   ├── dropdown-menu.tsx
    │   └── sheet.tsx
├── config
    ├── sampleblogs.ts
    └── site.ts
├── content
    ├── c-programming-tutorial.md
    ├── chatgpt-vs-gemini.md
    ├── cpp-programming-tutorial.md
    ├── css-tutorial.md
    ├── cybersecurity-roadmap.md
    ├── dsa-vs-development.md
    ├── html-tutorial.md
    ├── java-programming-tutorial.md
    ├── javascript-tutorial.md
    ├── js-tutorial.md
    ├── mern-vs-mean.md
    ├── python-tutorial.md
    ├── top-5-programming-languages.md
    ├── typescript-tutorial.md
    └── ultimate-python-tutorial.md
├── lib
    └── utils.ts
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── public
    ├── 1.jpg
    ├── 2.jpg
    ├── 3.jpg
    ├── 4.jpg
    ├── blogimg.jpg
    ├── images
    │   ├── coding.jpeg
    │   └── cpp.png
    ├── logo.jpg
    ├── next.svg
    └── vercel.svg
├── tailwind.config.ts
└── tsconfig.json


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


--------------------------------------------------------------------------------
/app/about/loading.tsx:
--------------------------------------------------------------------------------
1 | export default function Loading() {
2 |     // Or a custom loading skeleton component
3 |     return <p>Loading...</p>
4 |   }


--------------------------------------------------------------------------------
/app/about/page.tsx:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image';
 2 | 
 3 | export default function About() {
 4 |   return (
 5 |     <div>
 6 |       <div className="flex flex-col items-center justify-center py-32 bg-gray-100 ">
 7 |         <div className="w-full max-w-4xl p-8 bg-white shadow-lg rounded-lg">
 8 |           <div className="flex flex-col md:flex-row">
 9 |             <div className="w-full md:w-1/3 flex justify-center items-center mb-8 md:mb-0">
10 |               <div className="relative w-48 h-48 rounded-full overflow-hidden">
11 |                 <Image
12 |                   src="/logo.jpg"
13 |                   alt="Profile"
14 |                   layout="fill"
15 |                   objectFit="cover"
16 |                   className="rounded-full"
17 |                 />
18 |               </div>
19 |             </div>
20 |             <div className="w-full md:w-2/3 flex flex-col justify-center">
21 |               <h1 className="text-4xl font-bold text-gray-800 mb-4">About Me</h1>
22 |               <p className="text-gray-600 text-lg mb-4">
23 |                 Hello! I'm Harry, a passionate software developer and tech enthusiast. I created this blog to share my experiences, tips, and tutorials on various programming languages and technologies. I believe that learning should be a continuous journey, and I'm here to help others on their path to mastering the art of coding.
24 |               </p>
25 |               <p className="text-gray-600 text-lg">
26 |                 Whether you're just starting out or looking to sharpen your skills, you'll find a variety of resources and insights here. Let's explore the world of programming together!
27 |               </p>
28 |             </div>
29 |           </div>
30 |         </div>
31 |       </div>
32 | 
33 |       <section className="py-16 bg-gray-50">
34 |         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
35 |           <div className="text-center mb-12">
36 |             <h2 className="text-3xl font-extrabold text-gray-900">Harry's Journey as a Coder</h2>
37 |             <p className="mt-4 text-lg text-gray-600">
38 |               From curious beginner to seasoned developer, here's how Harry navigated the world of programming.
39 |             </p>
40 |           </div>
41 |           <div className="space-y-12">
42 |             <div className="flex flex-col md:flex-row items-center">
43 |               <div className="md:w-1/3">
44 |                 <img src="/3.jpg" alt="Harry as a beginner" className="w-full rounded-lg shadow-lg" />
45 |               </div>
46 |               <div className="md:w-2/3 md:pl-8 mt-8 md:mt-0">
47 |                 <h3 className="text-2xl font-bold text-gray-800">The Spark of Curiosity</h3>
48 |                 <p className="mt-4 text-gray-600">
49 |                   Harry’s coding journey began in high school when he stumbled upon his first programming language—Python. What started as a simple curiosity quickly turned into a passion, as Harry spent countless hours experimenting with code, building small projects, and learning the fundamentals of software development.
50 |                 </p>
51 |               </div>
52 |             </div>
53 | 
54 |             <div className="flex flex-col md:flex-row-reverse items-center">
55 |               <div className="md:w-1/3">
56 |                 <img src="/2.jpg" alt="Harry learning new skills" className="w-full rounded-lg shadow-lg" />
57 |               </div>
58 |               <div className="md:w-2/3 md:pr-8 mt-8 md:mt-0">
59 |                 <h3 className="text-2xl font-bold text-gray-800">Diving Deeper</h3>
60 |                 <p className="mt-4 text-gray-600">
61 |                   After mastering the basics, Harry’s thirst for knowledge grew. He began exploring more complex topics such as data structures, algorithms, and web development. Enrolling in online courses and attending coding bootcamps, Harry quickly expanded his skill set, taking on freelance projects to apply his knowledge in real-world scenarios.
62 |                 </p>
63 |               </div>
64 |             </div>
65 | 
66 |             <div className="flex flex-col md:flex-row items-center">
67 |               <div className="md:w-1/3">
68 |                 <img src="/1.jpg" alt="Harry working on a big project" className="w-full rounded-lg shadow-lg" />
69 |               </div>
70 |               <div className="md:w-2/3 md:pl-8 mt-8 md:mt-0">
71 |                 <h3 className="text-2xl font-bold text-gray-800">Taking on Challenges</h3>
72 |                 <p className="mt-4 text-gray-600">
73 |                   With several years of experience under his belt, Harry began tackling more significant challenges. From contributing to open-source projects to developing his own applications, Harry continued to push his limits, always looking for opportunities to learn and grow. His journey wasn’t without its setbacks, but each obstacle was a stepping stone to becoming the skilled developer he is today.
74 |                 </p>
75 |               </div>
76 |             </div>
77 | 
78 |             <div className="flex flex-col md:flex-row-reverse items-center">
79 |               <div className="md:w-1/3">
80 |                 <img src="/4.jpg" alt="Harry mentoring others" className="w-full rounded-lg shadow-lg" />
81 |               </div>
82 |               <div className="md:w-2/3 md:pr-8 mt-8 md:mt-0">
83 |                 <h3 className="text-2xl font-bold text-gray-800">Giving Back</h3>
84 |                 <p className="mt-4 text-gray-600">
85 |                   Today, Harry is not only a proficient coder but also a mentor to others. He regularly contributes to the programming community by writing tutorials, giving talks, and helping new coders find their footing in the world of software development. For Harry, coding is more than just a profession—it’s a lifelong journey of learning and sharing knowledge.
86 |                 </p>
87 |               </div>
88 |             </div>
89 |           </div>
90 |         </div>
91 |       </section>
92 | 
93 |     </div>
94 |   );
95 | }
96 | 


--------------------------------------------------------------------------------
/app/blog/page.tsx:
--------------------------------------------------------------------------------
 1 | // import SampleBlogs from "@/config/sampleblogs";
 2 | import React from "react"; 
 3 | import { Button, buttonVariants } from "@/components/ui/button";
 4 | import fs, { readFileSync } from "fs";
 5 | import matter from "gray-matter";
 6 | import Link from "next/link";
 7 | import { Metadata } from "next";
 8 | 
 9 | interface BlogType {
10 |   slug: string; 
11 |   title: string;
12 |   description: string; 
13 |   imageUrl?: string;
14 | 
15 | };
16 | 
17 | const dirContent = fs.readdirSync("content", "utf-8")
18 | console.log(dirContent)
19 | 
20 | const blogs: BlogType[] = dirContent.map(file=>{ 
21 |   const fileContent = readFileSync(`content/${file}`, "utf-8");
22 |   const {data} = matter(fileContent)
23 |   const value: BlogType = {
24 |     slug: data.slug,
25 |     title: data.title,
26 |     description: data.description,
27 |     imageUrl: data?.imageUrl
28 |   }
29 |   return value
30 | })
31 | 
32 | console.log(blogs)
33 |  
34 | 
35 | const BlogList = () => {
36 |   return (
37 |     <div className="container mx-auto p-4">
38 |       <h1 className="text-3xl font-bold mb-6 text-center my-2">Our Blogs</h1>
39 |       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
40 |         {blogs.map((blog: BlogType, index: number) =>  (
41 |           <div
42 |             key={index}
43 |             className= "shadow-lg rounded-lg overflow-hidden"
44 |           >
45 |             <img
46 |               className="w-full h-64 object-cover object-top"
47 |               src={blog.imageUrl?blog.imageUrl: "/blogimg.jpg"}
48 |               alt={blog.title}
49 |             />
50 |             <div className="p-4">
51 |               <h2 className="text-xl font-semibold mb-2">{blog.title}</h2>
52 |               <p className="mb-4">{blog.description}</p>
53 |               <Link
54 |                 href={`/blogpost/${blog.slug}`}
55 |                 className={buttonVariants({ variant:"default" })}
56 |               >
57 |                 Read More
58 |               </Link>
59 |             </div>
60 |           </div>
61 |         ))}
62 |       </div>
63 |     </div>
64 |   );
65 | };
66 | 
67 | export const metadata: Metadata = {
68 |   title: 'Blogs - ProgrammingWithHarry',
69 |   description: 'A comprehensive blog for coders of all levels, from beginners to advanced. Explore tutorials, tips, and insights on a wide range of programming languages and technologies. Stay up-to-date with the latest trends in software development, learn best practices, and enhance your coding skills with in-depth articles and guides.',
70 | }
71 |  
72 | 
73 | export default BlogList;
74 | 


--------------------------------------------------------------------------------
/app/blogpost/[slug]/page.tsx:
--------------------------------------------------------------------------------
 1 | import MaxWidthWrapper from '@/components/MaxWidthWrapper'
 2 | import React from 'react'
 3 | import { unified } from "unified"
 4 | import remarkParse from "remark-parse"
 5 | import remarkFrontmatter from "remark-frontmatter" 
 6 | import remarkRehype from "remark-rehype"
 7 | import rehypeSlug from 'rehype-slug'
 8 | import rehypeStringify from "rehype-stringify"
 9 | import rehypeHighlight from "rehype-highlight"
10 | import matter from "gray-matter"
11 | import fs from "fs"
12 | import Onthispage from '@/components/Onthispage'
13 | import rehypeAutolinkHeadings from 'rehype-autolink-headings'
14 | import { rehypePrettyCode } from 'rehype-pretty-code'
15 | import { transformerCopyButton } from '@rehype-pretty/transformers'
16 | import { Metadata, ResolvingMetadata } from 'next' 
17 | 
18 |  
19 | type Props = {
20 |   params: { slug: string, title: string, description: string }
21 |   searchParams: { [key: string]: string | string[] | undefined }
22 | }
23 | 
24 | // https://ondrejsevcik.com/blog/building-perfect-markdown-processor-for-my-blog
25 | 
26 | 
27 | export default async function BlogPage({ params }: { params: { slug: string } }) {
28 |   const processor = unified()
29 |   .use(remarkParse)
30 |   .use(remarkRehype) 
31 |   .use(rehypeStringify) 
32 |   .use(rehypeSlug)
33 |   .use(rehypePrettyCode, {
34 |     theme: "github-dark",
35 |     transformers: [
36 |       transformerCopyButton({
37 |         visibility: 'always',
38 |         feedbackDuration: 3_000,
39 |       }),
40 |     ],
41 |   },
42 | )
43 |   .use(rehypeAutolinkHeadings)
44 | 
45 | 
46 | const filePath = `content/${params.slug}.md`
47 | const fileContent = fs.readFileSync(filePath, "utf-8");
48 | const {data, content} = matter(fileContent)
49 | 
50 | const htmlContent = (await processor.process(content)).toString()
51 |   return (
52 |    <MaxWidthWrapper className='prose dark:prose-invert'> 
53 |    <div className='flex '> 
54 |     <div className='px-16'> 
55 |         <h1>{data.title}</h1>
56 |         <div dangerouslySetInnerHTML={{__html: htmlContent}}></div> 
57 |     </div>
58 |         <Onthispage className="text-sm w-[50%]" htmlContent={htmlContent}/>
59 |    </div>
60 |  
61 |    </MaxWidthWrapper>
62 |   )
63 | }  
64 | 
65 | 
66 | export async function generateMetadata(
67 |   { params, searchParams }: Props,
68 |   parent: ResolvingMetadata
69 | ): Promise<Metadata> {
70 |   // read route params 
71 |   const filePath = `content/${params.slug}.md`
72 |   const fileContent = fs.readFileSync(filePath, "utf-8");
73 |   const {data} = matter(fileContent)
74 |   return {
75 |     title: `${data.title} - ProgrammingWithHarry`, 
76 |     description: data.description
77 |   }
78 | 
79 | }


--------------------------------------------------------------------------------
/app/contact/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from '@/components/ui/button';
 2 | import React from 'react';
 3 | 
 4 | const Contact = () => {
 5 |   return (
 6 |     <section className="text-gray-600 body-font relative">
 7 |       <div className="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
 8 |         <div className="lg:w-2/3 md:w-1/2 bg-gray-800 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
 9 |           <iframe
10 |             width="100%"
11 |             height="100%"
12 |             className="absolute inset-0" 
13 |             title="map"  
14 |             src="https://maps.google.com/maps?width=100%&height=600&hl=en&q=%C4%B0zmir+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&output=embed"
15 |             style={{ filter: 'grayscale(1) contrast(1.2) opacity(0.4)' }}
16 |           ></iframe>
17 |           <div className="bg-white relative flex flex-wrap py-6 rounded shadow-md">
18 |             <div className="lg:w-1/2 px-6">
19 |               <h2 className="title-font font-semibold text-gray-900 tracking-widest text-xs">ADDRESS</h2>
20 |               <p className="mt-1 text-gray-700">Silicon Valley, CA, USA</p>
21 |             </div>
22 |             <div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
23 |               <h2 className="title-font font-semibold text-gray-900 tracking-widest text-xs">EMAIL</h2>
24 |               <a className="text-gray-500 leading-relaxed">example@coderblog.com</a>
25 |               <h2 className="title-font font-semibold text-gray-900 tracking-widest text-xs mt-4">PHONE</h2>
26 |               <p className="leading-relaxed text-gray-700">123-456-7890</p>
27 |             </div>
28 |           </div>
29 |         </div>
30 |         <div className="lg:w-1/3 md:w-1/2 bg-white flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
31 |           <h2 className="text-gray-900 text-lg mb-1 font-medium title-font">Get In Touch</h2>
32 |           <p className="leading-relaxed mb-5 text-gray-600">
33 |             Have questions, feedback, or want to collaborate? Drop a message below!
34 |           </p>
35 |           <div className="relative mb-4">
36 |             <label htmlFor="name" className="leading-7 text-sm text-gray-600">Name</label>
37 |             <input
38 |               type="text"
39 |               id="name"
40 |               name="name"
41 |               className="w-full bg-gray-100 rounded border border-gray-300 focus:border-gray-500 focus:ring-2 focus:ring-gray-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
42 |             />
43 |           </div>
44 |           <div className="relative mb-4">
45 |             <label htmlFor="email" className="leading-7 text-sm text-gray-600">Email</label>
46 |             <input
47 |               type="email"
48 |               id="email"
49 |               name="email"
50 |               className="w-full bg-gray-100 rounded border border-gray-300 focus:border-gray-500 focus:ring-2 focus:ring-gray-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
51 |             />
52 |           </div>
53 |           <div className="relative mb-4">
54 |             <label htmlFor="message" className="leading-7 text-sm text-gray-600">Message</label>
55 |             <textarea
56 |               id="message"
57 |               name="message"
58 |               className="w-full bg-gray-100 rounded border border-gray-300 focus:border-gray-500 focus:ring-2 focus:ring-gray-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
59 |             ></textarea>
60 |           </div>
61 |           <Button>
62 | 
63 |             Send Message
64 |           </Button> 
65 |           <p className="text-xs text-gray-500 mt-3">
66 |             Your privacy is important to us. We won't share your details with anyone.
67 |           </p>
68 |         </div>
69 |       </div>
70 |     </section>
71 |   );
72 | };
73 | 
74 | export default Contact;
75 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingWithHarry/awesome-blog-nextjs/0f8bc214b2db9800c335b4c657fb23b20fedacba/app/favicon.ico


--------------------------------------------------------------------------------
/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 |     --card: 0 0% 100%;
 10 |     --card-foreground: 222.2 84% 4.9%;
 11 |     --popover: 0 0% 100%;
 12 |     --popover-foreground: 222.2 84% 4.9%;
 13 |     --primary: 222.2 47.4% 11.2%;
 14 |     --primary-foreground: 210 40% 98%;
 15 |     --secondary: 210 40% 96.1%;
 16 |     --secondary-foreground: 222.2 47.4% 11.2%;
 17 |     --muted: 210 40% 96.1%;
 18 |     --muted-foreground: 215.4 16.3% 46.9%;
 19 |     --accent: 210 40% 96.1%;
 20 |     --accent-foreground: 222.2 47.4% 11.2%;
 21 |     --destructive: 0 84.2% 60.2%;
 22 |     --destructive-foreground: 210 40% 98%;
 23 |     --border: 214.3 31.8% 91.4%;
 24 |     --input: 214.3 31.8% 91.4%;
 25 |     --ring: 222.2 84% 4.9%;
 26 |     --radius: 0.5rem;
 27 |     --chart-1: 12 76% 61%;
 28 |     --chart-2: 173 58% 39%;
 29 |     --chart-3: 197 37% 24%;
 30 |     --chart-4: 43 74% 66%;
 31 |     --chart-5: 27 87% 67%;
 32 |   }
 33 | 
 34 |   .dark {
 35 |     --background: 222.2 84% 4.9%;
 36 |     --foreground: 210 40% 98%;
 37 |     --card: 222.2 84% 4.9%;
 38 |     --card-foreground: 210 40% 98%;
 39 |     --popover: 222.2 84% 4.9%;
 40 |     --popover-foreground: 210 40% 98%;
 41 |     --primary: 210 40% 98%;
 42 |     --primary-foreground: 222.2 47.4% 11.2%;
 43 |     --secondary: 217.2 32.6% 17.5%;
 44 |     --secondary-foreground: 210 40% 98%;
 45 |     --muted: 217.2 32.6% 17.5%;
 46 |     --muted-foreground: 215 20.2% 65.1%;
 47 |     --accent: 217.2 32.6% 17.5%;
 48 |     --accent-foreground: 210 40% 98%;
 49 |     --destructive: 0 62.8% 30.6%;
 50 |     --destructive-foreground: 210 40% 98%;
 51 |     --border: 217.2 32.6% 17.5%;
 52 |     --input: 217.2 32.6% 17.5%;
 53 |     --ring: 212.7 26.8% 83.9%;
 54 |     --chart-1: 220 70% 50%;
 55 |     --chart-2: 160 60% 45%;
 56 |     --chart-3: 30 80% 55%;
 57 |     --chart-4: 280 65% 60%;
 58 |     --chart-5: 340 75% 55%;
 59 |   }
 60 | }
 61 | 
 62 | @layer base {
 63 |   * {
 64 |     @apply border-border;
 65 |   }
 66 |   body {
 67 |     @apply bg-background text-foreground;
 68 |   }
 69 | }
 70 | 
 71 | code {
 72 |   counter-reset: line;
 73 | }
 74 | 
 75 | code > [data-line]::before {
 76 |   counter-increment: line;
 77 |   content: counter(line);
 78 | 
 79 |   /* Other styling */
 80 |   display: inline-block;
 81 |   width: 1rem;
 82 |   margin-right: 2rem;
 83 |   text-align: right;
 84 |   color: gray;
 85 | }
 86 | 
 87 | code[data-line-numbers-max-digits="2"] > [data-line]::before {
 88 |   width: 2rem;
 89 | }
 90 | 
 91 | code[data-line-numbers-max-digits="3"] > [data-line]::before {
 92 |   width: 3rem;
 93 | }
 94 | 
 95 | [data-highlighted-line] {
 96 |   background: #c8c8ff1a;
 97 |   --tw-border-opacity: 1;
 98 |   border-left-color: rgb(96 165 250 / var(--tw-border-opacity));
 99 | }
100 | 
101 | [data-highlighted-chars]{
102 |   background-color: rgb(160, 160, 144);
103 | }


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Inter as FontSans } from "next/font/google"
 3 | import "./globals.css";
 4 | import { cn } from "@/lib/utils";
 5 | import SiteConfig from "@/config/site";
 6 | import NavBar from "@/components/NavBar";
 7 | import { ThemeProvider } from "@/components/theme-provider"
 8 | 
 9 | const fontSans = FontSans({
10 |   subsets: ["latin"],
11 |   variable: "--font-sans",
12 | })
13 | 
14 | export const metadata: Metadata = {
15 |   title: SiteConfig.title,
16 |   description: SiteConfig.description,
17 | };
18 | 
19 | export default function RootLayout({
20 |   children,
21 | }: Readonly<{
22 |   children: React.ReactNode;
23 | }>) {
24 |   return (
25 |     <html lang="en" className="scroll-p-20 scroll-smooth">
26 |       <body
27 |         className={cn(
28 |           "min-h-screen bg-background font-sans antialiased",
29 |           fontSans.variable
30 |         )}
31 |       >
32 |         <ThemeProvider
33 |           attribute="class"
34 |           defaultTheme="light"
35 |           enableSystem
36 |           disableTransitionOnChange
37 |         >
38 |           <NavBar />
39 |           {children}
40 |         </ThemeProvider>
41 |       </body>
42 |     </html>
43 |   );
44 | }
45 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | import Image from "next/image";
  3 | import { useEffect, useRef } from "react";
  4 | import Typed from 'typed.js';
  5 | 
  6 | export default function Home() {
  7 |   const el = useRef(null);
  8 | 
  9 |   useEffect(() => {
 10 |     const typed = new Typed(el.current, {
 11 |       strings: ['<i>Tailwind</i> CSS.', '&amp; React', 'Typescript'],
 12 |       typeSpeed: 50,
 13 |     });
 14 | 
 15 |     return () => {
 16 |       // Destroy Typed instance during cleanup to stop animation
 17 |       typed.destroy();
 18 |     };
 19 |   }, []);
 20 | 
 21 | 
 22 |   return (
 23 |     <main>
 24 |       <section className="container px-4 py-10 mx-auto lg:h-128 lg:space-x-8 lg:flex lg:items-center"><div className="w-full text-center lg:text-left lg:w-1/2 lg:-mt-8"><h1 className="text-3xl leading-snug text-gray-800 dark:text-gray-200 md:text-4xl">
 25 |         A <span className="font-semibold">tech blog</span> for community <br className="hidden lg:block" /> components using <span className="font-semibold underline decoration-primary"><span ref={el} /></span></h1> <p className="mt-4 text-lg text-gray-500 dark:text-gray-300">Open source blog and templates to <br className="hidden lg:block" /> bootstrap your new apps, projects or landing sites!</p> <div className="mt-6 bg-transparent border rounded-lg dark:border-gray-700 lg:w-2/3 focus-within:border-primary focus-within:ring focus-within:ring-primary dark:focus-within:border-primary focus-within:ring-opacity-20"><form action="https://www.creative-tim.com/twcomponents/search" className="flex flex-wrap justify-between md:flex-row">
 26 | 
 27 |           <input type="search" name="query" placeholder="Search Components" required={true} className="flex-1 h-10 px-4 m-1 text-gray-700 placeholder-gray-400 bg-transparent border-none appearance-none lg:h-12 dark:text-gray-200 focus:outline-none focus:placeholder-transparent focus:ring-0" />
 28 | 
 29 |           <button type="submit" className="flex items-center dark:bg-gray-800 justify-center w-full p-2 m-1 text-white transition-colors duration-300 transform rounded-lg lg:w-12 lg:h-12 lg:p-0 bg-primary hover:bg-primary/70 focus:outline-none focus:bg-primary/70"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" className="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></button></form></div></div> <div className="w-full mt-4 lg:mt-0 lg:w-1/2"><img src="https://www.creative-tim.com/twcomponents/svg/website-designer-bro-purple.svg" alt="tailwind css components" className="w-full h-full max-w-md mx-auto" /></div>
 30 |       </section>
 31 | 
 32 | 
 33 |       <section className="text-gray-600 dark:text-gray-50 body-font">
 34 |         <div className="container px-5 py-24 mx-auto">
 35 |           <h2 className="text-4xl pb-8 mb-4 font-bold  text-center">About Our Services</h2>
 36 |           <div className="flex flex-wrap -m-4">
 37 |             <div className="p-4 lg:w-1/3">
 38 |               <div className="h-full bg-gray-200 dark:bg-gray-900 bg-opacity-75 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative shadow-lg">
 39 |                 <h2 className="tracking-widest text-xs title-font font-medium  mb-1">WEB DEVELOPMENT</h2>
 40 |                 <h1 className="title-font sm:text-2xl text-xl font-medium text-gray-900 dark:text-white mb-3">Full-Stack Solutions</h1>
 41 |                 <p className="leading-relaxed mb-3 text-gray-700 dark:text-gray-50  ">
 42 |                   Building robust, scalable, and responsive web applications using modern tech stacks like React, Node.js, and more.
 43 |                 </p>
 44 |                 <a className=" inline-flex items-center hover:text-indigo-700">Learn More
 45 |                   <svg className="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round">
 46 |                     <path d="M5 12h14"></path>
 47 |                     <path d="M12 5l7 7-7 7"></path>
 48 |                   </svg>
 49 |                 </a>
 50 |                 <div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
 51 |                   <span className="text-gray-400 dark:text-gray-500 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
 52 |                     <svg className="w-4 h-4 mr-1" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
 53 |                       <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
 54 |                       <circle cx="12" cy="12" r="3"></circle>
 55 |                     </svg>2.4K Views
 56 |                   </span>
 57 |                   <span className="text-gray-400 dark:text-gray-500 inline-flex items-center leading-none text-sm">
 58 |                     <svg className="w-4 h-4 mr-1" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
 59 |                       <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
 60 |                     </svg>32 Comments
 61 |                   </span>
 62 |                 </div>
 63 |               </div>
 64 |             </div>
 65 |             <div className="p-4 lg:w-1/3">
 66 |               <div className="h-full bg-gray-200 dark:bg-gray-900 bg-opacity-75 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative shadow-lg">
 67 |                 <h2 className="tracking-widest text-xs title-font font-medium  mb-1">MOBILE DEVELOPMENT</h2>
 68 |                 <h1 className="title-font sm:text-2xl text-xl font-medium text-gray-900 dark:text-white mb-3">Cross-Platform Apps</h1>
 69 |                 <p className="leading-relaxed mb-3 text-gray-700 dark:text-gray-400">
 70 |                   Crafting seamless mobile experiences for both Android and iOS using frameworks like React Native and Flutter.
 71 |                 </p>
 72 |                 <a className=" inline-flex items-center hover:text-indigo-700">Learn More
 73 |                   <svg className="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round">
 74 |                     <path d="M5 12h14"></path>
 75 |                     <path d="M12 5l7 7-7 7"></path>
 76 |                   </svg>
 77 |                 </a>
 78 |                 <div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
 79 |                   <span className="text-gray-400 dark:text-gray-500 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
 80 |                     <svg className="w-4 h-4 mr-1" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
 81 |                       <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
 82 |                       <circle cx="12" cy="12" r="3"></circle>
 83 |                     </svg>1.8K Views
 84 |                   </span>
 85 |                   <span className="text-gray-400 dark:text-gray-500 inline-flex items-center leading-none text-sm">
 86 |                     <svg className="w-4 h-4 mr-1" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
 87 |                       <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
 88 |                     </svg>18 Comments
 89 |                   </span>
 90 |                 </div>
 91 |               </div>
 92 |             </div>
 93 |             <div className="p-4 lg:w-1/3">
 94 |               <div className="h-full bg-gray-200 dark:bg-gray-900 bg-opacity-75 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative shadow-lg">
 95 |                 <h2 className="tracking-widest text-xs title-font font-medium  mb-1">CLOUD SOLUTIONS</h2>
 96 |                 <h1 className="title-font sm:text-2xl text-xl font-medium text-gray-900 dark:text-white mb-3">Scalable Infrastructure</h1>
 97 |                 <p className="leading-relaxed mb-3 text-gray-700 dark:text-gray-400">
 98 |                   Implementing and managing cloud environments with AWS, Azure, and GCP to ensure your applications scale effortlessly.
 99 |                 </p>
100 |                 <a className=" inline-flex items-center hover:text-indigo-700">Learn More
101 |                   <svg className="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round">
102 |                     <path d="M5 12h14"></path>
103 |                     <path d="M12 5l7 7-7 7"></path>
104 |                   </svg>
105 |                 </a>
106 |                 <div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
107 |                   <span className="text-gray-400 dark:text-gray-500 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
108 |                     <svg className="w-4 h-4 mr-1" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
109 |                       <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
110 |                       <circle cx="12" cy="12" r="3"></circle>
111 |                     </svg>3.1K Views
112 |                   </span>
113 |                   <span className="text-gray-400 dark:text-gray-500 inline-flex items-center leading-none text-sm">
114 |                     <svg className="w-4 h-4 mr-1" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
115 |                       <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
116 |                     </svg>24 Comments
117 |                   </span>
118 |                 </div>
119 |               </div>
120 |             </div>
121 |           </div>
122 |         </div>
123 |       </section>
124 | 
125 |     </main>
126 |   );
127 | }
128 | 


--------------------------------------------------------------------------------
/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 |   }
17 | }


--------------------------------------------------------------------------------
/components/MaxWidthWrapper.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | interface MaxWidthProps{
 5 |     className: string
 6 |     children: React.ReactNode
 7 | }
 8 | 
 9 | const MaxWidthWrapper = ({className, children}:MaxWidthProps) => {
10 |   return (
11 |     <div className={cn('mx-auto max-w-screen-xl w-full my-12', className)}>
12 |         {children}
13 |     </div>
14 |   )
15 | }
16 | 
17 | export default MaxWidthWrapper


--------------------------------------------------------------------------------
/components/NavBar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import React, { useEffect, useState } from 'react'
 3 | import Link from 'next/link'
 4 | import { Button, buttonVariants } from "@/components/ui/button"
 5 | import { ModeToggle } from './theme-toggle'
 6 | import { HamburgerMenuIcon } from '@radix-ui/react-icons'
 7 | import {
 8 |     Sheet,
 9 |     SheetContent,
10 |     SheetDescription,
11 |     SheetHeader,
12 |     SheetTitle,
13 |     SheetTrigger,
14 | } from "@/components/ui/sheet"
15 | import LoadingBar from 'react-top-loading-bar'
16 | import { usePathname } from 'next/navigation'
17 | import MobileNav from './mobile-nav'
18 | import { Menu } from 'lucide-react'
19 | 
20 | 
21 | 
22 | const NavBar = () => {
23 |     const [progress, setProgress] = useState(0)
24 |     const pathname = usePathname();
25 |     
26 |     // This runs whenever page changes to some other page
27 |     useEffect(() => {
28 |         setProgress(30)
29 |         
30 |         setTimeout(() => { 
31 |             setProgress(70)
32 |         }, 100);
33 | 
34 |         setTimeout(() => { 
35 |             setProgress(100)
36 |         }, 800);
37 |        
38 |     }, [pathname])
39 | 
40 |     // This runs whenever page loads
41 |     useEffect(() => {
42 |         setTimeout(() => { 
43 |             setProgress(0)
44 |         }, 900);
45 |     }, [])
46 |     
47 |  
48 | 
49 |     return (
50 |         <nav className='h-16 bg-background/50 sticky top-0 border-b px-8 backdrop-blur flex items-center justify-between z-10'>
51 |             <LoadingBar
52 |                 color='#6028ff'
53 |                 progress={progress}
54 |                 onLoaderFinished={() => setProgress(0)}
55 |             />
56 |             <div className='text-lg font-bold md:text-xl'>
57 |                 <Link href={"/"}>
58 |                     ProgrammingWithHarry
59 |                 </Link>
60 |             </div>
61 |             <ul className='hidden md:flex w-full justify-end items-center space-x-4 '>
62 |                 <li><Link href={"/"}>Home</Link></li>
63 |                 <li><Link href={"/about"}>About</Link></li>
64 |                 <li><Link href={"/blog"}>Blog</Link></li>
65 |                 <li><Link href={"/contact"}>Contact</Link></li>
66 |                 <li className="buttons px-4 space-x-2">
67 |                     <Link href={"/login"} className={buttonVariants({ variant: "outline" })}>Login</Link>
68 |                     <Link href={"/login"} className={buttonVariants({ variant: "outline" })}>Sign Up</Link>
69 |                 </li>
70 | 
71 |             </ul>
72 |             <ModeToggle />
73 | 
74 |             <div className="flex items-center justify-center sm:hidden">
75 | 
76 |               <Sheet>
77 |                 <SheetTrigger><Menu /></SheetTrigger>
78 |                 <SheetContent>
79 | 
80 |                   <MobileNav />
81 | 
82 |                 </SheetContent>
83 |               </Sheet>
84 |             </div>
85 |         </nav>
86 |     )
87 | }
88 | 
89 | export default NavBar


--------------------------------------------------------------------------------
/components/Onthispage.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { cn } from '@/lib/utils'
 3 | import React, {useEffect, useState} from 'react'
 4 | 
 5 | interface LinkType{
 6 |     id: string 
 7 |     text: string
 8 | }
 9 | 
10 | const Onthispage = ({htmlContent, className}: {htmlContent: string, className: string}) => {
11 |     const [links, setLinks] = useState<null|LinkType[]>(null);
12 | 
13 |     useEffect(() => {
14 |        const temp = document.createElement("div");
15 |        temp.innerHTML = htmlContent
16 |         
17 | 
18 |        // Check this syntax 
19 |        const headings = temp.querySelectorAll('h2');
20 | 
21 |        const generatedLinks:LinkType[] = [];
22 | 
23 |        headings.forEach((heading, index)=>{
24 |         const id = heading.id || `heading-${index}`;
25 |         heading.id = id;
26 | 
27 |         
28 |         generatedLinks.push({
29 |             id: id,
30 |             text: (heading as HTMLElement).innerText
31 |         })
32 |         
33 |     })
34 | 
35 |     setLinks(generatedLinks);
36 | 
37 |     }, [htmlContent])
38 |     
39 |   return (
40 |     <div className={cn('hidden md:block ', className)}>
41 |         <div className="sticky top-20">
42 |             <h2>On This Page </h2>
43 |             <ul className='not-prose text-xs'>
44 |                 {links && links.map((link)=>{
45 |                     return <li key={link.id} className='pt-1'>
46 |                         <a href={`#${link.id}`}>{link.text.slice(0, 50)}
47 | 
48 |                         {(link.text.length > 50) ? "...": ""}
49 | 
50 | 
51 |                         </a>
52 |                     </li>
53 |                 })}
54 |             </ul>
55 |         </div>
56 | 
57 |     </div>
58 |   )
59 | }
60 | 
61 | export default Onthispage


--------------------------------------------------------------------------------
/components/mobile-nav.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'next/link'
 3 | import { Button, buttonVariants } from './ui/button'
 4 | 
 5 | const MobileNav = () => {
 6 |   return (
 7 |     <div>
 8 |         <ul className="flex flex-col gap-4">
 9 |             <li>
10 |             <Link href="/" className="hover:text-primary transition-colors font-bold">Home</Link>
11 |             </li>
12 |             <li>
13 |             <Link href="/about" className="">About</Link>
14 |             </li>
15 |             <li>
16 |             <Link href="/contact" className="">Contact</Link>
17 |             </li>
18 | 
19 |             <div className="buttons gap-2 flex text-xsm">
20 | 
21 |            
22 |             <Link className={buttonVariants({ variant: "secondary" })} href="/login">Login</Link>  
23 |                 <Link className={buttonVariants({ variant: "secondary" })} href="/login">Signup</Link> 
24 |             </div>
25 |         </ul>
26 |     </div>
27 |   )
28 | }
29 | 
30 | export default MobileNav


--------------------------------------------------------------------------------
/components/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { ThemeProvider as NextThemesProvider } from "next-themes"
 5 | import { type ThemeProviderProps } from "next-themes/dist/types"
 6 | 
 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
 8 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/theme-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
 5 | import { useTheme } from "next-themes"
 6 | 
 7 | import { Button } from "@/components/ui/button"
 8 | import {
 9 |   DropdownMenu,
10 |   DropdownMenuContent,
11 |   DropdownMenuItem,
12 |   DropdownMenuTrigger,
13 | } from "@/components/ui/dropdown-menu"
14 | 
15 | export function ModeToggle() {
16 |   const { setTheme } = useTheme()
17 | 
18 |   return (
19 |     <DropdownMenu>
20 |       <DropdownMenuTrigger asChild>
21 |         <Button variant="outline" size="icon">
22 |           <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
23 |           <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
24 |           <span className="sr-only">Toggle theme</span>
25 |         </Button>
26 |       </DropdownMenuTrigger>
27 |       <DropdownMenuContent align="end">
28 |         <DropdownMenuItem onClick={() => setTheme("light")}>
29 |           Light
30 |         </DropdownMenuItem>
31 |         <DropdownMenuItem onClick={() => setTheme("dark")}>
32 |           Dark
33 |         </DropdownMenuItem>
34 |         <DropdownMenuItem onClick={() => setTheme("system")}>
35 |           System
36 |         </DropdownMenuItem>
37 |       </DropdownMenuContent>
38 |     </DropdownMenu>
39 |   )
40 | }
41 | 


--------------------------------------------------------------------------------
/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<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  5 | import { Check, ChevronRight, Circle } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const DropdownMenu = DropdownMenuPrimitive.Root
 10 | 
 11 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 12 | 
 13 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 14 | 
 15 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 16 | 
 17 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 18 | 
 19 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 20 | 
 21 | const DropdownMenuSubTrigger = React.forwardRef<
 22 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 23 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 24 |     inset?: boolean
 25 |   }
 26 | >(({ className, inset, children, ...props }, ref) => (
 27 |   <DropdownMenuPrimitive.SubTrigger
 28 |     ref={ref}
 29 |     className={cn(
 30 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 31 |       inset && "pl-8",
 32 |       className
 33 |     )}
 34 |     {...props}
 35 |   >
 36 |     {children}
 37 |     <ChevronRight className="ml-auto h-4 w-4" />
 38 |   </DropdownMenuPrimitive.SubTrigger>
 39 | ))
 40 | DropdownMenuSubTrigger.displayName =
 41 |   DropdownMenuPrimitive.SubTrigger.displayName
 42 | 
 43 | const DropdownMenuSubContent = React.forwardRef<
 44 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 45 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 46 | >(({ className, ...props }, ref) => (
 47 |   <DropdownMenuPrimitive.SubContent
 48 |     ref={ref}
 49 |     className={cn(
 50 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 51 |       className
 52 |     )}
 53 |     {...props}
 54 |   />
 55 | ))
 56 | DropdownMenuSubContent.displayName =
 57 |   DropdownMenuPrimitive.SubContent.displayName
 58 | 
 59 | const DropdownMenuContent = React.forwardRef<
 60 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 61 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 62 | >(({ className, sideOffset = 4, ...props }, ref) => (
 63 |   <DropdownMenuPrimitive.Portal>
 64 |     <DropdownMenuPrimitive.Content
 65 |       ref={ref}
 66 |       sideOffset={sideOffset}
 67 |       className={cn(
 68 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 69 |         className
 70 |       )}
 71 |       {...props}
 72 |     />
 73 |   </DropdownMenuPrimitive.Portal>
 74 | ))
 75 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 76 | 
 77 | const DropdownMenuItem = React.forwardRef<
 78 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 79 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 80 |     inset?: boolean
 81 |   }
 82 | >(({ className, inset, ...props }, ref) => (
 83 |   <DropdownMenuPrimitive.Item
 84 |     ref={ref}
 85 |     className={cn(
 86 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 87 |       inset && "pl-8",
 88 |       className
 89 |     )}
 90 |     {...props}
 91 |   />
 92 | ))
 93 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 94 | 
 95 | const DropdownMenuCheckboxItem = React.forwardRef<
 96 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 97 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 98 | >(({ className, children, checked, ...props }, ref) => (
 99 |   <DropdownMenuPrimitive.CheckboxItem
100 |     ref={ref}
101 |     className={cn(
102 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
103 |       className
104 |     )}
105 |     checked={checked}
106 |     {...props}
107 |   >
108 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
109 |       <DropdownMenuPrimitive.ItemIndicator>
110 |         <Check className="h-4 w-4" />
111 |       </DropdownMenuPrimitive.ItemIndicator>
112 |     </span>
113 |     {children}
114 |   </DropdownMenuPrimitive.CheckboxItem>
115 | ))
116 | DropdownMenuCheckboxItem.displayName =
117 |   DropdownMenuPrimitive.CheckboxItem.displayName
118 | 
119 | const DropdownMenuRadioItem = React.forwardRef<
120 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
121 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
122 | >(({ className, children, ...props }, ref) => (
123 |   <DropdownMenuPrimitive.RadioItem
124 |     ref={ref}
125 |     className={cn(
126 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
127 |       className
128 |     )}
129 |     {...props}
130 |   >
131 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
132 |       <DropdownMenuPrimitive.ItemIndicator>
133 |         <Circle className="h-2 w-2 fill-current" />
134 |       </DropdownMenuPrimitive.ItemIndicator>
135 |     </span>
136 |     {children}
137 |   </DropdownMenuPrimitive.RadioItem>
138 | ))
139 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
140 | 
141 | const DropdownMenuLabel = React.forwardRef<
142 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
143 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
144 |     inset?: boolean
145 |   }
146 | >(({ className, inset, ...props }, ref) => (
147 |   <DropdownMenuPrimitive.Label
148 |     ref={ref}
149 |     className={cn(
150 |       "px-2 py-1.5 text-sm font-semibold",
151 |       inset && "pl-8",
152 |       className
153 |     )}
154 |     {...props}
155 |   />
156 | ))
157 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
158 | 
159 | const DropdownMenuSeparator = React.forwardRef<
160 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
161 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
162 | >(({ className, ...props }, ref) => (
163 |   <DropdownMenuPrimitive.Separator
164 |     ref={ref}
165 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
166 |     {...props}
167 |   />
168 | ))
169 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
170 | 
171 | const DropdownMenuShortcut = ({
172 |   className,
173 |   ...props
174 | }: React.HTMLAttributes<HTMLSpanElement>) => {
175 |   return (
176 |     <span
177 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
178 |       {...props}
179 |     />
180 |   )
181 | }
182 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
183 | 
184 | export {
185 |   DropdownMenu,
186 |   DropdownMenuTrigger,
187 |   DropdownMenuContent,
188 |   DropdownMenuItem,
189 |   DropdownMenuCheckboxItem,
190 |   DropdownMenuRadioItem,
191 |   DropdownMenuLabel,
192 |   DropdownMenuSeparator,
193 |   DropdownMenuShortcut,
194 |   DropdownMenuGroup,
195 |   DropdownMenuPortal,
196 |   DropdownMenuSub,
197 |   DropdownMenuSubContent,
198 |   DropdownMenuSubTrigger,
199 |   DropdownMenuRadioGroup,
200 | }
201 | 


--------------------------------------------------------------------------------
/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SheetPrimitive from "@radix-ui/react-dialog"
  5 | import { cva, type VariantProps } from "class-variance-authority"
  6 | import { X } from "lucide-react"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | 
 10 | const Sheet = SheetPrimitive.Root
 11 | 
 12 | const SheetTrigger = SheetPrimitive.Trigger
 13 | 
 14 | const SheetClose = SheetPrimitive.Close
 15 | 
 16 | const SheetPortal = SheetPrimitive.Portal
 17 | 
 18 | const SheetOverlay = React.forwardRef<
 19 |   React.ElementRef<typeof SheetPrimitive.Overlay>,
 20 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 21 | >(({ className, ...props }, ref) => (
 22 |   <SheetPrimitive.Overlay
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |     ref={ref}
 29 |   />
 30 | ))
 31 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 32 | 
 33 | const sheetVariants = cva(
 34 |   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 35 |   {
 36 |     variants: {
 37 |       side: {
 38 |         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 39 |         bottom:
 40 |           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
 41 |         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
 42 |         right:
 43 |           "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
 44 |       },
 45 |     },
 46 |     defaultVariants: {
 47 |       side: "right",
 48 |     },
 49 |   }
 50 | )
 51 | 
 52 | interface SheetContentProps
 53 |   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 54 |     VariantProps<typeof sheetVariants> {}
 55 | 
 56 | const SheetContent = React.forwardRef<
 57 |   React.ElementRef<typeof SheetPrimitive.Content>,
 58 |   SheetContentProps
 59 | >(({ side = "right", className, children, ...props }, ref) => (
 60 |   <SheetPortal>
 61 |     <SheetOverlay />
 62 |     <SheetPrimitive.Content
 63 |       ref={ref}
 64 |       className={cn(sheetVariants({ side }), className)}
 65 |       {...props}
 66 |     >
 67 |       {children}
 68 |       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
 69 |         <X className="h-4 w-4" />
 70 |         <span className="sr-only">Close</span>
 71 |       </SheetPrimitive.Close>
 72 |     </SheetPrimitive.Content>
 73 |   </SheetPortal>
 74 | ))
 75 | SheetContent.displayName = SheetPrimitive.Content.displayName
 76 | 
 77 | const SheetHeader = ({
 78 |   className,
 79 |   ...props
 80 | }: React.HTMLAttributes<HTMLDivElement>) => (
 81 |   <div
 82 |     className={cn(
 83 |       "flex flex-col space-y-2 text-center sm:text-left",
 84 |       className
 85 |     )}
 86 |     {...props}
 87 |   />
 88 | )
 89 | SheetHeader.displayName = "SheetHeader"
 90 | 
 91 | const SheetFooter = ({
 92 |   className,
 93 |   ...props
 94 | }: React.HTMLAttributes<HTMLDivElement>) => (
 95 |   <div
 96 |     className={cn(
 97 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 98 |       className
 99 |     )}
100 |     {...props}
101 |   />
102 | )
103 | SheetFooter.displayName = "SheetFooter"
104 | 
105 | const SheetTitle = React.forwardRef<
106 |   React.ElementRef<typeof SheetPrimitive.Title>,
107 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
108 | >(({ className, ...props }, ref) => (
109 |   <SheetPrimitive.Title
110 |     ref={ref}
111 |     className={cn("text-lg font-semibold text-foreground", className)}
112 |     {...props}
113 |   />
114 | ))
115 | SheetTitle.displayName = SheetPrimitive.Title.displayName
116 | 
117 | const SheetDescription = React.forwardRef<
118 |   React.ElementRef<typeof SheetPrimitive.Description>,
119 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
120 | >(({ className, ...props }, ref) => (
121 |   <SheetPrimitive.Description
122 |     ref={ref}
123 |     className={cn("text-sm text-muted-foreground", className)}
124 |     {...props}
125 |   />
126 | ))
127 | SheetDescription.displayName = SheetPrimitive.Description.displayName
128 | 
129 | export {
130 |   Sheet,
131 |   SheetPortal,
132 |   SheetOverlay,
133 |   SheetTrigger,
134 |   SheetClose,
135 |   SheetContent,
136 |   SheetHeader,
137 |   SheetFooter,
138 |   SheetTitle,
139 |   SheetDescription,
140 | }
141 | 


--------------------------------------------------------------------------------
/config/sampleblogs.ts:
--------------------------------------------------------------------------------
  1 | interface BlogType {
  2 |     slug: string;
  3 |     content: string;
  4 |     title: string;
  5 |     description: string;
  6 |     imageUrl?: string;
  7 |   }
  8 |   
  9 |   const SampleBlogs: BlogType[] = [
 10 |     {
 11 |       slug: "mastering-react-components",
 12 |       title: "Mastering React Components",
 13 |       description: "An in-depth guide to understanding and creating React components.",
 14 |       content: `
 15 |   # Mastering React Components
 16 |   
 17 |   React components are the building blocks of any React application. In this blog, we will dive deep into:
 18 |   
 19 |   - **Functional vs. Class Components**
 20 |   - **Lifecycle Methods**
 21 |   - **State and Props**
 22 |   - **Hooks**
 23 |   
 24 |   By the end, you’ll have a solid understanding of how to create and manage components effectively.
 25 |       `
 26 |     },
 27 |     {
 28 |       slug: "tailwind-css-beginners",
 29 |       title: "Tailwind CSS for Beginners",
 30 |       description: "Learn how to quickly style your web applications using Tailwind CSS.",
 31 |       imageUrl: "https://images.pexels.com/photos/2740956/pexels-photo-2740956.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
 32 |       content: `
 33 |   # Tailwind CSS for Beginners
 34 |   
 35 |   Tailwind CSS is a utility-first CSS framework that allows you to style your web application directly in your HTML.
 36 |   
 37 |   ## Key Topics Covered:
 38 |   
 39 |   - Setting up Tailwind CSS
 40 |   - Using Utility Classes
 41 |   - Customizing Styles
 42 |   
 43 |   Tailwind CSS makes it easier to build responsive, custom designs without writing a lot of custom CSS.
 44 |       `
 45 |     },
 46 |     {
 47 |       slug: "javascript-closures",
 48 |       title: "Understanding JavaScript Closures",
 49 |       description: "A comprehensive explanation of closures in JavaScript with examples.",
 50 |       content: `
 51 |   # Understanding JavaScript Closures
 52 |   
 53 |   Closures are one of the most powerful features in JavaScript. This blog will cover:
 54 |   
 55 |   - **What are Closures?**
 56 |   - **How Closures Work**
 57 |   - **Practical Examples**
 58 |   
 59 |   Closures allow functions to access variables from an enclosing scope even after the outer function has closed.
 60 |       `
 61 |     },
 62 |     {
 63 |       slug: "power-of-flexbox",
 64 |       title: "The Power of Flexbox in CSS",
 65 |       description: "How to use Flexbox to create flexible and responsive layouts.",
 66 |       content: `
 67 |   # The Power of Flexbox in CSS
 68 |   
 69 |   Flexbox is a CSS layout module that makes it easier to design flexible and responsive layouts.
 70 |   
 71 |   ### Topics Include:
 72 |   
 73 |   - Flex Container and Items
 74 |   - Flexbox Properties and Alignment
 75 |   - Real-world Examples
 76 |   
 77 |   Mastering Flexbox will make your layouts more efficient and easier to manage.
 78 |       `
 79 |     },
 80 |     {
 81 |       slug: "introduction-to-nextjs",
 82 |       title: "Introduction to Next.js",
 83 |       description: "Get started with Next.js, a powerful React framework for building web applications.",
 84 |       content: `
 85 |   # Introduction to Next.js
 86 |   
 87 |   Next.js is a popular React framework that provides server-side rendering and many other features out of the box.
 88 |   
 89 |   ## This Guide Covers:
 90 |   
 91 |   - Setting up a Next.js Project
 92 |   - Pages and Routing
 93 |   - Server-side Rendering vs. Static Generation
 94 |   
 95 |   Next.js is an excellent choice for building fast and SEO-friendly React applications.
 96 |       `
 97 |     },
 98 |     {
 99 |       slug: "advanced-git-tips",
100 |       title: "Advanced Git Tips and Tricks",
101 |       description: "Improve your Git skills with these advanced tips and best practices.",
102 |       content: `
103 |   # Advanced Git Tips and Tricks
104 |   
105 |   Level up your Git skills with these advanced techniques:
106 |   
107 |   - **Interactive Rebase**
108 |   - **Cherry-picking Commits**
109 |   - **Git Hooks**
110 |   
111 |   Understanding these advanced features will help you manage your projects more effectively and maintain a cleaner commit history.
112 |       `
113 |     }
114 |   ];
115 | 
116 |   export default SampleBlogs


--------------------------------------------------------------------------------
/config/site.ts:
--------------------------------------------------------------------------------
1 | const SiteConfig = {
2 |     "title": "ProgrammingWithHarry",
3 |     "description": "Programming With Harry is a blog for your programming doubts",
4 |     
5 | }
6 | 
7 | 
8 | export default SiteConfig


--------------------------------------------------------------------------------
/content/c-programming-tutorial.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: C Programming Tutorial
  3 | slug: c-programming-tutorial
  4 | description: Comprehensive guide on learning C programming from basics to advanced topics.
  5 | imageUrl: /images/coding.jpeg
  6 | ---
  7 | 
  8 | # C Programming Tutorial: A Comprehensive Guide
  9 | 
 10 | Welcome to this comprehensive C programming tutorial! Whether you're a complete beginner or looking to deepen your understanding of C, this guide will take you through the fundamentals and introduce advanced concepts as you progress.
 11 | 
 12 | ## Introduction to C
 13 | 
 14 | C is a powerful general-purpose programming language that is widely used in system programming, embedded systems, and applications requiring high performance. It is known for its efficiency, close-to-hardware control, and portability, making it a crucial language in the software industry.
 15 | 
 16 | ### Why Learn C?
 17 | 
 18 | - **Foundation for Other Languages**: C provides the building blocks for many modern languages, such as C++, Java, and Python.
 19 | - **Performance**: C is highly efficient and is used in performance-critical applications.
 20 | - **Low-level Control**: C allows you to work closely with memory and hardware, providing more control over system resources.
 21 | 
 22 | ## Setting Up C
 23 | 
 24 | To get started with C programming, you'll need to set up a development environment. Here are the steps:
 25 | 
 26 | 1. **Install a C Compiler**: You can use GCC (GNU Compiler Collection) for Linux/macOS or MinGW for Windows. Both are free and widely used.
 27 | 2. **Choose an IDE/Text Editor**: Popular options include Visual Studio Code, Code::Blocks, or Eclipse. Alternatively, you can use a simple text editor like Sublime Text.
 28 | 3. **Verify Installation**: Once the compiler is installed, verify it by typing `gcc --version` in the terminal or command prompt.
 29 | 
 30 | ## C Basics
 31 | 
 32 | Now that your environment is set up, let’s start with the basics. In this section, we'll cover:
 33 | 
 34 | - **Variables and Data Types**: Learn how to declare and use variables in C.
 35 | - **Control Structures**: Understand how to use conditional statements and loops.
 36 | - **Functions**: Learn how to write reusable code blocks.
 37 | 
 38 | ### Variables and Data Types
 39 | 
 40 | ```c
 41 | #include <stdio.h>
 42 | 
 43 | int main() {
 44 |     int age = 25;
 45 |     float height = 5.9;
 46 |     char initial = 'A';
 47 | 
 48 |     printf("Age: %d, Height: %.1f, Initial: %c\n", age, height, initial);
 49 |     return 0;
 50 | }
 51 | ```
 52 | 
 53 | ### Control Structures
 54 | 
 55 | ```c
 56 | #include <stdio.h>
 57 | 
 58 | int main() {
 59 |     int age = 20;
 60 | 
 61 |     if (age >= 18) {
 62 |         printf("You are an adult.\n");
 63 |     } else {
 64 |         printf("You are a minor.\n");
 65 |     }
 66 | 
 67 |     for (int i = 0; i < 5; i++) {
 68 |         printf("Count: %d\n", i);
 69 |     }
 70 | 
 71 |     return 0;
 72 | }
 73 | ```
 74 | 
 75 | ### Functions
 76 | 
 77 | ```c
 78 | #include <stdio.h>
 79 | 
 80 | void greet(char name[]) {
 81 |     printf("Hello, %s!\n", name);
 82 | }
 83 | 
 84 | int main() {
 85 |     greet("Alice");
 86 |     return 0;
 87 | }
 88 | ```
 89 | 
 90 | ## Intermediate C
 91 | 
 92 | Once you are familiar with the basics, it's time to explore more advanced features of C:
 93 | 
 94 | - **Arrays and Pointers**: Learn how to work with arrays and pointers, which are fundamental in C programming.
 95 | - **File I/O**: Understand how to read from and write to files.
 96 | - **Dynamic Memory Allocation**: Explore memory management using `malloc`, `calloc`, and `free`.
 97 | 
 98 | ### Arrays and Pointers
 99 | 
100 | ```c
101 | #include <stdio.h>
102 | 
103 | int main() {
104 |     int numbers[5] = {1, 2, 3, 4, 5};
105 |     int *ptr = numbers;
106 | 
107 |     for (int i = 0; i < 5; i++) {
108 |         printf("Number: %d, Address: %p\n", *(ptr + i), (ptr + i));
109 |     }
110 | 
111 |     return 0;
112 | }
113 | ```
114 | 
115 | ### File I/O
116 | 
117 | ```c
118 | #include <stdio.h>
119 | 
120 | int main() {
121 |     FILE *file = fopen("example.txt", "w");
122 |     if (file == NULL) {
123 |         printf("Error opening file!\n");
124 |         return 1;
125 |     }
126 | 
127 |     fprintf(file, "Hello, File!\n");
128 |     fclose(file);
129 | 
130 |     return 0;
131 | }
132 | ```
133 | 
134 | ### Dynamic Memory Allocation
135 | 
136 | ```c
137 | #include <stdio.h>
138 | #include <stdlib.h>
139 | 
140 | int main() {
141 |     int *arr;
142 |     int size = 5;
143 | 
144 |     arr = (int*) malloc(size * sizeof(int));
145 | 
146 |     for (int i = 0; i < size; i++) {
147 |         arr[i] = i + 1;
148 |         printf("Value: %d\n", arr[i]);
149 |     }
150 | 
151 |     free(arr);
152 | 
153 |     return 0;
154 | }
155 | ```
156 | 
157 | ## Advanced C
158 | 
159 | Now that you are comfortable with intermediate topics, let’s move on to some advanced C programming concepts:
160 | 
161 | - **Structures**: Learn how to group different data types together.
162 | - **Pointers to Functions**: Explore how to use pointers with functions for flexibility.
163 | - **Memory Management**: Delve deeper into memory management and optimization.
164 | 
165 | ### Structures
166 | 
167 | ```c
168 | #include <stdio.h>
169 | 
170 | struct Student {
171 |     char name[50];
172 |     int age;
173 |     float grade;
174 | };
175 | 
176 | int main() {
177 |     struct Student s1 = {"Alice", 20, 85.5};
178 | 
179 |     printf("Name: %s, Age: %d, Grade: %.2f\n", s1.name, s1.age, s1.grade);
180 |     return 0;
181 | }
182 | ```
183 | 
184 | ### Pointers to Functions
185 | 
186 | ```c
187 | #include <stdio.h>
188 | 
189 | void add(int a, int b) {
190 |     printf("Sum: %d\n", a + b);
191 | }
192 | 
193 | int main() {
194 |     void (*func_ptr)(int, int) = &add;
195 |     func_ptr(10, 20);
196 | 
197 |     return 0;
198 | }
199 | ```
200 | 
201 | ### Memory Management
202 | 
203 | ```c
204 | #include <stdio.h>
205 | #include <stdlib.h>
206 | 
207 | int main() {
208 |     int *arr;
209 |     int size = 10;
210 | 
211 |     arr = (int*) malloc(size * sizeof(int));
212 | 
213 |     if (arr == NULL) {
214 |         printf("Memory not allocated.\n");
215 |         return 1;
216 |     }
217 | 
218 |     for (int i = 0; i < size; i++) {
219 |         arr[i] = i * 2;
220 |         printf("Value: %d\n", arr[i]);
221 |     }
222 | 
223 |     free(arr);
224 | 
225 |     return 0;
226 | }
227 | ```
228 | 
229 | ## Conclusion
230 | 
231 | Congratulations on making it through this C programming tutorial! You’ve covered everything from the basics of C to advanced topics like structures and memory management. Keep practicing and exploring the vast capabilities of C to enhance your programming skills.
232 | 
233 | Happy coding!
234 | 


--------------------------------------------------------------------------------
/content/chatgpt-vs-gemini.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: ChatGPT vs. Gemini - A Comparative Analysis
 3 | slug: chatgpt-vs-gemini
 4 | description: Explore the differences between ChatGPT and Gemini, two leading conversational AI models, and understand their unique features and capabilities.
 5 | ---
 6 | 
 7 | # ChatGPT vs. Gemini: A Comparative Analysis
 8 | 
 9 | In the realm of conversational AI, two prominent models are often discussed: OpenAI's ChatGPT and Google's Gemini. Both represent cutting-edge advancements in natural language processing, but they have different architectures, features, and use cases. This post provides a comparative analysis of ChatGPT and Gemini, helping you understand their strengths and applications.
10 | 
11 | ## What is ChatGPT?
12 | 
13 | **ChatGPT** is a conversational AI model developed by OpenAI. It is designed to generate human-like text based on the input it receives. Leveraging the GPT-4 architecture, ChatGPT excels in natural language understanding and generation, making it a popular choice for various applications.
14 | 
15 | ### Key Features of ChatGPT
16 | 
17 | 1. **Conversational Abilities**: ChatGPT is adept at generating coherent and contextually relevant responses in a conversational setting.
18 | 2. **Versatility**: It can handle a wide range of topics and generate responses in various styles, from casual chat to formal explanations.
19 | 3. **Customizable**: Users can fine-tune ChatGPT for specific tasks or industries, making it adaptable to different use cases.
20 | 4. **Integration**: ChatGPT is integrated into various platforms and tools, including customer support systems, educational applications, and creative writing aids.
21 | 
22 | ### Use Cases
23 | 
24 | - **Customer Support**: Automating responses and assisting with queries.
25 | - **Content Creation**: Generating text for blogs, articles, and marketing materials.
26 | - **Education**: Providing tutoring and answering questions on various subjects.
27 | - **Entertainment**: Engaging users in interactive storytelling and games.
28 | 
29 | ## What is Gemini?
30 | 
31 | **Gemini** is a conversational AI model developed by Google, part of Google's AI research and development efforts. It represents a significant advancement in natural language understanding and generation, incorporating innovations from Google's extensive research in AI.
32 | 
33 | ### Key Features of Gemini
34 | 
35 | 1. **Advanced Language Understanding**: Gemini leverages Google's latest research to offer high-quality language understanding and generation.
36 | 2. **Integration with Google Services**: Gemini is designed to integrate seamlessly with Google's ecosystem, including search, knowledge graphs, and other AI-powered tools.
37 | 3. **Contextual Awareness**: Gemini excels in maintaining context and coherence in conversations, leveraging deep learning techniques to improve response accuracy.
38 | 4. **Customizable Interactions**: It offers customizable responses and can be tailored for specific applications, similar to ChatGPT.
39 | 
40 | ### Use Cases
41 | 
42 | - **Search Enhancement**: Improving search queries and providing detailed answers.
43 | - **Productivity Tools**: Enhancing tools like Google Docs and Google Assistant with advanced conversational capabilities.
44 | - **Customer Interaction**: Assisting with queries and providing support through Google’s various platforms.
45 | - **Research and Development**: Facilitating advanced research through natural language understanding.
46 | 
47 | ## Comparing ChatGPT and Gemini
48 | 
49 | ### 1. Architecture and Technology
50 | 
51 | - **ChatGPT**: Based on OpenAI's GPT-4 architecture, ChatGPT focuses on conversational abilities and versatile text generation.
52 | - **Gemini**: Utilizes Google's latest advancements in AI, incorporating innovations from Google’s research and integration with its ecosystem.
53 | 
54 | ### 2. Integration and Ecosystem
55 | 
56 | - **ChatGPT**: Integrated into various platforms and tools, offering flexibility in deployment across different industries.
57 | - **Gemini**: Seamlessly integrates with Google’s services and products, providing enhanced functionality within Google's ecosystem.
58 | 
59 | ### 3. Customization and Adaptability
60 | 
61 | - **ChatGPT**: Highly customizable for different applications and industries, allowing for fine-tuning and specific task adaptation.
62 | - **Gemini**: Also customizable, with a focus on integration with Google’s services and improved contextual understanding.
63 | 
64 | ### 4. Conversational Quality
65 | 
66 | - **ChatGPT**: Known for its coherent and contextually relevant responses, with a focus on maintaining conversational flow.
67 | - **Gemini**: Excels in maintaining context and coherence, benefiting from Google’s extensive research in natural language processing.
68 | 
69 | ## Conclusion
70 | 
71 | Both ChatGPT and Gemini represent significant advancements in conversational AI, each with its own strengths and applications. ChatGPT, developed by OpenAI, offers versatile conversational abilities and wide integration options, while Gemini, developed by Google, leverages cutting-edge research and integration with Google’s ecosystem.
72 | 
73 | Choosing between ChatGPT and Gemini depends on your specific needs, such as the desired level of integration, customization, and the specific use cases you are targeting. Both models offer powerful capabilities, and understanding their differences can help you select the best tool for your applications.
74 | 
75 | Happy exploring!
76 | 


--------------------------------------------------------------------------------
/content/cpp-programming-tutorial.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: C++ Programming Tutorial
  3 | slug: cpp-programming-tutorial
  4 | description: Comprehensive guide on learning C++ programming from basics to advanced topics.
  5 | imageUrl: /images/cpp.png
  6 | ---
  7 | 
  8 | # C++ Programming Tutorial: A Comprehensive Guide
  9 | 
 10 | Welcome to this comprehensive C++ programming tutorial! Whether you're a complete beginner or seeking to advance your C++ skills, this guide will walk you through the basics and help you dive into more advanced concepts as you progress.
 11 | 
 12 | ## Introduction to C++
 13 | 
 14 | C++ is an extension of the C programming language, known for its high performance and support for object-oriented programming. It is widely used in system programming, game development, and large-scale applications.
 15 | 
 16 | ### Why Learn C++?
 17 | 
 18 | - **Performance**: C++ is known for its efficiency and is commonly used in performance-critical applications.
 19 | - **Object-Oriented Programming**: C++ supports classes and objects, which help organize and modularize code.
 20 | - **Rich Standard Library**: C++ offers a powerful standard library that includes useful data structures, algorithms, and utilities.
 21 | 
 22 | ## Setting Up C++
 23 | 
 24 | Before you start coding, you'll need to set up your development environment. Here’s how:
 25 | 
 26 | 1. **Install a C++ Compiler**: Popular options include GCC (GNU Compiler Collection) for Linux/macOS and MinGW for Windows.
 27 | 2. **Choose an IDE/Text Editor**: Visual Studio Code, CLion, and Code::Blocks are popular IDEs for C++. Alternatively, you can use a text editor like Sublime Text.
 28 | 3. **Verify Installation**: To verify that the compiler is installed correctly, type `g++ --version` in your terminal or command prompt.
 29 | 
 30 | ## C++ Basics
 31 | 
 32 | Now that your environment is set up, let’s start with the basics. In this section, we'll cover:
 33 | 
 34 | - **Variables and Data Types**: Learn how to declare and use variables in C++.
 35 | - **Control Structures**: Understand how to use conditional statements and loops.
 36 | - **Functions**: Learn how to create reusable code blocks with functions.
 37 | 
 38 | ### Variables and Data Types
 39 | 
 40 | ```cpp
 41 | #include <iostream>
 42 | 
 43 | int main() {
 44 |     int age = 25;
 45 |     double height = 5.9;
 46 |     char initial = 'A';
 47 | 
 48 |     std::cout << "Age: " << age << ", Height: " << height << ", Initial: " << initial << std::endl;
 49 |     return 0;
 50 | }
 51 | ```
 52 | 
 53 | ### Control Structures
 54 | 
 55 | ```cpp
 56 | #include <iostream>
 57 | 
 58 | int main() {
 59 |     int age = 20;
 60 | 
 61 |     if (age >= 18) {
 62 |         std::cout << "You are an adult." << std::endl;
 63 |     } else {
 64 |         std::cout << "You are a minor." << std::endl;
 65 |     }
 66 | 
 67 |     for (int i = 0; i < 5; i++) {
 68 |         std::cout << "Count: " << i << std::endl;
 69 |     }
 70 | 
 71 |     return 0;
 72 | }
 73 | ```
 74 | 
 75 | ### Functions
 76 | 
 77 | ```cpp
 78 | #include <iostream>
 79 | 
 80 | void greet(std::string name) {
 81 |     std::cout << "Hello, " << name << "!" << std::endl;
 82 | }
 83 | 
 84 | int main() {
 85 |     greet("Alice");
 86 |     return 0;
 87 | }
 88 | ```
 89 | 
 90 | ## Intermediate C++
 91 | 
 92 | After mastering the basics, it’s time to explore more advanced features of C++:
 93 | 
 94 | - **Classes and Objects**: Learn how to use object-oriented programming in C++.
 95 | - **Pointers and References**: Understand the power of pointers and references for memory management and performance optimization.
 96 | - **Standard Template Library (STL)**: Discover C++’s rich standard library, including vectors, sets, and maps.
 97 | 
 98 | ### Classes and Objects
 99 | 
100 | ```cpp
101 | #include <iostream>
102 | 
103 | class Dog {
104 | public:
105 |     std::string name;
106 |     std::string breed;
107 | 
108 |     void bark() {
109 |         std::cout << name << " says Woof!" << std::endl;
110 |     }
111 | };
112 | 
113 | int main() {
114 |     Dog dog;
115 |     dog.name = "Buddy";
116 |     dog.breed = "Golden Retriever";
117 |     dog.bark();
118 | 
119 |     return 0;
120 | }
121 | ```
122 | 
123 | ### Pointers and References
124 | 
125 | ```cpp
126 | #include <iostream>
127 | 
128 | int main() {
129 |     int x = 10;
130 |     int *ptr = &x;  // Pointer to x
131 | 
132 |     std::cout << "Value of x: " << x << std::endl;
133 |     std::cout << "Address of x: " << ptr << std::endl;
134 |     std::cout << "Value at address: " << *ptr << std::endl;
135 | 
136 |     return 0;
137 | }
138 | ```
139 | 
140 | ### Standard Template Library (STL)
141 | 
142 | ```cpp
143 | #include <iostream>
144 | #include <vector>
145 | 
146 | int main() {
147 |     std::vector<int> numbers = {1, 2, 3, 4, 5};
148 | 
149 |     for (int num : numbers) {
150 |         std::cout << num << " ";
151 |     }
152 | 
153 |     std::cout << std::endl;
154 |     return 0;
155 | }
156 | ```
157 | 
158 | ## Advanced C++
159 | 
160 | Once you’re comfortable with intermediate topics, it’s time to dive into more advanced concepts:
161 | 
162 | - **Inheritance and Polymorphism**: Learn how to use inheritance to extend classes and polymorphism to create flexible code.
163 | - **Operator Overloading**: Understand how to redefine operators for custom objects.
164 | - **Exception Handling**: Learn how to handle errors and exceptions in C++.
165 | 
166 | ### Inheritance and Polymorphism
167 | 
168 | ```cpp
169 | #include <iostream>
170 | 
171 | class Animal {
172 | public:
173 |     virtual void sound() {
174 |         std::cout << "Some generic animal sound." << std::endl;
175 |     }
176 | };
177 | 
178 | class Dog : public Animal {
179 | public:
180 |     void sound() override {
181 |         std::cout << "Woof!" << std::endl;
182 |     }
183 | };
184 | 
185 | int main() {
186 |     Animal *animal = new Dog();
187 |     animal->sound();
188 | 
189 |     delete animal;
190 |     return 0;
191 | }
192 | ```
193 | 
194 | ### Operator Overloading
195 | 
196 | ```cpp
197 | #include <iostream>
198 | 
199 | class Complex {
200 | public:
201 |     int real, imag;
202 | 
203 |     Complex(int r = 0, int i = 0) : real(r), imag(i) {}
204 | 
205 |     Complex operator + (const Complex &obj) {
206 |         return Complex(real + obj.real, imag + obj.imag);
207 |     }
208 | 
209 |     void display() {
210 |         std::cout << real << " + " << imag << "i" << std::endl;
211 |     }
212 | };
213 | 
214 | int main() {
215 |     Complex c1(3, 4), c2(1, 2);
216 |     Complex c3 = c1 + c2;
217 | 
218 |     c3.display();
219 |     return 0;
220 | }
221 | ```
222 | 
223 | ### Exception Handling
224 | 
225 | ```cpp
226 | #include <iostream>
227 | 
228 | int main() {
229 |     try {
230 |         int a = 10, b = 0;
231 |         if (b == 0)
232 |             throw "Division by zero error!";
233 |         std::cout << a / b << std::endl;
234 |     } catch (const char* msg) {
235 |         std::cerr << msg << std::endl;
236 |     }
237 | 
238 |     return 0;
239 | }
240 | ```
241 | 
242 | ## Conclusion
243 | 
244 | Congratulations on completing this C++ tutorial! You’ve learned everything from the basics to advanced topics like inheritance and operator overloading. C++ is a powerful language, and with continued practice, you can build high-performance applications.
245 | 
246 | Happy coding!
247 | 


--------------------------------------------------------------------------------
/content/css-tutorial.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: CSS Tutorial
  3 | slug: css-tutorial
  4 | description: Comprehensive guide on learning CSS, from styling basics to advanced techniques like Flexbox, Grid, and animations.
  5 | imageUrl: https://images.pexels.com/photos/3861958/pexels-photo-3861958.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1
  6 | ---
  7 | 
  8 | # CSS Tutorial: A Comprehensive Guide
  9 | 
 10 | Welcome to this comprehensive CSS tutorial! This guide will help you master the art of styling websites using CSS (Cascading Style Sheets). Whether you're a beginner or looking to expand your knowledge, this tutorial covers everything from basic styles to advanced layout techniques and animations.
 11 | 
 12 | ## Introduction to CSS
 13 | 
 14 | CSS is the language used to style HTML content, enabling you to control the layout, colors, fonts, and overall visual presentation of a website.
 15 | 
 16 | ### Why Learn CSS?
 17 | 
 18 | - **Styling and Layout**: CSS allows you to transform plain HTML into visually appealing web pages.
 19 | - **Responsiveness**: With CSS, you can create responsive designs that adapt to different screen sizes and devices.
 20 | - **Customizability**: CSS provides the flexibility to fine-tune every aspect of your site's appearance.
 21 | 
 22 | ## Setting Up CSS
 23 | 
 24 | To use CSS, you can either include it directly in your HTML file (inline or internal) or as an external stylesheet. Here’s how to set up CSS:
 25 | 
 26 | ### Inline CSS
 27 | 
 28 | ```html
 29 | <p style="color: blue;">This is a blue paragraph.</p>
 30 | ```
 31 | 
 32 | ### Internal CSS
 33 | 
 34 | ```html
 35 | <!DOCTYPE html>
 36 | <html>
 37 | <head>
 38 |     <style>
 39 |         p {
 40 |             color: blue;
 41 |         }
 42 |     </style>
 43 | </head>
 44 | <body>
 45 |     <p>This is a blue paragraph.</p>
 46 | </body>
 47 | </html>
 48 | ```
 49 | 
 50 | ### External CSS
 51 | 
 52 | Create a separate CSS file (e.g., `styles.css`) and link it to your HTML file.
 53 | 
 54 | ```html
 55 | <link rel="stylesheet" href="styles.css">
 56 | ```
 57 | 
 58 | In `styles.css`:
 59 | 
 60 | ```css
 61 | p {
 62 |     color: blue;
 63 | }
 64 | ```
 65 | 
 66 | ## CSS Basics
 67 | 
 68 | Now, let’s dive into the basics of CSS, including selectors, properties, and how to apply styles to HTML elements.
 69 | 
 70 | ### Selectors
 71 | 
 72 | Selectors are used to target HTML elements and apply styles. Some common selectors include:
 73 | 
 74 | - **Element Selector**: Targets all instances of an element (e.g., `p` for paragraphs).
 75 | - **Class Selector**: Targets elements with a specific class (e.g., `.example`).
 76 | - **ID Selector**: Targets an element with a specific ID (e.g., `#header`).
 77 | 
 78 | ```css
 79 | /* Element selector */
 80 | p {
 81 |     color: green;
 82 | }
 83 | 
 84 | /* Class selector */
 85 | .example {
 86 |     font-size: 20px;
 87 | }
 88 | 
 89 | /* ID selector */
 90 | #header {
 91 |     background-color: lightgray;
 92 | }
 93 | ```
 94 | 
 95 | ### Colors and Backgrounds
 96 | 
 97 | CSS allows you to set text colors, background colors, and images.
 98 | 
 99 | ```css
100 | /* Text color */
101 | h1 {
102 |     color: darkblue;
103 | }
104 | 
105 | /* Background color */
106 | body {
107 |     background-color: lightyellow;
108 | }
109 | 
110 | /* Background image */
111 | div {
112 |     background-image: url('background.jpg');
113 | }
114 | ```
115 | 
116 | ### Fonts and Text Styling
117 | 
118 | Control the typography of your website using fonts, text alignment, and decoration properties.
119 | 
120 | ```css
121 | h1 {
122 |     font-family: Arial, sans-serif;
123 |     font-size: 32px;
124 |     text-align: center;
125 |     text-decoration: underline;
126 | }
127 | ```
128 | 
129 | ## Intermediate CSS
130 | 
131 | After mastering the basics, you can start exploring more intermediate CSS concepts such as box model, positioning, and layout techniques.
132 | 
133 | ### Box Model
134 | 
135 | The box model is fundamental to understanding how elements are sized and spaced in CSS. It consists of four components: content, padding, border, and margin.
136 | 
137 | ```css
138 | div {
139 |     width: 200px;
140 |     padding: 10px;
141 |     border: 1px solid black;
142 |     margin: 20px;
143 | }
144 | ```
145 | 
146 | ### Positioning
147 | 
148 | CSS provides several ways to position elements on a page:
149 | 
150 | - **Static**: The default position (elements appear in the normal document flow).
151 | - **Relative**: Positioned relative to its normal position.
152 | - **Absolute**: Positioned relative to the nearest positioned ancestor.
153 | - **Fixed**: Positioned relative to the viewport.
154 | - **Sticky**: A hybrid between relative and fixed positioning.
155 | 
156 | ```css
157 | div {
158 |     position: relative;
159 |     top: 10px;
160 |     left: 20px;
161 | }
162 | ```
163 | 
164 | ### Flexbox
165 | 
166 | Flexbox is a powerful layout model that allows you to create flexible and responsive layouts.
167 | 
168 | ```css
169 | .container {
170 |     display: flex;
171 |     justify-content: space-between;
172 |     align-items: center;
173 | }
174 | 
175 | .item {
176 |     flex: 1;
177 |     margin: 10px;
178 | }
179 | ```
180 | 
181 | ### Grid
182 | 
183 | CSS Grid Layout provides a two-dimensional layout system, making it easy to design complex web layouts.
184 | 
185 | ```css
186 | .container {
187 |     display: grid;
188 |     grid-template-columns: repeat(3, 1fr);
189 |     grid-gap: 20px;
190 | }
191 | 
192 | .item {
193 |     background-color: lightblue;
194 |     padding: 20px;
195 | }
196 | ```
197 | 
198 | ## Advanced CSS
199 | 
200 | Now that you’re comfortable with intermediate concepts, it’s time to explore advanced topics like CSS animations, transitions, and responsive design.
201 | 
202 | ### CSS Animations
203 | 
204 | CSS animations allow you to animate transitions between different styles.
205 | 
206 | ```css
207 | @keyframes fadeIn {
208 |     from {
209 |         opacity: 0;
210 |     }
211 |     to {
212 |         opacity: 1;
213 |     }
214 | }
215 | 
216 | div {
217 |     animation: fadeIn 2s ease-in-out;
218 | }
219 | ```
220 | 
221 | ### CSS Transitions
222 | 
223 | Transitions allow you to smoothly change property values over a specified duration.
224 | 
225 | ```css
226 | button {
227 |     background-color: blue;
228 |     transition: background-color 0.5s ease;
229 | }
230 | 
231 | button:hover {
232 |     background-color: green;
233 | }
234 | ```
235 | 
236 | ### Media Queries
237 | 
238 | Media queries enable responsive design by applying different styles based on the device's characteristics (e.g., screen width).
239 | 
240 | ```css
241 | /* For screens wider than 600px */
242 | @media (min-width: 600px) {
243 |     body {
244 |         background-color: lightgreen;
245 |     }
246 | }
247 | 
248 | /* For screens narrower than 600px */
249 | @media (max-width: 600px) {
250 |     body {
251 |         background-color: lightpink;
252 |     }
253 | }
254 | ```
255 | 
256 | ## Conclusion
257 | 
258 | Congratulations on completing this CSS tutorial! You’ve learned the basics of CSS, intermediate layout techniques like Flexbox and Grid, and advanced topics like animations and responsive design. With CSS, you can create beautiful, responsive websites that look great on any device. Keep practicing and experimenting to further develop your CSS skills.
259 | 
260 | Happy styling!
261 | 


--------------------------------------------------------------------------------
/content/cybersecurity-roadmap.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Cybersecurity Roadmap - A Guide to Protecting Your Digital Assets
  3 | slug: cybersecurity-roadmap
  4 | description: Explore a step-by-step roadmap for building a robust cybersecurity strategy to safeguard your digital assets and protect against cyber threats.
  5 | ---
  6 | 
  7 | # Cybersecurity Roadmap: A Guide to Protecting Your Digital Assets
  8 | 
  9 | In an era where digital threats are increasingly sophisticated, having a robust cybersecurity strategy is essential for protecting your organization's sensitive information and infrastructure. A well-structured cybersecurity roadmap can help you systematically address potential vulnerabilities and build a resilient defense against cyberattacks. This guide provides a comprehensive roadmap for developing and implementing an effective cybersecurity strategy.
 10 | 
 11 | ## 1. Assess Your Current Cybersecurity Posture
 12 | 
 13 | **Objective**: Understand your current security landscape and identify existing vulnerabilities.
 14 | 
 15 | ### Key Steps:
 16 | 
 17 | - **Conduct a Security Audit**: Evaluate your current security measures, policies, and practices.
 18 | - **Perform Risk Assessments**: Identify and assess potential risks and vulnerabilities in your systems.
 19 | - **Review Compliance**: Ensure adherence to relevant regulations and standards (e.g., GDPR, HIPAA).
 20 | 
 21 | ### Tools and Techniques:
 22 | 
 23 | - Vulnerability scanners
 24 | - Penetration testing
 25 | - Compliance checklists
 26 | 
 27 | ## 2. Define Your Cybersecurity Goals and Objectives
 28 | 
 29 | **Objective**: Establish clear cybersecurity goals that align with your organization's overall mission and objectives.
 30 | 
 31 | ### Key Steps:
 32 | 
 33 | - **Identify Critical Assets**: Determine which data and systems are most crucial to your operations.
 34 | - **Set Security Objectives**: Define what you want to achieve with your cybersecurity efforts (e.g., data protection, threat mitigation).
 35 | - **Develop Key Performance Indicators (KPIs)**: Measure the effectiveness of your cybersecurity measures.
 36 | 
 37 | ### Tools and Techniques:
 38 | 
 39 | - Risk management frameworks
 40 | - Security metrics and KPIs
 41 | - Strategic planning documents
 42 | 
 43 | ## 3. Develop a Comprehensive Cybersecurity Strategy
 44 | 
 45 | **Objective**: Create a detailed strategy to address identified risks and achieve your cybersecurity goals.
 46 | 
 47 | ### Key Steps:
 48 | 
 49 | - **Create a Security Policy**: Develop policies and procedures for managing cybersecurity risks.
 50 | - **Design an Incident Response Plan**: Outline how your organization will respond to and recover from security incidents.
 51 | - **Establish a Governance Framework**: Define roles and responsibilities for managing cybersecurity within your organization.
 52 | 
 53 | ### Tools and Techniques:
 54 | 
 55 | - Policy templates
 56 | - Incident response plans
 57 | - Governance frameworks
 58 | 
 59 | ## 4. Implement Security Controls and Measures
 60 | 
 61 | **Objective**: Deploy security controls and technologies to protect your digital assets.
 62 | 
 63 | ### Key Steps:
 64 | 
 65 | - **Deploy Technical Controls**: Implement firewalls, intrusion detection systems (IDS), and encryption.
 66 | - **Implement Access Controls**: Use authentication, authorization, and auditing measures to control access to systems and data.
 67 | - **Conduct Security Training**: Educate employees on cybersecurity best practices and potential threats.
 68 | 
 69 | ### Tools and Techniques:
 70 | 
 71 | - Security software and hardware
 72 | - Identity and access management (IAM) solutions
 73 | - Security awareness training programs
 74 | 
 75 | ## 5. Monitor and Review Cybersecurity Measures
 76 | 
 77 | **Objective**: Continuously monitor your security posture and make improvements based on findings.
 78 | 
 79 | ### Key Steps:
 80 | 
 81 | - **Conduct Regular Audits**: Perform periodic security audits to identify and address vulnerabilities.
 82 | - **Monitor Threats**: Use threat intelligence and monitoring tools to stay informed about emerging threats.
 83 | - **Review and Update Policies**: Regularly update your security policies and procedures to reflect changes in the threat landscape.
 84 | 
 85 | ### Tools and Techniques:
 86 | 
 87 | - Security information and event management (SIEM) systems
 88 | - Threat intelligence platforms
 89 | - Regular policy reviews
 90 | 
 91 | ## 6. Prepare for and Respond to Security Incidents
 92 | 
 93 | **Objective**: Be prepared to effectively respond to and recover from security incidents.
 94 | 
 95 | ### Key Steps:
 96 | 
 97 | - **Execute the Incident Response Plan**: Follow your incident response plan to address and mitigate the impact of security incidents.
 98 | - **Conduct Post-Incident Analysis**: Analyze the incident to identify lessons learned and improve future responses.
 99 | - **Communicate with Stakeholders**: Inform relevant stakeholders, including customers and regulators, about the incident and your response efforts.
100 | 
101 | ### Tools and Techniques:
102 | 
103 | - Incident response tools
104 | - Post-incident analysis frameworks
105 | - Communication protocols
106 | 
107 | ## 7. Stay Informed and Adapt
108 | 
109 | **Objective**: Keep up-to-date with the latest cybersecurity trends and adapt your strategy as needed.
110 | 
111 | ### Key Steps:
112 | 
113 | - **Follow Industry Trends**: Stay informed about new threats, vulnerabilities, and security technologies.
114 | - **Participate in Professional Networks**: Engage with cybersecurity communities and attend industry conferences.
115 | - **Adapt and Evolve**: Continuously update your cybersecurity strategy based on new information and changing conditions.
116 | 
117 | ### Tools and Techniques:
118 | 
119 | - Cybersecurity news sources
120 | - Industry forums and conferences
121 | - Continuous learning and professional development
122 | 
123 | ## Conclusion
124 | 
125 | Building a robust cybersecurity posture requires a structured approach and ongoing commitment. By following this roadmap, you can systematically assess your current security landscape, set clear goals, implement effective controls, and stay informed about emerging threats. Remember, cybersecurity is an ongoing process that requires vigilance, adaptability, and continuous improvement to protect your digital assets effectively.
126 | 
127 | Stay secure!
128 | 


--------------------------------------------------------------------------------
/content/dsa-vs-development.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: DSA vs. Development - Understanding the Difference and Importance
 3 | slug: dsa-vs-development
 4 | description: Explore the differences between Data Structures and Algorithms (DSA) and Software Development, and understand their roles in building efficient and effective applications.
 5 | imageUrl: https://images.pexels.com/photos/1181332/pexels-photo-1181332.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1
 6 | ---
 7 | 
 8 | # DSA vs. Development: Understanding the Difference and Importance
 9 | 
10 | In the world of programming and software engineering, two fundamental concepts are often discussed: Data Structures and Algorithms (DSA) and Software Development. Both play critical roles in creating efficient and robust applications, but they focus on different aspects of the programming process. In this post, we’ll explore the differences between DSA and Software Development, and why understanding both is essential for a successful career in technology.
11 | 
12 | ## What is Data Structures and Algorithms (DSA)?
13 | 
14 | **Data Structures** are ways to organize and store data efficiently, enabling quick access and modification. Examples include arrays, linked lists, stacks, queues, trees, and graphs.
15 | 
16 | **Algorithms** are step-by-step procedures or formulas for solving problems. They often involve operations such as sorting, searching, and traversing data structures.
17 | 
18 | ### Importance of DSA
19 | 
20 | 1. **Efficiency**: Properly chosen data structures and algorithms can significantly improve the efficiency of a program in terms of time and space complexity.
21 | 2. **Problem Solving**: DSA provides foundational techniques for solving complex problems and optimizing performance.
22 | 3. **Interview Preparation**: Many technical interviews focus on assessing candidates’ knowledge of data structures and algorithms.
23 | 
24 | ### Common DSA Concepts
25 | 
26 | - **Sorting Algorithms**: Bubble sort, merge sort, quick sort
27 | - **Searching Algorithms**: Binary search, depth-first search (DFS), breadth-first search (BFS)
28 | - **Data Structures**: Arrays, linked lists, stacks, queues, hash tables, trees, graphs
29 | 
30 | ## What is Software Development?
31 | 
32 | Software Development is the process of designing, creating, testing, and maintaining software applications. It encompasses a wide range of activities and practices, including:
33 | 
34 | - **Requirements Gathering**: Understanding and documenting what users need from the software.
35 | - **Design**: Planning the architecture and structure of the software, including user interface and functionality.
36 | - **Coding**: Writing the actual code to implement the design.
37 | - **Testing**: Verifying that the software works as intended and identifying any bugs or issues.
38 | - **Deployment**: Releasing the software to users and maintaining it through updates and bug fixes.
39 | 
40 | ### Importance of Software Development
41 | 
42 | 1. **Application Creation**: Software development is essential for building applications that meet user needs and solve real-world problems.
43 | 2. **User Experience**: Good development practices ensure that software is user-friendly, reliable, and scalable.
44 | 3. **Project Management**: Effective software development involves managing projects, teams, and timelines to deliver high-quality software.
45 | 
46 | ### Key Aspects of Software Development
47 | 
48 | - **Development Methodologies**: Agile, Scrum, Waterfall
49 | - **Programming Languages**: JavaScript, Python, Java, C#, etc.
50 | - **Tools and Frameworks**: React, Angular, Django, .NET, etc.
51 | - **Version Control**: Git, GitHub, GitLab
52 | 
53 | ## Comparing DSA and Software Development
54 | 
55 | ### Focus and Scope
56 | 
57 | - **DSA**: Focuses on theoretical concepts and problem-solving techniques that underpin efficient software operations. It is more concerned with how data is organized and manipulated.
58 | - **Software Development**: Focuses on the practical aspects of building, deploying, and maintaining software. It includes a broader range of activities from design to user interaction.
59 | 
60 | ### Learning and Application
61 | 
62 | - **DSA**: Learning DSA involves studying algorithms and data structures, often through exercises and problem-solving. It is crucial for understanding how to write efficient code and optimize performance.
63 | - **Software Development**: Learning software development involves working with tools, languages, and methodologies to build and deliver software projects. It includes practical coding experience and understanding of software lifecycle management.
64 | 
65 | ### Career Implications
66 | 
67 | - **DSA**: Strong knowledge of DSA can lead to roles focused on algorithm design, optimization, and competitive programming. It is also valuable for technical interviews and roles that require deep problem-solving skills.
68 | - **Software Development**: Proficiency in software development is essential for roles such as software engineer, web developer, and application developer. It involves a broader skill set that includes coding, design, testing, and project management.
69 | 
70 | ## Conclusion
71 | 
72 | Both Data Structures and Algorithms (DSA) and Software Development are crucial components of a successful career in technology. DSA provides the foundational knowledge necessary for writing efficient and optimized code, while software development encompasses the broader process of creating, maintaining, and improving software applications. Understanding and excelling in both areas will enable you to tackle complex problems, build effective solutions, and contribute to the creation of high-quality software.
73 | 
74 | Happy coding!
75 | 


--------------------------------------------------------------------------------
/content/html-tutorial.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: HTML Tutorial
  3 | slug: html-tutorial
  4 | description: Comprehensive guide on learning HTML, from the basics of structuring web pages to advanced elements and semantics.
  5 | imageURl: https://images.pexels.com/photos/19387205/pexels-photo-19387205/free-photo-of-laptop-by-monitor-on-desk.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1
  6 | ---
  7 | 
  8 | # HTML Tutorial: A Comprehensive Guide
  9 | 
 10 | Welcome to this comprehensive HTML tutorial! This guide will help you understand the fundamentals of HTML (HyperText Markup Language) and teach you how to create well-structured web pages. Whether you’re a complete beginner or looking to refine your skills, this tutorial covers everything from the basics to advanced topics.
 11 | 
 12 | ## Introduction to HTML
 13 | 
 14 | HTML is the standard markup language used to create web pages. It structures the content on the page using elements like headings, paragraphs, images, and links.
 15 | 
 16 | ### Why Learn HTML?
 17 | 
 18 | - **Foundation of the Web**: HTML is the backbone of every website, making it essential for web development.
 19 | - **Simple and Powerful**: HTML is easy to learn yet powerful enough to create complex layouts.
 20 | - **Compatibility**: HTML works seamlessly across all browsers, ensuring your website reaches a wide audience.
 21 | 
 22 | ## Setting Up HTML
 23 | 
 24 | To create an HTML file, all you need is a text editor and a web browser. Here’s how to set up your environment:
 25 | 
 26 | 1. **Choose a Text Editor**: Use a simple text editor like Notepad or a code editor like Visual Studio Code, Sublime Text, or Atom.
 27 | 2. **Create an HTML File**: Save your file with a `.html` extension, for example, `index.html`.
 28 | 3. **Open in Browser**: You can view your HTML file by opening it in any web browser.
 29 | 
 30 | ## HTML Basics
 31 | 
 32 | Let’s start with the basics. In this section, you’ll learn about the basic structure of an HTML document and how to use common HTML elements like headings, paragraphs, and links.
 33 | 
 34 | ### Basic HTML Structure
 35 | 
 36 | Every HTML document starts with a `<!DOCTYPE>` declaration, followed by the `<html>`, `<head>`, and `<body>` tags. Here’s a simple example:
 37 | 
 38 | ```html
 39 | <!DOCTYPE html>
 40 | <html>
 41 | <head>
 42 |     <title>My First Web Page</title>
 43 | </head>
 44 | <body>
 45 |     <h1>Welcome to My Website</h1>
 46 |     <p>This is a paragraph of text on my first web page.</p>
 47 | </body>
 48 | </html>
 49 | ```
 50 | 
 51 | ### Headings and Paragraphs
 52 | 
 53 | HTML provides six levels of headings, from `<h1>` to `<h6>`, with `<h1>` being the most important. You can also use the `<p>` tag to add paragraphs of text.
 54 | 
 55 | ```html
 56 | <h1>Main Heading</h1>
 57 | <h2>Subheading</h2>
 58 | <p>This is a paragraph of text. HTML allows you to structure your content into headings and paragraphs for better readability.</p>
 59 | ```
 60 | 
 61 | ### Links
 62 | 
 63 | Use the `<a>` tag to create hyperlinks that allow users to navigate between pages or external sites.
 64 | 
 65 | ```html
 66 | <a href="https://www.example.com">Visit Example</a>
 67 | ```
 68 | 
 69 | ## Intermediate HTML
 70 | 
 71 | Once you understand the basics, you can start adding more complex elements to your HTML pages. This section covers images, lists, tables, and forms.
 72 | 
 73 | ### Images
 74 | 
 75 | Use the `<img>` tag to add images to your web page. The `src` attribute specifies the image source, and the `alt` attribute provides alternative text.
 76 | 
 77 | ```html
 78 | <img src="image.jpg" alt="A beautiful scenery" width="500">
 79 | ```
 80 | 
 81 | ### Lists
 82 | 
 83 | HTML supports ordered lists (`<ol>`) and unordered lists (`<ul>`), each containing list items (`<li>`).
 84 | 
 85 | ```html
 86 | <ul>
 87 |     <li>Item 1</li>
 88 |     <li>Item 2</li>
 89 |     <li>Item 3</li>
 90 | </ul>
 91 | 
 92 | <ol>
 93 |     <li>First Item</li>
 94 |     <li>Second Item</li>
 95 |     <li>Third Item</li>
 96 | </ol>
 97 | ```
 98 | 
 99 | ### Tables
100 | 
101 | You can organize data in rows and columns using HTML tables. Here’s an example:
102 | 
103 | ```html
104 | <table border="1">
105 |     <tr>
106 |         <th>Name</th>
107 |         <th>Age</th>
108 |     </tr>
109 |     <tr>
110 |         <td>Alice</td>
111 |         <td>30</td>
112 |     </tr>
113 |     <tr>
114 |         <td>Bob</td>
115 |         <td>25</td>
116 |     </tr>
117 | </table>
118 | ```
119 | 
120 | ### Forms
121 | 
122 | Forms are used to collect user input. The `<form>` tag contains various input elements like text fields, radio buttons, checkboxes, and buttons.
123 | 
124 | ```html
125 | <form action="/submit" method="post">
126 |     <label for="name">Name:</label>
127 |     <input type="text" id="name" name="name"><br>
128 | 
129 |     <label for="age">Age:</label>
130 |     <input type="number" id="age" name="age"><br>
131 | 
132 |     <input type="submit" value="Submit">
133 | </form>
134 | ```
135 | 
136 | ## Advanced HTML
137 | 
138 | Now that you’re comfortable with intermediate HTML, let’s dive into some advanced topics like semantic HTML, media elements, and HTML5 features.
139 | 
140 | ### Semantic HTML
141 | 
142 | Semantic HTML elements help convey the meaning of your content, improving accessibility and SEO. Some common semantic tags include:
143 | 
144 | - `<header>`: Defines a header section.
145 | - `<nav>`: Contains navigation links.
146 | - `<main>`: Represents the main content of the page.
147 | - `<article>`: Represents an independent piece of content.
148 | - `<footer>`: Defines a footer section.
149 | 
150 | ```html
151 | <article>
152 |     <header>
153 |         <h1>Article Title</h1>
154 |     </header>
155 |     <p>This is the content of the article.</p>
156 |     <footer>
157 |         <p>Written by Author</p>
158 |     </footer>
159 | </article>
160 | ```
161 | 
162 | ### Audio and Video
163 | 
164 | HTML5 introduced the `<audio>` and `<video>` elements, which allow you to embed media files directly into your web pages.
165 | 
166 | ```html
167 | <audio controls>
168 |     <source src="audio.mp3" type="audio/mpeg">
169 |     Your browser does not support the audio element.
170 | </audio>
171 | 
172 | <video width="320" height="240" controls>
173 |     <source src="video.mp4" type="video/mp4">
174 |     Your browser does not support the video element.
175 | </video>
176 | ```
177 | 
178 | ### HTML5 Features
179 | 
180 | HTML5 brought many new features and improvements, including new input types, enhanced form validation, and APIs for working with geolocation, local storage, and more.
181 | 
182 | - **New Input Types**: HTML5 added new input types like `email`, `date`, and `range`.
183 | - **Form Validation**: HTML5 allows you to use attributes like `required` and `pattern` for client-side form validation.
184 | 
185 | ```html
186 | <form>
187 |     <label for="email">Email:</label>
188 |     <input type="email" id="email" name="email" required><br>
189 | 
190 |     <label for="birthday">Birthday:</label>
191 |     <input type="date" id="birthday" name="birthday"><br>
192 | 
193 |     <input type="submit" value="Submit">
194 | </form>
195 | ```
196 | 
197 | ## Conclusion
198 | 
199 | Congratulations on completing this HTML tutorial! You’ve learned the basics of HTML, intermediate topics like tables and forms, and advanced concepts such as semantic HTML and HTML5 features. With HTML as your foundation, you can start building websites and move on to other technologies like CSS and JavaScript to enhance your web development skills.
200 | 
201 | Happy coding!
202 | 


--------------------------------------------------------------------------------
/content/java-programming-tutorial.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Java Programming Tutorial
  3 | slug: java-programming-tutorial
  4 | description: Comprehensive guide on learning Java programming from basics to advanced topics.
  5 | ---
  6 | 
  7 | # Java Programming Tutorial: A Comprehensive Guide
  8 | 
  9 | Welcome to this comprehensive Java programming tutorial! Whether you're a beginner or looking to enhance your Java skills, this guide will walk you through the basics and help you dive into more advanced concepts as you progress.
 10 | 
 11 | ## Introduction to Java
 12 | 
 13 | Java is a popular, high-level programming language known for its portability, reliability, and versatility. It is widely used in enterprise applications, Android development, web development, and more.
 14 | 
 15 | ### Why Learn Java?
 16 | 
 17 | - **Platform Independence**: Java is "write once, run anywhere," which means Java code can run on any platform that has a Java Virtual Machine (JVM).
 18 | - **Object-Oriented Programming**: Java supports object-oriented programming, which allows for clean and modular code.
 19 | - **Large Ecosystem**: Java has a rich set of libraries and frameworks, making it suitable for a wide range of applications.
 20 | 
 21 | ## Setting Up Java
 22 | 
 23 | Before you start coding in Java, you'll need to set up your development environment. Here’s how:
 24 | 
 25 | 1. **Install JDK (Java Development Kit)**: Download and install the latest version of the JDK from the official Oracle website.
 26 | 2. **Set Up an IDE**: Popular IDEs for Java include IntelliJ IDEA, Eclipse, and NetBeans. Alternatively, you can use a text editor like Visual Studio Code with the Java extension.
 27 | 3. **Verify Installation**: To verify that Java is installed, open the terminal or command prompt and type `java -version`.
 28 | 
 29 | ## Java Basics
 30 | 
 31 | With your environment ready, let’s dive into the basics. In this section, we’ll cover:
 32 | 
 33 | - **Variables and Data Types**: Learn how to declare and use variables in Java.
 34 | - **Control Flow**: Understand how to use conditional statements and loops.
 35 | - **Methods**: Learn how to write reusable code blocks with methods.
 36 | 
 37 | ### Variables and Data Types
 38 | 
 39 | ```java
 40 | public class Main {
 41 |     public static void main(String[] args) {
 42 |         int age = 25;
 43 |         double height = 5.9;
 44 |         char initial = 'A';
 45 | 
 46 |         System.out.println("Age: " + age + ", Height: " + height + ", Initial: " + initial);
 47 |     }
 48 | }
 49 | ```
 50 | 
 51 | ### Control Flow
 52 | 
 53 | ```java
 54 | public class Main {
 55 |     public static void main(String[] args) {
 56 |         int age = 20;
 57 | 
 58 |         if (age >= 18) {
 59 |             System.out.println("You are an adult.");
 60 |         } else {
 61 |             System.out.println("You are a minor.");
 62 |         }
 63 | 
 64 |         for (int i = 0; i < 5; i++) {
 65 |             System.out.println("Count: " + i);
 66 |         }
 67 |     }
 68 | }
 69 | ```
 70 | 
 71 | ### Methods
 72 | 
 73 | ```java
 74 | public class Main {
 75 |     public static void main(String[] args) {
 76 |         greet("Alice");
 77 |     }
 78 | 
 79 |     public static void greet(String name) {
 80 |         System.out.println("Hello, " + name + "!");
 81 |     }
 82 | }
 83 | ```
 84 | 
 85 | ## Intermediate Java
 86 | 
 87 | Once you’ve mastered the basics, it’s time to explore more intermediate features of Java:
 88 | 
 89 | - **Classes and Objects**: Learn the principles of object-oriented programming in Java.
 90 | - **Inheritance and Polymorphism**: Understand how to reuse and extend classes.
 91 | - **Collections Framework**: Discover Java's powerful data structures like lists, sets, and maps.
 92 | 
 93 | ### Classes and Objects
 94 | 
 95 | ```java
 96 | class Dog {
 97 |     String name;
 98 |     String breed;
 99 | 
100 |     void bark() {
101 |         System.out.println(name + " says Woof!");
102 |     }
103 | }
104 | 
105 | public class Main {
106 |     public static void main(String[] args) {
107 |         Dog dog = new Dog();
108 |         dog.name = "Buddy";
109 |         dog.breed = "Golden Retriever";
110 |         dog.bark();
111 |     }
112 | }
113 | ```
114 | 
115 | ### Inheritance and Polymorphism
116 | 
117 | ```java
118 | class Animal {
119 |     void sound() {
120 |         System.out.println("Some generic animal sound.");
121 |     }
122 | }
123 | 
124 | class Dog extends Animal {
125 |     @Override
126 |     void sound() {
127 |         System.out.println("Woof!");
128 |     }
129 | }
130 | 
131 | public class Main {
132 |     public static void main(String[] args) {
133 |         Animal animal = new Dog();
134 |         animal.sound();
135 |     }
136 | }
137 | ```
138 | 
139 | ### Collections Framework
140 | 
141 | ```java
142 | import java.util.ArrayList;
143 | 
144 | public class Main {
145 |     public static void main(String[] args) {
146 |         ArrayList<Integer> numbers = new ArrayList<>();
147 |         numbers.add(1);
148 |         numbers.add(2);
149 |         numbers.add(3);
150 | 
151 |         for (int num : numbers) {
152 |             System.out.println(num);
153 |         }
154 |     }
155 | }
156 | ```
157 | 
158 | ## Advanced Java
159 | 
160 | After gaining confidence with intermediate concepts, you can now explore advanced Java features:
161 | 
162 | - **Exception Handling**: Learn how to handle runtime errors gracefully.
163 | - **Generics**: Understand how to write flexible and type-safe code.
164 | - **Multithreading**: Explore concurrency in Java for better performance.
165 | 
166 | ### Exception Handling
167 | 
168 | ```java
169 | public class Main {
170 |     public static void main(String[] args) {
171 |         try {
172 |             int a = 10, b = 0;
173 |             int result = a / b;
174 |             System.out.println(result);
175 |         } catch (ArithmeticException e) {
176 |             System.out.println("Cannot divide by zero!");
177 |         }
178 |     }
179 | }
180 | ```
181 | 
182 | ### Generics
183 | 
184 | ```java
185 | import java.util.ArrayList;
186 | 
187 | public class Main {
188 |     public static void main(String[] args) {
189 |         ArrayList<String> names = new ArrayList<>();
190 |         names.add("Alice");
191 |         names.add("Bob");
192 | 
193 |         for (String name : names) {
194 |             System.out.println(name);
195 |         }
196 |     }
197 | }
198 | ```
199 | 
200 | ### Multithreading
201 | 
202 | ```java
203 | class MyThread extends Thread {
204 |     public void run() {
205 |         for (int i = 0; i < 5; i++) {
206 |             System.out.println(i);
207 |         }
208 |     }
209 | }
210 | 
211 | public class Main {
212 |     public static void main(String[] args) {
213 |         MyThread t1 = new MyThread();
214 |         MyThread t2 = new MyThread();
215 | 
216 |         t1.start();
217 |         t2.start();
218 |     }
219 | }
220 | ```
221 | 
222 | ## Conclusion
223 | 
224 | Congratulations on completing this Java programming tutorial! You’ve covered everything from the basics of Java to advanced concepts like exception handling and multithreading. Java is a powerful and versatile language that can be used for a wide range of applications, so keep practicing and building projects to enhance your skills.
225 | 
226 | Happy coding!
227 | 


--------------------------------------------------------------------------------
/content/javascript-tutorial.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: JavaScript Tutorial
  3 | slug: javascript-tutorial
  4 | description: Comprehensive guide on learning JavaScript, from the basics of syntax and functions to advanced topics like asynchronous programming and frameworks.
  5 | ---
  6 | 
  7 | # JavaScript Tutorial: A Comprehensive Guide
  8 | 
  9 | Welcome to this comprehensive JavaScript tutorial! Whether you're new to programming or looking to enhance your skills, this guide will cover everything from the basics of JavaScript syntax to more advanced concepts and techniques.
 10 | 
 11 | ## Introduction to JavaScript
 12 | 
 13 | JavaScript is a versatile programming language primarily used for creating dynamic and interactive content on websites. It's an essential technology for web development, along with HTML and CSS.
 14 | 
 15 | ### Why Learn JavaScript?
 16 | 
 17 | - **Interactivity**: JavaScript allows you to create interactive web elements like forms, animations, and dynamic content updates.
 18 | - **Versatility**: JavaScript can be used on both the client-side (in the browser) and server-side (using Node.js).
 19 | - **Community and Ecosystem**: JavaScript has a large community and a rich ecosystem of libraries and frameworks.
 20 | 
 21 | ## Setting Up JavaScript
 22 | 
 23 | To start using JavaScript, you need a web browser and a text editor. JavaScript code can be included in HTML files or in separate `.js` files.
 24 | 
 25 | ### Inline JavaScript
 26 | 
 27 | You can add JavaScript directly into your HTML file using the `<script>` tag.
 28 | 
 29 | ```html
 30 | <!DOCTYPE html>
 31 | <html>
 32 | <head>
 33 |     <title>My First JavaScript</title>
 34 | </head>
 35 | <body>
 36 |     <h1>Hello, JavaScript!</h1>
 37 |     <script>
 38 |         alert('Hello, World!');
 39 |     </script>
 40 | </body>
 41 | </html>
 42 | ```
 43 | 
 44 | ### External JavaScript
 45 | 
 46 | For better organization, you can place JavaScript code in a separate file and link it to your HTML file.
 47 | 
 48 | **In `script.js`:**
 49 | 
 50 | ```javascript
 51 | alert('Hello, World!');
 52 | ```
 53 | 
 54 | **In `index.html`:**
 55 | 
 56 | ```html
 57 | <!DOCTYPE html>
 58 | <html>
 59 | <head>
 60 |     <title>My First JavaScript</title>
 61 |     <script src="script.js" defer></script>
 62 | </head>
 63 | <body>
 64 |     <h1>Hello, JavaScript!</h1>
 65 | </body>
 66 | </html>
 67 | ```
 68 | 
 69 | ## JavaScript Basics
 70 | 
 71 | Let’s start with the fundamentals. This section covers variables, data types, operators, and basic functions.
 72 | 
 73 | ### Variables and Data Types
 74 | 
 75 | JavaScript supports several data types including numbers, strings, booleans, objects, and arrays.
 76 | 
 77 | ```javascript
 78 | let age = 25; // Number
 79 | let name = "Alice"; // String
 80 | let isStudent = true; // Boolean
 81 | 
 82 | let person = {
 83 |     firstName: "John",
 84 |     lastName: "Doe"
 85 | }; // Object
 86 | 
 87 | let numbers = [1, 2, 3, 4, 5]; // Array
 88 | ```
 89 | 
 90 | ### Operators
 91 | 
 92 | JavaScript operators are used to perform operations on variables and values.
 93 | 
 94 | ```javascript
 95 | let x = 10;
 96 | let y = 5;
 97 | 
 98 | let sum = x + y; // Addition
 99 | let difference = x - y; // Subtraction
100 | let product = x * y; // Multiplication
101 | let quotient = x / y; // Division
102 | 
103 | let isEqual = (x == y); // Equality
104 | ```
105 | 
106 | ### Functions
107 | 
108 | Functions are reusable blocks of code that perform a specific task.
109 | 
110 | ```javascript
111 | function greet(name) {
112 |     return `Hello, ${name}!`;
113 | }
114 | 
115 | console.log(greet("Alice")); // Output: Hello, Alice!
116 | ```
117 | 
118 | ## Intermediate JavaScript
119 | 
120 | Once you’re comfortable with the basics, you can explore more intermediate topics such as objects, arrays, and DOM manipulation.
121 | 
122 | ### Objects
123 | 
124 | Objects are used to store collections of data and more complex entities.
125 | 
126 | ```javascript
127 | let car = {
128 |     brand: "Toyota",
129 |     model: "Camry",
130 |     year: 2020,
131 |     start: function() {
132 |         console.log("Car started");
133 |     }
134 | };
135 | 
136 | car.start(); // Output: Car started
137 | ```
138 | 
139 | ### Arrays
140 | 
141 | Arrays are used to store multiple values in a single variable.
142 | 
143 | ```javascript
144 | let fruits = ["Apple", "Banana", "Cherry"];
145 | fruits.push("Date"); // Adds "Date" to the end of the array
146 | 
147 | for (let i = 0; i < fruits.length; i++) {
148 |     console.log(fruits[i]);
149 | }
150 | ```
151 | 
152 | ### DOM Manipulation
153 | 
154 | JavaScript allows you to interact with the HTML document and modify the content dynamically.
155 | 
156 | ```javascript
157 | document.getElementById("myButton").addEventListener("click", function() {
158 |     document.getElementById("myText").innerText = "Button clicked!";
159 | });
160 | ```
161 | 
162 | **In `index.html`:**
163 | 
164 | ```html
165 | <!DOCTYPE html>
166 | <html>
167 | <head>
168 |     <title>DOM Manipulation</title>
169 |     <script src="script.js" defer></script>
170 | </head>
171 | <body>
172 |     <button id="myButton">Click Me</button>
173 |     <p id="myText">Hello, World!</p>
174 | </body>
175 | </html>
176 | ```
177 | 
178 | ## Advanced JavaScript
179 | 
180 | In this section, you’ll dive into more advanced topics like asynchronous programming, closures, and modern JavaScript features.
181 | 
182 | ### Asynchronous JavaScript
183 | 
184 | JavaScript supports asynchronous programming using callbacks, promises, and async/await.
185 | 
186 | #### Callbacks
187 | 
188 | ```javascript
189 | function fetchData(callback) {
190 |     setTimeout(() => {
191 |         callback("Data fetched");
192 |     }, 1000);
193 | }
194 | 
195 | fetchData(function(data) {
196 |     console.log(data); // Output: Data fetched
197 | });
198 | ```
199 | 
200 | #### Promises
201 | 
202 | ```javascript
203 | let promise = new Promise((resolve, reject) => {
204 |     setTimeout(() => {
205 |         resolve("Data fetched");
206 |     }, 1000);
207 | });
208 | 
209 | promise.then(data => {
210 |     console.log(data); // Output: Data fetched
211 | });
212 | ```
213 | 
214 | #### Async/Await
215 | 
216 | ```javascript
217 | async function fetchData() {
218 |     let response = await new Promise((resolve, reject) => {
219 |         setTimeout(() => {
220 |             resolve("Data fetched");
221 |         }, 1000);
222 |     });
223 |     console.log(response); // Output: Data fetched
224 | }
225 | 
226 | fetchData();
227 | ```
228 | 
229 | ### Closures
230 | 
231 | Closures allow functions to access variables from their outer scope.
232 | 
233 | ```javascript
234 | function outerFunction() {
235 |     let outerVariable = "I'm from the outer scope";
236 |     function innerFunction() {
237 |         console.log(outerVariable);
238 |     }
239 |     return innerFunction;
240 | }
241 | 
242 | let closure = outerFunction();
243 | closure(); // Output: I'm from the outer scope
244 | ```
245 | 
246 | ### Modern JavaScript Features
247 | 
248 | Explore ES6 and beyond features such as arrow functions, destructuring, and modules.
249 | 
250 | #### Arrow Functions
251 | 
252 | ```javascript
253 | const add = (a, b) => a + b;
254 | console.log(add(2, 3)); // Output: 5
255 | ```
256 | 
257 | #### Destructuring
258 | 
259 | ```javascript
260 | let person = { name: "Alice", age: 25 };
261 | let { name, age } = person;
262 | console.log(name, age); // Output: Alice 25
263 | ```
264 | 
265 | #### Modules
266 | 
267 | You can use `import` and `export` to manage code in separate files.
268 | 
269 | **In `module.js`:**
270 | 
271 | ```javascript
272 | export const greet = name => `Hello, ${name}!`;
273 | ```
274 | 
275 | **In `main.js`:**
276 | 
277 | ```javascript
278 | import { greet } from './module.js';
279 | 
280 | console.log(greet("Alice")); // Output: Hello, Alice!
281 | ```
282 | 
283 | ## Conclusion
284 | 
285 | Congratulations on completing this JavaScript tutorial! You’ve covered the basics of JavaScript, intermediate concepts like objects and DOM manipulation, and advanced topics such as asynchronous programming and modern features. JavaScript is a powerful language that opens up numerous possibilities for web development, so keep practicing and exploring new features.
286 | 
287 | Happy coding!
288 | 


--------------------------------------------------------------------------------
/content/js-tutorial.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: JavaScript Tutorial
  3 | slug: js-tutorial
  4 | description: Comprehensive guide on learning JavaScript from basics to advanced topics.  
  5 | ---
  6 | 
  7 | 
  8 | JavaScript is a versatile and powerful programming language that is essential for web development. This tutorial will cover the basics and some advanced topics in JavaScript.
  9 | 
 10 | ## Table of Contents
 11 | 
 12 | 1. **Introduction to JavaScript**
 13 | 2. **Variables and Data Types**
 14 | 3. **Control Structures**
 15 | 4. **Functions**
 16 | 5. **Objects and Arrays**
 17 | 6. **DOM Manipulation**
 18 | 7. **Event Handling**
 19 | 8. **Asynchronous JavaScript**
 20 | 9. **ES6 Features**
 21 | 10. **JavaScript Best Practices**
 22 | 
 23 | ## Introduction to JavaScript
 24 | 
 25 | JavaScript is a programming language that allows you to implement complex features on web pages, such as:
 26 | 
 27 | - **Interactivity:** Responding to user inputs.
 28 | - **Animations:** Moving elements on the page.
 29 | - **Data Handling:** Sending and receiving data to/from a server.
 30 | 
 31 | ## Variables and Data Types
 32 | 
 33 | In JavaScript, you can store data in variables:
 34 | 
 35 | ```javascript
 36 | let name = 'John'; // A string
 37 | let age = 30; // A number
 38 | let isStudent = true; // A boolean
 39 | ```
 40 | 
 41 | There are different data types in JavaScript, including:
 42 | 
 43 | - **String**
 44 | - **Number**
 45 | - **Boolean**
 46 | - **Object**
 47 | - **Undefined**
 48 | 
 49 | ## Control Structures
 50 | 
 51 | Control structures allow you to dictate the flow of your program. The most common are:
 52 | 
 53 | - **if/else statements**
 54 | - **switch statements**
 55 | - **loops** (for, while, do-while)
 56 | 
 57 | Example:
 58 | 
 59 | ```javascript
 60 | if (age > 18) {
 61 |     console.log('Adult');
 62 | } else {
 63 |     console.log('Not an adult');
 64 | }
 65 | ```
 66 | 
 67 | ## Functions
 68 | 
 69 | Functions allow you to group code into reusable blocks:
 70 | 
 71 | ```javascript
 72 | function greet(name) {
 73 |     return `Hello, ${name}!`;
 74 | }
 75 | 
 76 | console.log(greet('Alice'));
 77 | ```
 78 | 
 79 | Functions can be:
 80 | 
 81 | - **Named functions**
 82 | - **Anonymous functions**
 83 | - **Arrow functions**
 84 | 
 85 | ## Objects and Arrays
 86 | 
 87 | JavaScript uses objects and arrays to store complex data:
 88 | 
 89 | ```javascript
 90 | let person = {
 91 |     name: 'John',
 92 |     age: 30,
 93 |     isStudent: false
 94 | };
 95 | 
 96 | let numbers = [1, 2, 3, 4, 5];
 97 | ```
 98 | 
 99 | ## DOM Manipulation
100 | 
101 | The Document Object Model (DOM) represents your web page. You can manipulate it using JavaScript:
102 | 
103 | ```javascript
104 | document.getElementById('myElement').innerText = 'Hello, World!';
105 | ```
106 | 
107 | ## Event Handling
108 | 
109 | You can respond to user events like clicks or key presses:
110 | 
111 | ```javascript
112 | document.getElementById('myButton').addEventListener('click', function() {
113 |     alert('Button clicked!');
114 | });
115 | ```
116 | 
117 | ## Asynchronous JavaScript
118 | 
119 | Asynchronous programming allows you to perform tasks like data fetching without freezing the web page:
120 | 
121 | ```javascript
122 | fetch('https://api.example.com/data')
123 |     .then(response => response.json())
124 |     .then(data => console.log(data));
125 | ```
126 | 
127 | ## ES6 Features
128 | 
129 | ES6 introduced many new features to JavaScript, such as:
130 | 
131 | - **let and const**
132 | - **Arrow functions**
133 | - **Template literals**
134 | - **Destructuring**
135 | - **Classes**
136 | 
137 | ## JavaScript Best Practices
138 | 
139 | To write clean and efficient JavaScript, follow these best practices:
140 | 
141 | - **Use meaningful variable names**
142 | - **Keep your code DRY (Don't Repeat Yourself)**
143 | - **Comment your code**
144 | - **Use strict mode (`"use strict";`)**
145 | 
146 | 


--------------------------------------------------------------------------------
/content/mern-vs-mean.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: MERN vs. MEAN - A Comprehensive Comparison
 3 | slug: mern-vs-mean
 4 | description: Explore the differences between the MERN and MEAN stacks to determine which is better suited for your web development needs.
 5 | ---
 6 | 
 7 | # MERN vs. MEAN: A Comprehensive Comparison
 8 | 
 9 | When it comes to building modern web applications, developers often turn to full-stack JavaScript frameworks that offer a cohesive set of tools and technologies. Two popular choices are the MERN and MEAN stacks. Both are powerful, but they cater to slightly different needs and preferences. In this post, we’ll explore the key differences between the MERN and MEAN stacks to help you decide which is the best fit for your projects.
10 | 
11 | ## What is the MERN Stack?
12 | 
13 | The MERN stack is a combination of four technologies:
14 | 
15 | - **MongoDB**: A NoSQL database that stores data in a flexible, JSON-like format.
16 | - **Express.js**: A minimalist web framework for Node.js that simplifies backend development.
17 | - **React**: A JavaScript library for building user interfaces, particularly single-page applications (SPAs).
18 | - **Node.js**: A JavaScript runtime that allows you to run JavaScript code on the server side.
19 | 
20 | **MERN Stack Advantages:**
21 | 
22 | 1. **Component-Based Architecture**: React’s component-based structure promotes reusable and maintainable code, making it easier to build complex UIs.
23 | 2. **Virtual DOM**: React uses a virtual DOM to improve performance by minimizing direct manipulations of the real DOM.
24 | 3. **Rich Ecosystem**: React’s ecosystem includes a wide range of libraries and tools, such as React Router and Redux, for managing application state and routing.
25 | 
26 | ## What is the MEAN Stack?
27 | 
28 | The MEAN stack consists of:
29 | 
30 | - **MongoDB**: As with MERN, MongoDB is used for data storage.
31 | - **Express.js**: Provides a framework for building web applications in Node.js.
32 | - **Angular**: A comprehensive front-end framework developed by Google for building dynamic web applications.
33 | - **Node.js**: Used as the server-side JavaScript runtime environment.
34 | 
35 | **MEAN Stack Advantages:**
36 | 
37 | 1. **Two-Way Data Binding**: Angular’s two-way data binding feature synchronizes data between the model and the view, simplifying the development of interactive applications.
38 | 2. **Dependency Injection**: Angular’s dependency injection system promotes modularity and easier testing.
39 | 3. **Full-Featured Framework**: Angular provides a comprehensive set of tools out of the box, including routing, form handling, and HTTP client capabilities.
40 | 
41 | ## Key Differences Between MERN and MEAN
42 | 
43 | ### 1. Front-End Library vs. Framework
44 | 
45 | - **React (MERN)**: React is a library focused on building UI components. It provides more flexibility and can be combined with other libraries or tools to build a complete solution.
46 | - **Angular (MEAN)**: Angular is a full-fledged framework that offers a comprehensive set of tools and features for building web applications. It provides a more opinionated approach, which can speed up development but may be less flexible than React.
47 | 
48 | ### 2. Learning Curve
49 | 
50 | - **React (MERN)**: React has a relatively gentle learning curve, especially if you are familiar with JavaScript. It requires integrating additional libraries for routing and state management.
51 | - **Angular (MEAN)**: Angular has a steeper learning curve due to its extensive set of features and complex architecture. However, it provides a more cohesive and opinionated development experience.
52 | 
53 | ### 3. Performance
54 | 
55 | - **React (MERN)**: React’s virtual DOM and efficient update mechanisms contribute to high performance, especially for applications with complex UIs.
56 | - **Angular (MEAN)**: Angular’s performance is good but can be affected by its two-way data binding and digest cycles, especially in large-scale applications with frequent data updates.
57 | 
58 | ### 4. Community and Ecosystem
59 | 
60 | - **React (MERN)**: React has a large and active community, with extensive third-party libraries and tools available. It is widely used in industry, making it a popular choice for many developers.
61 | - **Angular (MEAN)**: Angular also has a strong community and is backed by Google. It has a rich ecosystem of tools and libraries but is less flexible compared to React.
62 | 
63 | ## Choosing Between MERN and MEAN
64 | 
65 | When deciding between MERN and MEAN, consider the following factors:
66 | 
67 | - **Project Requirements**: If you need a flexible front-end solution and prefer a library-based approach, MERN with React might be the better choice. If you want a comprehensive framework with built-in tools and a more structured approach, MEAN with Angular could be more suitable.
68 | - **Team Skills**: Assess your team’s familiarity with React or Angular. If your team has experience with one of these technologies, it may influence your choice.
69 | - **Development Speed**: Angular’s all-in-one solution can speed up development, but React’s flexibility might be advantageous for projects requiring custom solutions.
70 | 
71 | ## Conclusion
72 | 
73 | Both the MERN and MEAN stacks offer robust solutions for building modern web applications, each with its own strengths and trade-offs. The choice between MERN and MEAN depends on your specific project needs, team expertise, and development preferences. By understanding the key differences and advantages of each stack, you can make an informed decision that best aligns with your goals.
74 | 
75 | Happy coding!
76 | 


--------------------------------------------------------------------------------
/content/python-tutorial.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Python Tutorial
  3 | slug: python-tutorial
  4 | description: Comprehensive guide on learning Python from basics to advanced topics.
  5 | ---
  6 | 
  7 | # Python Tutorial: A Comprehensive Guide
  8 | 
  9 | Welcome to this comprehensive Python tutorial! Whether you're a complete beginner or looking to brush up on your Python skills, this guide will take you through the basics and gradually introduce advanced topics.
 10 | 
 11 | ## Introduction to Python
 12 | 
 13 | Python is a versatile, high-level programming language that is easy to learn and fun to use. It is widely used in web development, data analysis, machine learning, and automation, making it an essential tool for modern developers.
 14 | 
 15 | ### Why Learn Python?
 16 | 
 17 | - **Beginner-friendly**: Python has a simple syntax, which makes it accessible to beginners.
 18 | - **Versatile**: Python can be used for web development, data science, automation, and more.
 19 | - **Community Support**: Python has a large and active community, ensuring a wealth of resources for learners.
 20 | 
 21 | ## Setting Up Python
 22 | 
 23 | Before diving into code, you'll need to set up Python on your machine. Follow these steps to get started:
 24 | 
 25 | 1. **Download Python**: Head over to [python.org](https://www.python.org/downloads/) and download the latest version of Python.
 26 | 2. **Install Python**: Follow the installation instructions for your operating system (Windows, macOS, or Linux).
 27 | 3. **Verify Installation**: Open your terminal or command prompt and type `python --version` to verify the installation.
 28 | 
 29 | ## Python Basics
 30 | 
 31 | Now that you have Python set up, let's start with the basics. In this section, we'll cover:
 32 | 
 33 | - **Variables and Data Types**: Learn how to store and manipulate data in Python.
 34 | - **Control Flow**: Understand how to use conditional statements and loops.
 35 | - **Functions**: Discover how to create reusable blocks of code.
 36 | 
 37 | ### Variables and Data Types
 38 | 
 39 | ```python
 40 | # Example of variables and data types
 41 | name = "Alice"
 42 | age = 25
 43 | is_student = True
 44 | 
 45 | print(f"Name: {name}, Age: {age}, Student: {is_student}")
 46 | ```
 47 | 
 48 | ### Control Flow
 49 | 
 50 | ```python
 51 | # Example of control flow
 52 | if age < 18:
 53 |     print("You're a minor.")
 54 | else:
 55 |     print("You're an adult.")
 56 | ```
 57 | 
 58 | ### Functions
 59 | 
 60 | ```python
 61 | # Example of a function
 62 | def greet(name):
 63 |     return f"Hello, {name}!"
 64 | 
 65 | print(greet("Alice"))
 66 | ```
 67 | 
 68 | ## Intermediate Python
 69 | 
 70 | After mastering the basics, it's time to explore more advanced topics, such as:
 71 | 
 72 | - **Modules and Packages**: Learn how to organize your code and reuse functionality.
 73 | - **File Handling**: Understand how to read from and write to files.
 74 | - **Exception Handling**: Discover how to handle errors and exceptions in your code.
 75 | 
 76 | ### Modules and Packages
 77 | 
 78 | ```python
 79 | # Example of importing a module
 80 | import math
 81 | 
 82 | print(math.sqrt(16))  # Outputs: 4.0
 83 | ```
 84 | 
 85 | ### File Handling
 86 | 
 87 | ```python
 88 | # Example of file handling
 89 | with open("example.txt", "r") as file:
 90 |     content = file.read()
 91 | 
 92 | print(content)
 93 | ```
 94 | 
 95 | ### Exception Handling
 96 | 
 97 | ```python
 98 | # Example of exception handling
 99 | try:
100 |     result = 10 / 0
101 | except ZeroDivisionError:
102 |     print("Cannot divide by zero.")
103 | ```
104 | 
105 | ## Advanced Python
106 | 
107 | Now that you're comfortable with the intermediate concepts, let's dive into some advanced Python topics:
108 | 
109 | - **Object-Oriented Programming (OOP)**: Learn how to structure your code using classes and objects.
110 | - **Decorators**: Explore how to modify the behavior of functions or methods.
111 | - **Generators**: Understand how to create efficient iterators.
112 | 
113 | ### Object-Oriented Programming (OOP)
114 | 
115 | ```python
116 | # Example of a class
117 | class Dog:
118 |     def __init__(self, name, breed):
119 |         self.name = name
120 |         self.breed = breed
121 | 
122 |     def bark(self):
123 |         return f"{self.name} says Woof!"
124 | 
125 | dog = Dog("Buddy", "Golden Retriever")
126 | print(dog.bark())
127 | ```
128 | 
129 | ### Decorators
130 | 
131 | ```python
132 | # Example of a decorator
133 | def uppercase_decorator(func):
134 |     def wrapper():
135 |         result = func()
136 |         return result.upper()
137 |     return wrapper
138 | 
139 | @uppercase_decorator
140 | def greet():
141 |     return "hello"
142 | 
143 | print(greet())  # Outputs: HELLO
144 | ```
145 | 
146 | ### Generators
147 | 
148 | ```python
149 | # Example of a generator
150 | def count_up_to(max):
151 |     count = 1
152 |     while count <= max:
153 |         yield count
154 |         count += 1
155 | 
156 | for number in count_up_to(5):
157 |     print(number)
158 | ```
159 | 
160 | ## Conclusion
161 | 
162 | Congratulations on making it through this Python tutorial! You've covered everything from the basics to advanced topics. Keep practicing, and don't hesitate to explore Python's vast ecosystem of libraries and frameworks.
163 | 
164 | Happy coding!
165 | 


--------------------------------------------------------------------------------
/content/top-5-programming-languages.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Top 5 Programming Languages to Learn in 2024
 3 | slug: top-5-programming-languages
 4 | description: Discover the top 5 programming languages to learn in 2024, each offering unique advantages and opportunities for career growth.
 5 | ---
 6 | 
 7 | # Top 5 Programming Languages to Learn in 2024
 8 | 
 9 | In the ever-evolving world of technology, choosing the right programming language can significantly impact your career and development skills. With countless languages available, it’s crucial to focus on those that offer the most opportunities and growth potential. In 2024, here are the top 5 programming languages to consider learning:
10 | 
11 | ## 1. Python
12 | 
13 | **Why Learn Python?**
14 | 
15 | - **Versatility**: Python is used in web development, data science, artificial intelligence, automation, and more.
16 | - **Ease of Learning**: Known for its clear and readable syntax, Python is often recommended for beginners.
17 | - **Strong Community**: Python has a vast ecosystem of libraries and frameworks, such as Django, Flask, and TensorFlow.
18 | 
19 | **Key Use Cases:**
20 | 
21 | - Web development (using Django, Flask)
22 | - Data analysis and visualization (using Pandas, Matplotlib)
23 | - Machine learning and AI (using TensorFlow, Scikit-learn)
24 | - Automation and scripting
25 | 
26 | ## 2. JavaScript
27 | 
28 | **Why Learn JavaScript?**
29 | 
30 | - **Web Development**: JavaScript is essential for front-end development and increasingly popular for back-end development with Node.js.
31 | - **Interactivity**: It enables interactive elements on websites, such as animations and form validation.
32 | - **Rich Ecosystem**: Frameworks like React, Angular, and Vue.js enhance development productivity.
33 | 
34 | **Key Use Cases:**
35 | 
36 | - Front-end development (using React, Angular, Vue.js)
37 | - Back-end development (using Node.js)
38 | - Web applications and interactive features
39 | - Server-side scripting
40 | 
41 | ## 3. Java
42 | 
43 | **Why Learn Java?**
44 | 
45 | - **Enterprise Applications**: Java is widely used in enterprise environments for large-scale applications and backend systems.
46 | - **Platform Independence**: Java’s “write once, run anywhere” capability allows applications to run on any device with a Java Virtual Machine (JVM).
47 | - **Robust Ecosystem**: Frameworks like Spring and Hibernate are popular for building enterprise applications.
48 | 
49 | **Key Use Cases:**
50 | 
51 | - Enterprise applications
52 | - Android app development
53 | - Web applications (using Spring)
54 | - Large-scale systems and backend services
55 | 
56 | ## 4. C#
57 | 
58 | **Why Learn C#?**
59 | 
60 | - **Microsoft Ecosystem**: C# is the primary language for developing applications on the Microsoft .NET platform.
61 | - **Versatility**: It’s used for web applications, desktop applications, game development, and more.
62 | - **Integration**: C# integrates well with Microsoft technologies and services, making it a good choice for Windows-based development.
63 | 
64 | **Key Use Cases:**
65 | 
66 | - Windows desktop applications (using WPF, WinForms)
67 | - Web development (using ASP.NET)
68 | - Game development (using Unity)
69 | - Enterprise applications on the .NET platform
70 | 
71 | ## 5. SQL
72 | 
73 | **Why Learn SQL?**
74 | 
75 | - **Database Management**: SQL is essential for managing and querying relational databases.
76 | - **Data Analysis**: Understanding SQL helps in extracting and analyzing data from databases.
77 | - **Universality**: SQL is widely used across various database systems like MySQL, PostgreSQL, and Microsoft SQL Server.
78 | 
79 | **Key Use Cases:**
80 | 
81 | - Database management and design
82 | - Data querying and analysis
83 | - Reporting and data extraction
84 | - Backend development for data-driven applications
85 | 
86 | ## Conclusion
87 | 
88 | Choosing the right programming language depends on your career goals, interests, and the specific domain you want to specialize in. Python, JavaScript, Java, C#, and SQL each offer unique advantages and opportunities in different areas of technology. By learning these languages, you'll be well-equipped to tackle various challenges and advance in the tech industry.
89 | 
90 | Happy coding!
91 | 


--------------------------------------------------------------------------------
/content/typescript-tutorial.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: TypeScript Tutorial
  3 | slug: typescript-tutorial
  4 | description: Comprehensive guide on learning TypeScript from basics to advanced topics.  
  5 | ---
  6 | 
  7 | # Introduction to TypeScript
  8 | 
  9 | TypeScript is a powerful, statically typed superset of JavaScript that adds optional static types, interfaces, and more to the language. It's designed to help developers build large-scale applications with more reliability and easier code maintenance.
 10 | 
 11 | ## Why Learn TypeScript?
 12 | 
 13 | 1. **Type Safety**: Catch errors early during development.
 14 | 2. **Improved IDE Support**: Better autocompletion, navigation, and refactoring tools.
 15 | 3. **Enhanced Code Quality**: With TypeScript, your code is more predictable and easier to debug.
 16 | 4. **Seamless JavaScript Integration**: TypeScript is a superset of JavaScript, so all JavaScript code is valid TypeScript code.
 17 | 
 18 | ## Getting Started
 19 | 
 20 | ### Installing TypeScript
 21 | 
 22 | To install TypeScript, you need to have Node.js installed. You can install TypeScript globally on your machine using npm:
 23 | 
 24 | ```bash
 25 | npm install -g typescript
 26 | ```
 27 | 
 28 | After installation, you can check the version of TypeScript installed by running:
 29 | 
 30 | ```bash
 31 | tsc --version
 32 | ```
 33 | 
 34 | ### Setting Up a TypeScript Project
 35 | 
 36 | To start a new TypeScript project, you need to initialize it with a `tsconfig.json` file. This file stores all the configuration options for the TypeScript compiler.
 37 | 
 38 | ```bash
 39 | tsc --init
 40 | ```
 41 | 
 42 | This will generate a basic `tsconfig.json` file. You can customize it according to your project needs.
 43 | 
 44 | ## Basic Types
 45 | 
 46 | TypeScript introduces several basic types that JavaScript developers might already be familiar with, but with added type annotations:
 47 | 
 48 | - **Boolean**: `let isDone: boolean = false;`
 49 | - **Number**: `let decimal: number = 6;`
 50 | - **String**: `let color: string = "blue";`
 51 | - **Array**: `let list: number[] = [1, 2, 3];`
 52 | - **Tuple**: `let x: [string, number]; x = ["hello", 10];`
 53 | - **Enum**: `enum Color {Red, Green, Blue};`
 54 | - **Any**: `let notSure: any = 4; notSure = "maybe a string instead";`
 55 | - **Void**: `function warnUser(): void { console.log("This is a warning message"); }`
 56 | - **Null and Undefined**: `let u: undefined = undefined; let n: null = null;`
 57 | 
 58 | ## Advanced Types
 59 | 
 60 | ### Interfaces
 61 | 
 62 | Interfaces define the structure that an object should have. They are one of the key features of TypeScript.
 63 | 
 64 | ```typescript {1, 3-5} showLineNumbers /firstName/
 65 | interface Person {
 66 |     firstName: string;
 67 |     lastName: string;
 68 | }
 69 | 
 70 | function greeter(person: Person) {
 71 |     return `Hello, ${person.firstName} ${person.lastName}`;
 72 | }
 73 | 
 74 | let user = { firstName: "John", lastName: "Doe" };
 75 | console.log(greeter(user));
 76 | ```
 77 | 
 78 | ### Classes
 79 | 
 80 | TypeScript supports classes, which are a blueprint for creating objects. A class can contain properties and methods.
 81 | 
 82 | ```typescript
 83 | class Greeter {
 84 |     greeting: string;
 85 |     constructor(message: string) {
 86 |         this.greeting = message;
 87 |     }
 88 |     greet() {
 89 |         return `Hello, ${this.greeting}`;
 90 |     }
 91 | }
 92 | 
 93 | let greeter = new Greeter("world");
 94 | console.log(greeter.greet());
 95 | ```
 96 | 
 97 | ### Generics
 98 | 
 99 | Generics provide a way to create reusable components. They allow a function, class, or interface to work with different types.
100 | 
101 | ```typescript
102 | function identity<T>(arg: T): T {
103 |     return arg;
104 | }
105 | 
106 | let output = identity<string>("myString");
107 | ```
108 | 
109 | ## Conclusion
110 | 
111 | TypeScript is an essential tool for modern web development, especially for large-scale applications. Its type safety features, along with its seamless integration with JavaScript, make it a popular choice among developers. Start incorporating TypeScript into your projects today to experience its full benefits!
112 | 
113 | ---
114 | 
115 | This guide provides a starting point, but there's a lot more to explore in TypeScript. Keep practicing and delve into more advanced topics like decorators, modules, and namespaces to become proficient.
116 |  


--------------------------------------------------------------------------------
/content/ultimate-python-tutorial.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Ultimate Python Tutorial
  3 | slug: ultimate-python-tutorial
  4 | description: Comprehensive guide on mastering Python from basic syntax to advanced concepts.
  5 | --- 
  6 | Welcome to the Ultimate Python Tutorial! Whether you're a beginner or an experienced developer, this guide is designed to help you master Python. We'll cover everything from basic syntax to advanced topics, ensuring you gain a deep understanding of the language.
  7 | 
  8 | ## Introduction to Python
  9 | 
 10 | Python is a versatile, high-level programming language that’s easy to learn and use. It's widely adopted in web development, data analysis, artificial intelligence, automation, and more. Python's clean syntax and powerful libraries make it an excellent choice for both beginners and seasoned programmers.
 11 | 
 12 | ### Key Features of Python
 13 | - **Simple and Easy to Learn**: Python’s syntax is designed to be intuitive and mirrors natural language.
 14 | - **Versatile**: Python is used in various domains, from web development to data science.
 15 | - **Extensive Libraries**: Python has a rich set of libraries and frameworks that accelerate development.
 16 | 
 17 | ## Setting Up the Environment
 18 | 
 19 | To start coding in Python, you need to set up your development environment. This involves installing Python on your machine and selecting an Integrated Development Environment (IDE) or text editor for writing code.
 20 | 
 21 | ### Installing Python
 22 | 1. **Windows**: Download the Python installer from [python.org](https://www.python.org/downloads/windows/) and follow the installation instructions.
 23 | 2. **macOS**: Python comes pre-installed on macOS. However, it’s recommended to install the latest version via [Homebrew](https://brew.sh/): `brew install python3`.
 24 | 3. **Linux**: Install Python using your package manager. For example, on Ubuntu: `sudo apt-get install python3`.
 25 | 
 26 | ### Choosing an IDE/Text Editor
 27 | - **VS Code**: A popular and powerful text editor with Python support.
 28 | - **PyCharm**: A feature-rich IDE specifically designed for Python development.
 29 | - **Jupyter Notebook**: Ideal for data science and exploratory programming.
 30 | 
 31 | ## Python Basics
 32 | 
 33 | Understanding Python’s basic syntax is essential. This section covers variables, data types, and basic operations.
 34 | 
 35 | ### Variables and Data Types
 36 | Python supports various data types, including integers, floats, strings, and booleans. Variables are dynamically typed, meaning you don't need to declare their type explicitly.
 37 | 
 38 | ```python
 39 | # Example of variables and data types
 40 | name = "Python"
 41 | version = 3.9
 42 | is_popular = True
 43 | ```
 44 | 
 45 | ### Basic Operations
 46 | Python supports standard arithmetic, comparison, and logical operations.
 47 | 
 48 | ```python
 49 | # Arithmetic operations
 50 | a = 10 + 5
 51 | b = 10 - 3
 52 | c = 10 * 2
 53 | d = 10 / 2
 54 | 
 55 | # Comparison operations
 56 | is_equal = (a == b)
 57 | is_greater = (c > d)
 58 | 
 59 | # Logical operations
 60 | is_true = True and False
 61 | ```
 62 | 
 63 | ## Control Flow
 64 | 
 65 | Control flow statements determine the execution path of your program. Python provides conditional statements and loops to manage flow.
 66 | 
 67 | ### Conditional Statements
 68 | Use `if`, `elif`, and `else` to execute code based on conditions.
 69 | 
 70 | ```python
 71 | # Example of conditional statements
 72 | age = 18
 73 | if age >= 18:
 74 |     print("You are an adult.")
 75 | else:
 76 |     print("You are a minor.")
 77 | ```
 78 | 
 79 | ### Loops
 80 | Loops allow you to repeat a block of code multiple times. Python supports `for` and `while` loops.
 81 | 
 82 | ```python
 83 | # Example of a for loop
 84 | for i in range(5):
 85 |     print(i)
 86 | 
 87 | # Example of a while loop
 88 | count = 0
 89 | while count < 5:
 90 |     print(count)
 91 |     count += 1
 92 | ```
 93 | 
 94 | ## Functions
 95 | 
 96 | Functions encapsulate code into reusable blocks. In Python, functions are defined using the `def` keyword.
 97 | 
 98 | ```python
 99 | # Defining a function
100 | def greet(name):
101 |     return f"Hello, {name}!"
102 | 
103 | # Calling a function
104 | message = greet("Python")
105 | print(message)
106 | ```
107 | 
108 | ### Lambda Functions
109 | Python supports anonymous functions, known as lambda functions, which are useful for short operations.
110 | 
111 | ```python
112 | # Example of a lambda function
113 | square = lambda x: x * 2
114 | print(square(4))
115 | ```
116 | 
117 | ## Modules and Packages
118 | 
119 | Python’s modular nature allows you to organize code into modules and packages. A module is simply a Python file, while a package is a collection of modules.
120 | 
121 | ### Importing Modules
122 | ```python
123 | # Importing a module
124 | import math
125 | print(math.sqrt(16))
126 | ```
127 | 
128 | ### Creating a Package
129 | 1. Create a directory for your package.
130 | 2. Add an `__init__.py` file to make it a package.
131 | 3. Add modules to the package directory.
132 | 
133 | ## Data Structures
134 | 
135 | Python has built-in data structures that are key to efficient programming. This section covers lists, tuples, dictionaries, and sets.
136 | 
137 | ### Lists
138 | Lists are ordered and mutable collections.
139 | 
140 | ```python
141 | # Example of a list
142 | fruits = ["apple", "banana", "cherry"]
143 | print(fruits[0])  # Output: apple
144 | ```
145 | 
146 | ### Tuples
147 | Tuples are ordered but immutable collections.
148 | 
149 | ```python
150 | # Example of a tuple
151 | coordinates = (10, 20)
152 | print(coordinates[0])  # Output: 10
153 | ```
154 | 
155 | ### Dictionaries
156 | Dictionaries store data as key-value pairs.
157 | 
158 | ```python
159 | # Example of a dictionary
160 | person = {"name": "Alice", "age": 25}
161 | print(person["name"])  # Output: Alice
162 | ```
163 | 
164 | ### Sets
165 | Sets are unordered collections of unique elements.
166 | 
167 | ```python
168 | # Example of a set
169 | unique_numbers = {1, 2, 3, 3, 4}
170 | print(unique_numbers)  # Output: {1, 2, 3, 4}
171 | ```
172 | 
173 | ## File Handling
174 | 
175 | Python provides built-in functions to work with files. You can read from, write to, and append data to files.
176 | 
177 | ### Reading Files
178 | ```python
179 | # Reading a file
180 | with open("file.txt", "r") as file:
181 |     content = file.read()
182 |     print(content)
183 | ```
184 | 
185 | ### Writing Files
186 | ```python
187 | # Writing to a file
188 | with open("file.txt", "w") as file:
189 |     file.write("Hello, World!")
190 | ```
191 | 
192 | ### Appending to Files
193 | ```python
194 | # Appending to a file
195 | with open("file.txt", "a") as file:
196 |     file.write("\nAppended text")
197 | ```
198 | 
199 | ## Error Handling
200 | 
201 | Handling errors is crucial to building robust programs. Python uses exceptions to manage errors gracefully.
202 | 
203 | ### Try-Except Block
204 | ```python
205 | # Example of try-except
206 | try:
207 |     result = 10 / 0
208 | except ZeroDivisionError:
209 |     print("Cannot divide by zero!")
210 | ```
211 | 
212 | ### Finally Clause
213 | The `finally` block executes code regardless of whether an exception was raised.
214 | 
215 | ```python
216 | # Example of finally
217 | try:
218 |     file = open("file.txt")
219 | finally:
220 |     file.close()
221 | ```
222 | 
223 | ## Object-Oriented Programming
224 | 
225 | Object-Oriented Programming (OOP) allows you to model real-world entities using classes and objects.
226 | 
227 | ### Defining a Class
228 | ```python
229 | # Example of a class
230 | class Dog:
231 |     def __init__(self, name, breed):
232 |         self.name = name
233 |         self.breed = breed
234 | 
235 |     def bark(self):
236 |         return "Woof!"
237 | 
238 | # Creating an object
239 | my_dog = Dog("Buddy", "Golden Retriever")
240 | print(my_dog.bark())  # Output: Woof!
241 | ```
242 | 
243 | ### Inheritance
244 | Inheritance allows a class to inherit attributes and methods from another class.
245 | 
246 | ```python
247 | # Example of inheritance
248 | class Animal:
249 |     def __init__(self, name):
250 |         self.name = name
251 | 
252 |     def make_sound(self):
253 |         return "Some sound"
254 | 
255 | class Cat(Animal):
256 |     def make_sound(self):
257 |         return "Meow!"
258 | 
259 | my_cat = Cat("Whiskers")
260 | print(my_cat.make_sound())  # Output: Meow!
261 | ```
262 | 
263 | ## Advanced Python
264 | 
265 | Dive into advanced Python features like generators, decorators, and context managers.
266 | 
267 | ### Generators
268 | Generators allow you to iterate over a sequence of values lazily.
269 | 
270 | ```python
271 | # Example of a generator
272 | def count_up_to(max):
273 |     count = 1
274 |     while count <= max:
275 |         yield count
276 |         count += 1
277 | 
278 | for num in count_up_to(5):
279 |     print(num)
280 | ```
281 | 
282 | ### Decorators
283 | Decorators are a powerful way to modify the behavior of functions or classes.
284 | 
285 | ```python
286 | # Example of a decorator
287 | def log(func):
288 |     def wrapper(*args, **kwargs):
289 |         print(f"Calling {func.__name__}")
290 |         return func(*args, **kwargs)
291 |     return wrapper
292 | 
293 | @log
294 | def greet(name):
295 |     return f"Hello, {name}!"
296 | 
297 | print(greet("Python"))
298 | ```
299 | 
300 | ### Context Managers
301 | Context managers manage resources efficiently, such as file streams.
302 | 
303 | ```python
304 | # Example of a context manager
305 | with open("file.txt", "r") as file:
306 |     content = file.read()
307 |     print(content)
308 | ```
309 | 
310 | ## External Libraries
311 | 
312 | Python’s strength lies in its extensive library ecosystem. Some of the most popular libraries include:
313 | 
314 | ### Requests
315 | For making HTTP requests easily.
316 | 
317 | ```python
318 | import requests
319 | response = requests.get("https://api.github.com")
320 | print(response.status_code)
321 | ```
322 | 
323 | ### BeautifulSoup
324 | For web scraping and parsing HTML.
325 | 
326 | ```python
327 | from bs4 import BeautifulSoup
328 | html_doc = "<html><head><title>Test</title></head><body><p>Hello, World!</p></body></html>"
329 | soup = BeautifulSoup(html_doc, 'html.parser')
330 | print(soup.title.string)  # Output: Test
331 | ```
332 | 
333 |  


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


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "awesome-pwh-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 |     "@radix-ui/react-dialog": "^1.1.1",
13 |     "@radix-ui/react-dropdown-menu": "^2.1.1",
14 |     "@radix-ui/react-icons": "^1.3.0",
15 |     "@radix-ui/react-slot": "^1.1.0",
16 |     "@rehype-pretty/transformers": "^0.13.2",
17 |     "class-variance-authority": "^0.7.0",
18 |     "clsx": "^2.1.1",
19 |     "gray-matter": "^4.0.3",
20 |     "lucide-react": "^0.428.0",
21 |     "next": "14.2.5",
22 |     "next-themes": "^0.3.0",
23 |     "react": "^18",
24 |     "react-dom": "^18",
25 |     "react-top-loading-bar": "^2.3.1",
26 |     "rehype-autolink-headings": "^7.1.0",
27 |     "rehype-highlight": "^7.0.0",
28 |     "rehype-pretty-code": "^0.13.2",
29 |     "rehype-raw": "^7.0.0",
30 |     "rehype-slug": "^6.0.0",
31 |     "rehype-stringify": "^10.0.0",
32 |     "remark-frontmatter": "^5.0.0",
33 |     "remark-parse": "^11.0.0",
34 |     "remark-parse-frontmatter": "^1.0.3",
35 |     "remark-rehype": "^11.1.0",
36 |     "shiki": "^1.14.1",
37 |     "tailwind-merge": "^2.5.2",
38 |     "tailwindcss-animate": "^1.0.7",
39 |     "typed.js": "^2.1.0",
40 |     "unified": "^11.0.5"
41 |   },
42 |   "devDependencies": {
43 |     "@tailwindcss/typography": "^0.5.14",
44 |     "@types/node": "^20",
45 |     "@types/react": "^18",
46 |     "@types/react-dom": "^18",
47 |     "eslint": "^8",
48 |     "eslint-config-next": "14.2.5",
49 |     "postcss": "^8",
50 |     "tailwindcss": "^3.4.1",
51 |     "typescript": "^5"
52 |   }
53 | }
54 | 


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


--------------------------------------------------------------------------------
/public/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingWithHarry/awesome-blog-nextjs/0f8bc214b2db9800c335b4c657fb23b20fedacba/public/1.jpg


--------------------------------------------------------------------------------
/public/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingWithHarry/awesome-blog-nextjs/0f8bc214b2db9800c335b4c657fb23b20fedacba/public/2.jpg


--------------------------------------------------------------------------------
/public/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingWithHarry/awesome-blog-nextjs/0f8bc214b2db9800c335b4c657fb23b20fedacba/public/3.jpg


--------------------------------------------------------------------------------
/public/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingWithHarry/awesome-blog-nextjs/0f8bc214b2db9800c335b4c657fb23b20fedacba/public/4.jpg


--------------------------------------------------------------------------------
/public/blogimg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingWithHarry/awesome-blog-nextjs/0f8bc214b2db9800c335b4c657fb23b20fedacba/public/blogimg.jpg


--------------------------------------------------------------------------------
/public/images/coding.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingWithHarry/awesome-blog-nextjs/0f8bc214b2db9800c335b4c657fb23b20fedacba/public/images/coding.jpeg


--------------------------------------------------------------------------------
/public/images/cpp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingWithHarry/awesome-blog-nextjs/0f8bc214b2db9800c335b4c657fb23b20fedacba/public/images/cpp.png


--------------------------------------------------------------------------------
/public/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingWithHarry/awesome-blog-nextjs/0f8bc214b2db9800c335b4c657fb23b20fedacba/public/logo.jpg


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


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


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


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