Merge pull request #23 from lucasheartcliff/develop

Develop

src/components/LanguageChart/index.tsx

@@ -70,8 +70,9 @@ const buildState = (
       },
       y: {
         formatter(val) {
-          return `${displayNormalizedData(val).toFixed(0)} ${messages.hoursWorked
-            }`;
+          return `${displayNormalizedData(val).toFixed(0)} ${
+            messages.hoursWorked
+          }`;
         },
         title: {
           formatter() {
@@ -141,7 +142,6 @@ export default function LanguageChart(props: Props) {
       labels.push(v.name);
       colors.push(v.color);
     }
-    console.log(data, labels);
     const newState = buildState(data, colors, labels, messages);
     setState(newState);
   }, [props.data, locale]);

src/components/Navbar/index.tsx

@@ -8,13 +8,51 @@ import Logo from '../logo';
 
 interface Props {
   logoTitle: string;
+  scrollTo: (titleId: string) => void;
 }
 
-export default function Navbar({ logoTitle }: Props) {
+export default function Navbar({ logoTitle, scrollTo }: Props) {
   const [menuOpen, setMenuOpen] = useState(false);
 
   const { t } = useTranslation('common');
 
+  const OPTIONS = [
+    {
+      title: t('About'),
+      key: 'about',
+    },
+    {
+      title: t('Languages'),
+      key: 'languages',
+    },
+    {
+      title: t('Experiences'),
+      key: 'experience',
+    },
+    {
+      title: t('Educations'),
+      key: 'education',
+    },
+    {
+      title: t('Certifications'),
+      key: 'certification',
+    },
+    {
+      title: t('Projects'),
+      key: 'projects',
+    },
+  ];
+
+  const renderOptions = () =>
+    OPTIONS.map(({ title, key }) => (
+      <span
+        key={key}
+        onClick={() => scrollTo(key)}
+        className={'cursor-pointer text-black hover:border-0'}
+      >
+        {title}
+      </span>
+    ));
   return (
     <nav className="sticky top-0 z-50 bg-white p-4 px-6 text-white no-underline shadow-md md:px-16">
       <div className="container mx-auto">
@@ -23,12 +61,7 @@ export default function Navbar({ logoTitle }: Props) {
             <Logo title={logoTitle} />
           </Link>
           <div className="hidden space-x-4 md:flex md:text-2xl">
-            <Link href="#about">{t('About')}</Link>
-            <Link href="#languages">{t('Languages')}</Link>
-            <Link href="#experience">{t('Experiences')}</Link>
-            <Link href="#education">{t('Educations')}</Link>
-            <Link href="#certification">{t('Certifications')}</Link>
-            <Link href="#projects">{t('Projects')}</Link>
+            {renderOptions()}
             <LanguageSelector />
           </div>
           <button
@@ -52,12 +85,7 @@ export default function Navbar({ logoTitle }: Props) {
         {menuOpen && (
           <div className="mt-4 md:hidden">
             <div className="flex flex-col justify-center space-y-4 text-center align-middle text-lg">
-              <Link href="#about">{t('About')}</Link>
-              <Link href="#languages">{t('Languages')}</Link>
-              <Link href="#experience">{t('Experiences')}</Link>
-              <Link href="#education">{t('Educations')}</Link>
-              <Link href="#certification">{t('Certifications')}</Link>
-              <Link href="#projects">{t('Projects')}</Link>
+              {renderOptions()}
               <div className="flex w-full justify-center">
                 <LanguageSelector />
               </div>

src/components/Scroll/index.tsx

@@ -1,15 +1,15 @@
-import dynamic from 'next/dynamic';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import type { ScrollbarProps } from 'react-custom-scrollbars-2';
+import { Scrollbars } from 'react-custom-scrollbars-2';
 
-const Scrollbars = dynamic(() => import('react-custom-scrollbars-2'), {
-  ssr: false,
-});
+interface Props extends ScrollbarProps { }
 
-interface Props extends ScrollbarProps {}
+function Scroll({ children, ...props }: Props, ref: any) {
+  return (
+    <Scrollbars ref={ref} {...props}>
+      {children}
+    </Scrollbars>
+  );
+}
 
-const Scroll: React.FC<Props> = ({ children, ...props }) => {
-  return <Scrollbars {...props}>{children}</Scrollbars>;
-};
-
-export default Scroll;
+export default forwardRef(Scroll);

src/components/ScrollToTopButton/index.tsx

@@ -0,0 +1,29 @@
+import ArrowUpOutlined from '@ant-design/icons/lib/icons/ArrowUpOutlined';
+import React from 'react';
+
+import Icon from '../Icon';
+
+const theme = require('../../styles/themes');
+
+type Props = {
+  isVisible: boolean;
+  scrollToTop: () => void;
+};
+const ScrollToTopButton = ({ isVisible, scrollToTop }: Props) => {
+  return (
+    <div
+      onClick={scrollToTop}
+      className={`fixed bottom-5 right-5 cursor-pointer rounded-full text-white shadow-lg transition duration-300 ease-in-out md:bottom-7 md:right-7 ${
+        isVisible ? '' : 'invisible'
+      }`}
+    >
+      <div>
+        <Icon color={theme.primary}>
+          <ArrowUpOutlined />
+        </Icon>
+      </div>
+    </div>
+  );
+};
+
+export default ScrollToTopButton;