⚙️ Upgrate to Next.js 12 and React 17 + Add freeCodeCamp page

Author: manuarora700

.gitignore

@@ -25,6 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

components/Footer.js

@@ -74,6 +74,11 @@ export default function Footer() {
               Live Demos
             </a>
           </Link>
+          <Link href="/freecodecamp">
+            <a className="text-gray-500 hover:text-gray-600 transition">
+              freeCodeCamp
+            </a>
+          </Link>
         </div>
       </div>
       <p className="flex flex-row text-gray-400">

package-lock.json

@@ -30,12 +30,12 @@
     "firebase-admin": "^9.5.0",
     "gray-matter": "^4.0.2",
     "mdx-prism": "^0.3.3",
-    "next": "10.0.5",
+    "next": "^12.0.7",
     "next-mdx-remote": "^2.1.3",
     "next-themes": "0.0.12",
     "qss": "^2.0.3",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-rough-notation": "^1.0.1",
     "react-toastify": "^7.0.3",
     "react-tweet-embed": "^1.2.2",

package.json

@@ -0,0 +1,62 @@
+import React from "react";
+import Container from "@/components/Container";
+import Link from "next/link";
+import ProjectCard from "@/components/ProjectCard";
+import Contact from "@/components/Contact";
+
+export default function FreeCodeCamp() {
+  return (
+    <Container
+      title="Blogs at FreeCodeCamp – Manu Arora"
+      description="I've been writing articles for freeCodeCamp - Check out my latest articles here."
+      image="/avatar.jpg"
+    >
+      <div className="flex flex-col justify-center items-start max-w-2xl mx-auto mb-16">
+        <h1 className="font-bold text-3xl md:text-5xl tracking-tight mb-4 text-black dark:text-white">
+          Free Code Camp
+        </h1>
+        <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.
+        </h2>
+        <div className="flex flex-col items-center sm:flex-row sm:space-x-8 w-full">
+          <Project
+            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"
+            image="freecodecamp/portfolio.png"
+            date="September 21, 2021"
+          />
+          <Project
+            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"
+          />
+        </div>
+
+        <Contact />
+      </div>
+    </Container>
+  );
+}
+
+const Project = ({ link, image, title, date }) => {
+  return (
+    <a href={link} className=" w-3/4 sm:w-1/2 mb-10" target="__blank">
+      <div className="flex-shrink-0 rounded-lg shadow-xl shadow-green-500/20 dark:shadow-blue-500/20 overflow-hidden min-h-[400px]">
+        <div className="overflow-hidden">
+          <img
+            src={image}
+            className="transition hover:scale-125 duration-[2000ms]"
+          />
+        </div>
+        <div className="flex flex-col justify-between mx-4 my-4  min-h-[200px]">
+          <h2 className="font-bold text-lg mb-14">{title}</h2>
+          <p className="text-sm font-light">{date}</p>
+        </div>
+      </div>
+    </a>
+  );
+};

pages/freecodecamp.js

@@ -47,7 +47,7 @@ export default function Home() {
                   <span className="text-blue-500">m</span>roads
                 </span>{" "}
                 as a{" "}
-                <span className="dark:text-black font-bold">
+                <span className="dark:text-white font-bold">
                   Software Engineer.{" "}
                 </span>
                 You've discovered my piece on the internet.{" "}

pages/index.js

@@ -8,6 +8,10 @@
     <loc>https://manuarora.in/dashboard</loc>
   </url>
 
+  <url>
+    <loc>https://manuarora.in/freecodecamp</loc>
+  </url>
+
   <url>
     <loc>https://manuarora.in</loc>
   </url>
@@ -20,6 +24,7 @@
     <loc>https://manuarora.in/resources</loc>
   </url>
 
+
   <url>
     <loc>https://manuarora.in/tweets</loc>
   </url>

public/freecodecamp/portfolio.png

@@ -4,6 +4,7 @@ const colors = require("tailwindcss/colors");
 module.exports = {
   purge: ["./pages/**/*.js", "./components/**/*.js", "./layouts/**/*.js"],
   darkMode: "class",
+  mode: "jit",
   theme: {
     extend: {
       colors: {