Color overhaul

samuel-ping · Dec 31, 2023 · 7acc8ae · 7acc8ae
1 parent 22ea597
commit 7acc8ae
Show file tree

Hide file tree

Showing 12 changed files with 107 additions and 92 deletions.
diff --git 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 (
     <html lang="en">
-      <body className="min-h-screen max-w-screen-lg flex flex-col gap-y-32 px-5 py-12 mx-auto bg-green-50">
+      <body className="min-h-screen max-w-screen-lg flex flex-col gap-y-32 px-5 lg:px-0 py-12 mx-auto bg-primaryBg">
         <Navbar navbarButtons={NavbarButtons} />
         <main className="flex flex-col flex-grow gap-y-14">{children}</main>
         <Footer navbarButtons={NavbarButtons} />

diff --git a/app/page.js b/app/page.js
@@ -14,15 +14,16 @@ export default async function Page() {
   return (
     <>
       {/* about me section */}
-      <div className="pb-16 flex flex-col-reverse items-center gap-y-4 md:flex-row md:justify-between md:pb-32">
-        <div className="max-w-md flex flex-col space-y-5">
+      <div className="pb-16 flex flex-col-reverse items-center gap-y-4 md:flex-row md:justify-between md:pb-48">
+        <div className="max-w-lg flex flex-col space-y-5">
           <span className="text-4xl font-medium">
-            Hey! I&apos;m Sam Ping, a...
+            Hey! I&apos;m{' '}
+            <span className="text-primaryLargeText">Sam Ping</span>, a...
           </span>
           <span className="text-2xl font-light">
-            ... software engineer at MongoDB, Rutgers University graduate, avid
-            tennis player, budding boulderer, occasional theater performer, and
-            neglectful plant dad. I&apos;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.
           </span>
           <Button text={'more about me'} url={'/about'} />
         </div>
@@ -37,8 +38,8 @@ export default async function Page() {
       </div>
 
       {/* projects section */}
-      <div className="flex flex-col gap-y-8">
-        <div className="flex flex-col gap-y-2">
+      <div className="flex flex-col gap-y-8 bg-secondary/90 rounded-2xl max-w-7xl">
+        <div className="flex flex-col gap-y-2 px-10 pt-16">
           <span className="text-4xl font-medium">Projects</span>
           <span className="text-base font-light">
             Here are some of my more recent projects! Or,{' '}
@@ -48,7 +49,9 @@ export default async function Page() {
             .
           </span>
         </div>
-        <ProjectCardCarousel projects={projects} />
+        <div className="pb-16">
+          <ProjectCardCarousel projects={projects} />
+        </div>
       </div>
     </>
   );

diff --git a/app/projects/page.js b/app/projects/page.js
@@ -10,9 +10,9 @@ export default async function Page() {
   const projects = await GetProjectDetails();
 
   return (
-    <div className="flex flex-col gap-y-4">
+    <div className="flex flex-col gap-y-7">
       <span className="text-4xl font-medium">Projects</span>
-      <div className="grid grid-cols-1 gap-3 justify-items-center md:justify-items-start sm:grid-cols-2 md:-mx-6 md:grid-cols-3 lg:grid-cols-4">
+      <div className="grid grid-cols-1 gap-x-7 gap-y-5 justify-items-center md:justify-items-start sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
         {projects.props.projects.map((project) => {
           return (
             <ProjectCard

diff --git a/components/chip.js b/components/chip.js
@@ -2,7 +2,7 @@
 
 const Chip = ({ text }) => {
   return (
-    <div className="flex justify-center items-center py-1 px-2 rounded-full text-green-100 group-hover:text-green-500 bg-green-500 group-hover:bg-green-100">
+    <div className="flex justify-center items-center py-1 px-2 rounded-full text-primaryBg bg-primarySmallTextBg">
       <div className="text-sm font-normal leading-none max-w-full flex-initial">
         {text}
       </div>

diff --git 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 }) => (
-  <footer className="flex flex-col space-y-5">
-    <div className="flex flex-row justify-center md:justify-end space-x-4">
-      {navbarButtons.map((navButton) => (
-        <NavbarButton
-          title={navButton.title}
-          route={navButton.route}
-          key={navButton.route}
-        />
-      ))}
-    </div>
-    <div className="w-full flex flex-row justify-center md:justify-end items-center">
-      <div className="flex flex-row space-x-5 items-center">
-        <Link
-          href="https://github.com/samuel-ping"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <button className="flex items-center">
-            <GitHubIcon className="h-10 w-10 text-black hover:text-green-500 transition-colors" />
-          </button>
-        </Link>
-        <Link
-          href="https://linkedin.com/in/samuelping"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <button className="flex items-center">
-            <LinkedInIcon className="h-10 w-10 text-black hover:text-green-500 transition-colors" />
-          </button>
-        </Link>
-        <Link
-          href="mailto:samuel.y.ping@gmail.com"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <button className="flex items-center">
-            <EnvelopeIcon className="h-10 w-10 text-black hover:text-green-500 transition-colors" />
-          </button>
-        </Link>
+const Footer = ({ navbarButtons }) => {
+  const pathname = usePathname();
+
+  return (
+    <footer className="flex flex-col space-y-5">
+      <div className="flex flex-row justify-center md:justify-end space-x-4">
+        {navbarButtons.map((button) => (
+          <NavbarButton
+            active={`/${pathname.split('/')[1]}` === button.route}
+            title={button.title}
+            route={button.route}
+            key={button.route}
+          />
+        ))}
+      </div>
+
+      <div className="w-full flex flex-row justify-center md:justify-end items-center">
+        <div className="flex flex-row space-x-5 items-center">
+          <Link
+            href="https://github.com/samuel-ping"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <button className="flex items-center">
+              <GitHubIcon className="h-10 w-10 text-black hover:text-primary transition-colors" />
+            </button>
+          </Link>
+          <Link
+            href="https://linkedin.com/in/samuelping"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <button className="flex items-center">
+              <LinkedInIcon className="h-10 w-10 text-black hover:text-primary transition-colors" />
+            </button>
+          </Link>
+          <Link
+            href="mailto:samuel.y.ping@gmail.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <button className="flex items-center">
+              <EnvelopeIcon className="h-10 w-10 text-black hover:text-primary transition-colors" />
+            </button>
+          </Link>
+        </div>
       </div>
-    </div>
-  </footer>
-);
+    </footer>
+  );
+};
 
 export default Footer;
diff --git a/components/navbar.js b/components/navbar.js
@@ -46,7 +46,7 @@ export default function Navbar({ navbarButtons }) {
             leaveTo="transform scale-95 opacity-0"
           >
             <div className="md:hidden flex justify-center">
-              <Popover.Panel className="absolute w-screen flex flex-col bg-green-100 shadow-lg divide-y divide-green-200">
+              <Popover.Panel className="absolute w-screen flex flex-col bg-primaryBg shadow-lg divide-y divide-secondaryBg">
                 {navbarButtons.map((button) => (
                   <NavbarButton
                     key={button.title}

diff --git a/components/navbarButton.js b/components/navbarButton.js
@@ -8,8 +8,8 @@ const NavbarButton = ({ active, title, route, mobile, close }) => {
       <Link
         href={route}
         className={`${
-          active ? 'text-green-500' : ''
-        } p-12 text-center text-xl transition-colors hover:text-green-500`}
+          active ? 'text-primaryLargeText' : ''
+        } p-12 text-center text-xl transition-colors hover:text-primaryLargeText`}
         onClick={close}
         aria-hidden="true"
       >
@@ -21,8 +21,8 @@ const NavbarButton = ({ active, title, route, mobile, close }) => {
   return (
     <div
       className={`${
-        active ? 'text-green-500' : ''
-      } flex items-center justify-center cursor-pointer text-xl transition-colors hover:text-green-500`}
+        active ? 'text-primaryLargeText' : ''
+      } flex items-center justify-center cursor-pointer text-xl transition-colors hover:text-primaryLargeText`}
     >
       <Link href={route}>
         <span>{title}</span>

diff --git a/components/projectCard.js b/components/projectCard.js
@@ -13,10 +13,10 @@ const ProjectCard = ({ repo, title, dates, gist, tags }) => {
     >
       <button
         type="button"
-        className="snap-start md:snap-none group w-64 h-80 flex flex-col justify-between p-7 rounded-xl shadow-lg transition-colors bg-green-50 hover:bg-green-500"
+        className="snap-center border border-secondaryBg md:snap-none group w-64 h-80 flex flex-col justify-between p-7 rounded-xl shadow-lg transition-colors bg-primaryBg hover:bg-secondaryBg"
       >
         <div className=" space-y-2">
-          <div className="flex flex-col text-left group-hover:text-green-100">
+          <div className="flex flex-col text-left ">
             <span className="text-2xl ">{title}</span>
             <span className="font-light italic">{dates}</span>
             <span className="">{gist}</span>
@@ -33,7 +33,7 @@ const ProjectCard = ({ repo, title, dates, gist, tags }) => {
         </div>
 
         {/* learn more button */}
-        <div className="flex flex-row items-center gap-x-2 group-hover:text-green-100">
+        <div className="flex flex-row items-center gap-x-2 ">
           <span className="text-xl">learn more</span>
           <Arrow
             className={

diff --git a/components/projectCardCarousel.js b/components/projectCardCarousel.js
@@ -5,7 +5,7 @@ import ProjectCard from '@/components/projectCard';
 
 export const ProjectCardCarousel = ({ projects }) => {
   return (
-    <div className="flex snap-x md:snap-none overflow-x-auto space-x-7 pb-5">
+    <div className="flex snap-x md:snap-none overflow-x-auto space-x-7 px-5 md:px-10 pb-5">
       {projects.props.projects.map((project) => {
         return (
           <ProjectCard
@@ -18,7 +18,14 @@ export const ProjectCardCarousel = ({ projects }) => {
           />
         );
       })}
-      <Button text={'see all'} url={'projects'} className={'h-80 pr-4'} />
+      <Button
+        text={'see all'}
+        url={'projects'}
+        className={
+          'snap-center p-4 rounded-xl bg-primaryBg hover:bg-secondaryBg border border-secondaryBg'
+        }
+        // color="black"
+      />
     </div>
   );
 };
diff --git 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 (
-    <>
-      <Link href={url} className="w-fit">
-        <button
-          className={`${className} group flex flex-row items-center space-x-2 rounded text-xl font-medium transition-colors bg-transparent text-green-500 hover:underline`}
-        >
-          <span>{text}</span>
-          <Arrow className="w-6 text-green-500 transition ease-in-out duration-300 group-hover:translate-x-2" />
-        </button>
-      </Link>
-    </>
+    <Link href={url} className="w-fit flex items-center">
+      <button
+        className={`${className} group flex flex-row items-center space-x-2 rounded text-2xl font-medium transition-colors text-${
+          color ? color : 'primaryLargeText'
+        } hover:underline`}
+      >
+        <span>{text}</span>
+        <Arrow className="w-6 text-primaryLargeText transition ease-in-out duration-300 group-hover:translate-x-2" />
+      </button>
+    </Link>
   );
 };
 

diff --git 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
@@ -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',
     },
   },
 };