Merge pull request #1 from remiilekun/new-updates

New updates

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 }) => {
       <CompanyHeader>{company}</CompanyHeader>
       <Role>{role}</Role>
       <Period>{period}</Period>
-      <Description>{description}</Description>
+      <Box
+        as="ul"
+        sx={{
+          listStyle: 'disc',
+          listStylePosition: 'inside',
+        }}
+      >
+        {description.map(x => (
+          <Description>{x}</Description>
+        ))}
+      </Box>
     </Wrapper>
   );
 };

src/components/molecules/Footer.js

@@ -18,15 +18,17 @@ export const Footer = () => {
     <Wrapper>
       <Content>
         <Typography.Paragraph align="center" size="small">
-          Designed With{' '}
-          <span aria-label="Heart Emoji" role="img">
-            ♥️
+          <span aria-label="Design Emoji" role="img">
+            🎨
           </span>{' '}
-          by Layor Salami and{' '}
+          <a href="http://layorsalami.com/" rel="noopener noreferrer" target="_blank">
+            Layor Salami
+          </a>{' '}
+          ,
           <span aria-label="Code Emoji" role="img">
             👨🏾‍💻
           </span>{' '}
-          by Remi Salami
+          Remi Salami
         </Typography.Paragraph>
       </Content>
     </Wrapper>

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;

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 = () => {
 
       <NavItem>
         <Fade top delay={100}>
-          <Link href="#works" passHref>
-            <NavLink className="nl">Works</NavLink>
+          <Link href="#projects" passHref>
+            <NavLink className="nl">Projects</NavLink>
           </Link>
         </Fade>
       </NavItem>
@@ -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 = () => {
     <Wrapper scrolled={scrolled}>
       <Content fluid>
         <Flex justifyContent="space-between" alignItems="center">
-          <Brand onClick={scrollToTop}>Remi Salami</Brand>
+          <Brand onClick={onLogoClick}>Remi Salami</Brand>
 
           {breakpoint === 'mobile' ? (
             <MobileWrapper>

src/components/molecules/Project.js

@@ -113,14 +113,24 @@ 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;
 
   const height = () => {
     return (width * 62.5) / 100;
   };
 
+  const renderLogo = () => {
+    if (logo) {
+      if (logoType === 'svg') {
+        return <Logo as={logo} />;
+      }
+      return <Logo as="img" src={logo} alt={name} />;
+    }
+    return null;
+  };
+
   return (
     <Wrapper className="flexxx">
       <Box px={[0, null, '1.5rem']} order={[0, 0, imageOrder]} width={[1, 1, 1 / 2]} mb={['1.5rem', null, 0]}>
@@ -130,7 +140,7 @@ export const Project = ({ coverImage, description, imageOrder, link, logo, name,
       </Box>
       <Box px={[0, null, '1.5rem']} width={[1, 1, 1 / 2]}>
         <Heading>
-          {logo && <Logo as={logo} />}
+          {renderLogo()}
           <Name>{name}</Name>
         </Heading>
         <Description>{description}</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: '',

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 (
+    <Wrapper>
+      <Content fluid>
+        <Typography.Heading weight="bold">My Projects</Typography.Heading>
+      </Content>
+    </Wrapper>
+  );
+};

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';

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 => {
             >
               <Fade left>
                 <Text>
-                  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).
                 </Text>
               </Fade>
             </Box>
@@ -110,10 +111,10 @@ const AboutMe = props => {
           </Flex>
         </SubSection>
 
-        {/* <SubSection>
+        <SubSection>
           <Subtitle>I have been able to create solutions for:</Subtitle>
           <Companies />
-        </SubSection> */}
+        </SubSection>
       </Content>
     </Wrapper>
   );

src/components/organisms/MyWorks.js → src/components/organisms/MyProjects.js

@@ -11,7 +11,7 @@ const MyWorks = props => {
   return (
     <Wrapper {...props}>
       <Content fluid>
-        <SectionHeader>My Works</SectionHeader>
+        <SectionHeader>My Projects</SectionHeader>
         <Projects />
       </Content>
     </Wrapper>

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 (
     <ProjectsWrapper>
@@ -49,11 +31,13 @@ const Projects = ({ showAll }) => {
         </Slide>
       ))}
 
-      {more && (
-        <Box onClick={loadMore} width="1" py="2rem" display="flex" alignItems="center" justifyContent="center">
-          <OutlineButton fontSize="normal" size="large">
-            View More
-          </OutlineButton>
+      {!showAll && projects?.length > 3 && (
+        <Box width="1" py="2rem" display="flex" alignItems="center" justifyContent="center">
+          <Link href="/projects" passHref>
+            <OutlineButton fontSize="normal" size="large" as="a">
+              View More
+            </OutlineButton>
+          </Link>
         </Box>
       )}
     </ProjectsWrapper>

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',
   },
 ];