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) {