Best content yet

package.json

@@ -16,7 +16,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "deploy": "gh-pages -d build"
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -b main -d build"
   },
   "eslintConfig": {
     "extends": [

src/components/Carousel.css

@@ -0,0 +1,47 @@
+.carousel {
+  margin-top: 5%;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+  grid-template-areas:
+    'arrowL image image image image image arrowR'
+  ;
+}
+
+.main_content_container3 {
+
+}
+
+.arrowL {
+  grid-area: arrowL;
+  width: fit-content;
+}
+
+.arrowR {
+  grid-area: arrowR;
+  width: fit-content;
+
+}
+
+.arrImg1 {
+  width: 45px;
+}
+
+.arrImg2 {
+  width: 45px;
+}
+
+.image_container {
+  grid-area: image;
+}
+
+.proj_title {
+  text-align: center;
+  font-weight: bold;
+}
+
+@media screen and (min-width: 736px) {
+  .proj_title {
+    font-size: 28px;
+  }
+}

src/components/Carousel.jsx

@@ -5,6 +5,7 @@ import project1 from '../images/recipesApp.gif';
 import project2 from '../images/recipesApp2.gif';
 import project3 from '../images/recipesApp3.gif';
 import { motion } from 'framer-motion';
+import './Carousel.css';
 
 const arrOfProjects = [{project: project1, alt: 'Project1', link: 'https://github.com/RaphaelTaglialegna/Recipes-App/tree/main' },
  {project: project2, alt: 'Project2', link: 'https://github.com/RaphaelTaglialegna/Recipes-App/tree/main' },
@@ -28,15 +29,15 @@ const Carousel = () => {
   }, [current]);
 
   return (
-    <div className='flex justify-center'>
-      <motion.button whileHover={{scale: 1.1}} onClick={ previousProj } className="w-20 bg-opacity-50 bg-cream">
-        <img src={ leftArrow } alt="leftArrow" className="w-20"/>
+    <div className='carousel'>
+      <motion.button whileHover={{scale: 1.1}} onClick={ previousProj } className="arrowL bg-opacity-50 bg-cream">
+        <img src={ leftArrow } alt="leftArrow" className="arrImg1"/>
       </motion.button>
-      <a href={arrOfProjects[current].link} target="_blank" rel='noreferrer' className='images_container w-11/12 justify-evenly p-5 flex bg-opacity-50 bg-cream'>
-        <img src={arrOfProjects[current].project} alt={arrOfProjects[current].alt} className="rounded-md" />
+      <a href={arrOfProjects[current].link} target="_blank" rel='noreferrer' className='images_container justify-evenly p-5 flex bg-opacity-50 bg-cream'>
+        <img src={arrOfProjects[current].project} alt={arrOfProjects[current].alt} className="rounded-md " />
       </a>
-      <motion.button whileHover={{scale: 1.1}} onClick={ nextProj } className="w-20 bg-opacity-50 bg-cream">
-        <img src={ rightArrow } alt="rightArrow" className="w-20"/>
+      <motion.button whileHover={{scale: 1.1}} onClick={ nextProj } className="arrowR bg-opacity-50 bg-cream">
+        <img src={ rightArrow } alt="rightArrow" className="arrImg2 rounded-md"/>
       </motion.button>
     </div>
   )

src/components/HardSkills.css

@@ -1,14 +1,26 @@
 .hard_skills_container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1/2fr 1fr 1fr 1fr 1fr 1fr 1fr;
   grid-template-areas: 
-  'hard_skills_title hard_skills_title hard_skills_title hard_skills_title hard_skills_title hard_skills_title'
-  "icon_container0h icon_container1h icon_container2h icon_container3h icon_container4h icon_container5h"
-  "icon_container6h icon_container7h icon_container8h icon_container9h icon_container10h icon_container11h";
+  'hard_skills_title hard_skills_title'
+  "icon_container0h icon_container1h" "icon_container2h icon_container3h" "icon_container4h icon_container5h"
+  "icon_container6h icon_container7h" "icon_container8h icon_container9h" "icon_container10h icon_container11h";
   gap: 5%;
   justify-items: center;
   margin-top: 10%;
-  margin-left: 10%;
+  /* 
+  margin-left: 10px;
   margin-right: 10%;
-  margin-bottom: 0%;
+  margin-bottom: 0%; */
+}
+
+.main_content_container4 {
+  display: flex;
+  justify-content: center;
+  /* flex-wrap: wrap; */
+  flex-direction: column;
+  height: auto;
 }
 
 .hard_skills_title {
@@ -64,4 +76,49 @@
 
 .skill_name {
   text-align: center;
+}
+
+@media screen and (min-width: 706px) {
+  .hard_skills_container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1/2fr 1fr 1fr;
+    grid-template-areas: 
+    'hard_skills_title hard_skills_title hard_skills_title hard_skills_title'
+    "icon_container0h icon_container1h icon_container2h icon_container3h"
+    "icon_container4h icon_container5h icon_container6h icon_container7h"
+    "icon_container8h icon_container9h icon_container10h icon_container11h";
+    gap: 5%;
+    margin-top: 10%;
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-bottom: 0%;
+    justify-items: center;
+  }
+
+  .hard_skills_title {
+    width: 48%;
+  };
+}
+
+@media screen and (min-width: 1124px) {
+  .hard_skills_container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1/2fr 1fr 1fr;
+    grid-template-areas: 
+    'hard_skills_title hard_skills_title hard_skills_title hard_skills_title hard_skills_title hard_skills_title'
+    "icon_container0h icon_container1h icon_container2h icon_container3h icon_container4h icon_container5h"
+    "icon_container6h icon_container7h icon_container8h icon_container9h icon_container10h icon_container11h";
+    gap: 5%;
+    margin-top: 10%;
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-bottom: 0%;
+    justify-items: center;
+  }
+
+  .hard_skills_title {
+    width: 48%;
+  };
 }

src/components/HardSkills.jsx

@@ -16,11 +16,9 @@ const HardSkills = ({icons}) => {
 
   const skillVariantMain = {
     hidden: {
-      y: -50,
       opacity: 0,
     },
     visible: {
-      y: 0,
       opacity: 1,
       transition: {
         delay: 0.3,
@@ -30,7 +28,7 @@ const HardSkills = ({icons}) => {
   };
 
   return (
-    <motion.div variants={skillVariantMain} animate="visible" initial="hidden" className='hard_skills_container grid'>
+    <motion.div variants={skillVariantMain} animate="visible" initial="hidden" className='hard_skills_container'>
         <h2 className='bg-dark-blue text-cream hard_skills_title font-bold text-3xl text-center rounded-xl w-full'>Hard Skills</h2>
     {icons.map((icon, index) => {
       return (

src/components/NavBar.css

@@ -0,0 +1,119 @@
+.navBar {
+  display: flex;
+  justify-content:space-between;
+}
+
+.navLinks {
+  font-size: 20px;
+  text-align: center;
+  align-items: center;
+  display: none;
+  gap: 5px;
+  grid-template-areas: 
+    'nav-button1'
+    'nav-button2'
+    'nav-button3'
+    'nav-button4'
+    'nav-button5'
+    ;
+}
+
+.navLinks.show {
+  display: grid;
+}
+
+.menuIcon {
+  display: block;
+  margin-left: 10px;
+}
+
+.nav-button0 {
+  grid-area: nav-button0;
+  justify-self: center;
+  height: 60px;
+  margin-inline: 10px;
+}
+
+.nav-button0.show {
+  grid-area: nav-button0;
+  justify-self: center;
+  height: 160px;
+}
+
+.nav-button1 {
+  grid-area: nav-button1;
+  border-radius: 5%;
+  width: 120px;
+}
+
+.pageRoute {
+  font-weight: bold;
+  align-self: center;
+  font-size: 20px;
+}
+
+.pageRoute.hide {
+  display: none;
+}
+
+.nav-button2 {
+  grid-area: nav-button2;
+  width: 120px;
+}
+
+.nav-button3 {
+  grid-area: nav-button3;
+  width: 120px;
+}
+
+.nav-button4 {
+  grid-area: nav-button4;
+  width: 120px;
+}
+
+.nav-button5 {
+  grid-area: nav-button5;
+  width: 120px;
+}
+
+.menuIcon {
+  grid-area: menuIcon;
+}
+
+@media screen and (min-width: 870px) {
+  .navLinks {
+    font-size: 20px;
+    text-align: center;
+    align-self: center;
+    grid-area: navLinks;
+    display: grid;
+    gap: 10px;
+    grid-template-areas: 
+      'nav-button1 nav-button1 nav-button2 nav-button2 nav-button3 nav-button3 nav-button4 nav-button4 nav-button5 nav-button5 nav-button5'
+      ;
+  }
+
+  .navBar {
+    display: grid;
+    grid-template-areas: 
+      'nav-button0 navLinks navLinks navLinks';
+  }
+
+  .nav-button0 {
+    justify-self: center;
+    height: 130px;
+  }
+
+  .pageRoute {
+    display: none;
+  }
+
+  .menuIcon {
+    display: none;
+  }
+
+  nav div{
+    height: 40px;
+    padding-top: 5px;
+  }
+}