content uploaded

src/components/About/About.js

@@ -3,7 +3,6 @@ import React, { useContext } from 'react';
 import './About.css';
 import { ThemeContext } from '../../contexts/ThemeContext';
 import { aboutData } from '../../data/aboutData'
-import Background from '../Background/Background';
 
 
 function About() {
@@ -28,7 +27,7 @@ function About() {
                     />
                 </div>
             </div>
-            <Background />
+
         </div>
 
     )

src/components/Contacts/Contacts.js

@@ -100,7 +100,7 @@ function Contacts() {
 	const classes = useStyles();
 
 	return (
-		<div className="contacts">
+		<div id="contacts" className="contacts">
 
 			<div className="contactsHeader">
 				<div style={{ backgroundColor: theme.secondary50, height: '1rem' }}> </div>

src/components/Landing/Landing.js

@@ -197,28 +197,39 @@ function Landing() {
 						<p>{headerData.description}</p>
 
 						<div className='lcr-buttonContainer'>
-							{headerData.resumePdf && (
+						 
 								<a
 									href={headerData.resumePdf}
 									download='resume'
 									target='_blank'
 									rel='noreferrer'
 								>
-									<Button className={classes.resumeBtn}>
-										Download CV
-									</Button>
+								<Button
+								style={{
+									backgroundColor: theme.primary,
+									color: theme.secondary70,
+									width: '8rem',
+									display: 'flex',
+									alignItems: 'center',
+									justifyContent: 'center',
+								}} variant="contained">
+									<a style={{ backgroundColor: 'none' }} href={headerData.resumePdf}>
+								<h2>RESUME</h2></a>
+							</Button>
 								</a>
-							)}
-							<NavLink
-								to='/#contacts'
-								smooth={true}
-								spy='true'
-								duration={2000}
-							>
-								<Button className={classes.contactBtn}>
-									Contact
-								</Button>
-							</NavLink>
+
+								<Button
+								style={{
+									backgroundColor: theme.primary,
+									color: theme.secondary70,
+									width: '8rem',
+									display: 'flex',
+									alignItems: 'center',
+									justifyContent: 'center',
+								}} variant="contained">
+									<a style={{ backgroundColor: 'none' }} href="./formpage">
+								<h2>CONTACT</h2></a>
+							</Button>
 						</div>
 					</div>
 				</div>

src/components/PreContact/PreContact.css

@@ -180,7 +180,7 @@ a:-webkit-any-link:hover
 {
   text-decoration: wavy;
   background-color: #232526;
-  color: #212121;
+  color: #eaeaea;
   font-weight: 800;
 }
 
@@ -229,7 +229,7 @@ detailsIcon
 detailsIcon:hover
 {
   transform: 'scale(1.1)';
-  color: '#667';
+  color: '#eaeaea';
   background-color: '#232526';
 }
 

src/components/PreContact/PreContact.js

@@ -1,34 +1,13 @@
 import * as React from 'react';
-import Button from '@mui/material/Button';
-// import CssBaseline from '@mui/material/CssBaseline';
-import TextField from '@mui/material/TextField';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
-import Link from '@mui/material/Link';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
 import { Grid } from '@mui/material';
-import Typography from '@mui/material/Typography';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import Container from '@mui/material/Container';
 import PsychologyIcon from '@mui/icons-material/Psychology';
 import HandshakeIcon from '@mui/icons-material/Handshake';
 import WorkIcon from '@mui/icons-material/Work';
 import UpgradeIcon from '@mui/icons-material/Upgrade';
-import {
-  FaTwitter,
-  FaLinkedinIn,
-  FaGithub,
-  FaYoutube,
-  FaStackOverflow,
-  FaCodepen,
-} from 'react-icons/fa';
-import { SiReplit } from 'react-icons/si';
-import { FiPhone, FiAtSign } from 'react-icons/fi';
-import { HiOutlineLocationMarker } from 'react-icons/hi';
 import { styled } from '@mui/material/styles';
-import { socialsData } from '../../data/socialsData';
-import { contactsData } from '../../data/contactsData';
 import './PreContact.css';
 
 const theme = createTheme({
@@ -65,63 +44,60 @@ const Item = styled(Paper)(({ theme }) => ({
   padding: theme.spacing(1),
   textAlign: 'center',
   color: theme.palette.text.secondary,
-
 }
 )); console.log(theme.palette.mode)
 
- 
+
 
 function PreContact() {
-
 
   return (
-
-      <ThemeProvider theme={theme}>
-        <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
-          <Box
-            sx={{
-
-              mx: 1,
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-            }}
-          >
-            <Grid spacing={2}>
-              <Grid item xs={12}>
-                <Item sx={{color:'#eaeaea', bgcolor: '#232526' }}><UpgradeIcon sx={{ p: '0.2rem', width: '3rem', height: '3rem', borderRadius: "50%", color:'#eaeaea', bgcolor: '#232526' }} />
-                  Looking to updgrade your website? </Item>
-              </Grid>
+    <ThemeProvider theme={theme}>
+      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+        <Box
+          sx={{
+
+            mx: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Grid spacing={2}>
+            <Grid item xs={12}>
+              <Item sx={{ color: '#eaeaea', bgcolor: '#232526' }}><UpgradeIcon sx={{ p: '0.2rem', width: '3rem', height: '3rem', borderRadius: "50%", color: '#eaeaea', bgcolor: '#232526' }} />
+                Looking to updgrade your website? </Item>
             </Grid>
+          </Grid>
 
-            <Grid spacing={2}>
-              <Grid item xs={12}>
-                <Item sx={{color:'#eaeaea', bgcolor: '#232526' }}><PsychologyIcon sx={{ p: '0.2rem', width: '3rem', height: '3rem', borderRadius: "50%", color:'#eaeaea', bgcolor: '#232526' }} />
-                  Got an idea for an app or website that you'd like to see come to life?</Item>
-              </Grid>
+          <Grid spacing={2}>
+            <Grid item xs={12}>
+              <Item sx={{ color: '#eaeaea', bgcolor: '#232526' }}><PsychologyIcon sx={{ p: '0.2rem', width: '3rem', height: '3rem', borderRadius: "50%", color: '#eaeaea', bgcolor: '#232526' }} />
+                Got an idea for an app or website that you'd like to see come to life?</Item>
             </Grid>
+          </Grid>
 
-            <Grid spacing={2}>
-              <Grid item xs={12}>
-              <Item sx={{color:'#eaeaea', bgcolor: '#232526' }}><HandshakeIcon sx={{ p: '0.2rem', width: '3rem', height: '3rem', borderRadius: "50%", color:'#eaeaea', bgcolor: '#232526' }} />
-                  Interested in collaborating or forming a team to create something amazing?</Item>
-              </Grid>
+          <Grid spacing={2}>
+            <Grid item xs={12}>
+              <Item sx={{ color: '#eaeaea', bgcolor: '#232526' }}><HandshakeIcon sx={{ p: '0.2rem', width: '3rem', height: '3rem', borderRadius: "50%", color: '#eaeaea', bgcolor: '#232526' }} />
+                Interested in collaborating or forming a team to create something amazing?</Item>
             </Grid>
+          </Grid>
+
+          <Grid spacing={2}>
+            <Grid item xs={12}>
+              <Item maxwidth sx={{ color: '#eaeaea', bgcolor: '#232526' }}><WorkIcon sx={{ p: '0.4rem', width: '3rem', height: '3rem', borderRadius: "50%", color: '#eaeaea', bgcolor: '#232526' }} />
+                Hiring web developers with my skillset?</Item>
+            </Grid>
+          </Grid>
+
+        </Box>
+      </Grid>
 
-            <Grid spacing={2}>
-              <Grid item xs={12}>
-              <Item maxwidth sx={{color:'#eaeaea', bgcolor: '#232526' }}><WorkIcon sx={{ p: '0.4rem', width: '3rem', height: '3rem', borderRadius: "50%", color:'#eaeaea', bgcolor: '#232526' }} />
-                  Hiring web developers with my skillset?</Item>
-              </Grid>
-            </Grid> 
-
-          </Box>
-        </Grid>
 
 
-
-      </ThemeProvider>
-   );
+    </ThemeProvider>
+  );
 }
 
 export default PreContact;

src/components/Testimonials/Testimonials.css

@@ -1,6 +1,6 @@
 .testimonials {
   font-family: var(--primaryFont);
-  height: 100vh;
+  height: fit-content;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -33,9 +33,15 @@
 .slick-dots {
   position: relative !important;
   bottom: 1rem !important;
-
+
+}
+#root > div > div:nth-child(1) > div.testimonials > div.testimonials--body > div > div > ul > li > button{
+  background: #eaeaea;
+  width: .5rem;
+  height: .5rem;
 }
 
+
 .testimonials--header h1 {
   background: none;
   font-style: normal;
@@ -101,7 +107,7 @@
 .single--testimony {
   padding: 2rem;
   width: 100%;
-  height: 500px;
+  /* height: 500px; */
   position: relative;
   display: flex;
   flex-direction: column;

src/components/Testimonials/Testimonials.js

@@ -6,7 +6,7 @@ import { testimonialsData } from '../../data/testimonialsData';
 import './Testimonials.css';
 import Button from '@mui/material/Button';
 
- 
+
 function Testimonials() {
 	const { theme } = useContext(ThemeContext);
 	const sliderRef = useRef();
@@ -37,7 +37,7 @@ function Testimonials() {
 
 	return (
 		<>
-		<div style={{ backgroundColor: theme.secondary50, height: '1rem' }}> </div>
+			<div style={{ backgroundColor: theme.secondary50, height: '1rem' }}> </div>
 			{testimonialsData.length > 0 && (
 				<div
 					className='testimonials'
@@ -109,17 +109,20 @@ function Testimonials() {
 						</div>
 					</div>
 					<div className="formBtn">
-					<h1 className="blink" style={{fontSize:'3rem'}}>👉</h1><a style={{ backgroundColor: 'none' }}href="./formpage"><Button 
-						style={{
-							backgroundColor: theme.primary,
-							color: theme.secondary70,
-							width: '18rem',
-							display: 'flex',
-							alignItems: 'center',
-              justifyContent: 'center',
-						}} variant="contained"><h2>CONTACT ME</h2></Button></a><h1 className="blink2"  style={{fontSize:'3rem'}}>👈</h1>
+						<Button
+							style={{
+								backgroundColor: theme.primary,
+								color: theme.secondary70,
+								width: '18rem',
+								display: 'flex',
+								alignItems: 'center',
+								justifyContent: 'center',
+							}} variant="contained">
+							<a style={{ backgroundColor: 'none' }} href="./formpage">
+								<h2>CONTACT ME</h2></a>
+						</Button>
 					</div>
-					
+
 				</div>
 			)}
 		</>

src/pages/FormPage/FormPage.js

@@ -1,10 +1,12 @@
-import React from "react";
+import React from 'react';
+// import { ThemeContext } from '../../contexts/ThemeContext';
 import { styled } from '@mui/material/styles';
 import Paper from '@mui/material/Paper';
 import { useForm, ValidationError } from "@formspree/react";
 import { Container, Grid } from '@mui/material';
 import ThanksBar from './ThanksBar';
 import {headerData} from '../../data/headerData'
+import Button from '@mui/material/Button';
 
 function ContactForm() {
   const [state, handleSubmit] = useForm("xaykzqea");
@@ -27,6 +29,8 @@ function ContactForm() {
   const formStatus = state.succeeded ?
   <h1>Thank you! I will get back to you shortly!</h1> : <img alt="jon christie web developer resume job portfolio" style={{height:'10rem', width:'10rem'}} src={headerData.BG} />
 
+
+
   return (
     <>
       <ThanksBar view={formStatus}/>
@@ -92,6 +96,25 @@ function ContactForm() {
                   </button>
                 </Item>
               </Grid>
+              <div className="formBtn">
+						<h1 className="blink" style={{ fontSize: '3rem' }}>👉</h1>
+
+							<Button
+								style={{
+									backgroundColor: '#232526',
+									color: '#eaeaea',
+									width: '18rem',
+									display: 'flex',
+									alignItems: 'center',
+									justifyContent: 'center',
+								}} variant="contained">
+									<a style={{ backgroundColor: 'none' }} href="./formpage">
+								<h2>CONTACT ME</h2></a>
+							</Button>
+
+						<h1 className="blink2" style={{ fontSize: '3rem' }}>👈</h1>
+					</div>
+
             </Grid>
           </Container>
         </div>