added hovereffect on buttons, changed the buttoncomponent to use an a…

…nchor <a>tag, updated the parentcomponents with href, added the correct fontweight to the buttons

my-portfolio/src/App.css

@@ -2,9 +2,10 @@
   font-family: "Poppins", sans-serif;
   margin: 0 auto;
 
-/* Colors */
+  /* Colors */
   --primary-color: #000000;
   --secondary-color: #FFFFFF;
+  --accent-color: #7e7070;
 }
 
 body {

my-portfolio/src/components/sections/ArticlesSection/FeaturedArticles.jsx

@@ -9,36 +9,36 @@ import "./FeaturedArticles.css";
 
 export const FeaturedArticles = () => {
   console.log(articlesData);
-return (
-  <Grid background="black">
-    <div className="articles-container">
-      <div className="title">
-        <H2> My words</H2>
-          </div>
-          <div className="article-wrapper"> 
+  return (
+    <Grid background="black">
+      <div className="articles-container">
+        <div className="title">
+          <H2> My words</H2>
+        </div>
+        <div className="article-wrapper">
           {articlesData.articles.map((article) => (
             <Card
               key={article.name}
               imageSource={images[article.image] || article.image}
-              cardTag={article.tags} 
+              cardTag={article.tags}
               cardTitle={article.name}
               cardDescription={article.description}
               sectionType="article"
-              // button={<Button text="Read Article" isReadArticle={true} />}
               link={article.link}
-              />
-            ))}
-          </div>
-        <div className="view-more-container"> 
-          <Button 
+            />
+          ))}
+        </div>
+        <div className="view-more-container">
+          <Button
             text="Read More Articles"
             isViewMore={true}
             sectionType="article"
             icon={iconArrowWhite}
-            onClick={() => window.open("https://www.linkedin.com", "_blank")}
+            href="https://www.linkedin.com"
+            target="_blank"
           />
         </div>
       </div>
     </Grid>
-);
+  );
 };

my-portfolio/src/components/sections/Cards/Card.jsx

@@ -7,56 +7,59 @@ import iconGithubWhite from "../../../assets/iconGithubWhite.svg";
 import iconWebWhite from "../../../assets/iconWebWhite.svg";
 import { Tag } from "../../ui/Tags/Tags.jsx";
 
-export const Card = ({ 
-  imageSource, 
-  sectionType, 
-  cardTag, 
-  cardTitle, 
-  cardDescription, 
+export const Card = ({
+  imageSource,
+  sectionType,
+  cardTag,
+  cardTitle,
+  cardDescription,
   netlify,
   github,
   link,
 }) => {
-return (
-  <article className={`${sectionType}-card`}>
-    <img 
-    src={imageSource} 
-    className={`${sectionType}-img`}
-    alt="portfolio-img" 
-    />
+  return (
+    <article className={`${sectionType}-card`}>
+      <img
+        src={imageSource}
+        className={`${sectionType}-img`}
+        alt="portfolio-img"
+      />
       <div className={`${sectionType}-info-box`}>
-      <div className="tags-container"> 
-      {Array.isArray(cardTag)
-          ? cardTag.map((tag, index) => <Tag key={index} sectionType={sectionType} text={tag} />)
-          : <Tag sectionType={sectionType} text={cardTag} />}
+        <div className="tags-container">
+          {Array.isArray(cardTag)
+            ? cardTag.map((tag, index) => <Tag key={index} sectionType={sectionType} text={tag} />)
+            : <Tag sectionType={sectionType} text={cardTag} />}
+        </div>
+        <H3>{cardTitle}</H3>
+        <div className="description-box">
+          <BodyText>{cardDescription}</BodyText>
+          <div className="button-container">
+            {sectionType === "project" ? (
+              <>
+                <Button text="Live Demo"
+                  icon={iconWeb}
+                  sectionType={sectionType}
+                  href={netlify}
+                  target="_blank"
+                />
+                <Button text="View Code"
+                  icon={iconGithubWhite}
+                  sectionType={sectionType}
+                  href={github}
+                  target="_blank"
+                />
+              </>
+            ) : (
+              <Button text="Read Article"
+                icon={iconWebWhite}
+                sectionType={sectionType}
+                href={link}
+                target="_blank"
+              />
+            )}
+          </div>
+        </div>
       </div>
-      <H3>{cardTitle}</H3>
-      <div className="description-box"> 
-      <BodyText>{cardDescription}</BodyText>
-      <div className="button-container">
-        {sectionType === "project" ? (
-          <>
-          <Button text="Live Demo" 
-          icon={iconWeb} 
-          sectionType={sectionType}
-          onClick={() => window.open(netlify, "_blank")}
-          />
-          <Button text="View Code" 
-          icon={iconGithubWhite} 
-          sectionType={sectionType}
-          onClick={() => window.open(github, "_blank")}
-          />
-          </>
-        ) : (
-          <Button text="Read Article" 
-          icon={iconWebWhite} 
-          sectionType={sectionType}
-          onClick={() => window.open(link, "_blank")}
-          />
-        )}
-      </div>
-      </div>
-    </div>
-  </article>
-);
+    </article>
+  );
 };

my-portfolio/src/components/sections/ProjectsSection/FeaturedProjects.css

@@ -25,17 +25,15 @@
     gap: 64px;
   }
 }
+
 /* breakpoint for small desktop */
 @media (min-width: 769px) {
   .projects-container {
     grid-column: span 12;
     gap: 64px;
   }
 
-  .project-wrapper > .project-card:nth-child(even) {
+  .project-wrapper>.project-card:nth-child(even) {
     flex-direction: row-reverse;
   }
-}
-@media (min-width: 1025px) {
-
 }

my-portfolio/src/components/sections/ProjectsSection/FeaturedProjects.jsx

@@ -6,56 +6,57 @@ import { images } from "../../ui/Images/Images.jsx";
 import { Button } from "../../ui/Buttons/Button.jsx";
 import { Tag } from "../../ui/Tags/Tags.jsx";
 import projectsData from "../../../data/projects.json";
-import iconArrow from "../../../assets/iconArrow.svg"; 
+import iconArrow from "../../../assets/iconArrow.svg";
 import "./FeaturedProjects.css";
 
 export const FeaturedProjects = () => {
-// display every other card in reversed row on desktop
-const [isDesktop, setIsDesktop] = useState(window.innerWidth >= 1024);
+  // display every other card in reversed row on desktop
+  const [isDesktop, setIsDesktop] = useState(window.innerWidth >= 1024);
 
-useEffect(() => {
-  const handleResize = () => {
-    setIsDesktop(window.innerWidth >= 1024);
-  };
-  window.addEventListener("resize", handleResize);
-  return () => window.removeEventListener("resize", handleResize);
-}, []);
-  
-return (
-  <Grid background="white">
-    <div className="projects-container">
-      <H2>Featured Projects</H2> 
+  useEffect(() => {
+    const handleResize = () => {
+      setIsDesktop(window.innerWidth >= 1024);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return (
+    <Grid background="white">
+      <div className="projects-container">
+        <H2>Featured Projects</H2>
         <div className="project-wrapper">
-        {projectsData.projects.map((project, index) => (
-          <Card
-            key={project.name}
-            imageSource={images[project.image] || project.image}
-            cardTag={project.tags}
-            cardTitle={project.name}
-            cardDescription={project.description}
+          {projectsData.projects.map((project, index) => (
+            <Card
+              key={project.name}
+              imageSource={images[project.image] || project.image}
+              cardTag={project.tags}
+              cardTitle={project.name}
+              cardDescription={project.description}
+              sectionType="project"
+              netlify={project.netlify}
+              github={project.github}
+              isReversed={isDesktop && index % 2 === 1}
+            >
+              <div className="tag-container">
+                {project.tags.map((tag, index) => (
+                  <Tag key={index} sectionType="project" text={tag} />
+                ))}
+              </div>
+            </Card>
+          ))}
+        </div>
+        <div className="view-more-container">
+          <Button
+            text="View More Projects"
+            isViewMore={true}
             sectionType="project"
-            netlify={project.netlify} 
-            github={project.github} 
-            isReversed={isDesktop && index % 2 === 1}
-          >
-        <div className="tag-container">
-        {project.tags.map((tag, index) => (
-        <Tag key={index} sectionType="project" text={tag} />  
-        ))}  
+            icon={iconArrow}
+            href="https://github.com/Fannyhenriques?tab=repositories"
+            target="_blank"
+          />
         </div>
-        </Card>
-        ))}
-      </div>  
-    <div className="view-more-container">
-      <Button
-        text="View More Projects"
-        isViewMore={true}
-        sectionType="project"
-        icon={iconArrow}
-        onClick={() => window.open("https://github.com/Fannyhenriques?tab=repositories", "_blank")}
-      />
-    </div>
-    </div>
-  </Grid>
-);
+      </div>
+    </Grid>
+  );
 };

my-portfolio/src/components/ui/Buttons/Button.css

@@ -10,18 +10,29 @@
   font-size: 18px;
   border-radius: 12px;
   gap: 16px;
+  text-decoration: none;
+  font-weight: 500;
 }
 
 .project-button {
   background-color: var(--primary-color);
   color: var(--secondary-color);
 }
 
+.project-button:hover {
+  background-color: var(--accent-color);
+}
+
 .article-button {
   background-color: var(--secondary-color);
   color: var(--primary-color);
 }
 
+.article-button:hover {
+  background-color: var(--accent-color);
+  color: var(--secondary-color);
+}
+
 .project-view-more-button,
 .article-view-more-button {
   display: flex;
@@ -35,40 +46,54 @@
   border-radius: 12px;
   font-size: 18px;
   margin-top: 64px;
- }
+  text-decoration: none;
+  font-weight: 500;
+}
 
 .project-view-more-button {
   background: var(--secondary-color);
   color: var(--primary-color);
   border: 2px solid #000;
-  }
-
+}
+
+.project-view-more-button:hover {
+  background-color: var(--accent-color);
+  color: var(--secondary-color);
+}
+
 .article-view-more-button {
   background: var(--primary-color);
   color: var(--secondary-color);
   border: 2px solid #FFF;
-  }
+}
+
+.article-view-more-button:hover {
+  background-color: var(--accent-color);
+}
 
-.article-button-icon, 
-.project-button-icon { 
+.article-button-icon,
+.project-button-icon {
   width: 32px;
   height: 32px;
 }
 
 @media (min-width: 375px) {
+
   .project-button,
-  .article-button{
+  .article-button {
     width: 303px;
   }
+
   .project-view-more-button,
-  .article-view-more-button{
+  .article-view-more-button {
     width: 303px;
   }
 }
 
 @media (min-width: 1024px) {
-.project-view-more-button,
-.article-view-more-button{
-  margin-top: 128px;
-}
+
+  .project-view-more-button,
+  .article-view-more-button {
+    margin-top: 128px;
+  }
 }

my-portfolio/src/components/ui/Buttons/Button.jsx

@@ -1,15 +1,20 @@
 /* eslint-disable react/prop-types */
 import "./Button.css";
 
-export const Button = ({ text, icon, onClick, sectionType = "default", isViewMore }) => {
+export const Button = ({ text, icon, href, target, sectionType = "default", isViewMore }) => {
   const buttonClass = isViewMore
-    ? `${sectionType}-view-more-button`  
-    : `${sectionType}-button`;  
+    ? `${sectionType}-view-more-button`
+    : `${sectionType}-button`;
 
   return (
-    <button className={`button ${buttonClass}`} onClick={onClick}>
+    <a
+      className={`button ${buttonClass}`}
+      href={href}
+      target={target}
+      rel={target === "_blank" ? "noopener noreferrer" : undefined}
+    >
       {icon && <img src={icon} alt="icon" className={`${sectionType}-button-icon`} />}
       {text}
-    </button>
+    </a>
   );
 };