Merge pull request #4 from spencer-rafada/spencer/projects

project section

src/App.jsx

@@ -2,6 +2,8 @@ import React from 'react'
 import InfoSection from './components/InfoSection'
 import About from './components/About'
 import Experience from './components/Experience'
+import FeaturedProjects from './components/FeaturedProjects'
+import Footer from './components/Footer'
 
 export default function App() {
   return (
@@ -11,6 +13,8 @@ export default function App() {
         <div className='displaySection'>
           <About />
           <Experience />
+          <FeaturedProjects />
+          <Footer />
         </div>
       </div>
     </div>

src/components/FeaturedProjects.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import projectsData from '../data/PROJECTS'
+import Item from './Item'
+
+export default function FeaturedProjects() {
+  console.log(projectsData)
+  return (
+    <div className='displaySection__projects'>
+      <h2>Featured Projects</h2>
+      {projectsData.map((item) => {
+        return <Item cardType={'proj'} data={item} />
+      })}
+    </div>
+  )
+}

src/components/Footer.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default function Footer() {
+  return (
+    <div className='displaySection__footer'>
+      <p>
+        This portfolio was created by yours truly, but heavily inspired by{' '}
+        <a href='https://brittanychiang.com/'>Brittany Chiang</a>
+      </p>
+    </div>
+  )
+}

src/components/Item.jsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'
 
 export default function Item({ cardType, data }) {
   const [type, setType] = useState('exp')
-  console.log(data)
 
   useEffect(() => {
     if (cardType === 'exp') setType('exp')
@@ -17,11 +16,21 @@ export default function Item({ cardType, data }) {
     <div className='item__card' onClick={handleItemClick}>
       <div className='item__card__left'>
         {type === 'exp' && <p>{data.date}</p>}
+        {type === 'proj' && data.image && (
+          <div className='imgContainer'>
+            <img
+              src={data.image}
+              alt={`Image of Featured Project ${data.title}`}
+            />
+          </div>
+        )}
       </div>
       <div className='item__card__right'>
         <div className='item__card__rightJob'>
           <a href={data.link}>
-            {data.position} - {data.company}
+            {type === 'exp'
+              ? `${data.position} - ${data.company}`
+              : `${data.title}`}
           </a>
           <p>{data.description}</p>
         </div>

src/data/PROJECTS.js

@@ -0,0 +1,61 @@
+const projects = [
+  {
+    date: '2023',
+    title: 'Arkad',
+    description:
+      'Full Stack Web App that guides user to grow their wealth and finances through smart goals, financial tracker, and surrounding yourself with like minded people.',
+    madeAt: 'Personal Project',
+    tools: [
+      'react',
+      'TDD',
+      'jest',
+      'GitHub Actions',
+      'NodeJS',
+      'Express',
+      'MongoDB',
+    ],
+    link: 'https://arkad-4hz9.onrender.com/',
+    image: '/src/assets/arkad_thumbnail.png',
+  },
+  {
+    date: '2023',
+    title: 'My Own Wedding Website',
+    description: `Full Stack Web app for my wife and I's wedding. View details about our wedding, RSVP, contacting us, and sending us notes`,
+    madeAt: 'Personal Project',
+    tools: ['react', 'NodeJS', 'Express', 'MongoDB', 'SCSS', 'Trello'],
+    link: 'https://hanaandspencer.onrender.com/',
+    image: '/src/assets/weddingwebsite_thumbnail.png',
+  },
+  {
+    date: '2022',
+    title: `KoRa's Treats`,
+    description:
+      'Web App that features baking products that my wife has made. This web app utilizes Vanilla JavaScript and CSS',
+    madeAt: 'BYU-I',
+    tools: ['JavaScript', 'CSS'],
+    link: 'https://spencer-rafada.github.io/kora-s-treats/',
+    image: '/src/assets/korastreat_thumbnail.png',
+  },
+  {
+    date: '2022',
+    title: 'Math Ninja',
+    description:
+      'Single Page Application that gamifies mathematics into Fruit Ninja. I was part of a group when we created this app.',
+    madeAt: 'BYU-I',
+    tools: ['react', 'Firebase', 'Canvas', 'Trello'],
+    link: '',
+    image: '/src/assets/mathninja_thumbnail.png',
+  },
+  {
+    date: '2023',
+    title: 'Spruce Moose',
+    description:
+      'REST API application that allowed local nursery to have their own server for managing and storing plant.',
+    madeAt: 'BYU-I',
+    tools: ['REST', 'NodeJS', 'Express', 'MongoDB', 'Trello'],
+    link: 'https://youtu.be/lFlTZcN_cKs',
+    image: '/src/assets/spruce_thumbnail.png',
+  },
+]
+
+export default projects

src/main.css

@@ -115,12 +115,24 @@ body {
   flex-direction: column;
   gap: 1.5rem;
   padding: 0.15rem;
-  margin-bottom: 3rem;
+  margin-bottom: 4rem;
 }
 .displaySection .displaySection__experience .view__resume:hover {
   color: #75c8ff;
   cursor: pointer;
 }
+.displaySection .displaySection__projects {
+  margin-bottom: 4rem;
+}
+.displaySection .displaySection__footer p {
+  text-align: center;
+  font-size: 0.8rem;
+  color: #c7c7c7;
+}
+.displaySection .displaySection__footer p a, .displaySection .displaySection__footer p a:visited {
+  color: #75c8ff;
+  text-decoration: none;
+}
 
 .item__card {
   border-radius: 0.5rem;
@@ -138,6 +150,19 @@ body {
   font-size: 0.8rem;
   color: #c7c7c7;
 }
+.item__card .item__card__left .imgContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.item__card .item__card__left .imgContainer img {
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 0.5rem;
+}
 .item__card .item__card__right {
   grid-column: 2/3;
 }
@@ -155,6 +180,7 @@ body {
 .item__card .item__card__right .item__card__toolsContainer {
   display: flex;
   gap: 1rem;
+  flex-wrap: wrap;
 }
 .item__card .item__card__right .item__card__toolsContainer .item__card__tools {
   background-color: #062c47;

src/main.scss

@@ -128,12 +128,28 @@ body {
     flex-direction: column;
     gap: 1.5rem;
     padding: 0.15rem;
-    margin-bottom: 3rem;
+    margin-bottom: 4rem;
     .view__resume:hover {
       color: #75c8ff;
       cursor: pointer;
     }
   }
+
+  .displaySection__projects {
+    margin-bottom: 4rem;
+  }
+
+  .displaySection__footer {
+    p {
+      text-align: center;
+      font-size: 0.8rem;
+      color: $textColorGray;
+      a, a:visited {
+        color: #75c8ff;
+        text-decoration: none;
+      }
+    }
+  }
 }
 
 // Item Card
@@ -153,6 +169,18 @@ body {
       font-size: 0.8rem;
       color: $textColorGray;
     }
+    .imgContainer {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      img {
+        width: 100%;
+        object-fit: cover;
+        border-radius: 0.5rem;
+      }
+    }
   }
   .item__card__right {
     grid-column: 2/3;
@@ -172,6 +200,7 @@ body {
     .item__card__toolsContainer {
       display: flex;
       gap: 1rem;
+      flex-wrap: wrap;
       .item__card__tools {
         background-color: $secondaryColor;
         color: #75c8ff;