Squashed commit of the following:

commit a47a2169bed75612d4ea9288a5937fb457197aad Author: Samuel Ping <sam.ping@mongodb.com> Date: Sat Dec 30 01:39:32 2023 -0500 Update deploy commit 235bc668081e8b3eea65bc643a33dfae62ae1c14 Author: Samuel Ping <sam.ping@mongodb.com> Date: Sat Dec 30 01:38:51 2023 -0500 Update personal website project mdx commit 3b2863471b8934337953a9ad73c47d9591afcd75 Author: Samuel Ping <sam.ping@mongodb.com> Date: Sat Dec 30 01:13:57 2023 -0500 Update about page commit edd742016a35006a0414c3fb4990c5ccb4fda966 Author: Samuel Ping <sam.ping@mongodb.com> Date: Sat Dec 30 01:04:59 2023 -0500 Uninstall old packages commit 7a23b190ce3ea635cfbeba96522b796896f08d08 Author: Samuel Ping <sam.ping@mongodb.com> Date: Sat Dec 30 01:04:12 2023 -0500 Update README commit 98e55fe73a5e65f43325cb35f9d2fe0221068c9a Author: Samuel Ping <sam.ping@mongodb.com> Date: Sat Dec 30 00:58:23 2023 -0500 Ignore DS_Store commit 1c9080cc09b8b8281d6ae167b0f5529dd9fcd4d2 Author: Samuel Ping <sam.ping@mongodb.com> Date: Sat Dec 30 00:58:14 2023 -0500 Bring back animated logo commit 4dcbd5e1809686a6a0038bf9e0f786ff33a1ce73 Author: Samuel Ping <sam.ping@mongodb.com> Date: Sat Dec 30 00:58:03 2023 -0500 9MB -> 300KB shrimp photo
samuel-ping · Dec 30, 2023 · a258646 · a258646
1 parent 802fff1
commit a258646
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 578 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -63,11 +63,11 @@ jobs:
       - name: Build with Next.js
         run: npx next build
 
-      - name: Add CNAME and a README to artifact
+      - name: Add .nojekyll and a README to artifact
         run: |
-          echo "samuelp.ing" > out/CNAME
+          touch out/.nojekyll
           echo "# Hi!" > out/README.md
-          echo "You're currently looking at the build artifacts of my website. To check out the code, switch over to the [Main branch](https://github.com/samuel-ping/personal-website)!" >> out/README.md
+          echo "You're currently looking at the build artifacts of my website. To check out the code, switch over to the [main repository](https://github.com/samuel-ping/personal-website)!" >> out/README.md
           echo "#### Note - This message was automatically generated." >> out/README.md
 
       - name: Push to samuel-ping.github.io
@@ -78,6 +78,9 @@ jobs:
           FOLDER: ./out
           SSH_PRIVATE_KEY: ${{ secrets.DEPLOY_PRIVATE_KEY }}
 
+      - name: Add CNAME
+        run: echo "samuelp.ing" > out/CNAME
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

diff --git a/.gitignore b/.gitignore
@@ -23,4 +23,5 @@ node_modules/
 npm-debug.log*
 
 # local
-.vscode
+.vscode
+*.DS_Store
diff --git a/README.md b/README.md
@@ -8,13 +8,3 @@ I built my website using Next.js and Tailwind CSS.
 
 ## Getting Started
 Run `npm i` to install packages. Then `npm run dev` to run the site locally in dev mode.
-
-### Past Stuff
-
-#### Netlify CMS
-
-I originally added Netlify CMS to simplify content creation on my site. I hosted a server on Heroku to authenticate me to access my CMS. Unfortunately Heroku/Salesforce terminated their free hosting plan so I got rid of it.
-
-#### Matomo Analytics
-
-In the past, I had also set up Matomo Analytics for fun, to see where in the world people are looking at my website from! But my server was secretly hosted on an anonymous AWS employee's account and sadly they don't work there anymore.
diff --git a/components/logo.js b/components/logo.js
@@ -1,5 +1,3 @@
-'use client';
-
 import Link from 'next/link';
 
 import SP from '@/components/sp';

diff --git a/components/navbar.js b/components/navbar.js
@@ -16,7 +16,7 @@ export default function Navbar({ navbarButtons }) {
       {({ open, close }) => (
         <>
           <nav className="flex items-center justify-between">
-            <Logo size={48} visible={true} />
+            <Logo isAnimated size={48} visible={true} />
 
             {/* Desktop nav */}
             <div className="hidden md:flex flex-row gap-x-4">

diff --git a/components/notFound.js b/components/notFound.js
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 
-import Shrimp from '@/public/assets/shrimp.png';
+import Shrimp from '@/public/assets/shrimp.webp';
 
 export default function NotFound() {
   return (

diff --git a/components/sp.js b/components/sp.js
@@ -1,21 +1,72 @@
-'use client';
+import { motion } from 'framer-motion';
 
 function SPLogo({ isAnimated, color, size, visible }) {
+  if (!isAnimated) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size * 0.65}
+        height={size}
+        viewBox="0 0 14.249 22.02"
+        stroke={color}
+        strokeWidth={2.425}
+        strokeOpacity={visible ? 1 : 0}
+      >
+        <g fill="none">
+          <path d="M10.188 1.993C6.663.943 4.293.881 2.64 2.248 1.544 3.133.985 4.243 1.295 5.314 1.728 6.604 3.632 7.3 5.361 7.65c2.112.478 4.378.843 6.166 1.787 1.623.84 1.875 3.113 1.031 4.344-.76 1.244-2.23 1.752-4.273 2.03l-5.888-.078" />
+          <path d="M3.354 11.296V22.02" />
+        </g>
+      </svg>
+    );
+  }
+
+  const pathVariants = {
+    hidden: {
+      pathLength: 0,
+    },
+    visible: {
+      pathLength: 1,
+      transition: {
+        duration: 2,
+        ease: 'easeInOut',
+      },
+    },
+  };
+
+  const delayedPathVariants = {
+    ...pathVariants,
+    visible: {
+      ...pathVariants.visible,
+      transition: {
+        ...pathVariants.visible.transition,
+        delay: 0.6,
+      },
+    },
+  };
+
   return (
-    <svg
+    <motion.svg
       xmlns="http://www.w3.org/2000/svg"
       width={size * 0.65}
       height={size}
       viewBox="0 0 14.249 22.02"
       stroke={color}
       strokeWidth={2.425}
       strokeOpacity={visible ? 1 : 0}
+      initial="hidden"
+      animate="visible"
     >
-      <g fill="none">
-        <path d="M10.188 1.993C6.663.943 4.293.881 2.64 2.248 1.544 3.133.985 4.243 1.295 5.314 1.728 6.604 3.632 7.3 5.361 7.65c2.112.478 4.378.843 6.166 1.787 1.623.84 1.875 3.113 1.031 4.344-.76 1.244-2.23 1.752-4.273 2.03l-5.888-.078" />
-        <path d="M3.354 11.296V22.02" />
-      </g>
-    </svg>
+      <motion.path
+        fill="none"
+        variants={pathVariants}
+        d="M10.188 1.993C6.663.943 4.293.881 2.64 2.248 1.544 3.133.985 4.243 1.295 5.314 1.728 6.604 3.632 7.3 5.361 7.65c2.112.478 4.378.843 6.166 1.787 1.623.84 1.875 3.113 1.031 4.344-.76 1.244-2.23 1.752-4.273 2.03l-5.888-.078"
+      />
+      <motion.path
+        fill="none"
+        variants={delayedPathVariants}
+        d="M3.354 11.296V22.02"
+      />
+    </motion.svg>
   );
 }
 

diff --git a/content/about.mdx b/content/about.mdx
@@ -2,8 +2,16 @@ Hey there! I'm Sam Ping. I recently graduated from Rutgers University- New Bruns
 
 #### Why computer science?
 
-Back in 3rd grade, I wanted to be an inventor when I grew up. I've unconsciously followed that aspiration throughout my life, from spending hours in the middle of my pile of Legos, to enjoying robotics classes, to rooting my phone so I could hack games and get infinite cash. I took my first introductory computer programming course in 8th grade which sparked my interest in computer science. I've come to realize that building things is my passion, so I've been pursuing that ever since.
+Back in 3rd grade, I wanted to be an inventor when I grew up. I've unconsciously followed that aspiration throughout my life, from spending hours in the middle of my pile of Legos, to enjoying robotics classes, to rooting my phone so I could hack games and get infinite cash.
+
+I got my first taste of computer science when I took my first introductory computer programming course in 8th grade, but the real spark for me was in freshman year of college, when I participated in Capital One's Software Engineering Summit. [That's a whole story in itself](https://github.com/samuel-ping/food-mood?tab=readme-ov-file#story)- but it was my first time building a website and I was hooked.
+
+Since then, I've come to realize that building things is my passion, so I've been pursuing that ever since. Building this website was like playing with Legos!
 
 #### 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.
+
+#### Is that why you chose to work at Mongo? Because their logo is green?
+
+... I will leave that as an exercise for the reader.
diff --git a/content/projects/personal-website.mdx b/content/projects/personal-website.mdx
@@ -8,7 +8,7 @@ website: https://samuel-ping.github.io
 tags: [react.js, netlify cms, matomo]
 ---
 
-My personal website is built with Next.js and styled with Tailwind CSS. This is the third iteration of my personal website!
+My personal website is built with Next.js and styled with Tailwind CSS. I also created a [wireframe](https://www.figma.com/file/jTaIHRr5oJLSE8uI1eg0YJ/personal-site?type=design&node-id=102%3A212&mode=design&t=BTqMOZDl8YAzO1H5-1) and picked up some Figma along the way!
 
 ### Past Features
 
@@ -22,6 +22,8 @@ In the past, I had also set up Matomo Analytics for fun, to see where in the wor
 
 ### Previous Versions
 
+**v3**: TODO (if you see this on my live site, I'll take the blame- not that there's anyone else to take it)
+
 **v2**: I didn't like my first version, so I remade it.
 
 **v1**: The [original version of my personal website](https://samuel-ping.github.io/personal-website-v1) was also my first time using React. I built it after Food Mood v1, so I had a basic understanding of web development and wanted to transfer that knowledge to React. Frankly, my first website was a bit of a mess, but I do think I'm a bit better at web development now. While I'm not the best at it, at least I know I'm capable of cranking out a website if I need to!