Merge pull request #5 from ksentak/feature/typescript

Feature/typescript
ksentak · Jun 3, 2021 · 0c1227a · 0c1227a
2 parents 1624e86 + 293aa0f
commit 0c1227a
Show file tree

Hide file tree

Showing 26 changed files with 12,283 additions and 17,093 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # Keaton React Portfolio
 
-- My personal portfolio website
-- Built with React/Gatsby
+-   My personal portfolio website
+-   Built with React/Gatsby/Typescript
 
 ---
 

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -15,6 +15,7 @@ module.exports = {
     },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
+    `gatsby-plugin-image`,
     {
       resolve: `gatsby-plugin-manifest`,
       options: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,34 +1,38 @@
 {
   "name": "keaton-gatsby-portfolio",
   "private": true,
-  "version": "3.3.0",
+  "version": "4.0.1",
   "homepage": "https://keatonsentak.com/",
   "author": "Keaton Sentak",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.34",
-    "@fortawesome/free-brands-svg-icons": "^5.15.2",
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
-    "bootstrap": "^4.5.3",
+    "@types/react": "^17.0.9",
+    "@types/react-dom": "^17.0.6",
+    "bootstrap": "^5.0.1",
     "emailjs-com": "^2.6.4",
-    "gatsby": "^2.26.1",
-    "gatsby-image": "^2.5.0",
-    "gatsby-plugin-manifest": "^2.6.1",
-    "gatsby-plugin-offline": "^3.4.0",
-    "gatsby-plugin-react-helmet": "^3.4.0",
-    "gatsby-plugin-sharp": "^2.8.0",
-    "gatsby-source-filesystem": "^2.5.0",
-    "gatsby-transformer-sharp": "^2.6.0",
+    "gatsby": "^3.4.1",
+    "gatsby-plugin-gatsby-cloud": "^2.4.1",
+    "gatsby-plugin-image": "^1.4.0",
+    "gatsby-plugin-manifest": "^3.4.0",
+    "gatsby-plugin-offline": "^4.4.0",
+    "gatsby-plugin-react-helmet": "^4.4.0",
+    "gatsby-plugin-sharp": "^3.4.1",
+    "gatsby-source-filesystem": "^3.4.0",
+    "gatsby-transformer-sharp": "^3.4.0",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^6.14.1",
-    "react-toastify": "^6.2.0",
-    "react-tsparticles": "^1.18.11",
-    "reactstrap": "^8.8.1"
+    "react-hook-form": "^7.7.1",
+    "react-toastify": "^7.0.4",
+    "react-tsparticles": "^1.27.0",
+    "reactstrap": "^8.9.0"
   },
   "devDependencies": {
+    "@types/react-helmet": "^6.1.1",
     "prettier": "2.2.1"
   },
   "keywords": [

diff --git a/src/components/banner.js → src/components/banner.tsx b/src/components/banner.js → src/components/banner.tsx
@@ -2,18 +2,18 @@ import React from 'react';
 import Particles from 'react-tsparticles';
 import Socials from './socials';
 
-const Banner = () => {
+const Banner: React.FC = () => {
   const config = {
     fpsLimit: 60,
     particles: {
       number: {
-        value: 160,
+        value: 100,
         density: {
           enable: false
         }
       },
       color: {
-        value: '#ffffff'
+        value: '#90caf9'
       },
       shape: {
         type: 'circle',
@@ -26,7 +26,7 @@ const Banner = () => {
         }
       },
       opacity: {
-        value: 0.1
+        value: 0.4
       },
       size: {
         value: 5,
@@ -36,15 +36,10 @@ const Banner = () => {
           size_min: 0.3
         }
       },
-      line_linked: {
-        enabled: false
-      },
       move: {
         enable: true,
         random: true,
-        speed: 1,
-        direction: 'top',
-        out_mode: 'out'
+        speed: 1
       }
     }
   };

diff --git a/src/components/contactform.js → src/components/contactForm.tsx b/src/components/contactform.js → src/components/contactForm.tsx
@@ -1,44 +1,60 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import emailjs from 'emailjs-com';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.min.css';
 
-const ContactForm = () => {
-  const { register, errors, handleSubmit, reset } = useForm();
+interface Data {
+  name: string;
+  email: string;
+  subject: string;
+  message: string;
+}
 
-  const toastifySuccess = () => {
+const ContactForm: React.FC = () => {
+  const [disabled, setDisabled] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors }
+  } = useForm();
+
+  const toastifySuccess = (): void => {
     toast('Form sent!', {
       position: 'bottom-right',
       autoClose: 5000,
       hideProgressBar: true,
       closeOnClick: true,
       pauseOnHover: true,
       draggable: false,
-      className: 'submit-feedback success',
-      toastId: 'notifyToast'
+      className: 'submit-feedback'
     });
   };
 
-  const onSubmit = async (data) => {
+  const onSubmit = async (data: Data) => {
     // Send form email
     try {
-      const templateParams = {
+      setDisabled(true);
+      const templateParams: Data = {
         name: data.name,
         email: data.email,
         subject: data.subject,
         message: data.message
       };
 
+      console.log(templateParams);
+
       await emailjs.send(
-        process.env.GATSBY_SERVICE_ID,
-        process.env.GATSBY_TEMPLATE_ID,
+        process.env.GATSBY_SERVICE_ID || '',
+        process.env.GATSBY_TEMPLATE_ID || '',
         templateParams,
         process.env.GATSBY_USER_ID
       );
 
       reset();
       toastifySuccess();
+      setDisabled(false);
     } catch (e) {
       console.log(e);
     }
@@ -50,14 +66,18 @@ const ContactForm = () => {
         <div className='row'>
           <div className='col-12 text-center'>
             <div className='contactForm'>
-              <form id='contact-form' onSubmit={handleSubmit(onSubmit)} noValidate>
+              <form
+                id='contact-form'
+                onSubmit={handleSubmit(onSubmit)}
+                method='POST'
+                noValidate={true}
+              >
                 {/* Row 1 of form */}
                 <div className='row formRow'>
                   <div className='col-6'>
                     <input
                       type='text'
-                      name='name'
-                      ref={register({
+                      {...register('name', {
                         required: { value: true, message: 'Please enter your name' },
                         maxLength: {
                           value: 30,
@@ -72,8 +92,7 @@ const ContactForm = () => {
                   <div className='col-6'>
                     <input
                       type='email'
-                      name='email'
-                      ref={register({
+                      {...register('email', {
                         required: true,
                         pattern: /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
                       })}
@@ -90,8 +109,7 @@ const ContactForm = () => {
                   <div className='col'>
                     <input
                       type='text'
-                      name='subject'
-                      ref={register({
+                      {...register('subject', {
                         required: { value: true, message: 'Please enter a subject' },
                         maxLength: {
                           value: 75,
@@ -111,8 +129,7 @@ const ContactForm = () => {
                   <div className='col'>
                     <textarea
                       rows={3}
-                      name='message'
-                      ref={register({
+                      {...register('message', {
                         required: true
                       })}
                       className='form-control formInput'
@@ -121,7 +138,7 @@ const ContactForm = () => {
                     {errors.message && <span className='errorMessage'>Please enter a message</span>}
                   </div>
                 </div>
-                <button className='red-btn' type='submit'>
+                <button className='primary-btn' disabled={disabled} type='submit'>
                   Submit
                 </button>
               </form>

diff --git a/src/components/contactinfo.js → src/components/contactInfo.tsx b/src/components/contactinfo.js → src/components/contactInfo.tsx
@@ -4,7 +4,7 @@ import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 import { faPhone } from '@fortawesome/free-solid-svg-icons';
 import { faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons';
 
-const ContactInfo = () => {
+const ContactInfo: React.FC = () => {
   return (
     <div className='ContactForm'>
       <div className='container'>

diff --git a/src/components/footer.js → src/components/footer.tsx b/src/components/footer.js → src/components/footer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Footer = () => {
+const Footer: React.FC = () => {
   return (
     <div className='Footer'>
       <div className='col-12 text-center copyright'>

diff --git a/src/components/info.js → src/components/info.tsx b/src/components/info.js → src/components/info.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Headshot from '../images/profile-headshot.jpg';
 
-const Info = () => {
+const Info: React.FC = () => {
   return (
     <div className='Info'>
       <div className='container'>
@@ -14,7 +14,7 @@ const Info = () => {
           </div>
         </div>
         {/* Row 2 */}
-        <div className='row text-md-left text-center'>
+        <div className='row text-md-start text-center'>
           <div className='col-md-6 mb-3'>
             <img src={Headshot} className='img-fluid profile-picture' alt='Profile' />
           </div>
@@ -27,7 +27,7 @@ const Info = () => {
               working in a collaborative environment to create meaningful web applications and solve
               programming challenges that benefit the end user.
             </p>
-            <a href={`KeatonSentakResume.pdf`} target='_blank' rel='noopener noreferrer'>
+            <a href={`Keaton-Sentak-Resume.pdf`} target='_blank' rel='noopener noreferrer'>
               <button className='resume-btn mt-2 mb-3'>Download Resume</button>
             </a>
           </div>

diff --git a/src/components/layout.js → src/components/layout.tsx b/src/components/layout.js → src/components/layout.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
+import React, { ReactNode } from 'react';
 import Navbar from './navbar';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import './main.css';
+import '../styles/main.css';
+
+interface LayoutProps {
+  children: ReactNode;
+}
 
-const Layout = ({ children }) => {
+const Layout = ({ children }: LayoutProps) => {
   return (
     <>
       <Navbar />
@@ -14,8 +16,4 @@ const Layout = ({ children }) => {
   );
 };
 
-Layout.propTypes = {
-  children: PropTypes.node.isRequired
-};
-
 export default Layout;
diff --git a/src/components/navbar.js → src/components/navbar.tsx b/src/components/navbar.js → src/components/navbar.tsx
@@ -1,21 +1,21 @@
 import React, { useState } from 'react';
 import { Link } from 'gatsby';
 
-const Navbar = () => {
-  const [menu, setAsOpen] = useState(false);
+const Navbar: React.FC = () => {
+  const [menu, setAsOpen] = useState<boolean>(false);
 
-  const toggleNav = () => {
+  const toggleNav = (): void => {
     setAsOpen(!menu);
   };
 
-  const show = menu ? 'show' : '';
+  const show: string = menu ? 'show' : '';
 
   return (
     <div className='Navbar'>
       <nav className='navbar navbar-expand-sm'>
         <div className='container'>
           <button
-            className='navbar-toggler ml-auto'
+            className='navbar-toggler ms-auto'
             type='button'
             aria-controls='navbarMobile'
             aria-expanded='false'
@@ -25,7 +25,7 @@ const Navbar = () => {
             <span className='navbar-toggler-icon' />
           </button>
           <div className={'collapse navbar-collapse ' + show} id='navbarMobile'>
-            <ul id='menu-primary' className='navbar-nav ml-auto'>
+            <ul id='menu-primary' className='navbar-nav ms-auto'>
               {/* Home */}
               <li onClick={toggleNav}>
                 <Link to='/' activeClassName='active' className='nav-Link'>