New functionality added

pages/_document.js

@@ -16,11 +16,6 @@ export default function Document() {
         <meta name="msapplication-config" content="/icons/browserconfig.xml" />
         <meta name="twitter:site" content="@Localhost_5000" />
         <meta name="twitter:image" content="/me.jpg" />
-        <link
-          rel="preload"
-          as="style"
-          href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap"
-        />
         <link rel="manifest" href="/manifest.json" />
         <meta name="robots" content="index, nofollow" />
         <meta property="og:title" content="Abdulmalik Adekunle" />

pages/articles.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import Layout from "../components/Layout";
 
 import styles from "../styles/Articles.module.css";
@@ -7,6 +7,18 @@ import ArticlesData from "../utils/ArticlesData";
 import Link from "next/link";
 
 const articles = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [filter, setFilter] = useState("all");
+
+  const handleClick = (e) => {
+    setFilter(e.target.value);
+  };
+
+  const filteredItems =
+    filter === "all"
+      ? ArticlesData
+      : ArticlesData.filter((item) => item.type === filter);
+
   return (
     <Layout
       title="Abdulmalik Adekunle | Articles"
@@ -17,14 +29,28 @@ const articles = () => {
         <div className={styles.container}>
           <article className={styles.article}>
             <h1 className="intro__text">Articles & Reads.</h1> <br />
+            <div className={styles.filter__links}>
+              <button value="all" onClick={handleClick}>
+                {" "}
+                All
+              </button>
+              <button value="article" onClick={handleClick}>
+                {" "}
+                My Articles
+              </button>
+              <button value="reading" onClick={handleClick}>
+                {" "}
+                Reading
+              </button>
+            </div>
             <div className={styles.articles__container}>
-              {ArticlesData.map((item, index) => (
+              {filteredItems.map((item, index) => (
                 <ArticleItem key={index} index={index} item={item} />
               ))}
             </div>
             <Link href="/contact">
               <p className={styles.p_link}>
-                Are you convinced to Contact me now? &rarr;
+                Are you convinced to contact me now? &rarr;
               </p>
             </Link>
           </article>

pages/index.js

@@ -4,6 +4,14 @@ import React from "react";
 import Layout from "../components/Layout";
 
 function Home() {
+  const copyText = () => {
+    const textField = document.createElement("textarea");
+    textField.innerText = "[email protected]";
+    document.body.appendChild(textField);
+    textField.select();
+    document.execCommand("copy");
+    textField.remove();
+  };
   return (
     <div>
       <Layout>
@@ -41,6 +49,9 @@ function Home() {
                 <Link
                   href={`mailto:[email protected]`}
                   className={styles.links}
+                  style={{ cursor: "crosshair" }}
+                  title="Copy to clipboard"
+                  onClick={copyText}
                 >
                   [email protected]
                 </Link>

pages/projects.js

@@ -1,11 +1,23 @@
-import React from "react";
+import React, { useState } 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 = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [filter, setFilter] = useState("all");
+
+  const handleClick = (e) => {
+    setFilter(e.target.value);
+  };
+
+  const filteredItems =
+    filter === "all"
+      ? projectsData
+      : projectsData.filter((item) => item.type === filter);
+
   return (
     <Layout
       title="Abdulmalik Adekunle | Projects"
@@ -16,8 +28,22 @@ const Projects = () => {
         <div className={styles.container}>
           <article className={styles.article}>
             <h1 className="intro__text">Projects.</h1> <br />
+            <div className={styles.filter__links}>
+              <button value="all" onClick={handleClick}>
+                {" "}
+                All
+              </button>
+              <button value="projects" onClick={handleClick}>
+                {" "}
+                My Projects
+              </button>
+              <button value="others" onClick={handleClick}>
+                {" "}
+                Others
+              </button>
+            </div>
             <div className={styles.projects__container}>
-              {projectsData.map((item, index) => (
+              {filteredItems.map((item, index) => (
                 <ProjectItem key={index} index={index} item={item} />
               ))}
             </div>