- implement about section

src/components/builder/right/sections/About.js

@@ -1,5 +1,6 @@
 import React, { memo } from 'react';
-import { FaCoffee } from 'react-icons/fa';
+import { FaCoffee, FaBug } from 'react-icons/fa';
+import { MdCode } from 'react-icons/md';
 import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
 import styles from './About.module.css';
@@ -37,6 +38,75 @@ const About = () => {
           </a>
         </div>
       </div>
+
+      <div className={styles.container}>
+        <h5>Bug? Feature Request?</h5>
+
+        <p className="leading-loose">
+          Something halting your progress from making a resume? Found a pesky
+          bug that just won&apos;t quit? Talk about it on the GitHub Issues
+          section, or send me and email using the actions below.
+        </p>
+
+        <div className="mt-4 flex">
+          <a
+            href="https://github.com/AmruthPillai/Reactive-Resume/issues/new"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <Button icon={FaBug}>Raise an Issue</Button>
+          </a>
+        </div>
+      </div>
+
+      <div className={styles.container}>
+        <h5>Source Code</h5>
+
+        <p className="leading-loose">
+          Want to run the project from its source? Are you a developer willing
+          to contribute to the open-source development of this project? Click
+          the button below.
+        </p>
+
+        <div className="mt-4 flex">
+          <a
+            href="https://github.com/AmruthPillai/Reactive-Resume"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <Button icon={MdCode}>GitHub Repo</Button>
+          </a>
+        </div>
+      </div>
+
+      <div className={styles.container}>
+        <h5>License Information</h5>
+
+        <p className="leading-loose">
+          The project is governed under the MIT License, which you can read more
+          about below. Basically, you are allowed to use the project anywhere
+          provided you give credits to the original author.
+        </p>
+
+        <div className="mt-4 flex">
+          <a
+            href="https://github.com/AmruthPillai/Reactive-Resume/blob/master/LICENSE"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <Button icon={MdCode}>MIT License</Button>
+          </a>
+        </div>
+      </div>
+
+      <div className="my-4 text-center opacity-50 text-sm">
+        <p>
+          Made with Love by{' '}
+          <a href="https://amruthpillai.com" rel="noreferrer" target="_blank">
+            Amruth Pillai
+          </a>
+        </p>
+      </div>
     </section>
   );
 };

src/components/builder/right/sections/Settings.js

@@ -1,4 +1,5 @@
 import React, { memo, useContext, useState } from 'react';
+import { FaAngleDown } from 'react-icons/fa';
 import UserContext from '../../../../contexts/UserContext';
 import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
@@ -6,6 +7,7 @@ import styles from './Settings.module.css';
 import Input from '../../../shared/Input';
 import ThemeContext from '../../../../contexts/ThemeContext';
 import themeConfig from '../../../../data/themeConfig';
+import languageConfig from '../../../../data/languageConfig';
 
 const Settings = () => {
   const [deleteText, setDeleteText] = useState('Delete Account');
@@ -16,6 +18,10 @@ const Settings = () => {
     setTheme(e.target.value);
   };
 
+  const handleChangeLanguage = (e) => {
+    console.log(e.target.value);
+  };
+
   const handleDeleteAccount = () => {
     if (deleteText === 'Delete Account') {
       setDeleteText('Are you sure?');
@@ -40,6 +46,37 @@ const Settings = () => {
         onChange={handleChangeTheme}
       />
 
+      <label>
+        <span>Language</span>
+        <div className="relative grid items-center">
+          <select onChange={handleChangeLanguage}>
+            {languageConfig.map((x) => (
+              <option key={x.key} value={x.key}>
+                {x.name}
+              </option>
+            ))}
+          </select>
+
+          <FaAngleDown
+            size="16px"
+            className="absolute right-0 opacity-50 hover:opacity-75 mx-4"
+          />
+        </div>
+      </label>
+
+      <p className="text-sm leading-loose">
+        If you would like to contribute by providing translations to Reactive
+        Resume in your language,{' '}
+        <a
+          href="https://github.com/AmruthPillai/Reactive-Resume/blob/master/TRANSLATING.md"
+          rel="noreferrer"
+          target="_blank"
+        >
+          please visit this link
+        </a>
+        .
+      </p>
+
       <div className={styles.container}>
         <h5>Danger Zone</h5>
 

src/components/landing/Hero.js

@@ -1,5 +1,7 @@
 import { navigate } from 'gatsby';
+import TypeIt from 'typeit-react';
 import React, { memo, useContext } from 'react';
+import { FaGithub } from 'react-icons/fa';
 import ModalContext from '../../contexts/ModalContext';
 import UserContext from '../../contexts/UserContext';
 import Button from '../shared/Button';
@@ -18,7 +20,21 @@ const Hero = () => {
       <Logo className="shadow-lg" size="256px" />
 
       <div className="ml-12">
-        <h1 className="text-5xl font-bold">Reactive Resume</h1>
+        <h1 className="sr-only">Reactive Resume</h1>
+        <div className="text-5xl font-bold">
+          <TypeIt
+            getBeforeInit={(instance) => {
+              return instance
+                .type('Creative Resume')
+                .pause(500)
+                .move(-11)
+                .delete(4)
+                .pause(250)
+                .type('Reac')
+                .move('END');
+            }}
+          />
+        </div>
         <h2 className="mt-1 text-3xl text-primary-500">
           A free and open-source resume builder.
         </h2>
@@ -33,6 +49,16 @@ const Hero = () => {
               Login
             </Button>
           )}
+
+          <a
+            href="https://github.com/AmruthPillai/Reactive-Resume"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <Button outline icon={FaGithub} className="ml-8">
+              Source Code
+            </Button>
+          </a>
         </div>
       </div>
     </div>

src/components/shared/Avatar.js

@@ -18,7 +18,9 @@ const Avatar = ({ className }) => {
     handleClose();
   };
 
-  const photoURL = useMemo(() => toUrl(user.email, 'size=128'), [user.email]);
+  const photoURL = useMemo(() => toUrl(user.email || '', 'size=128&d=retro'), [
+    user.email,
+  ]);
 
   return (
     <div>
@@ -31,7 +33,7 @@ const Avatar = ({ className }) => {
       >
         <img
           src={photoURL}
-          alt={user.displayName}
+          alt={user.displayName || 'Anonymous User'}
           className={cx(styles.container, className)}
         />
       </div>

src/components/shared/Input.js

@@ -46,7 +46,7 @@ const Input = ({
       };
 
   return (
-    <div className={cx(styles.container, className)}>
+    <div className={className}>
       <label htmlFor={uuid}>
         <span>
           {label}{' '}
@@ -115,7 +115,9 @@ const Input = ({
               onChange={onChange}
             >
               {options.map((x) => (
-                <option key={x}>{x}</option>
+                <option key={x} value={x}>
+                  {x}
+                </option>
               ))}
             </select>
 

src/components/shared/Input.module.css

@@ -1,31 +1,3 @@
-.container label input,
-.container label textarea,
-.container label select {
-  @apply w-full py-3 px-4 rounded text-primary-900 bg-primary-200 border border-transparent appearance-none;
-}
-
-.container label input::placeholder,
-.container label textarea::placeholder,
-.container label select::placeholder {
-  @apply opacity-50;
-}
-
-.container label input:hover,
-.container label textarea:hover,
-.container label select:hover {
-  @apply outline-none border-primary-400;
-}
-
-.container label input:focus,
-.container label textarea:focus,
-.container label select:focus {
-  @apply outline-none border-primary-600;
-}
-
-.container label > p {
-  @apply mt-1 text-red-600 text-xs;
-}
-
 .circle {
   left: 14px;
   @apply absolute bg-primary-900 rounded-full w-6 h-6;