Constructor search query

src/App.js

@@ -30,7 +30,7 @@ function App() {
     }, [theme])
 
     const loadData = useCallback(() => {
-        axios.get(`https://api.github.com/users/${config.githubUsername}`)
+        axios.get(`https://api.github.com/users/${config.github.username}`)
         .then(response => {
             let data = response.data;
 
@@ -45,7 +45,21 @@ function App() {
             dispatch(setProfile(profileData));
         })
         .then(() => {
-            axios.get(`https://api.github.com/search/repositories?q=user:${config.githubUsername}+&s=stars&type=Repositories`)
+            let excludeRepo = ``;
+
+            config.github.exclude.projects.forEach(project => {
+                excludeRepo += `+-repo:${config.github.username}/${project}`;
+            });
+
+            let query = `user:${config.github.username}+fork:${!config.github.exclude.forks}${excludeRepo}`;
+
+            let url = `https://api.github.com/search/repositories?q=${query}&sort=${config.github.sortBy}&per_page=${config.github.limit}&type=Repositories`;
+
+            axios.get(url, {
+                headers: {
+                    'Content-Type': 'application/vnd.github.v3+json'
+                }
+            })
             .then(response => {
                 let data = response.data;
 
@@ -129,6 +143,7 @@ function App() {
                             }
                         />
                     ) : (
+                        <Fragment>
                             <div className="p-4 lg:p-10 min-h-full bg-base-200">
                                 <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 rounded-box">
                                     <div className="col-span-1">
@@ -153,12 +168,13 @@ function App() {
                                     </div>
                                 </div>
                             </div>
-                    )
-                }
                             {/* DO NOT REMOVE/MODIFY THE FOOTER */}
                             <div className="text-center bg-base-200 credit">
                                 <p className="font-mono text-sm">Made with <a className="text-primary" href="https://github.com/arifszn/ezprofile" target="_blank" rel="noreferrer">ezprofile</a> and ❤️</p>
                             </div>
+                        </Fragment>
+                    )
+                }
             </div>
         </Fragment>
     );

src/components/Project.js

@@ -1,18 +1,16 @@
 import { Fragment } from "react";
 import { useSelector } from "react-redux";
 import { languageColor, skeleton } from "../helpers/utils";
-import { AiFillStar, AiOutlineFork } from 'react-icons/ai';
+import { AiOutlineStar, AiOutlineFork } from 'react-icons/ai';
 import config from "../config";
 
-const LIMIT = 8;
-
 const Project = () => {
     const loading = useSelector(state => state.loading);
     const repo = useSelector(state => state.repo);
 
     const renderSkeleton = () => {
         let array = [];
-        for (let index = 0; index < LIMIT; index++) {
+        for (let index = 0; index < config.github.limit; index++) {
             array.push((
                 <div className="card shadow-lg compact bg-base-100" key={index}>
                     <div className="flex justify-between flex-col p-8 h-full w-full">
@@ -53,8 +51,14 @@ const Project = () => {
     }
 
     const renderProjects = () => {
-        return repo.slice(0, LIMIT).map((item, index) => (
+        return repo.map((item, index) => (
-            <a href={item.html_url} target="_blank" rel="noreferrer" className="card shadow-lg compact bg-base-100" key={index}>
+            <div 
+                className="card shadow-lg compact bg-base-100 cursor-pointer" 
+                key={index}
+                onClick={() => {
+                    window.open(item.html_url, '_blank')
+                }}
+            >
                 <div className="flex justify-between flex-col p-8 h-full w-full">
                     <div>
                         <div className="flex items-center opacity-60">
@@ -72,11 +76,11 @@ const Project = () => {
                     <div className="flex justify-between text-sm text-base-content text-opacity-60">
                         <div className="flex flex-grow">
                             <span className="mr-3 flex items-center">
-                                <AiFillStar />
+                                <AiOutlineStar className="mr-0.5"/>
                                 <span>{item.stargazers_count}</span>
                             </span>
                             <span className="flex items-center">
-                                <AiOutlineFork />
+                                <AiOutlineFork className="mr-0.5"/>
                                 <span>{item.forks_count}</span>
                             </span>
                         </div>
@@ -88,7 +92,7 @@ const Project = () => {
                         </div>
                     </div>
                 </div>
-            </a>
+            </div>
         ));
     }
 
@@ -112,7 +116,7 @@ const Project = () => {
                                             {
                                                 loading ? skeleton({ width: 'w-10', height: 'h-5' }) : (
                                                     <a
-                                                        href={`https://github.com/${config.githubUsername}?tab=repositories`}
+                                                        href={`https://github.com/${config.github.username}?tab=repositories`}
                                                         target="_blank"
                                                         rel="noreferrer"
                                                         className="opacity-50"

src/config.js

@@ -1,8 +1,19 @@
 module.exports = {
-    githubUsername: 'arifszn', // required
+    github: {
+        username: 'arifszn',
+        sortBy: 'stars', // stars | updated
+        limit: 8, // How many projects to display.
+        exclude: {
+            forks: false, // forked projects will not be displayed if set to true
+            projects: [
+                
+            ]
+        }
+    },
     blog: {
         source: 'dev.to', // medium | dev.to
         username: 'arifszn',
+        limit: 5 // How many posts to display. Max is 10.
     },
     social: {
         linkedin: 'ariful-alam',