diff --git a/data/portfolio.json b/data/portfolio.json index 9f63df3..dc3f7c6 100644 --- a/data/portfolio.json +++ b/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." } ] diff --git a/public/logos/behance.svg b/public/logos/behance.svg new file mode 100644 index 0000000..acd6e73 --- /dev/null +++ b/public/logos/behance.svg @@ -0,0 +1,27 @@ + + + + + + + + + + \ No newline at end of file diff --git a/public/logos/github-mark-white.png b/public/logos/github-mark-white.png new file mode 100644 index 0000000..50b8175 Binary files /dev/null and b/public/logos/github-mark-white.png differ diff --git a/public/logos/github-mark-white.svg b/public/logos/github-mark-white.svg new file mode 100644 index 0000000..d5e6491 --- /dev/null +++ b/public/logos/github-mark-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/logos/github-mark.svg b/public/logos/github-mark.svg new file mode 100644 index 0000000..37fa923 --- /dev/null +++ b/public/logos/github-mark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/logos/googledrive.png b/public/logos/googledrive.png new file mode 100644 index 0000000..aad5cad Binary files /dev/null and b/public/logos/googledrive.png differ diff --git a/public/logos/linkedin.svg b/public/logos/linkedin.svg new file mode 100644 index 0000000..96dcf73 --- /dev/null +++ b/public/logos/linkedin.svg @@ -0,0 +1,14 @@ + + + + + + + + \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 9e98871..bd5a284 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -12,7 +12,7 @@ const Home: React.FC = () => { // Get the section ID from the URL

Simon Phillips

- A picture of me + A picture of me

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.

It's fine, I'm fine. 🙃

This site was built using Next.JS, TypeScript, React, SCSS, and deployed using GitHub Actions.

diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx index 7eb4c1a..1f8f41b 100644 --- a/src/app/portfolio/page.tsx +++ b/src/app/portfolio/page.tsx @@ -1,9 +1,8 @@ // 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 ( @@ -11,17 +10,7 @@ const Portfolio: React.FC = () => {

Portfolio

Some portfolio links of mine.

-
- {portfolioData.map((item, index) => ( - - ))} -
+
); }; diff --git a/src/components/Portfolio/Grid/PortfolioGrid.module.scss b/src/components/Portfolio/Grid/PortfolioGrid.module.scss new file mode 100644 index 0000000..2552560 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/components/Portfolio/Grid/PortfolioGrid.tsx b/src/components/Portfolio/Grid/PortfolioGrid.tsx new file mode 100644 index 0000000..dd915c8 --- /dev/null +++ b/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 ( +
+ {portfolioData.map((item, index) => ( + + ))} +
+ ); +}; + +export default PortfolioGrid; \ No newline at end of file diff --git a/src/components/PortfolioLink.module.scss b/src/components/PortfolioLink.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/PortfolioLink.tsx b/src/components/PortfolioLink.tsx index f87334c..883dd55 100644 --- a/src/components/PortfolioLink.tsx +++ b/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 = ({ name, @@ -9,15 +11,15 @@ const PortfolioLink: React.FC = ({ }) => { return (
-
+
+ {`${name} {/* {`${name} */}
-
-

{name}

+
+

{name}

+

{description}

- - Visit Website - +
); diff --git a/styles/styles.scss b/styles/styles.scss index 6fc52c8..e3e66f7 100644 --- a/styles/styles.scss +++ b/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; } \ No newline at end of file