sync links

Author: mathcodes

src/components/Footer/Footer.js

@@ -112,16 +112,6 @@ const Footer = () => {
               <FaYoutube aria-label='YouTube' className="localIcon" />
             </a>
           )}
-          {socialsData.stackOverflow && (
-            <a
-              href={socialsData.stackOverflow}
-              target='_blank'
-              rel='noreferrer'
-              className='socialIcon'
-            >
-              <FaStackOverflow aria-label='Stack Overflow' className="localIcon" />
-            </a>
-          )}
           {socialsData.codepen && (
             <a
               href={socialsData.codepen}

src/components/Landing/Landing.css

@@ -40,10 +40,12 @@
   justify-content: flex-start;
 }
 
-
+.landing--social2 {
+  display: none;
+}
 
 .lcl--content {
-  margin: 3rem;
+  /* margin: 3rem; */
   width: 100%;
   display: flex;
   align-items: center;
@@ -61,6 +63,16 @@
   transform: scale(1.2);
 }
 
+.landing--social2 {
+  font-size: 35px;
+  margin: 0 1rem;
+  transition: transform 0.5s;
+}
+
+.landing--social2:hover {
+  transform: scale(1.2);
+}
+
 .landing--container-right {
   flex: 65%;
   height: 100%;
@@ -182,6 +194,10 @@
   .landing--social {
     display: none;
   }
+
+  .landing--social2 {
+    display: inline-flex;
+  }
   .landing--container-right {
     box-sizing: border-box;
     padding: 0 2rem;

src/components/Landing/Landing.js

@@ -77,19 +77,6 @@ function Landing() {
 								/>
 							</a>
 						)}
-						{socialsData.codepen && (
-							<a
-								href={socialsData.stackOverflow}
-								target='_blank'
-								rel='noreferrer'
-							>
-								<FaStackOverflow
-									className='landing--social'
-									style={{ color: theme.secondary70 }}
-									aria-label='stackOverflow'
-								/>
-							</a>
-						)}
 						{socialsData.codepen && (
 							<a
 								href={socialsData.replit}
@@ -135,9 +122,91 @@ function Landing() {
 						className='lcr--content'
 						style={{ color: theme.tertiary }}
 					>
-						<h6>{headerData.title}</h6>
+
 						<br />
+
 						<h1>{headerData.name}</h1>
+						<div className='lcl--content2'>
+							{socialsData.github && (
+								<a
+									href={socialsData.github}
+									target='_blank'
+									rel='noreferrer'
+								>
+									<FaGithub
+										className='landing--social2'
+										style={{ color: theme.secondary70 }}
+										aria-label='GitHub'
+									/>
+								</a>
+							)}
+							{socialsData.twitter && (
+								<a
+									href={socialsData.twitter}
+									target='_blank'
+									rel='noreferrer'
+								>
+									<FaTwitter
+										className='landing--social2'
+										style={{ color: theme.secondary70 }}
+										aria-label='Twitter'
+									/>
+								</a>
+							)}
+							{socialsData.linkedIn && (
+								<a
+									href={socialsData.linkedIn}
+									target='_blank'
+									rel='noreferrer'
+								>
+									<FaLinkedin
+										className='landing--social2'
+										style={{ color: theme.secondary70 }}
+										aria-label='LinkedIn'
+									/>
+								</a>
+							)}
+							{socialsData.youtube && (
+								<a
+									href={socialsData.youtube}
+									target='_blank'
+									rel='noreferrer'
+								>
+									<FaYoutube
+										className='landing--social2'
+										style={{ color: theme.secondary70 }}
+										aria-label='YouTube'
+									/>
+								</a>
+							)}
+							{socialsData.codepen && (
+								<a
+									href={socialsData.replit}
+									target='_blank'
+									rel='noreferrer'
+								>
+									<FaCodepen
+										className='landing--social2'
+										style={{ color: theme.secondary70 }}
+										aria-label='CodePen'
+									/>
+								</a>
+							)}
+							{socialsData.replit && (
+								<a
+									href={socialsData.replit}
+									target='_blank'
+									rel='noreferrer'
+								>
+									<SiReplit
+										className='landing--social2'
+										style={{ color: theme.secondary70 }}
+										aria-label='Replit'
+									/>
+								</a>
+							)}
+						</div>
+
 						<br />
 						<p>{headerData.description}</p>
 
@@ -180,6 +249,7 @@ function Landing() {
 				</div>
 			</div>
 		</div>
+
 	);
 }
 

src/components/Skills/Skills.js

@@ -17,7 +17,9 @@ function Skills() {
 	}
 
 	return (
+		
 		<div className="skills">
+				<div style={{ backgroundColor: theme.secondary, height: '1rem' }}> </div>
 
 			<div className="skillsHeader">
 					<div style={{ backgroundColor: theme.secondary50, height: '1rem' }}> </div>

src/pages/Project/ProjectPage.js

@@ -19,7 +19,7 @@ function ProjectPage() {
 	})
 	const useStyles = makeStyles((t) => ({
 		search: {
-			color: theme.tertiary,
+			color: theme.secondary70,
 			width: '40%',
 			height: '2.75rem',
 			outline: 'none',
@@ -39,7 +39,7 @@ function ProjectPage() {
 			},
 		},
 		home: {
-			color: theme.secondary,
+			color: theme.secondary70,
 			position: 'absolute',
 			top: 25,
 			left: 25,
@@ -71,7 +71,7 @@ function ProjectPage() {
 				<Link to="/">
 					<AiOutlineHome className={classes.home} />
 				</Link>
-				<h1 style={{ color: theme.secondary }}>Projects</h1>
+				<h1 style={{ color: theme.secondary70 }}>Projects</h1>
 			</div>
 			<div className="projectPage-container">
 				<div className="projectPage-search">