Updated Portfolio Page and theming

data/portfolio.json

@@ -2,25 +2,25 @@
   {
     "name": "GitHub",
     "link": "https://github.com/tassyguy",
-    "icon": "/images/project-a-icon.png",
+    "icon": "/logos/github-mark.svg",
     "description": "My GitHub profile with all my current and past personal projects."
   },
   {
     "name": "Behance",
     "link": "https://www.behance.net/simonxphillips",
-    "icon": "/images/project-b-icon.png",
+    "icon": "/logos/behance.svg",
     "description": "UX and creative projects I have made in the past."
   },
   {
     "name": "LinkedIn",
     "link": "https://www.linkedin.com/in/simonxphillips",
-    "icon": "/images/project-b-icon.png",
+    "icon": "/logos/linkedin.svg",
     "description": "My LinkedIn profile."
   },
   {
     "name": "Resume",
     "link": "https://drive.google.com/file/d/10zoCEWRpc8XblT5ZZE10HWRTkMMMTuu0/view?usp=sharing",
-    "icon": "/images/project-b-icon.png",
+    "icon": "/logos/googledrive.png",
     "description": "A link to view my current resume."
   }
 ]

src/app/page.tsx

@@ -12,7 +12,7 @@ const Home: React.FC = () => { // Get the section ID from the URL
     <div>
       <Header />
       <h1 className='section-header'>Simon Phillips</h1>
-      <Image src='/images/me.jpg' alt='A picture of me' width={400} height={400} />
+      <Image src='/images/me.jpg' alt='A picture of me' width={400} height={400} className={'profile'}/>
        <p>Welcome to my website! This site is currently under construction so be cautioned. I would LOVE to have the design finished but Google seems to want to take their time with releasing Material Design 3.</p>
        <p>It&apos;s fine, I&apos;m fine. 🙃</p>
               <p>This site was built using Next.JS, TypeScript, React, SCSS, and deployed using GitHub Actions.</p>

src/app/portfolio/page.tsx

@@ -1,27 +1,16 @@
 // src/pages/portfolio.tsx
 import React, { useEffect, useState } from 'react';
 import Header from '@/components/Header';
-import PortfolioLink from '@/components/PortfolioLink';
-import portfolioData from '../../../data/portfolio.json';
 import '../../../styles/styles.scss';
+import PortfolioGrid from '@/components/Portfolio/Grid/PortfolioGrid';
 
 const Portfolio: React.FC = () => {
   return (
     <div>
       <Header />
       <h1 className='section-header'>Portfolio</h1>
       <p>Some portfolio links of mine.</p>
-      <div className='portfolio-list'>
-        {portfolioData.map((item, index) => (
-          <PortfolioLink
-            key={index}
-            name={item.name}
-            link={item.link}
-            icon={item.icon}
-            description={item.description}
-          />
-        ))}
-      </div>
+      <PortfolioGrid/>
     </div>
   );
 };

src/components/Portfolio/Grid/PortfolioGrid.module.scss

@@ -0,0 +1,11 @@
+.linksContainer {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+}
+
+@media (max-width: 768px) {
+    .linksContainer {
+        grid-template-columns: 1fr;
+    }
+}

src/components/Portfolio/Grid/PortfolioGrid.tsx

@@ -0,0 +1,23 @@
+// src/pages/portfolio.tsx
+import React from 'react';
+import PortfolioLink from '@/components/PortfolioLink';
+import portfolioData from '../../../../data/portfolio.json';
+import './PortfolioGrid.module.scss';
+
+const PortfolioGrid: React.FC = () => {
+  return (
+    <div className='linksContainer'>
+    {portfolioData.map((item, index) => (
+        <PortfolioLink
+        key={index}
+        name={item.name}
+        link={item.link}
+        icon={item.icon}
+        description={item.description}
+        />
+    ))}
+    </div>
+  );
+};
+
+export default PortfolioGrid;

src/components/PortfolioLink.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { PortfolioLinkProps } from '@/types';
+import Image from 'next/image';
+import Link from 'next/link';
 
 const PortfolioLink: React.FC<PortfolioLinkProps> = ({
   name,
@@ -9,15 +11,15 @@ const PortfolioLink: React.FC<PortfolioLinkProps> = ({
 }) => {
   return (
     <div className='portfolio-item'>
-      <div className='portfolio-icon'>
+      <div className='portfolio-icon portfolio-content'>
+        <Image src={icon} alt={`${name} Icon`} width={48} height={48} className="portfolio-vector"/>
         {/* <img src={icon} alt={`${name} Icon`} /> */}
       </div>
-      <div className='portfolio-details'>
-        <h3>{name}</h3>
+      <div className='portfolio-content'>
+        <h3 className={'portfolio-header'}><Link href={link} target='_blank' rel='noopener noreferrer'>{name}</Link></h3>
+        <div className='portfolio-details'>
         <p className='portfolio-description'>{description}</p>
-        <a href={link} target='_blank' rel='noopener noreferrer'>
-          Visit Website
-        </a>
+      </div>
       </div>
     </div>
   );

styles/styles.scss

@@ -18,7 +18,7 @@ body {
     background-color: var(--md-sys-color-background);
 }
 
-p, ul, li, .section-header {
+p, ul, li, .section-header, .portfolio-header {
     color: var(--md-sys-color-on-background);
 }
 
@@ -87,4 +87,29 @@ p, ul, li, .section-header {
 
 img {
     display: block;
+}
+
+.portfolio-vector {
+    padding: 0px 10px 0px 0px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .portfolio-vector {
+            filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(306deg) brightness(106%) contrast(102%);
+        }
+}
+
+.portfolio-header a {
+    color: var(--md-sys-color-on-background);
+}
+
+.portfolio-content {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.profile {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
 }