diff --git a/public/assets/img/delivery-i.png b/public/assets/img/delivery-i.png new file mode 100644 index 0000000..7c1a55c Binary files /dev/null and b/public/assets/img/delivery-i.png differ diff --git a/public/assets/img/projects/npf-logo.png b/public/assets/img/projects/npf-logo.png new file mode 100644 index 0000000..112c7f3 Binary files /dev/null and b/public/assets/img/projects/npf-logo.png differ diff --git a/public/assets/img/projects/npf.jpg b/public/assets/img/projects/npf.jpg new file mode 100644 index 0000000..058d125 Binary files /dev/null and b/public/assets/img/projects/npf.jpg differ diff --git a/public/assets/img/projects/sharply.jpg b/public/assets/img/projects/sharply.jpg new file mode 100644 index 0000000..fbfc2de Binary files /dev/null and b/public/assets/img/projects/sharply.jpg differ diff --git a/public/assets/img/projects/swap.jpg b/public/assets/img/projects/swap.jpg new file mode 100644 index 0000000..5dfbfbd Binary files /dev/null and b/public/assets/img/projects/swap.jpg differ diff --git a/public/assets/img/remi.jpg b/public/assets/img/remi.jpg index 80228b3..af16697 100644 Binary files a/public/assets/img/remi.jpg and b/public/assets/img/remi.jpg differ diff --git a/src/components/molecules/Company.js b/src/components/molecules/Company.js index 02c12f7..16e4b55 100644 --- a/src/components/molecules/Company.js +++ b/src/components/molecules/Company.js @@ -24,10 +24,11 @@ const Period = styled(Typography.Paragraph)` opacity: 0.5; `; -const Description = styled(Typography.Paragraph)` +const Description = styled.li` + color: ${({ theme }) => theme.colors.white}; font-weight: ${({ theme }) => theme.font.weight.medium}; line-height: 1.7; - margin-bottom: 1rem; + margin-bottom: 0.5rem; `; const HeaderWrapper = styled(Box)` @@ -85,7 +86,17 @@ export const Company = ({ company, description, period, role }) => { {company} {role} {period} - {description} + + {description.map(x => ( + {x} + ))} + ); }; diff --git a/src/components/molecules/Footer.js b/src/components/molecules/Footer.js index 29c7cdf..6608db5 100644 --- a/src/components/molecules/Footer.js +++ b/src/components/molecules/Footer.js @@ -18,15 +18,17 @@ export const Footer = () => { - Designed With{' '} - - ♥️ + + 🎨 {' '} - by Layor Salami and{' '} + + Layor Salami + {' '} + , 👨🏾‍💻 {' '} - by Remi Salami + Remi Salami diff --git a/src/components/molecules/HomeBanner.js b/src/components/molecules/HomeBanner.js index 47934e8..9b4b464 100644 --- a/src/components/molecules/HomeBanner.js +++ b/src/components/molecules/HomeBanner.js @@ -4,10 +4,9 @@ import { Flex, Box } from 'rebass'; import { Content, OutlineButton, Typography } from 'components/atoms'; import { RightArrowIcon } from 'components/icons'; import Link from 'next/link'; -import codingIllustration from '../../../public/assets/img/coding-i.png'; const Wrapper = styled.section` - background-image: url(${codingIllustration}); + background-image: url("/assets/img/coding-i.png"); background-position: calc(100% + 4rem) 0; background-repeat: no-repeat; background-size: 28rem; diff --git a/src/components/molecules/Nav/index.js b/src/components/molecules/Nav/index.js index 6353260..dd7ffa1 100644 --- a/src/components/molecules/Nav/index.js +++ b/src/components/molecules/Nav/index.js @@ -7,6 +7,7 @@ import cb from 'bezier-easing'; import * as smoothScroll from 'lib/smoothScroll'; import { useMultipleClickaway } from 'hooks'; import Fade from 'react-reveal/Fade'; +import { useRouter } from 'next/router'; import { Content } from '../../atoms'; import { Brand, @@ -43,8 +44,8 @@ const NavMenu = () => { - - Works + + Projects @@ -70,6 +71,7 @@ export const Nav = () => { const [active, setActive] = useState(false); const [scrolled, setScrolled] = useState(false); const breakpoint = useBreakpoint(); + const { pathname, push } = useRouter(); const toggleActive = () => setActive(v => !v); const hamRef = useRef(null); const menuRef = useRef(null); @@ -80,7 +82,6 @@ export const Nav = () => { if (isOutside) { setActive(false); } - // eslint-disable-next-line }, [isOutside, active]); const scrollToTop = () => { @@ -91,6 +92,14 @@ export const Nav = () => { } }; + const goToHome = () => { + push('/'); + }; + + const onLogoClick = () => { + return pathname === '/' ? scrollToTop() : goToHome(); + }; + useEffect(() => { const onScroll = () => { const offset = window.pageYOffset; @@ -106,8 +115,8 @@ export const Nav = () => { const easing = cb(0.53, -0.19, 0.39, 1.29); const transitions = useTransition(active, null, { - from: { opacity: 0, transform: 'scale(0) ' }, - enter: { opacity: 1, transform: 'scale(1) ' }, + from: { opacity: 0, transform: 'scale(0)' }, + enter: { opacity: 1, transform: 'scale(1)' }, leave: { opacity: 0, transform: 'scale(0)' }, config: { duration: 300, @@ -119,7 +128,7 @@ export const Nav = () => { - Remi Salami + Remi Salami {breakpoint === 'mobile' ? ( diff --git a/src/components/molecules/Project.js b/src/components/molecules/Project.js index 3f40994..0f6e6ff 100644 --- a/src/components/molecules/Project.js +++ b/src/components/molecules/Project.js @@ -113,7 +113,7 @@ const Link = styled.a` } `; -export const Project = ({ coverImage, description, imageOrder, link, logo, name, technologies }) => { +export const Project = ({ coverImage, description, imageOrder, link, logo, logoType, name, technologies }) => { const [imageRef, { width }] = useMeasure(); const { primary } = useTheme().colors; @@ -121,6 +121,16 @@ export const Project = ({ coverImage, description, imageOrder, link, logo, name, return (width * 62.5) / 100; }; + const renderLogo = () => { + if (logo) { + if (logoType === 'svg') { + return ; + } + return ; + } + return null; + }; + return ( @@ -130,7 +140,7 @@ export const Project = ({ coverImage, description, imageOrder, link, logo, name, - {logo && } + {renderLogo()} {name} {description} @@ -206,12 +216,14 @@ Project.propTypes = { web: PropTypes.string, }), logo: PropTypes.func.isRequired, + logoType: PropTypes.string, name: PropTypes.string.isRequired, technologies: PropTypes.array.isRequired, }; Project.defaultProps = { imageOrder: 1, + logoType: 'svg', link: { android: '', ios: '', diff --git a/src/components/molecules/ProjectsBanner.js b/src/components/molecules/ProjectsBanner.js new file mode 100644 index 0000000..2bcb92a --- /dev/null +++ b/src/components/molecules/ProjectsBanner.js @@ -0,0 +1,41 @@ +import React from 'react'; +import styled from '@emotion/styled'; +import { Content, Typography } from 'components/atoms'; + +const Wrapper = styled.section` + background-image: url("/assets/img/delivery-i.png"); + background-position: calc(100% + 4rem) 9rem; + background-repeat: no-repeat; + background-size: 28rem; + padding-bottom: 20rem; + padding-top: 5rem; + + ${({ theme }) => theme.mq.md` + background-position: calc(100% + 1rem) 50%; + background-size: 30rem; + padding-bottom: 8rem; + padding-top: 8rem; + `} + + ${({ theme }) => theme.mq.lg` + background-size: 40rem; + padding: 12rem 0; + `} + + ${({ theme }) => theme.mq.xl` + background-position: calc(100%) 50%; + background-size: 70rem; + padding: 20rem 0; + `} + +`; + +export const ProjectsBanner = () => { + return ( + + + My Projects + + + ); +}; diff --git a/src/components/molecules/index.js b/src/components/molecules/index.js index 6ac1254..ee19b2e 100644 --- a/src/components/molecules/index.js +++ b/src/components/molecules/index.js @@ -3,6 +3,7 @@ export * from './Footer'; export * from './HomeBanner'; export * from './Nav'; export * from './Project'; +export * from './ProjectsBanner'; export * from './SectionHeader'; export * from './SkillBadge'; export * from './Socials'; diff --git a/src/components/organisms/AboutMe.js b/src/components/organisms/AboutMe.js index 75b96cb..b934c61 100644 --- a/src/components/organisms/AboutMe.js +++ b/src/components/organisms/AboutMe.js @@ -6,6 +6,7 @@ import { Box, Flex } from 'rebass'; import { useMeasure } from 'react-use'; import { skills } from 'data/skills'; import Fade from 'react-reveal/Fade'; +import Companies from './Companies'; const Wrapper = styled.section` margin-bottom: 15rem; @@ -77,12 +78,12 @@ const AboutMe = props => { > - Hello, I am Remilekun Salami a.k.a Casper, A software engineer based in Lagos, Nigeria. I am - passionate about writing elegant code to enable easy extendabilty and maintenance. I’m highly skilled - in building functional applications and can comfortably translate design mockups into responsive - pixel-perfect web and/or mobile screens to bring designs to life. I currently work at uduX as a - frontend developer and I work on the uduX iOS and web applications. In my spare time, I read articles - to improve myself, read manga, watch anime/movies, and hang out with friends. + Hello, I am Remilekun Salami (Casper), a software engineer based in Lagos, Nigeria. I am passionate + about writing elegant code to enable easy extendabilty and maintenance. I’m highly skilled in building + functional applications and can comfortably translate design mockups into responsive pixel-perfect web + and/or mobile screens to bring designs to life. I currently work at OPay as a frontend developer. In + my spare time I read articles to help my growth, read manga, watch anime/movies, hang out with + friends, you can also catch me playing Apex Legends (gamer tag: casper_rsj). @@ -110,10 +111,10 @@ const AboutMe = props => { - {/* + I have been able to create solutions for: - */} + ); diff --git a/src/components/organisms/MyWorks.js b/src/components/organisms/MyProjects.js similarity index 88% rename from src/components/organisms/MyWorks.js rename to src/components/organisms/MyProjects.js index fee82f5..b68ecb5 100644 --- a/src/components/organisms/MyWorks.js +++ b/src/components/organisms/MyProjects.js @@ -11,7 +11,7 @@ const MyWorks = props => { return ( - My Works + My Projects diff --git a/src/components/organisms/Projects.js b/src/components/organisms/Projects.js index 0572178..71f60d8 100644 --- a/src/components/organisms/Projects.js +++ b/src/components/organisms/Projects.js @@ -1,8 +1,9 @@ -import { useState, useEffect } from 'react'; +import { useMemo } from 'react'; import { Project } from 'components/molecules'; import PropTypes from 'prop-types'; +import Link from 'next/link'; import { Flex, Box } from 'rebass'; -import { works } from 'data/works'; +import { projects } from 'data/projects'; import { OutlineButton } from 'components/atoms'; import Slide from 'react-reveal/Slide'; import styled from '@emotion/styled'; @@ -18,28 +19,9 @@ const ProjectsWrapper = styled(Flex)` `; const Projects = ({ showAll }) => { - const [data, setData] = useState([]); - const [more, setMore] = useState(true); - const [page, setPage] = useState(1); - const limit = 4; - const currentCursor = page * limit; - - useEffect(() => { - if (showAll) { - setData([...works]); - setMore(false); - } else { - setData([...works.slice(0, currentCursor)]); - setMore(works.length > currentCursor); - } - }, [showAll]); - - const loadMore = () => { - const nextCursor = (page + 1) * limit; - setData(prev => [...prev, ...works.slice(currentCursor, nextCursor)]); - setPage(v => v + 1); - setMore(works.length >= nextCursor); - }; + const data = useMemo(() => { + return showAll ? projects : [...projects.slice(0, 3)]; + }, []); return ( @@ -49,11 +31,13 @@ const Projects = ({ showAll }) => { ))} - {more && ( - - - View More - + {!showAll && projects?.length > 3 && ( + + + + View More + + )} diff --git a/src/data/companies.js b/src/data/companies.js index fdc3a2f..a6e4a6f 100644 --- a/src/data/companies.js +++ b/src/data/companies.js @@ -1,18 +1,40 @@ export const companies = [ + { + company: 'OPay', + description: [ + 'Write reusable, performant code for internal projects.', + 'Work with product & design teams to build & maintain features on various projects.', + 'Engineer and maintain major features and functionalities across projects using ES6, React, Emotion, and integration of apis.', + 'Creating & Updating local API documentation using Gatsby & Markdown', + 'Developing competencies in backend tasks such as creating & consuming APIs and querying MongoDB & SQL databases.', + ], + role: 'Frontend Developer', + period: 'July 2020 - Present', + id: 'opay', + }, { company: 'Groove Platforms', - description: - 'Front end developer in charge on implementing code from designs for both web and mobile using React and React-Native frameworks.. ', + description: [ + 'Translate designs to extendable, maintainable code for the uduX web and iOS apps.', + 'Engineer and maintain major features of uduX web apps using ES6, React, Emotion, Firebase, and integration of apis.', + 'Engineer a dynamic UI rendering system for screens. Hence improving easy re-ordering and modification of items on the app.', + 'Implement performant solutions to enhance optimization for maximum speed and scalability', + 'Integrate payment gateway for a secure way to pay for subscriptions.', + ], role: 'Frontend Developer', - period: 'February 2019 - Present', + period: 'March 2019 - July 2020', id: 'udux', }, { company: 'Summitech Ltd', - description: - 'Front end developer in charge on implementing code from designs for both web and mobile. \n Worked on several internal web projects using Javascript, HTML and CSS. ', + description: [ + 'Write reusable, performant code for a diverse array of client and internal projects.', + 'Work with a variety of different languages, frameworks, and content management systems such as JavaScript, TypeScript, React, Vue, Gatsby Js, Angular, React-Native, NativeScript, Node.js, Wordpress e.t.c.', + 'Communicate and collaborate with teams of software engineers, UI/UX designers, project managers on a daily basis.', + 'Contribute to open source projects.', + ], role: 'Frontend Developer', - period: 'June 2017 - February 2019', + period: 'June 2017 - March 2019', id: 'summit', }, ]; diff --git a/src/data/projects.js b/src/data/projects.js new file mode 100644 index 0000000..def278d --- /dev/null +++ b/src/data/projects.js @@ -0,0 +1,84 @@ +import { FindmaidsIcon, UduXIcon, Chiji14XchangeIcon, GitExplorerIcon } from 'components/icons'; + +export const projects = [ + { + coverImage: '/assets/img/projects/npf.jpg', + description: + 'The NPF Microfinance Banking Mobile App allows you to bank on the go. Carryout all banking related activities from the comfort of your mobile phone.', + name: 'NPF MFB', + technologies: ['react', 'reactNative'], + link: { + ios: 'https://apps.apple.com/ng/app/npf-microfinance-bank/id1546736456', + android: 'https://play.google.com/store/apps/details?id=com.npfmicrofinancebank.ibank', + }, + id: 'proj-npf', + }, + { + coverImage: '/assets/img/projects/swap.jpg', + description: 'A community to aid easy barter and foster relationships between game lovers.', + name: 'swapurgame', + technologies: ['html', 'react'], + link: { + web: 'https://www.swapurgame.com/', + }, + id: 'proj-swap', + }, + { + coverImage: '/assets/img/projects/sharply.jpg', + description: + 'A fully automated logistics solution that allows small and medium scale logistics company manage their riders and customer.', + name: 'Sharply Africa', + technologies: ['html', 'react'], + link: { + web: 'https://www.sharply.africa/', + }, + id: 'proj-sharply', + }, + { + coverImage: '/assets/img/projects/udux.jpg', + description: "uduX is Nigeria's first indigenous subscription-based music store and streaming service platform.", + logo: UduXIcon, + name: 'uduX', + technologies: ['html', 'react', 'reactNative', 'swift'], + link: { + web: 'https://udux.com', + ios: 'https://apps.apple.com/us/app/udux/id1372897101', + }, + id: 'proj-udux', + }, + { + coverImage: '/assets/img/projects/find-maids.jpg', + description: + 'A web app used to book cleaning appointments by customers while the admin are able to manage their staffs.', + logo: FindmaidsIcon, + name: 'Find Maids', + technologies: ['html', 'react'], + link: { + web: 'https://findmaids.co.uk', + }, + id: 'proj-find-maids', + }, + { + coverImage: '/assets/img/projects/git-explorer.jpg', + description: 'Gitexplorer is an open source project created by Summitech to help people with git commands.', + logo: GitExplorerIcon, + name: 'Git Explorer', + technologies: ['html', 'react'], + link: { + web: 'https://gitexplorer.com', + }, + id: 'proj-git-explorer', + }, + { + coverImage: '/assets/img/projects/chiji.png', + description: 'A bitcoin and gift card trading application.', + logo: Chiji14XchangeIcon, + name: 'Chiji14xchange', + technologies: ['react', 'reactNative'], + link: { + ios: 'https://apps.apple.com/ng/app/chiji14xchange/id1459183957', + android: 'https://play.google.com/store/apps/details?id=com.chiji14xchange', + }, + id: 'proj-chiji', + }, +]; diff --git a/src/data/works.js b/src/data/works.js deleted file mode 100644 index 8305e0b..0000000 --- a/src/data/works.js +++ /dev/null @@ -1,54 +0,0 @@ -import { FindmaidsIcon, UduXIcon, Chiji14XchangeIcon, GitExplorerIcon } from 'components/icons'; - -export const works = [ - { - coverImage: '/assets/img/projects/udux.jpg', - description: - "uduX is a music streaming platform. I worked with a team of software engineers on uduX, by translating designs and consuming apis, my role was to build applications that enables ease of use of streaming and accessibility of user's uduX data for both platforms, web and mobile( iOS ).", - logo: UduXIcon, - name: 'uduX', - technologies: ['html', 'react', 'reactNative', 'swift'], - link: { - web: 'https://udux.com', - ios: 'https://apps.apple.com/us/app/udux/id1372897101', - }, - id: 'proj-udux', - }, - { - coverImage: '/assets/img/projects/find-maids.jpg', - description: - 'A web app used to book cleaning appointments by customers while the admin are able to manage their staffs. I built the UI components using the designs handed over to me and also handled the UI logic functionality of the app.', - logo: FindmaidsIcon, - name: 'Find Maids', - technologies: ['html', 'react'], - link: { - web: 'https://findmaids.co.uk', - }, - id: 'proj-find-maids', - }, - { - coverImage: '/assets/img/projects/git-explorer.jpg', - description: - 'Gitexplorer is an open source project created by Summitech to help people with git commands. While working with a team of a designer and a backend engineer, I was tasked with creating the UI component and also deliberated with the backend engineer on a performant logic of data management.', - logo: GitExplorerIcon, - name: 'Git Explorer', - technologies: ['html', 'react'], - link: { - web: 'https://gitexplorer.com', - }, - id: 'proj-git-explorer', - }, - { - coverImage: '/assets/img/projects/chiji.png', - description: - 'A bitcoin and gift card trading application. I translated the designs assigned to me to pixel perfect mobile screens, frontend logic, consumed apis, and I also worked on a chat system using socket.io to enable instant messaging between and user and an agent to allow easy and instant trades.', - logo: Chiji14XchangeIcon, - name: 'Chiji14xchange', - technologies: ['react', 'reactNative'], - link: { - ios: 'https://apps.apple.com/ng/app/chiji14xchange/id1459183957', - android: 'https://play.google.com/store/apps/details?id=com.chiji14xchange', - }, - id: 'proj-chiji', - }, -]; diff --git a/src/pages/index.js b/src/pages/index.js index 5a4f10c..37bf7ab 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -2,7 +2,7 @@ import React from 'react'; import Head from 'next/head'; import { HomeBanner, Footer } from 'components/molecules'; import AboutMe from 'components/organisms/AboutMe'; -import MyWorks from 'components/organisms/MyWorks'; +import MyProjects from 'components/organisms/MyProjects'; import ContactMe from 'components/organisms/ContactMe'; const Home = () => { @@ -13,7 +13,7 @@ const Home = () => { - +