diff --git a/.vscode/settings.json b/.vscode/settings.json index 7d8e6ab..d174f9a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,8 @@ { - "dotenv.enableAutocloaking": false + "dotenv.enableAutocloaking": false, + "workbench.colorCustomizations": { + "activityBar.background": "#182F46", + "titleBar.activeBackground": "#224262", + "titleBar.activeForeground": "#F8FAFC" + } } \ No newline at end of file diff --git a/src/.DS_Store b/src/.DS_Store index e7bfa8e..6a95042 100644 Binary files a/src/.DS_Store and b/src/.DS_Store differ diff --git a/src/assets/svg/.DS_Store b/src/assets/svg/.DS_Store index 761e449..0ab993b 100644 Binary files a/src/assets/svg/.DS_Store and b/src/assets/svg/.DS_Store differ diff --git a/src/components/About/About.js b/src/components/About/About.js index 51c96dd..e03728a 100644 --- a/src/components/About/About.js +++ b/src/components/About/About.js @@ -14,13 +14,10 @@ function About() {

{aboutData.description1}

{aboutData.description2}

{aboutData.description3}

{aboutData.description4}

- +
- + ) diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index 290ee2b..4484268 100644 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -1,7 +1,11 @@ -import React from 'react' +import React from 'react' import './Footer.css' import { useTheme } from '@mui/material/styles'; -import { Grid } from '@mui/material'; +import { experimentalStyled as styled } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Grid from '@mui/material/Grid'; +// import { Item } from '@mui/material/Grid'; import { FaTwitter, FaLinkedinIn, @@ -14,18 +18,25 @@ import { FiPhone, FiAtSign } from 'react-icons/fi'; import { HiOutlineLocationMarker } from 'react-icons/hi'; import { socialsData } from '../../data/socialsData'; import { contactsData } from '../../data/contactsData'; +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + ...theme.typography.body2, + padding: theme.spacing(2), + textAlign: 'center', + color: theme.palette.text.secondary, +})); const Footer = () => { -const theme = useTheme(); + const theme = useTheme(); return ( -
+
-
-
-
    -
  • - + + + + @@ -36,9 +47,11 @@ const theme = useTheme(); {contactsData.email}

    -
    • -
  • - + + + + @@ -49,9 +62,11 @@ const theme = useTheme(); {contactsData.phone}

    -
    • -
  • - + + + + @@ -63,6 +78,30 @@ const theme = useTheme();

    + + + + xs=2 + + + xs=2 + + + xs=2 + + + +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    • +
    @@ -75,7 +114,7 @@ const theme = useTheme(); target='_blank' rel="noopener noreferrer" className='socialIcon' - + > @@ -134,7 +173,7 @@ const theme = useTheme(); - +
    ) } diff --git a/src/components/PreContact/PreContact.css b/src/components/PreContact/PreContact.css index 7912dff..a08adf6 100644 --- a/src/components/PreContact/PreContact.css +++ b/src/components/PreContact/PreContact.css @@ -38,18 +38,6 @@ ul text-align: justify; } -ul:after -{ - content: ''; - display: inline-block; - width: 100%; -} - -ul:before -{ - content: ''; - display: block; -} li { @@ -132,8 +120,9 @@ a:-webkit-any-link a:-webkit-any-link:hover { text-shadow:#fff 2px solid; - color: #a92ca2; - + color: #fca311; + + } .makeStyles-socialIcon-31 @@ -152,7 +141,7 @@ a:-webkit-any-link:hover .contacts-details { - display: flex; + display: flex; align-items: flex-start; justify-content: space-evenly; flex: none; @@ -163,9 +152,9 @@ a:-webkit-any-link:hover .personal-details p { - margin-left: 1.5rem; + margin: 0 1.5rem; font-size: 18px; - line-height: 110%; + line-height: 100%; font-weight: 500; font-family: var(--primaryFont); white-space: nowrap; @@ -181,20 +170,18 @@ a:-webkit-any-link:hover align-items: center; justify-content: flex-start; width: 100%; - margin-bottom: 2.5rem; + color: #eaeaea; text-decoration: wavy; font-weight: 400; background-color: #d3540000; border-radius: 10px; - padding: 5px; + /* padding: 5px; */ transition: all .5s; } .personal-details:hover { - text-decoration: wavy; - background-color: #232526; color: #eaeaea; font-weight: 800; } @@ -208,7 +195,7 @@ detailsIcon { background-color: '#667'; color: '#232526'; - border-radius: '50%'; + border-radius: '50%'; margin-bottom: 0.3rem; width: '45px'; height: '45px'; @@ -256,12 +243,12 @@ ul, display: none; } - + .personal-details p { - margin-left: 1rem; + flex-direction: row; } @@ -269,7 +256,7 @@ ul, @media screen and (max-width: 800px) { - + .personal-details { display: flex; @@ -329,7 +316,7 @@ ul, .personal-details p { - margin-left: 1.2rem; + width: 95%; } } @@ -344,7 +331,7 @@ ul, align-items: center; justify-content: flex-start; width: 100%; - margin-bottom: 2.5rem; + color: #232526; text-decoration: wavy; font-weight: 400; @@ -360,18 +347,17 @@ ul, } } -/* +/* .localIcon { font-size: 2rem; } */ - + .contactHeader2{ padding: 3rem 0 1rem 0; } - + .css-pjjdvz { - margin-left: 8px; margin-right: 8px; display: -webkit-box; display: -webkit-flex; diff --git a/src/components/Skills/Skills.css b/src/components/Skills/Skills.css index 8e42776..76dc6d1 100644 --- a/src/components/Skills/Skills.css +++ b/src/components/Skills/Skills.css @@ -3,7 +3,7 @@ flex-direction: column; align-items: center; justify-content: flex-start; - min-height: 60vh; + /* min-height: 60vh; */ padding: 2.5rem 2rem 2rem 2rem; /* background: linear-gradient(180deg, #232526 0%, #556a2f 100%); */ /* color: #eaeaea; */ @@ -13,7 +13,7 @@ display: flex; align-items: center; justify-content: center; - + } .skillsHeader h2 { @@ -31,23 +31,17 @@ width: 100%; margin-top: 3.5rem; padding: 0 2rem; - -} -.skill--scroll { - width: 100%; - border:#232526 3px solid; - margin: 0 2rem; - border-radius: 20px; } + .skill--box { /* background: #FAFAFA; */ box-shadow: 0px 10px 20px rgba(77, 95, 45, 0.92); border-radius: 10px 0 10px 0; - width: 160px; - height: 160px; + width: 40px; + /* height: 80px; */ margin: 1.5rem; display: flex; flex-direction: column; @@ -61,10 +55,10 @@ transform: scale(1.15); } -.skill--box>img { +/* .skill--box>img { height: 50px; pointer-events: none; -} +} */ .skill--box h3 { font-family: Big Shoulders Text; @@ -79,22 +73,18 @@ padding: 1rem 0; } - -.overlay::after, .overlay::before{ - border-radius: 10%; -} /* ------------------------------------ MEDIA QUERIES ------------------------------------ */ @media (min-width: 992px) and (max-width: 1380px) { - .skills { + /* .skills { padding: 2rem 1rem 1rem 1rem; } .skillsContainer { padding: 1.5rem; margin-top: 1.5rem; - } + } */ } @media screen and (max-width: 992px) { @@ -113,8 +103,8 @@ } .skill--box { - width: 150px; - height: 150px; + /* width: 150px; + height: 150px; */ margin: 1.2rem; padding: 2rem 1rem; } @@ -152,14 +142,14 @@ @media screen and (max-width: 600px) { .skill--box { - width: 135px; - height: 135px; + width: 50px; + height: 50px; margin: 1.2rem; padding: 2rem 1rem; } .skill--box>img { - height: 40px; + height: 10px; } .skillsHeader h2 { @@ -172,4 +162,3 @@ } } - \ No newline at end of file diff --git a/src/components/Skills/Skills.js b/src/components/Skills/Skills.js index de3c1af..9c121ec 100644 --- a/src/components/Skills/Skills.js +++ b/src/components/Skills/Skills.js @@ -1,12 +1,25 @@ import React from 'react'; import Marquee from "react-fast-marquee"; import { useTheme } from '@mui/material/styles'; - +import { styled } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; import './Skills.css' +import ImageList from '@mui/material/ImageList'; +import ImageListItem from '@mui/material/ImageListItem'; +import Paper from '@mui/material/Paper'; // import { theme } from '../../theme/theme'; import { skillsData } from '../../data/skillsData' import { skillsImage } from '../../utils/skillsImage' +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: theme.palette.text.secondary, +})); + + function Skills() { const theme = useTheme(); @@ -15,34 +28,29 @@ function Skills() { backgroundColor: theme.palette.primary.main, boxShadow: `0px 0px 30px ${theme.palette.primary.contrastText}` } - + return ( - -
    + +
    -

    Skills

    +

    Skills

    -
    -
    - - {skillsData.map((skill, id) => ( -
    - {skill} -

    - {skill} -

    -
    - ))} -     -
    +
    + + {skillsData.map((skill, id) => ( + + + {skillsImage(skill)} + + + ))} +
    ) diff --git a/src/data/contactsData.js b/src/data/contactsData.js index 5846f41..e093f52 100644 --- a/src/data/contactsData.js +++ b/src/data/contactsData.js @@ -1,5 +1,5 @@ export const contactsData = { - email: 'jonpchristie@gmail.com', + email: 'jon@jonchristie.net', phone: '(919) 368-3369', address: 'Raleigh, NC', sheetAPI: '' diff --git a/src/data/skillsData.js b/src/data/skillsData.js index 289599e..962433f 100644 --- a/src/data/skillsData.js +++ b/src/data/skillsData.js @@ -4,10 +4,9 @@ export const skillsData = [ 'Javascript', 'TypeScript', 'CSS', + 'mysql', 'MongoDB', 'Python', - 'Angular', - 'React', 'Django', 'Bootstrap', 'MaterialUI', @@ -15,5 +14,6 @@ export const skillsData = [ 'AWS', 'Blender', 'Unity', - 'Adobe', + 'Illustrator', + 'Photoshop', ] \ No newline at end of file diff --git a/src/pages/Main/Main.js b/src/pages/Main/Main.js index 083c8fa..6b3da45 100644 --- a/src/pages/Main/Main.js +++ b/src/pages/Main/Main.js @@ -1,6 +1,6 @@ import React from 'react' import { Helmet } from 'react-helmet' -import { Navbar, Landing,PackageCards, About, Skills, Testimonials, Projects, HorizontalRule, Footer} from '../../components' +import { Navbar, Landing,PackageCards, About, Skills, Projects, HorizontalRule, Footer} from '../../components' import { headerData } from '../../data/headerData' @@ -12,16 +12,15 @@ function Main() { {headerData.name} - Portfolio - - + + {/* */} {/* */} -
    +
    ) } diff --git a/src/utils/skillsImage.js b/src/utils/skillsImage.js index 212fd7f..e31c3e0 100644 --- a/src/utils/skillsImage.js +++ b/src/utils/skillsImage.js @@ -1,4 +1,4 @@ -import gcp from '../assets/svg/skills/gcp.svg' +import gcp from '../assets/svg/skills/html.svg' import html from '../assets/svg/skills/html.svg' import photoshop from '../assets/svg/skills/photoshop.svg' import illustrator from '../assets/svg/skills/illustrator.svg' @@ -58,7 +58,6 @@ import strapi from '../assets/svg/skills/strapi.svg' import tensorflow from '../assets/svg/skills/tensorflow.svg' import webix from '../assets/svg/skills/webix.svg' import wordpress from '../assets/svg/skills/wordpress.svg' - import azure from '../assets/svg/skills/azure.svg' import blender from '../assets/svg/skills/blender.svg' import fastify from '../assets/svg/skills/fastify.svg' @@ -79,152 +78,80 @@ import canva from '../assets/svg/skills/canva.svg' export const skillsImage = (skill) => { const skillID = skill.toLowerCase(); switch (skillID) { - case 'gcp': - return gcp; case 'html': return html; - case 'photoshop': - return photoshop; - case 'docker': - return docker; - case 'illustrator': - return illustrator; case 'adobe xd': return adobeXd; - case 'after effects': - return afterEffects; + case 'adobe audition': + case 'python': + return python; case 'css': return css; - case 'angular': - return angular; + case 'illustrator': + return illustrator; + case 'photoshop': + return photoshop; + + case 'javascript': return javascript; + case 'typescript': + return typescript; case 'next js': return nextJS; - case 'nuxt js': - return nuxtJS; + case 'react': return react; - case 'svelte': - return svelte; - case 'typescript': - return typescript; - case 'vue': - return vue; + case 'bootstrap': return bootstrap; case 'bulma': return bulma; - case 'capacitorjs': - return capacitorjs; - case 'coffeescript': - return coffeescript; - case 'memsql': - return memsql; + case 'mongodb': return mongoDB; case 'mysql': return mysql; - case 'postgresql': - return postgresql; + case 'tailwind': return tailwind; - case 'vitejs': - return vitejs; - case 'vuetifyjs': - return vuetifyjs; - case 'c': - return c; - case 'c++': - return cplusplus; - case 'c#': - return csharp; - case 'dart': - return dart; - case 'go': - return go; - case 'java': - return java; - case 'kotlin': - return kotlin; - case 'julia': - return julia; - case 'matlab': - return matlab; - case 'php': - return php; - case 'python': - return python; - case 'ruby': - return ruby; - case 'swift': - return swift; - case 'adobe audition': - return adobeaudition; + case 'aws': return aws; - case 'deno': - return deno; + case 'django': return django; case 'firebase': return firebase; - case 'gimp': - return gimp; + case 'git': return git; - case 'graphql': - return graphql; - case 'lightroom': - return lightroom; + case 'materialui': return materialui; - case 'nginx': - return nginx; - case 'numpy': - return numpy; - case 'opencv': - return opencv; - case 'premiere pro': - return premierepro; - case 'pytorch': - return pytorch; + + case 'selenium': return selenium; - case 'strapi': - return strapi; - case 'tensorflow': - return tensorflow; - case 'webix': - return webix; + case 'wordpress': return wordpress; - case 'azure': - return azure; + case 'blender': return blender; - case 'fastify': - return fastify; + case 'unity': + return unity; case 'figma': return figma; - case 'flutter': - return flutter; - case 'haxe': - return haxe; + case 'ionic': return ionic; case 'markdown': return markdown; - case 'microsoft office': - return microsoftoffice; - case 'picsart': - return picsart; + case 'sketch': return sketch; - case 'unity': - return unity; - case 'wolframalpha': - return wolframalpha; + case 'canva': return canva; default: