sync

src/App.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import VerticalSlider from "./components/VerticalSlider";
 import Primary from "./Primary";
 import Skills from "./Skills";
@@ -12,9 +12,38 @@ import "./main.css";
  * TODO: Read in data from a plain text file for easier editing in the future.
  */
 export default function App() {
-  const cards = [<ProjectCard />, <ProjectCard />, <ProjectCard />];
+  // FUNCTION DATA
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 790);
 
-  const skills = {
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth <= 790);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const initState = isMobile ? [true, false, false] : [true, true, true];
+
+  // DATA VARIABLES
+  /*
+   {
+    title: "",
+    description: "",
+    image: "",
+    imageGallery: null,
+    url: ""
+   },
+*/
+  const projectData = [
+    {
+      title: "One AI",
+      description: "ASDF",
+      image: "/images/projects/one-ai.png",
+      imageGallery: null,
+      url: "https://github.com/quaxlyqueen/one-ai",
+    },
+  ];
+
+  const skillsData = {
     languages: ["Java", "JavaScript", "Go", "Dart", "Python", "C#"],
     tools: [
       "Git & GitHub",
@@ -40,11 +69,10 @@ export default function App() {
       secondaryText="Junior full-stack developer."
       callToAction="Here's my resume."
       image="/images/profile.jpg"
-      skills={skills}
+      skills={skillsData}
+      initState={initState}
     />,
-    <Projects cards={cards} />,
-    <Contact />,
-    <About />,
+    <Projects cardData={projectData} />,
   ];
   return <VerticalSlider slides={slides} />;
 }

src/Primary.jsx

@@ -1,4 +1,4 @@
-// TODO: Replace h4 callToAction with a button callToAction.
+// TODO: Replace h4 callToAction with a GREEN button callToAction.
 import React, { useState } from "react";
 import SkillCard from "./components/SkillCard";
 
@@ -8,6 +8,7 @@ export default function Primary({
   callToAction,
   image,
   skills,
+  initState,
 }) {
   return (
     <>
@@ -28,19 +29,19 @@ export default function Primary({
               header="Languages"
               symbol="code"
               list={skills.languages}
-              initState={true}
+              initState={initState[0]}
             />
             <SkillCard
               header="Tools"
               symbol="terminal"
               list={skills.tools}
-              initState={false}
+              initState={initState[1]}
             />
             <SkillCard
               header="Other"
               symbol="hub"
               list={skills.other}
-              initState={false}
+              initState={initState[2]}
             />
           </div>
         </div>

src/Projects.jsx

@@ -1,5 +1,33 @@
 import React from "react";
+import ProjectCard from "./components/ProjectCard";
 
-export default function Projects() {
-  return <p>TODO: Projects()</p>;
+export default function Projects({ cardData }) {
+  return (
+    <>
+      <div id="project-container">
+        <div className="project-grid-container">
+          <div id="project-header">
+            <h2 className="project-header">Projects</h2>
+
+            <p>
+              Here are some projects of mine. Lorem ipsum odor amet,
+              consectetuer adipiscing elit. Purus molestie vel ornare volutpat
+              elit et per montes. Lacus fames diam a non taciti sem.
+            </p>
+          </div>
+          <div id="project-cards-section">
+            {cardData.map((c) => (
+              <ProjectCard
+                title={c.title}
+                description={c.description}
+                image={c.image}
+                imageGallery={c.imageGallery}
+                url={c.url}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
 }

src/components/ProjectCard.jsx

@@ -1,5 +1,24 @@
 import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGithub } from "@fortawesome/free-brands-svg-icons";
 
-export default function ProjectCard() {
-  return <p>TODO: Need to implement ProjectCard</p>;
+export default function ProjectCard({
+  title,
+  description,
+  image,
+  imageGallery,
+  url,
+}) {
+  return (
+    <div className="project-card">
+      <img src={image} />
+      <div className="project-text">
+        <div className="row">
+          <h3 className="project-header">{title}</h3>
+          <FontAwesomeIcon icon={faGithub} />
+        </div>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
 }

src/components/SkillCard.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 
+// TODO: Add state which only allows one skill card at a time to be expanded.
+// TODO: Ensure that the expandability of the skill card is only an option when @media max-width 790px (mobile)
 export default function SkillCard({ header, symbol, list, initState }) {
   const [isExpanded, setIsExpanded] = useState(initState); // Initial state
 

src/main.css

@@ -51,6 +51,12 @@ body {
   overflow: hidden;
 }
 
+.slide-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
 .swiper-pagination-bullet {
   width: 18px;
   height: 18px;
@@ -73,6 +79,55 @@ body {
   column-gap: 1vh;
 }
 
+#project-container {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin: 5vw;
+}
+
+.project-grid-container {
+  margin: 2vw;
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: 1% 90%;
+  row-gap: 2vh;
+}
+
+.project-card {
+  background-color: #ebd2ff;
+  height: 70%;
+  display: grid;
+  grid-template-columns: 40% 40%;
+  grid-template-rows: 100%;
+  column-gap: 20vw;
+}
+
+.project-text {
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: 20% 70%;
+  align-text: left;
+}
+
+.project-text h3 {
+  font-size: clamp(2rem, 2.5vw, 3rem);
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+#project-cards-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
 #header {
   width: 100%;
   overflow: hidden;