completed changes to artciles and added hackerank

next.config.js

@@ -3,6 +3,7 @@ const nextConfig = {
   // reactStrictMode: true,
   // distDir: "./out",
   output: "export",
+  images: { unoptimized: true },
 };
 
 module.exports = nextConfig;

src/components/Icons.js

@@ -112,6 +112,24 @@ export const DribbbleIcon = ({ className, ...rest }) => (
   </svg>
 );
 
+export const HackerankIcon = ({ className, ...rest }) => (
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 512 512"
+    {...rest}
+    className={`w-full h-auto ${className}`}
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid"
+  >
+    <path d="M-1-1h582v402H-1z" fill="none" />
+    <path
+      d="M454.843 141.001c-13.019-22.417-172.832-115-198.859-115-26.019 0-185.895 92.351-198.84 115-12.947 22.649-13.019 207.358 0 230.009 13.018 22.639 172.839 114.989 198.84 114.989 26 0 185.841-92.466 198.851-114.999 13.007-22.533 13.016-207.583.008-229.999zM309.862 398.15c-3.559 0-36.756-32.137-34.141-34.762.781-.78 5.625-1.328 15.768-1.644 0-23.564.53-61.622.844-77.553.038-1.814-.395-3.081-.395-5.256h-71.812c0 6.379-.412 32.523 1.232 65.479.205 4.078-1.42 5.353-5.158 5.335-9.102-.025-18.211-.099-27.321-.071-3.683.009-5.274-1.374-5.157-5.488.826-30.043 2.66-75.488-.134-191.07v-2.849c-8.688-.314-14.717-.862-15.508-1.652-2.624-2.624 31.032-34.76 34.581-34.76 3.558 0 36.989 32.145 34.383 34.76-.782.781-7.098 1.338-15.067 1.652v2.84c-2.174 23.135-1.823 71.506-2.362 94.686h72.107c0-4.089.351-31.212-1.077-75.145-.091-3.047.853-4.646 3.781-4.672 9.945-.072 19.9-.117 29.855-.055 3.108.019 4.105 1.546 4.043 4.834-3.28 171.861-.594 159.867-.594 188.975 7.97.315 15.112.864 15.895 1.655 2.588 2.615-30.205 34.761-33.763 34.761z"
+      fill="#2ec866"
+    />
+  </svg>
+);
+
 export const SunIcon = ({ className, ...rest }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

src/components/Navbar.js

@@ -3,12 +3,11 @@ import React, { useState } from "react";
 import Logo from "./Logo";
 import { useRouter } from "next/router";
 import TwitterIcon, {
-  DribbbleIcon,
   GithubIcon,
+  HackerankIcon,
   LinkedInIcon,
   MediumIcon,
   MoonIcon,
-  PinterestIcon,
   SunIcon,
 } from "./Icons";
 import { motion } from "framer-motion";
@@ -133,11 +132,21 @@ export const Navbar = (props) => {
             target={"_blank"}
             whileHover={{ y: -2 }}
             whileTap={{ scale: 0.9 }}
-            className="w-6 ml-3"
+            className="w-6 ml-3 p-1 bg-light rounded-full"
           >
             <MediumIcon />
           </motion.a>
 
+          <motion.a
+            href="https://www.hackerrank.com/asttle1997"
+            target={"_blank"}
+            whileHover={{ y: -2 }}
+            whileTap={{ scale: 0.9 }}
+            className="w-8 ml-3 p-1 bg-light rounded-full"
+          >
+            <HackerankIcon />
+          </motion.a>
+
           <button
             onClick={() => setMode(mode === "light" ? "dark" : "light")}
             className={`ml-3 flex items-center justify-center rounded-full p-1 ${
@@ -214,23 +223,25 @@ export const Navbar = (props) => {
             >
               <LinkedInIcon />
             </motion.a>
+
             <motion.a
-              href="https://pinterest.com"
+              href="https://dribbble.com/shots"
               target={"_blank"}
               whileHover={{ y: -2 }}
               whileTap={{ scale: 0.9 }}
-              className="w-6 mx-3 sm:mx-1 bg-light rounded-full"
+              className="w-6 ml-3 sm:mx-1 bg-light rounded-full"
             >
-              <PinterestIcon />
+              <MediumIcon />
             </motion.a>
+
             <motion.a
-              href="https://dribbble.com/shots"
+              href="https://www.hackerrank.com/asttle1997"
               target={"_blank"}
               whileHover={{ y: -2 }}
               whileTap={{ scale: 0.9 }}
-              className="w-6 ml-3 sm:mx-1"
+              className="w-8 ml-3 sm:mx-1 bg-light rounded-full"
             >
-              <DribbbleIcon />
+              <HackerankIcon />
             </motion.a>
 
             <button

src/pages/articles.js

@@ -10,6 +10,10 @@ import artcile2image from "../../public/images/articles/article2.jpeg";
 import artcile3image from "../../public/images/articles/article3.png";
 import artcile4image from "../../public/images/articles/article4.png";
 import artcile5image from "../../public/images/articles/article5.png";
+import artcile6image from "../../public/images/articles/article6.png";
+
+import artcile7image from "../../public/images/articles/article7.png";
+import artcile8image from "../../public/images/articles/article8.png";
 
 import articlen from "../../public/images/articles/form validation in reactjs using custom react hook.png";
 
@@ -175,6 +179,27 @@ const Articles = (props) => {
                 "https://medium.com/@asttle1997/deploying-your-next-js-app-to-ec2-with-nginx-and-pm2-7afc6d878f5b"
               }
             />
+
+            <Article
+              title={"AWS Lambda"}
+              image={artcile6image}
+              date={"September 8, 2023"}
+              link={"https://medium.com/@asttle1997/aws-lambda-866c75a7c32"}
+            />
+            <Article
+              title={"AWS API Gateway"}
+              image={artcile7image}
+              date={"September 11, 2023"}
+              link={"https://medium.com/aws-tip/aws-api-gateway-481c0e6802f7"}
+            />
+            <Article
+              title={"AWS Secrets Manager"}
+              image={artcile8image}
+              date={"September 12, 2023"}
+              link={
+                "https://medium.com/@asttle1997/aws-secrets-manager-b0e6ee655d5a"
+              }
+            />
           </ul>
         </Layout>
       </main>