add social media

package.json

@@ -9,6 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18"

src/components/FindMe.tsx

@@ -1,21 +1,51 @@
+import Link from 'next/link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faCloud as BlueSky,
+  faLink
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  faDev,
+  faGithub
+} from '@fortawesome/free-brands-svg-icons';
 import SocialMediaList from '@/data/socialmedia.json';
 
 const FindMe = () => {
 
   const title = "Find Me".split('');
 
+  const findIcon = (site: string) => {
+    switch(site) {
+      case 'BlueSky':
+        return <FontAwesomeIcon icon={BlueSky} />
+      case 'GitHub':
+        return <FontAwesomeIcon icon={faGithub} />
+      case 'Dev.to':
+        return <FontAwesomeIcon icon={faDev} />
+      default:
+        return <FontAwesomeIcon icon={faLink} />
+    }
+  }
+
   return (
     <section id="findme-spotlight">
       <h2>
         {title.map((letter, index) => (
           <span key={index}>{letter}</span>
         ))}
       </h2>
-      {SocialMediaList.map((item, index) => (
-        <article key={index}>
-          <h3>{item.site}</h3>
-        </article>
-      ))}
+      <div id="media-container">
+        {SocialMediaList.map((item, index) => {
+
+          return (
+            <div className='link-container'>
+              <Link href="#" alt={item.alt}>
+                {findIcon(item.site)}
+              </Link>
+            </div>
+          )
+        })}
+      </div>
     </section>
   )
 }

src/components/PortfolioCard.tsx

@@ -1,12 +1,18 @@
-import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { faGithubAlt } from '@fortawesome/free-brands-svg-icons';
 
 const PortfolioCard = ({
   project: {
-    title
+    title,
+    github,
+    liveLink
   }
 }: {
   project: {
-    title: string
+    title: string;
+    github?: string;
+    liveLink?: string;
   }
 }) => {
   return (
@@ -16,6 +22,14 @@ const PortfolioCard = ({
           <h3>
             {title}
           </h3>
+          <div className='icons-container'>
+            {liveLink && (
+              <FontAwesomeIcon icon={faLink} />
+            )}
+            {github && (
+              <FontAwesomeIcon icon={faGithubAlt} />
+            )}
+          </div>
         </div>
       </div>
     </div>

src/data/projects.json

@@ -1,10 +1,13 @@
 [{
   "title": "GenCon Calendar",
+  "github": "https://github.com/Sun-Mountain/GenConCal",
   "liveLink": "https://genconcal.com"
 },{
   "title": "Shelf Esteem",
+  "github": "https://github.com/Sun-Mountain/shelf-esteem/",
   "liveLink": "https://shelf-esteem.fly.dev"
 },{
   "title": "Student Rooster",
+  "github": "https://github.com/Sun-Mountain/student-rooster",
   "liveLink": "https://student-rooster.fly.dev/"
 }]

src/data/socialmedia.json

@@ -1,5 +1,6 @@
 [{
-  "site": "Blu Sky"
+  "site": "BlueSky",
+  "alt": "Blue Sky Account @nikacodes.bsky.social"
 }, {
   "site": "GitHub"
 }, {

src/styles/components/_cards.scss

@@ -4,4 +4,11 @@
 
 .card-container + .card-container {
   border-top: 1px dashed $french-gray-2;
+}
+
+.card {
+  .heading {
+    display: flex;
+    justify-content: space-between;
+  }
 }

src/styles/components/_media-icons.scss

@@ -0,0 +1,12 @@
+#media-container {
+  display: flex;
+
+  svg {
+    height: 2rem;
+    width: 2rem;
+  }
+
+  .link-container {
+    margin-left: 1rem;
+  }
+}

src/styles/components/_spotlights.scss

@@ -27,4 +27,13 @@
   flex-direction: column;
   margin: 1.5rem 0;
   padding: 1rem;
+}
+
+.icons-container {
+  svg {
+    fill: $outer-space;
+    margin: 0 .5rem;
+    height: 1.5rem;
+    width: 1.5rem;
+  }
 }

src/styles/index.scss

@@ -3,6 +3,7 @@
 
 @import './components/_cards.scss';
 @import './components/_header.scss';
+@import './components/media-icons.scss';
 @import './components/_sections.scss';
 @import './components/_spotlights.scss';