more projects

Author: mathcodes

.DS_Store

@@ -9,7 +9,8 @@ import { FaUser } from 'react-icons/fa';
 import { makeStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
 import CloseIcon from '@material-ui/icons/Close';
-
+import BG from "../../assets/img/JCircle.png";
+import BG2 from "../../assets/svg/BG2.svg";
 import './Navbar.css';
 import { headerData } from '../../data/headerData';
 import { ThemeContext } from '../../contexts/ThemeContext';
@@ -61,6 +62,13 @@ function Navbar() {
                 width: '12em',
             },
         },
+        bgStyle: {
+            height:'10em',
+            padding: '1%',
+  
+           
+        },
+         
         closebtnIcon: {
             fontSize: '2rem',
             fontWeight: 'bold',
@@ -133,9 +141,7 @@ function Navbar() {
     return (
         <div className='navbar'>
             <div className='navbar--container'>
-                <h1 style={{ color: theme.secondary }}>
-                    {shortname(headerData.name)}
-                </h1>
+                <img src={BG} className={classes.bgStyle}/>
 
                 <IoMenuSharp
                     className={classes.navMenu}

src/assets/svg/BG.svg

@@ -8,6 +8,6 @@ export const headerData = {
     href1:"<a href=",
     url:"https://www.instructure.com/",
     href2:"\" alt='jon christie headshot portfolio fullstack11235'\"><a>",
-    image: '../../assets/img/hs.svg',
+    image: 'https://raw.githubusercontent.com/mathcodes/jc22/main/src/assets/img/hs.png',
     resumePdf: resume
 }

src/assets/svg/BG2.svg

@@ -3,6 +3,7 @@ import tech from '../assets/svg/projects/pythonlog.svg'
 import three from '../assets/svg/projects/mars.svg'
 import scb from '../assets/svg/projects/scb.svg'
 import p2h from '../assets/svg/projects/p2h.svg'
+import keys from '../assets/svg/projects/keys.png'
 
 
 export const projectsData = [
@@ -51,4 +52,32 @@ export const projectsData = [
         demo: 'https://mathcodes.github.io/pick2hand/',
         image: p2h
     },
+    {
+        id: 6,
+        projectName: 'Pro Typer',
+        projectDesc: 'A quick project to review event handlers and do something useful and practical. Use this app to improve your keyboarding skills. FUTURE DEVELOPMENT: Scoring, typing words, difficulty levels, and wpm calculation. Coming soon!',
+        tags: ['HTML', 'CSS', 'JS', 'express'],
+        code: 'https://github.com/mathcodes/monitor',
+        demo: 'https://mathcodes.github.io/pick2hand/',
+        image: keys
+    },
+    // {
+    //     id: 7,
+    //     projectName: 'Pro Typer',
+    //     projectDesc: 'A quick project to review event handlers and do something useful and practical. Use this app to improve your keyboarding skills. FUTURE DEVELOPMENT: Scoring, typing words, difficulty levels, and wpm calculation. Coming soon!',
+    //     tags: ['HTML', 'CSS', 'JS', 'express'],
+    //     code: 'https://github.com/mathcodes/monitor',
+    //     demo: 'https://mathcodes.github.io/pick2hand/',
+    //     image: keys
+    // },
+    // {
+    //     id: 8,
+    //     projectName: 'Pro Typer',
+    //     projectDesc: 'A quick project to review event handlers and do something useful and practical. Use this app to improve your keyboarding skills. FUTURE DEVELOPMENT: Scoring, typing words, difficulty levels, and wpm calculation. Coming soon!',
+    //     tags: ['HTML', 'CSS', 'JS', 'express'],
+    //     code: 'https://github.com/mathcodes/monitor',
+    //     demo: 'https://mathcodes.github.io/pick2hand/',
+    //     image: keys
+    // },
+
 ]

src/assets/svg/projects/keys.png

@@ -8,7 +8,7 @@ function Main() {
     return (
         <div>
             <Helmet>
-                <title>{headerData.name} - Porfolio</title>
+                <title>{headerData.name} - Portfolio</title>
             </Helmet>
 
             <Navbar />