diff --git a/src/components/home/ProjectsSection.js b/src/components/home/ProjectsSection.js
index a7d84df1..bb5bb0f3 100644
--- a/src/components/home/ProjectsSection.js
+++ b/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 }) {
{node.frontmatter.title}
-
+
{node.frontmatter.description}
-
- {node.frontmatter.stacks.map(({ childImageSharp }, index) => (
-
- ))}
+
+
+ {node.frontmatter.stacks.map(
+ ({ childImageSharp }, index) => (
+
+ )
+ )}
+
+
+ {node.frontmatter.repo && (
+
+
+
+ )}
+ {node.frontmatter.docs && (
+
+
+
+ )}
+ {node.frontmatter.site && (
+
+
+
+ )}
+
@@ -75,8 +117,8 @@ const indexQuery = graphql`
}
}
repo
- drive
- website
+ docs
+ site
thumbnail {
childImageSharp {
gatsbyImageData
diff --git a/src/content/projects/campus-modeler/index.md b/src/content/projects/campus-modeler/index.md
index 10ac094a..59336711 100644
--- a/src/content/projects/campus-modeler/index.md
+++ b/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
---
diff --git a/src/content/projects/capae/index.md b/src/content/projects/capae/index.md
index bfaebcff..d1133700 100644
--- a/src/content/projects/capae/index.md
+++ b/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
---
diff --git a/src/content/projects/live-scoreboard/index.md b/src/content/projects/live-scoreboard/index.md
new file mode 100644
index 00000000..6c6e964d
--- /dev/null
+++ b/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
+---
diff --git a/src/content/projects/live-scoreboard/stack-imgs/android.png b/src/content/projects/live-scoreboard/stack-imgs/android.png
new file mode 100644
index 00000000..263d1056
Binary files /dev/null and b/src/content/projects/live-scoreboard/stack-imgs/android.png differ
diff --git a/src/content/projects/live-scoreboard/stack-imgs/react.png b/src/content/projects/live-scoreboard/stack-imgs/react.png
new file mode 100644
index 00000000..f0737afc
Binary files /dev/null and b/src/content/projects/live-scoreboard/stack-imgs/react.png differ
diff --git a/src/content/projects/live-scoreboard/temp.jpeg b/src/content/projects/live-scoreboard/temp.jpeg
new file mode 100644
index 00000000..d125d602
Binary files /dev/null and b/src/content/projects/live-scoreboard/temp.jpeg differ
diff --git a/src/content/projects/voice-chess/index.md b/src/content/projects/voice-chess/index.md
index 0bd0f49e..d62e7ac5 100644
--- a/src/content/projects/voice-chess/index.md
+++ b/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
---
diff --git a/src/styles/css/screens/home/projects-section.module.css b/src/styles/css/screens/home/projects-section.module.css
index 4c27f02a..b1f78832 100644
--- a/src/styles/css/screens/home/projects-section.module.css
+++ b/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;
diff --git a/src/styles/css/screens/home/skillset-section.module.css b/src/styles/css/screens/home/skillset-section.module.css
index 9a6a8123..7978897e 100644
--- a/src/styles/css/screens/home/skillset-section.module.css
+++ b/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) {