From 7acc8ae44d0a4e0618064d6948efafbe4cf7f128 Mon Sep 17 00:00:00 2001 From: Samuel Ping Date: Sun, 31 Dec 2023 02:47:38 -0500 Subject: [PATCH] Color overhaul --- app/layout.js | 3 +- app/page.js | 21 ++++--- app/projects/page.js | 4 +- components/chip.js | 2 +- components/footer.js | 93 +++++++++++++++++-------------- components/navbar.js | 2 +- components/navbarButton.js | 8 +-- components/projectCard.js | 6 +- components/projectCardCarousel.js | 11 +++- components/rightArrowButton.js | 22 ++++---- content/about.mdx | 2 +- tailwind.config.js | 25 ++++----- 12 files changed, 107 insertions(+), 92 deletions(-) diff --git a/app/layout.js b/app/layout.js index ca4fbc3..54fa66b 100644 --- a/app/layout.js +++ b/app/layout.js @@ -14,6 +14,7 @@ export const metadata = { applicationName: 'Samuel Ping', authors: [{ name: 'Samuel Ping' }], creator: 'Samuel Ping', + metadataBase: new URL('https://samuelp.ing'), openGraph: { title: 'Samuel Ping', description: "Samuel Ping's personal portfolio website", @@ -39,7 +40,7 @@ export const metadata = { export default function RootLayout({ children }) { return ( - +
{children}
diff --git a/app/page.js b/app/page.js index ca24a70..4b978c5 100644 --- a/app/page.js +++ b/app/page.js @@ -14,15 +14,16 @@ export default async function Page() { return ( <> {/* about me section */} -
-
+
+
- Hey! I'm Sam Ping, a... + Hey! I'm{' '} + Sam Ping, a... - ... software engineer at MongoDB, Rutgers University graduate, avid - tennis player, budding boulderer, occasional theater performer, and - neglectful plant dad. I'm currently based out of NYC. + ... software engineer, Rutgers University graduate, cat lover (but + dog liker), avid tennis player, budding boulderer, occasional + theater performer, and neglectful plant dad.
@@ -37,8 +38,8 @@ export default async function Page() {
{/* projects section */} -
-
+
+
Projects Here are some of my more recent projects! Or,{' '} @@ -48,7 +49,9 @@ export default async function Page() { .
- +
+ +
); diff --git a/app/projects/page.js b/app/projects/page.js index ee08de2..0e250d3 100644 --- a/app/projects/page.js +++ b/app/projects/page.js @@ -10,9 +10,9 @@ export default async function Page() { const projects = await GetProjectDetails(); return ( -
+
Projects -
+
{projects.props.projects.map((project) => { return ( { return ( -
+
{text}
diff --git a/components/footer.js b/components/footer.js index 40d75a9..97a79a1 100644 --- a/components/footer.js +++ b/components/footer.js @@ -1,53 +1,60 @@ 'use client'; import Link from 'next/link'; +import { usePathname } from 'next/navigation'; import NavbarButton from '@/components/navbarButton'; import { EnvelopeIcon, GitHubIcon, LinkedInIcon } from '@/components/icons'; -const Footer = ({ navbarButtons }) => ( -
-
- {navbarButtons.map((navButton) => ( - - ))} -
-
-
- - - - - - - - - +const Footer = ({ navbarButtons }) => { + const pathname = usePathname(); + + return ( +
+
+ {navbarButtons.map((button) => ( + + ))} +
+ +
+
+ + + + + + + + + +
-
-
-); +
+ ); +}; export default Footer; diff --git a/components/navbar.js b/components/navbar.js index 6f1ffeb..6a4c0a8 100644 --- a/components/navbar.js +++ b/components/navbar.js @@ -46,7 +46,7 @@ export default function Navbar({ navbarButtons }) { leaveTo="transform scale-95 opacity-0" >
- + {navbarButtons.map((button) => ( { @@ -21,8 +21,8 @@ const NavbarButton = ({ active, title, route, mobile, close }) => { return (
{title} diff --git a/components/projectCard.js b/components/projectCard.js index 2a0f0b0..c6e64da 100644 --- a/components/projectCard.js +++ b/components/projectCard.js @@ -13,10 +13,10 @@ const ProjectCard = ({ repo, title, dates, gist, tags }) => { >
); }; diff --git a/components/rightArrowButton.js b/components/rightArrowButton.js index 254d935..e649e7c 100644 --- a/components/rightArrowButton.js +++ b/components/rightArrowButton.js @@ -4,18 +4,18 @@ import Link from 'next/link'; import { RightArrowIcon as Arrow } from '@/components/icons'; -const RightArrowButton = ({ text, url, className }) => { +const RightArrowButton = ({ text, url, className, color }) => { return ( - <> - - - - + + + ); }; diff --git a/content/about.mdx b/content/about.mdx index 3a9ca80..a1892ae 100644 --- a/content/about.mdx +++ b/content/about.mdx @@ -10,7 +10,7 @@ Since then, I've come to realize that building things is my passion, so I've bee #### What else do I do? -I love playing tennis, climbing, acting, and tinkering with computer hardware. I had a big plant phase over quarantine, and while I've toned down on that now, I will still drag anyone I'm with into a plant shop if we walk past one. I'm also a fan of all things green! Except boogers. +I love playing tennis, climbing, acting, and tinkering with computer hardware. I had a big plant phase over quarantine, and while I've toned down on that now, I will still drag anyone I'm with into a plant shop if we walk past one :) #### Is that why you chose to work at Mongo? Because their logo is green? diff --git a/tailwind.config.js b/tailwind.config.js index a251884..3885a42 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,6 @@ const colors = require('tailwindcss/colors'); +// https://colorhunt.co/palette/88ab8eafc8adeee7daf2f1eb module.exports = { content: ['./app/**/*.js', './components/**/*.js', './public/**/*.html'], theme: { @@ -8,20 +9,16 @@ module.exports = { current: 'currentColor', black: colors.black, white: colors.white, - gray: colors.gray, - emerald: colors.emerald, - indigo: colors.indigo, - yellow: colors.yellow, - green: { - 10: '#f9fffb', - 50: '#d8f6e4', - 100: '#cef3dd', - 200: '#aae2c0', - 250: '#90dbae', - 300: '#6bc58f', - 400: '#358655', - 500: '#237242', - }, + + primaryBg: '#FFF8EB', + secondaryBg: '#EEE7DA', + text: colors.black, + primarySmallTextBg: '#577A5D', // #577A5D + primaryLargeText: '#709974', + primary: '#88AA8D', // #88AA8D + secondary: '#AEC8AC', // #AEC8AC + accent: '#6FB7C6', + accent2: '#FCBFB7', }, }, };