From ee09da8c4f32df55d2593a265c2bc65920c25572 Mon Sep 17 00:00:00 2001 From: Adekunle27 Date: Wed, 1 Feb 2023 14:01:04 +0100 Subject: [PATCH] Finished with Project Page --- components/ProjectItem.js | 39 ++++++++++++ next.config.js | 10 +++- pages/projects.js | 24 +++++++- styles/Footer.module.css | 8 ++- styles/Project.module.css | 80 +++++++++++++++++++++++++ utils/ArticlesData.js | 121 ++++++++++++++++++++++++++++++++++++++ utils/ProjectsData.js | 108 ++++++++++++++++++++++++++++++++++ 7 files changed, 385 insertions(+), 5 deletions(-) create mode 100644 components/ProjectItem.js create mode 100644 styles/Project.module.css create mode 100644 utils/ArticlesData.js create mode 100644 utils/ProjectsData.js diff --git a/components/ProjectItem.js b/components/ProjectItem.js new file mode 100644 index 0000000..7949725 --- /dev/null +++ b/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 ( +
+
+ +
+ {item.title} +
+ +
+

{item.title}

+

{item.about}

+
+ {item.github && ( + + Code{" "} + + )} + + + Live + +
+
+
+
+ ); +}; diff --git a/next.config.js b/next.config.js index a843cbe..ce19959 100644 --- a/next.config.js +++ b/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"], + }, +}; diff --git a/pages/projects.js b/pages/projects.js index 2edeb4c..161d1de 100644 --- a/pages/projects.js +++ b/pages/projects.js @@ -1,5 +1,9 @@ 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 ( @@ -7,7 +11,25 @@ const Projects = () => { title="Abdulmalik Adekunle | Projects" description="Abdulmalik Adekunle's Project Page, Frontend Developer, Software Engineer" keywords="Frontend, Abdulmalik Adekunle" - > + > +
+
+
+

Projects.


+
+ {projectsData.map((item, index) => ( + + ))} +
+ +

+ Let's continue to Articles → +

+ +
+
+
+ ); }; diff --git a/styles/Footer.module.css b/styles/Footer.module.css index 87ee18b..2aa57b2 100644 --- a/styles/Footer.module.css +++ b/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; } diff --git a/styles/Project.module.css b/styles/Project.module.css new file mode 100644 index 0000000..1a678e1 --- /dev/null +++ b/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; +} diff --git a/utils/ArticlesData.js b/utils/ArticlesData.js new file mode 100644 index 0000000..c9c5485 --- /dev/null +++ b/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; diff --git a/utils/ProjectsData.js b/utils/ProjectsData.js new file mode 100644 index 0000000..bd7fcd4 --- /dev/null +++ b/utils/ProjectsData.js @@ -0,0 +1,108 @@ +const PROJECTS_DATA = [ + { + title: "Starwars Casts", + about: + "This is an applicatiom built with Nextjs, React e.t.c. that displays the list of starwars casts, It generates the data asynchronously from swapi.dev API with some advanced filtering functionalities.", + description: + "This is an applicatiom built with Nextjs, React e.t.c. that displays the list of starwars casts, It generates the data asynchronously from swapi.dev API with some advanced filtering functionalities.", + link: "https://starwars-casts.web.app/", + github: "https://github.com/Adekunle27/Starwars-Cast", + imageUrl: "https://i.ibb.co/4sdhsVp/starwars.png", + type: ["project", "open-source", "tools"], + technologies: ["Typescript", "Rollup", "React", "Nextjs"], + }, + + { + title: "Shopp", + description: "An E-commerce Application For Buying Cotton Products.", + github: "https://github.com/Adekunle27/shopp", + about: + "Shoprrr is an e-commerce platform catered towards giving the best and fast experience for customers to buy cotton products, we call it a frictionless process from start to finish.", + link: "https://shoprrr.netlify.com", + imageUrl: "https://i.ibb.co/T0XwFsQ/Screen-Recording-2020-05-06-at-3.gif", + type: ["project"], + technologies: ["React", "Redux Saga", "Javascript", "Firebase"], + }, + + { + title: "Covid-19 Tracker", + description: + "This Project tracks the various COVID Cases recorded in the countries of the world", + link: "https://corona-vir-tracker.netlify.app/", + github: "https://github.com/Adekunle27/Covid-Tracker", + about: + "This Project tracks the various COVID Cases recorded in the countries of the world, The Technology used in this projects are React, Hooks, Charts.JS, Material UI and many more.", + imageUrl: "https://i.ibb.co/LQDW9NR/covid.png", + type: ["open-source", "tools"], + technologies: ["React", "ChartJS", "Material UI", "Javascript"], + }, + { + title: "Real Estate", + description: + "A Real estate app which has different functionality present in a Real estate website or app, It fetches data from Rapid API and displayed on the UI", + about: + "This is a Real estate app which has different functionality present in a Real estate website or app, It fetches data from Rapid API and displayed on the UI", + link: "https://realtor.vercel.app/", + github: "https://github.com/Adekunle27/Real-Estate", + imageUrl: "https://i.ibb.co/9VvzQ2t/estate.png", + type: ["open-source", "tools"], + technologies: ["React", "Redux", "Ant Design"], + }, + { + title: "Truegiven", + description: "Addressing current and future workforce needs.", + about: + "True Given helps people gain more control of their finances by connecting people to organizations providing direct and immediate assistance to families and individuals who desperately require a modest helping hand.", + link: "https://truegiven.com", + imageUrl: + "https://i.ibb.co/LnCz8Vx/Screen-Shot-2019-11-23-at-2-24-07-PM.png", + type: ["project"], + technologies: ["HTML", "CSS", "Javascript", "Compiled HTML"], + }, + { + title: "Freespace (WIP)", + description: "100% Anonymously tell the world your mind.", + about: + "Freespace can be utilized as your own safe place where you can freely un-conceal your thoughts and emotions without any apprehensions. ", + link: "https://freespaace.com", + imageUrl: "https://i.ibb.co/q5ZDjLd/image.png", + type: ["others", "project"], + technologies: ["React", "Redux", "Javascript", "Firebase"], + }, + { + title: "Liveizy", + description: "Manage all your properties in one place.", + about: + "We reduce the cost of living and help you meet your most important living expectations by increasing easy access to all the necessary resources needed to improve living standards.", + link: "https://liveizy.com", + imageUrl: + "https://i.ibb.co/PxwbV5m/Screen-Shot-2019-11-24-at-11-36-52-PM-1.png", + type: ["others", "project"], + technologies: ["HTML", "11ty", "Javascript", "CSS & Sass"], + }, + { + title: "EmptyCarafes", + description: "Experience remorse writing at its amazing peak.", + about: + "Empty Carafes is a content platform which allows readers to engage in a wide range of dynamic and innovative ideas expressed through different art forms.", + link: "https://emptycarafes.io", + imageUrl: "https://i.ibb.co/0CLmWNj/Dribbble-shot-HD-ss-1.png", + type: ["others", "project"], + technologies: ["HTML", "11ty", "Javascript", "CSS & Sass", "A11y"], + }, + + { + title: "70Shops", + description: + "Helps business owners create an eCommerce platform for their businesses.", + about: + "We are introducing a set of tools that will help grow the merchants' businesses in Africa especially. Our tools will be able to effectively manage the general operations of these merchants and provide them with analytical data to help streamline the growth of their businesses.", + link: "https://70shops.com", + imageUrl: + "https://i.ibb.co/q939Wxd/Screen-Shot-2019-11-23-at-2-27-08-PM.png", + type: ["others", "project"], + technologies: ["HTML", "11ty", "Javascript", "CSS & Sass", "A11y"], + }, +]; + +export default PROJECTS_DATA;