Finished with Project Page

components/ProjectItem.js

@@ -0,0 +1,39 @@
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+import styles from "../styles/Project.module.css";
+
+export const ProjectItem = ({ item }) => {
+  return (
+    <div className={styles.projects__container}>
+      <article className={styles.projects}>
+        <a className={styles.card}>
+          <div className={styles.project__image}>
+            <Image
+              className={styles.card}
+              width={500}
+              height={300}
+              src={item.imageUrl}
+              alt={item.title}
+            />
+          </div>
+        </a>
+        <div className={styles.project__info}>
+          <h2 className={styles.p_head}>{item.title}</h2>
+          <p>{item.about}</p>
+          <div className={styles.links}>
+            {item.github && (
+              <Link href={`${item.github}`} className={styles.btn__primary}>
+                Code{" "}
+              </Link>
+            )}
+
+            <Link href={`${item.link}`} className={styles.btn__primary}>
+              Live
+            </Link>
+          </div>
+        </div>
+      </article>
+    </div>
+  );
+};

next.config.js

@@ -1,6 +1,12 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
+
+module.exports = {
+  images: {
+    domains: ["i.ibb.co"],
+  },
+};

pages/projects.js

@@ -1,13 +1,35 @@
 import React from "react";
 import Layout from "../components/Layout";
+import styles from "../styles/Project.module.css";
+import { ProjectItem } from "../components/ProjectItem";
+import projectsData from "../utils/ProjectsData";
+import Link from "next/link";
 
 const Projects = () => {
   return (
     <Layout
       title="Abdulmalik Adekunle | Projects"
       description="Abdulmalik Adekunle's Project Page, Frontend Developer, Software Engineer"
       keywords="Frontend, Abdulmalik Adekunle"
-    ></Layout>
+    >
+      <div className={styles.container}>
+        <div className={styles.container}>
+          <article className={styles.article}>
+            <h1 className="intro__text">Projects.</h1> <br />
+            <div className={styles.projects__container}>
+              {projectsData.map((item, index) => (
+                <ProjectItem key={index} index={index} item={item} />
+              ))}
+            </div>
+            <Link href="/articles">
+              <p className={styles.p_link}>
+                Let&apos;s continue to Articles &rarr;
+              </p>
+            </Link>
+          </article>
+        </div>
+      </div>
+    </Layout>
   );
 };
 

styles/Footer.module.css

@@ -3,11 +3,15 @@
   margin: 100px 0 0px 0;
   gap: 4rem;
   padding: 1rem 0;
-  border-top: 1px solid #eaeaea;
+  /* border-top: 1px solid #eaeaea;
+  border-bottom: 1px solid #eaeaea; */
   justify-content: center;
   align-items: center;
-  background: rgb(148, 142, 142);
+  /* background: rgb(148, 142, 142); */
 }
 
 .link {
+  border-radius: 50%;
+  background-color: white;
+  padding: 0.6rem;
 }

styles/Project.module.css

@@ -0,0 +1,80 @@
+.container {
+  width: 80%;
+  margin: 0 auto;
+}
+
+.article {
+  margin-top: 15rem;
+  padding: 0 2rem 0 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.article h1 {
+  color: #fff;
+  font-size: 4rem;
+  font-weight: 900;
+  letter-spacing: -1.1px;
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+}
+
+.projects {
+  /* background-color: rgb(148, 142, 142); */
+  background-color: transparent;
+  border-radius: 50px;
+  border-color: 1px solid transparent;
+  transition: all 1.5s ease;
+}
+
+.p_head {
+  font-size: 1.5rem;
+  font-weight: 550;
+  letter-spacing: 0.9px;
+  font-family: "Montserrat", sans-serif;
+  font-family: "Outfit", sans-serif;
+}
+.projects__container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 2rem;
+}
+
+.projects__container:hover {
+  transition: all 1.5s ease;
+}
+.projects h2 {
+  font-size: 2.4rem;
+}
+
+.project__info {
+  padding: 2rem;
+}
+
+.project__info p {
+  padding: 1.2rem 0 2rem;
+  font-size: 0.9rem;
+}
+
+.links {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.btn__primary {
+  background-color: #fff;
+  color: black;
+  border-radius: 50px;
+  padding: 0.35rem 0.75rem 0.35rem 0.75rem;
+}
+
+.card:hover {
+  transition: all 1.2s ease-in-out;
+  scale: 0.9;
+}
+
+.article .p_link {
+  margin-top: 1.5rem;
+  font-family: "Montserrat", sans-serif;
+  font-family: "Outfit", sans-serif;
+}

utils/ArticlesData.js

@@ -0,0 +1,121 @@
+const ARTICLE_DATA = [
+  {
+    title: "Getting started with React Context API",
+    description:
+      "React Context API is a way to share data between components in a React application wit...",
+    link: "https://abdulmalik.hashnode.dev/getting-started-with-react-context-api",
+    imageUrl:
+      "https://i.ibb.co/1ZZ34qv/react-context-api-4929b3703a1a7082d99b53eb1bbfc31f.png",
+    type: ["article"],
+  },
+  {
+    title: "Building a Chat App with Next.js, Node.js and Socket.io",
+    description:
+      "This chat app will allow users to send messages to each other in real-time, and will also feat...",
+    link: "https://abdulmalik.hashnode.dev/building-a-chat-app-with-nextjs-nodejs-and-socketio",
+    imageUrl: "https://i.ibb.co/1Xk8FPb/nodejs.png",
+    type: ["article"],
+  },
+  {
+    title: "Some Very Common Mistakes to avoid when coding.",
+    description: "Some Very Common Mistakes to avoid when coding.",
+    link: "https://abdulmalik.hashnode.dev/some-very-common-mistakes-to-avoid-when-coding",
+    imageUrl: "https://i.ibb.co/Jd3fzqq/c-Skmb-DBGC.webp",
+    type: ["article"],
+  },
+  {
+    title: "How CSS Position Sticky Really Works: Tips For Beginners.",
+    description: "How CSS Position Sticky Really Works: Tips For Beginners.",
+    link: "https://abdulmalik.hashnode.dev/how-css-position-sticky-really-works-tips-for-beginners",
+    imageUrl: "https://i.ibb.co/DW2ycqw/download-1.jpg",
+    type: ["article"],
+  },
+  {
+    title: "Architecting Large-scale Javascript Applications",
+    description:
+      "In the past we have worked with large javascript applications and frameworks and it...",
+    link: "https://www.canva.com/design/DAEP8soDA7Y/LhN_G3Z6vbratkAlslugaQ/view?utm_content=DAEP8soDA7Y&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink",
+    imageUrl: "https://i.ibb.co/bscsh9q/image.png",
+    type: ["reading"],
+  },
+  {
+    title: "Minimalism in Programming",
+    description:
+      "I’m 32, and I’ve been programming actively for over 16 years at this...",
+    link: "https://pointersgonewild.com/2018/02/18/minimalism-in-programming/",
+    imageUrl: "https://i.ibb.co/59sw2qV/code-wallpapers-30652-6650776.png",
+    type: ["reading"],
+  },
+  {
+    title: "Reducing Motion to Improve Accessibility",
+    description:
+      "Hey friends! In this post, I am going to walk you through a newer medi...",
+    link: "https://www.a11ywithlindsey.com/blog/reducing-motion-improve-accessibility",
+    imageUrl:
+      "https://i.ibb.co/Jm2f3rY/Dream-Host-Accessibility-Tips-750x498.jpg",
+    type: ["reading"],
+  },
+  {
+    title: "Accessible Icon Buttons",
+    description: "Freelance Front-End Web UI/UX Developer - Lebanon",
+    link: "https://www.sarasoueidan.com/blog/accessible-icon-buttons/",
+    imageUrl:
+      "https://i.ibb.co/mFkMHPZ/Screen-Shot-2019-11-25-at-1-38-58-AM.png",
+    type: ["reading"],
+  },
+  {
+    title: "Smoother & sharper shadows with layered box-shadows",
+    description: "",
+    link: "https://tobiasahlin.com/blog/layered-smooth-box-shadows/",
+    imageUrl:
+      "https://i.ibb.co/MSMpWQL/Screen-Shot-2019-11-25-at-1-49-51-AM.png",
+    type: ["reading"],
+  },
+  {
+    title: "Don’t be a Junior Developer: The Roadmap",
+    description: "",
+    link: "https://zerotomastery.io/blog/dont-be-a-junior-developer-the-roadmap",
+    imageUrl: "https://i.ibb.co/t2wy0Qg/279547.jpg",
+    type: ["reading"],
+  },
+  {
+    title: "Go Beyond: A Story of Failure",
+    description:
+      "Today, I want to share my story in hopes that it might inspire others to achieve their dream jo...",
+    link: "https://zerotomastery.io/blog/go-beyond-a-story-of-failure/",
+    imageUrl: "https://i.ibb.co/g7Xj6Jt/fear-failure-blog-x2.png",
+    type: ["reading"],
+  },
+  {
+    title: "A Modern CSS Reset",
+    description: "I think about and enjoy very boring CSS stuf...",
+    link: "https://hankchizljaw.com/wrote/a-modern-css-reset/",
+    imageUrl: "https://i.ibb.co/RPkXPLN/css-declaration-small.png",
+    type: ["reading"],
+  },
+  {
+    title: "Usability & Web Accessibility",
+    description: "",
+    link: "https://usability.yale.edu/web-accessibility/articles",
+    imageUrl:
+      "https://i.ibb.co/1MQyX2F/Handicapped-Wheelchair-Accessible-Sticker.png",
+    type: ["reading"],
+  },
+  {
+    title: "DevEd",
+    description: "",
+    link: "https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q",
+    imageUrl:
+      "https://i.ibb.co/3sKzk4K/Screen-Shot-2019-11-25-at-2-09-11-AM.png",
+    type: ["video"],
+  },
+  {
+    title: "Traversy",
+    description: "",
+    link: "https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA",
+    imageUrl: "https://i.ibb.co/tXBtHdk/images.png",
+    type: ["video"],
+  },
+];
+
+export default ARTICLE_DATA;