feat: fixed project styling

src/components/home/ProjectsSection.js

@@ -7,6 +7,15 @@ import { GatsbyImage } from "gatsby-plugin-image"
 import { StaticQuery, graphql } from "gatsby"
 // import { FaGithub, FaGoogleDrive, FaGlobe } from "react-icons/fa";
 import * as Styles from "../../styles/css/screens/home/projects-section.module.css"
+import {
+  FaBook,
+  FaBookOpen,
+  FaExternalLinkAlt,
+  FaGithub,
+  FaGlobe,
+  FaLink,
+  FaRegFileAlt,
+} from "react-icons/fa"
 
 function ProjectsSection({ data }) {
   //use data as props.data
@@ -31,21 +40,54 @@ function ProjectsSection({ data }) {
                 <h3 className={`${Styles.heading}`}>
                   {node.frontmatter.title}
                 </h3>
-                <div>
+                <div className={Styles.descriptionContainer}>
                   <p className={Styles.cardDescription}>
                     {node.frontmatter.description}
                   </p>
                 </div>
-                <div className={Styles.stacksContainer}>
-                  {node.frontmatter.stacks.map(({ childImageSharp }, index) => (
-                    <GatsbyImage
-                      key={index}
-                      className={Styles.stack}
-                      image={childImageSharp.gatsbyImageData}
-                      alt={`Stack Image`}
-                      objectFit="contain"
-                    />
-                  ))}
+                <div className={Styles.additionalInfo}>
+                  <div className={Styles.stacksContainer}>
+                    {node.frontmatter.stacks.map(
+                      ({ childImageSharp }, index) => (
+                        <GatsbyImage
+                          key={index}
+                          className={Styles.stack}
+                          image={childImageSharp.gatsbyImageData}
+                          alt={`Stack Image`}
+                          objectFit="contain"
+                        />
+                      )
+                    )}
+                  </div>
+                  <div className={Styles.projectLinks}>
+                    {node.frontmatter.repo && (
+                      <a
+                        href={node.frontmatter.repo}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        <FaGithub />
+                      </a>
+                    )}
+                    {node.frontmatter.docs && (
+                      <a
+                        href={node.frontmatter.docs}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        <FaBookOpen />
+                      </a>
+                    )}
+                    {node.frontmatter.site && (
+                      <a
+                        href={node.frontmatter.site}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        <FaLink />
+                      </a>
+                    )}
+                  </div>
                 </div>
               </div>
             </div>
@@ -75,8 +117,8 @@ const indexQuery = graphql`
               }
             }
             repo
-            drive
-            website
+            docs
+            site
             thumbnail {
               childImageSharp {
                 gatsbyImageData

src/content/projects/campus-modeler/index.md

@@ -2,12 +2,12 @@
 title: Campus Modeler
 description: The project involved building an API layer to integrate a Reactjs frontend with a Python simulator and MongoDB for Covid-19 spread analysis on university campuses, deploying it on AWS EC2 with Apache Web Server and coordinating tests with the frontend and model-development teams.
 stacks:
-- ./stack-imgs/react.png
-- ./stack-imgs/android.png
+  - ./stack-imgs/react.png
+  - ./stack-imgs/android.png
 start: "2021-08-01"
 end: "2021-08-01"
 repo: https://github.com/
-drive: https://github.com/
-website: https://github.com/
+docs: https://github.com/
+site: https://github.com/
 thumbnail: ./temp.jpeg
 ---

src/content/projects/capae/index.md

@@ -2,12 +2,12 @@
 title: CapAe
 description: CapAe is a cutting-edge project that utilizes React-Native and Django to record and visualize the real-time movement of aerospace objects in 3D space, providing accurate and efficient tracking and analysis capabilities.
 stacks:
-- ./stack-imgs/react.png
-- ./stack-imgs/android.png
+  - ./stack-imgs/react.png
+  - ./stack-imgs/android.png
 start: "2023-07-01"
 end: "2023-011-29"
 repo: https://github.com/
-drive: https://github.com/
-website: https://github.com/
+docs: https://github.com/
+site: https://github.com/
 thumbnail: ./temp.jpeg
 ---

src/content/projects/live-scoreboard/index.md

@@ -0,0 +1,13 @@
+---
+title: Live Scoreboard
+description: The project involved building an API layer to integrate a Reactjs frontend with a Python simulator and MongoDB for Covid-19 spread analysis on university campuses, deploying it on AWS EC2 with Apache Web Server and coordinating tests with the frontend and model-development teams.
+stacks:
+  - ./stack-imgs/react.png
+  - ./stack-imgs/android.png
+start: "2021-08-01"
+end: "2021-08-01"
+repo: https://github.com/
+docs: https://github.com/
+site: https://github.com/
+thumbnail: ./temp.jpeg
+---

src/content/projects/voice-chess/index.md

@@ -2,12 +2,12 @@
 title: Voice Chess Application
 description: This project is a mobile chess application that uses voice commands for gameplay, making it accessible for people with visual impairments. Built on react-native, the app utilizes react-native-voice for natural language processing and chessboard.js for the chess engine.
 stacks:
-- ./stack-imgs/react.png
-- ./stack-imgs/android.png
+  - ./stack-imgs/react.png
+  - ./stack-imgs/android.png
 start: "2023-01-03"
 end: "2023-05-06"
 repo: https://github.com/
-drive: https://github.com/
-website: https://github.com/
+docs: https://github.com/
+site: https://github.com/
 thumbnail: ./temp.jpeg
 ---

src/styles/css/screens/home/projects-section.module.css

@@ -12,7 +12,6 @@
   max-width: 330px;
   display: flex;
   flex-direction: column;
-  cursor: pointer;
 }
 
 .card .heading {
@@ -22,6 +21,13 @@
 
 .card > .body {
   padding: 1.5rem 0;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.card .body .descriptionContainer {
+  flex-grow: 1;
 }
 
 .card .body .cardDescription {
@@ -30,12 +36,27 @@
   margin: 0;
 }
 
+.card .body .additionalInfo {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 8px 0;
+}
+
 .card .body .stacksContainer {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
-  padding: 8px 0;
+  flex-grow: 1;
+}
+
+.card .body .projectLinks {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  font-size: 20px;
+  align-items: center;
 }
 
 .card .body .stacksContainer .stack {
@@ -47,12 +68,22 @@
   object-fit: contain;
 }
 
-.light .card > h3 {
+.light .card > h3,
+.light .projectLinks a,
+.light .projectLinks a:visited {
   color: color(var(--color-light-base) l(+20%));
 }
-.dark .card > h3 {
+.dark .card > h3,
+.dark .projectLinks a,
+.dark .projectLinks a:visited {
   color: color(var(--color-dark-base) l(+20%));
 }
+
+.card .body .projectLinks a:hover {
+  color: color(var(--color-primary));
+  transition: all 0.3s ease-in-out;
+}
+
 /* .card .gatsby-image-wrapper img{
   margin-bottom: 5px;
   height: 150px;

src/styles/css/screens/home/skillset-section.module.css

@@ -1,33 +1,32 @@
 @import "../../vars.css";
 
 .skillCardsContainer {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
 }
 
 .skillCardsContainer .skillCard {
-    position: relative;
-    margin: 0 5px;
-    padding: 10px 15px;
-    border-radius: 5px;
-    cursor: pointer;
-    bottom: 0;
-    transition: bottom 0.3s;
+  position: relative;
+  margin: 0 5px;
+  padding: 10px 15px;
+  border-radius: 5px;
+  bottom: 0;
+  transition: bottom 0.3s;
 }
 
 .light .skillCardsContainer .skillCard {
-    box-shadow: 0 7px 30px -10px rgba(150, 170, 180, 0.5);
+  box-shadow: 0 7px 30px -10px rgba(150, 170, 180, 0.5);
 }
 
 .dark .skillCardsContainer .skillCard {
-    box-shadow: 0 7px 30px -10px rgba(255, 255, 255, 0.6);
+  box-shadow: 0 7px 30px -10px rgba(255, 255, 255, 0.6);
 }
 
 .skillCardsContainer .skillCard:hover {
-    bottom: 7px;
-    transition: bottom 0.3s;
+  bottom: 7px;
+  transition: bottom 0.3s;
 }
 
 @media (min-width: 480px) {