Add: New blog for freecodecamp

Author: manuarora700

components/FreeCodeCampCard/FreeCodeCamp.js

@@ -11,41 +11,46 @@ export default function FreeCodeCamp({ showDesc = true }) {
       {showDesc && (
         <h2 className="prose text-gray-600 dark:text-gray-400 mb-16">
           I’ve been writing articles for{" "}
-          <a href="https://freecodecamp.com">freeCodeCamp</a> where I generally
-          write about projects and technical learnings. Some of the articles
-          that I wrote are down below.
+          <a href="https://www.freecodecamp.org/news/author/manu/">
+            freeCodeCamp
+          </a>{" "}
+          where I generally write about projects and technical learnings. Some
+          of the articles that I wrote are down below.
         </h2>
       )}
-      <div className="flex flex-col items-center sm:flex-row sm:space-x-8 w-full">
+      <div className=" grid grid-cols-1 sm:grid-cols-2 gap-10 lg:gap-10 w-full">
+        <ProjectFCC
+          link="https://www.freecodecamp.org/news/prepare-for-react-technical-interviews/"
+          title="How to Prepare for React Interviews – Front-End Technical Interview Guide"
+          image="freecodecamp/react-interview.png"
+          date="Sept 8, 2022"
+        />
         <ProjectFCC
           link="https://www.freecodecamp.org/news/how-to-build-react-based-code-editor/"
           title="How to Build a Code Editor with React that Compiles and Executes in 40+ Languages"
           image="freecodecamp/codeeditor.png"
           date="May 25, 2022"
         />
+
         <ProjectFCC
           link="https://www.freecodecamp.org/news/integrate-a-payment-gateway-in-next-js-and-react-with-razorpay-and-tailwindcss/"
           title="How to Set Up a Payment Gateway in Next.js and React with Razorpay and TailwindCSS"
           image="freecodecamp/payments.png"
           date="Dec 22, 2021"
         />
-      </div>
-      <div className="flex flex-col items-center sm:flex-row sm:space-x-8 w-full">
         <ProjectFCC
           link="https://www.freecodecamp.org/news/how-to-build-a-working-contact-form-with-sendgrid-and-next-js/"
           title="Send emails with your contact form with SendGrid and Next.js"
           image="freecodecamp/sendgrid.png"
           date="October 21, 2021"
         />
+
         <ProjectFCC
           link="https://www.freecodecamp.org/news/how-to-create-beautiful-box-shadows-in-html-and-css/"
           title="Create Beautiful box shadows with HTML, CSS and TailwindCSS"
           image="freecodecamp/boxshadows.png"
           date="January 3, 2022"
         />
-      </div>
-
-      <div className="flex flex-col items-center sm:flex-row sm:space-x-8 w-full">
         <ProjectFCC
           link="https://www.freecodecamp.org/news/how-to-build-a-portfolio-site-with-nextjs-tailwindcss/"
           title="Build a developers portfolio website with Next.js and TailwindCSS"

components/FreeCodeCampCard/Project.js

@@ -2,18 +2,16 @@ import React from "react";
 
 const ProjectFCC = ({ link, image, title, date }) => {
   return (
-    <a href={link} className=" w-3/4 sm:w-1/2 mb-10 min-h-72" target="__blank">
-      <div className=" flex-shrink-0 rounded-lg shadow-xl shadow-gray-500/20 dark:shadow-blue-500/20 overflow-hidden ">
-        <div className="relative overflow-hidden h-40  w-full bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500">
-          <img
-            src={image}
-            className="transition hover:scale-125 duration-[2000ms] absolute inset-x-0 top-4 rounded-md w-[90%] mx-auto"
-          />
-        </div>
-        <div className="flex flex-col justify-between mx-4 my-4 ">
-          <h2 className="font-bold text-lg mb-14 text-gray-700">{title}</h2>
-          <p className="text-sm font-light">{date}</p>
-        </div>
+    <a href={link} className=" w-full mb-10  h-full" target="__blank">
+      <div className="relative overflow-hidden h-52 flex items-center justify-center rounded-md w-full bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500">
+        <img
+          src={image}
+          className="transition hover:scale-110 duration-[4000ms]  rounded-md w-[90%] mx-auto"
+        />
+      </div>
+      <p className="text-sm font-light py-2">{date}</p>
+      <div className="flex flex-col justify-between ">
+        <h2 className="font-bold text-lg text-gray-700">{title}</h2>
       </div>
     </a>
   );

public/freecodecamp/react-interview.png

@@ -45,76 +45,76 @@
   </url>
 
   <url>
-    <loc
-      >https://manuarora.in/snippets/firebase-auth-with-user-doc-firestore</loc
-    >
+    <loc>https://manuarora.in/blog/ace-the-javascript-interview</loc>
   </url>
 
   <url>
-    <loc>https://manuarora.in/snippets/gradient-border</loc>
+    <loc>https://manuarora.in/blog/blogging-platform-nextjs</loc>
   </url>
 
   <url>
-    <loc>https://manuarora.in/snippets/gradient-text</loc>
+    <loc>https://manuarora.in/blog/build-your-own-covid-leads-portal</loc>
   </url>
 
   <url>
-    <loc>https://manuarora.in/snippets/keyboard-events</loc>
+    <loc>https://manuarora.in/blog/developer-portfolio-website</loc>
   </url>
 
   <url>
-    <loc>https://manuarora.in/snippets/loader</loc>
+    <loc>https://manuarora.in/blog/how-to-effectively-freelance</loc>
   </url>
 
   <url>
-    <loc>https://manuarora.in/snippets/moving-card</loc>
+    <loc>https://manuarora.in/blog/top-5-nextjs-resources</loc>
   </url>
 
   <url>
-    <loc>https://manuarora.in/snippets/navbar-effect</loc>
+    <loc
+      >https://manuarora.in/snippets/firebase-auth-with-user-doc-firestore</loc
+    >
   </url>
 
   <url>
-    <loc>https://manuarora.in/snippets/razorpay</loc>
+    <loc>https://manuarora.in/snippets/gradient-border</loc>
   </url>
 
   <url>
-    <loc>https://manuarora.in/snippets/sendgrid</loc>
+    <loc>https://manuarora.in/snippets/gradient-text</loc>
   </url>
 
   <url>
-    <loc>https://manuarora.in/snippets/spotify</loc>
+    <loc>https://manuarora.in/snippets/keyboard-events</loc>
   </url>
 
   <url>
-    <loc>https://manuarora.in/snippets/tailwind-card</loc>
+    <loc>https://manuarora.in/snippets/loader</loc>
   </url>
 
   <url>
-    <loc>https://manuarora.in/snippets/toast</loc>
+    <loc>https://manuarora.in/snippets/moving-card</loc>
   </url>
 
   <url>
-    <loc>https://manuarora.in/blog/ace-the-javascript-interview</loc>
+    <loc>https://manuarora.in/snippets/navbar-effect</loc>
   </url>
 
   <url>
-    <loc>https://manuarora.in/blog/blogging-platform-nextjs</loc>
+    <loc>https://manuarora.in/snippets/razorpay</loc>
   </url>
 
   <url>
-    <loc>https://manuarora.in/blog/build-your-own-covid-leads-portal</loc>
+    <loc>https://manuarora.in/snippets/sendgrid</loc>
   </url>
 
   <url>
-    <loc>https://manuarora.in/blog/developer-portfolio-website</loc>
+    <loc>https://manuarora.in/snippets/spotify</loc>
   </url>
 
   <url>
-    <loc>https://manuarora.in/blog/how-to-effectively-freelance</loc>
+    <loc>https://manuarora.in/snippets/tailwind-card</loc>
   </url>
 
   <url>
-    <loc>https://manuarora.in/blog/top-5-nextjs-resources</loc>
+    <loc>https://manuarora.in/snippets/toast</loc>
   </url>
 </urlset>