Branchtodeploy

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,21 @@
 
 .skill_name {
   text-align: center;
+}
+
+@media screen and (min-width: 796px) {
+  .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%;
+}
 }

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,52 @@
+nav {
+  font-size: 100%;
+  text-align: center;
+  align-items: center;
+  display: grid;
+  gap: 5px;
+  grid-template-areas: 
+    'nav-button1 nav-button1 nav-button1 nav-button1 nav-button1 nav-button1 nav-button1 nav-button1 nav-button1 . nav-button0'
+    'nav-button2 nav-button2 nav-button2 nav-button2 nav-button2 nav-button2 nav-button2 nav-button2 nav-button2 . nav-button0'
+    'nav-button3 nav-button3 nav-button3 nav-button3 nav-button3 nav-button3 nav-button3 nav-button3 nav-button3 . nav-button0'
+    'nav-button4 nav-button4 nav-button4 nav-button4 nav-button4 nav-button4 nav-button4 nav-button4 nav-button4 . nav-button0'
+    'nav-button5 nav-button5 nav-button5 nav-button5 nav-button5 nav-button5 nav-button5 nav-button5 nav-button5 . nav-button0'
+    ;
+}
+
+.nav-button0 {
+  grid-area: nav-button0;
+  justify-self: center;
+}
+
+.nav-button1 {
+  grid-area: nav-button1;
+  border-radius: 5%;
+}
+
+.nav-button2 {
+  grid-area: nav-button2;
+}
+
+.nav-button3 {
+  grid-area: nav-button3;
+}
+
+.nav-button4 {
+  grid-area: nav-button4;
+}
+
+.nav-button5 {
+  grid-area: nav-button5;
+}
+
+@media screen and (min-width: 736px) {
+  nav {
+    font-size: 36px;
+    text-align: center;
+    display: grid;
+    grid-template-areas: 
+      'nav-button0 . nav-button1 nav-button1 nav-button2 nav-button2 nav-button3 nav-button3 nav-button4 nav-button4 nav-button5 nav-button5 nav-button5'
+      '. . nav-button1 nav-button1 nav-button2 nav-button2 nav-button3 nav-button3 nav-button4 nav-button4 nav-button5 nav-button5 nav-button5'
+      ;
+  }
+}

src/components/NavBar.jsx

@@ -4,7 +4,8 @@ import HomePageIcon from '../images/wavyLirik.gif';
 import AboutPageIcon from '../images/meLirik.png'; 
 import ProjectsPageIcon from '../images/Hackermans.gif'; 
 import SkillsPageIcon from '../images/tiLirik.png'; 
-import ContactPageIcon from '../images/lirikHullo.png'; 
+import ContactPageIcon from '../images/lirikHullo.png';
+import './NavBar.css';
 import { motion } from 'framer-motion';
 
 const NavBar = () => {
@@ -60,30 +61,30 @@ const NavBar = () => {
   };
 
   return (
-    <motion.nav variants={skillVariantMain} animate="visible" initial="hidden" className="flex justify-around text-4xl items-center text-center w-full mb-20 text-cream bg-light-blue" >
-      <motion.img whileHover={{ scale: 1.2 }} transition={{ type: 'spring', stiffness: 500}} whileTap={{ scale: 0.8, rotate: -3 }} alt="Emote regarding page" src={ pageIcon } aria-label="pageEmote" />
-      <Link variants={skillVariant} animate="visible" initial="hidden" to="/" className='nav-button font-bold' data-testid="Home_b">
-      <motion.div className='bg-dark-blue h-20 rounded-2xl w-56' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
+    <motion.nav variants={skillVariantMain} animate="visible" initial="hidden" className="text-cream bg-light-blue" >
+      <motion.img className='nav-button0' whileHover={{ scale: 1.2 }} transition={{ type: 'spring', stiffness: 500}} whileTap={{ scale: 0.8, rotate: -3 }} alt="Emote regarding page" src={ pageIcon } aria-label="pageEmote" />
+      <Link variants={skillVariant} animate="visible" initial="hidden" to="/" className='nav-button1' data-testid="Home_b">
+      <motion.div className=' rounded-md bg-dark-blue shadow-2xl' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
         Home
       </motion.div>
       </Link>
-      <Link variants={skillVariant} animate="visible" initial="hidden" to="/about" className='nav-button font-bold' data-testid="About_b">
-      <motion.div className='bg-dark-blue h-20 rounded-2xl w-56' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
+      <Link variants={skillVariant} animate="visible" initial="hidden" to="/about" className='nav-button2' data-testid="About_b">
+      <motion.div className=' rounded-md bg-dark-blue shadow-2xl' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
         Sobre
       </motion.div>
       </Link>
-      <Link variants={skillVariant} animate="visible" initial="hidden" to="/projects" className='nav-button font-bold' data-testid="Projects_b">
-      <motion.div className='bg-dark-blue h-20 rounded-2xl w-56' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
+      <Link variants={skillVariant} animate="visible" initial="hidden" to="/projects" className='nav-button3' data-testid="Projects_b">
+      <motion.div className=' rounded-md bg-dark-blue shadow-2xl' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
         Projetos
       </motion.div>
       </Link>
-      <Link variants={skillVariant} animate="visible" initial="hidden" to="/skills" className='nav-button font-bold' data-testid="Skills_b">
-      <motion.div className='bg-dark-blue h-20 rounded-2xl w-56' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
+      <Link variants={skillVariant} animate="visible" initial="hidden" to="/skills" className='nav-button4' data-testid="Skills_b">
+      <motion.div className=' rounded-md bg-dark-blue shadow-2xl' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
         Habilidades
       </motion.div>
       </Link>
-      <Link variants={skillVariant} animate="visible" initial="hidden" to="/contact" className='nav-button font-bold' data-testid="Contact_b">
-      <motion.div className='bg-dark-blue h-20 rounded-2xl w-56 ' whileHover={{ scale: 1.1, rotate: 3, x: -50 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'just'}}>
+      <Link variants={skillVariant} animate="visible" initial="hidden" to="/contact" className='nav-button5' data-testid="Contact_b">
+      <motion.div className=' rounded-md bg-dark-blue shadow-2xl' whileHover={{ scale: 1.1, rotate: 3, x: -50 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'just'}}>
         Contato
       </motion.div>
       </Link>

src/components/SoftSkills.css

@@ -1,13 +1,18 @@
 .soft_skills_container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1/2fr 1fr 1fr 1fr;
   grid-template-areas: 
-  'soft_skills_title soft_skills_title soft_skills_title soft_skills_title soft_skills_title soft_skills_title'
-  "icon_container0s icon_container1s icon_container2s icon_container3s icon_container4s icon_container5s";
+  'soft_skills_title soft_skills_title'
+  "icon_container0s icon_container1s"
+  "icon_container2s icon_container3s"
+  "icon_container4s icon_container5s";
   gap: 5%;
-  justify-items: center;
-  margin-top: 5%;
-  margin-left: 10%;
+  margin-top: 340px;
+  /* 
   margin-right: 10%;
-  margin-bottom: 10%;
+  margin-bottom: 10%; */
+  justify-items: center;
 }
 
 .soft_skills_title {
@@ -40,4 +45,21 @@
 
 .skill_name {
   text-align: center;
+}
+
+@media screen and (min-width: 796px) {
+  .soft_skills_container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1/2fr 1fr;
+    grid-template-areas: 
+    'soft_skills_title soft_skills_title soft_skills_title soft_skills_title soft_skills_title soft_skills_title'
+    "icon_container0s icon_container1s icon_container2s icon_container3s icon_container4s icon_container5s";
+    gap: 5%;
+    justify-items: center;
+    margin-top: 5%;
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-bottom: 10%;
+  }
 }

src/components/SoftSkils.jsx

@@ -16,11 +16,10 @@ const SoftSkils = ({iconsSoft}) => {
 
   const skillVariantMain = {
     hidden: {
-      y: -50,
       opacity: 0,
     },
     visible: {
-      y: 0,
+
       opacity: 1,
       transition: {
         delay: 0.4,
@@ -29,7 +28,7 @@ const SoftSkils = ({iconsSoft}) => {
     }
   };
   return (
-    <motion.div variants={skillVariantMain} animate="visible" initial="hidden" className="soft_skills_container grid">
+    <motion.div variants={skillVariantMain} animate="visible" initial="hidden" className="soft_skills_container">
     <h2 className='bg-dark-blue text-cream soft_skills_title text-center text-3xl font-bold  w-full rounded-xl'>Soft Skills</h2>
     {iconsSoft.map((icon, index) => {
       return (

src/index.css

@@ -5,3 +5,10 @@
 @tailwind utilities;
 
 @import-normalize;
+
+.main_content_container {
+  min-width: 375px;
+}
+
+@media screen and (min-width: 736px) {
+}