- implement i18n

- translation dynamic for sections
- added articles for SEO

src/pages/app/builder.js

@@ -1,6 +1,7 @@
 import { navigate } from 'gatsby';
 import React, { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
 import Artboard from '../../components/builder/center/Artboard';
 import LeftSidebar from '../../components/builder/left/LeftSidebar';
 import RightSidebar from '../../components/builder/right/RightSidebar';
@@ -11,6 +12,7 @@ import Button from '../../components/shared/Button';
 
 const Builder = ({ id }) => {
   const dispatch = useDispatch();
+  const { t } = useTranslation();
   const [loading, setLoading] = useState(true);
   const { getResume } = useContext(DatabaseContext);
 
@@ -24,22 +26,17 @@ const Builder = ({ id }) => {
 
       if (!resume) {
         navigate('/app/dashboard');
-        toast.error(
-          `The resume you were looking for does not exist anymore... or maybe it never did?`,
-        );
+        toast.error(t('builder.toasts.doesNotExist'));
         return null;
       }
 
       if (resume.createdAt === resume.updatedAt) {
         toast.dark(() => (
           <div className="py-2">
-            <p className="leading-loose">
-              Not sure where to begin? Try <strong>Loading Demo Data</strong> to
-              see what Reactive Resume has to offer.
-            </p>
+            <p className="leading-loose">{t('builder.toasts.loadDemoData')}</p>
 
             <Button className="mt-4" onClick={handleLoadDemoData}>
-              Load Demo Data
+              {t('builder.actions.loadDemoData.button')}
             </Button>
           </div>
         ));
@@ -60,7 +57,7 @@ const Builder = ({ id }) => {
         <div className="col-span-3">
           <LeftSidebar />
         </div>
-        <div className="h-screen overflow-scroll col-span-5 bg-primary-100 grid items-center justify-center">
+        <div className="col-span-5 h-screen overflow-hidden bg-primary-100 grid items-center justify-center">
           <Artboard />
         </div>
         <div className="col-span-3">

src/pages/app/dashboard.js

@@ -1,12 +1,14 @@
 import firebase from 'gatsby-plugin-firebase';
 import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
 import CreateResume from '../../components/dashboard/CreateResume';
 import ResumePreview from '../../components/dashboard/ResumePreview';
 import TopNavbar from '../../components/dashboard/TopNavbar';
 import LoadingScreen from '../../components/router/LoadingScreen';
 
 const Dashboard = ({ user }) => {
+  const { t } = useTranslation();
   const [resumes, setResumes] = useState([]);
   const [loading, setLoading] = useState(true);
 
@@ -61,7 +63,9 @@ const Dashboard = ({ user }) => {
   return (
     <div>
       <Helmet>
-        <title>Dashboard | Reactive Resume</title>
+        <title>
+          {t('dashboard.title')} | {t('shared.appName')}
+        </title>
         <link rel="canonical" href="https://rxresu.me/app/dashboard" />
       </Helmet>
 

src/pages/faq.js

@@ -1,11 +1,17 @@
-import React from 'react';
-import { MdKeyboardArrowLeft } from 'react-icons/md';
 import { Link } from '@reach/router';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { MdKeyboardArrowLeft } from 'react-icons/md';
 import Wrapper from '../components/shared/Wrapper';
 
 const FrequentlyAskedQuestions = () => {
   return (
     <Wrapper>
+      <Helmet>
+        <title>Frequently Asked Questions | Reactive Resume</title>
+        <link rel="canonical" href="https://rxresu.me/app/dashboard" />
+      </Helmet>
+
       <div className="md:w-1/2 container px-8 md:px-0 py-16 grid gap-12">
         <div className="flex items-center">
           <Link to="/">

src/pages/index.js

@@ -1,24 +1,23 @@
 import React, { memo } from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from '@reach/router';
+import { useTranslation } from 'react-i18next';
 import Hero from '../components/landing/Hero';
 import Wrapper from '../components/shared/Wrapper';
 
 const Home = () => {
+  const { t } = useTranslation();
+
   return (
     <Wrapper>
       <Helmet>
-        <title>Reactive Resume</title>
+        <title>{t('shared.appName')}</title>
         <link rel="canonical" href="https://rxresu.me/" />
       </Helmet>
 
       <div className="container mt-24">
         <Hero />
 
-        <div className="my-24">
-          <h4 className="text-xl uppercase font-bold mb-8">Screenshots</h4>
-        </div>
-
         <div className="pt-8">
           <Feature title="Create a resume that’s worthy of who you are.">
             Keep up with the latest trends in resume design without having to
@@ -37,19 +36,12 @@ const Home = () => {
           </Feature>
 
           <Feature title="Kickstarting your career shouldn’t come at a cost.">
-            There are brilliant alternatives to this app like{' '}
-            <a href="/" target="blank">
-              Novoresume
-            </a>{' '}
-            and{' '}
-            <a href="/" target="blank">
-              Zety
-            </a>
-            , but they come at a cost, mainly because of the time the developers
-            and the marketing they had to incur to make the product. This app
-            might not be better than them, but it does cater to people who are
-            just not in a position to pay hundreds of dollars to create a resume
-            to bootstrap their career.
+            There are brilliant alternatives to this app like Novoresume and
+            Zety , but they come at a cost, mainly because of the time the
+            developers and the marketing they had to incur to make the product.
+            This app might not be better than them, but it does cater to people
+            who are just not in a position to pay hundreds of dollars to create
+            a resume to bootstrap their career.
           </Feature>
 
           <Feature title="Your data is your data, none of my data.">
@@ -69,11 +61,29 @@ const Home = () => {
           </h4>
           <div className="grid grid-cols-4 gap-8">
             <Link to="/faq">Frequently Asked Questions</Link>
-            <Link to="/faq">Checkout Source Code</Link>
+            <a
+              href="https://github.com/AmruthPillai/Reactive-Resume"
+              rel="noreferrer"
+              target="_blank"
+            >
+              Check Out Source Code
+            </a>
             <Link to="/faq">Upvote on Product Hunt</Link>
-            <Link to="/faq">Raise an Issue on GitHub</Link>
-            <Link to="/faq">Donate to Reactive Resume</Link>
-            <Link to="/faq">Building Great Looking Resumes</Link>
+            <a
+              href="https://www.buymeacoffee.com/AmruthPillai"
+              rel="noreferrer"
+              target="_blank"
+            >
+              Donate to Reactive Resume
+            </a>
+            <Link to="/blog/design-beautiful-resumes">
+              Design Beautiful Resumes
+            </Link>
+            <Link to="/blog/ats-friendly-resumes">ATS-Friendly Resumes</Link>
+            <Link to="/blog/acing-video-interviews">
+              Acing Video Interviews
+            </Link>
+            <Link to="/blog/jobs-during-covid-19">Jobs During COVID-19</Link>
           </div>
         </div>
 

src/pages/r/view.js

@@ -2,6 +2,7 @@ import { Link, navigate } from '@reach/router';
 import React, { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
 import LoadingScreen from '../../components/router/LoadingScreen';
 import DatabaseContext from '../../contexts/DatabaseContext';
 import Castform from '../../templates/Castform';
@@ -13,6 +14,7 @@ import styles from './view.module.css';
 import Celebi from '../../templates/Celebi';
 
 const ResumeViewer = ({ id }) => {
+  const { t } = useTranslation();
   const [resume, setResume] = useState(null);
   const [loading, setLoading] = useState(true);
   const { getResume } = useContext(DatabaseContext);
@@ -42,7 +44,9 @@ const ResumeViewer = ({ id }) => {
     return (
       <div className={styles.container}>
         <Helmet>
-          <title>{resume.name} | Reactive Resume</title>
+          <title>
+            {resume.name} | {t('shared.appName')}
+          </title>
           <link rel="canonical" href={`https://rxresu.me/r/${id}`} />
         </Helmet>