Major overhaul

.github/workflows/deploy.yml

@@ -1,7 +1,7 @@
 # Builds and pushes frontend to gh-pages branch
 # Pushes backend to server branch
 
-name: CI
+name: deploy next.js site to gh pages
 
 # Controls when the action will run.
 on:
@@ -14,35 +14,75 @@ on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
 jobs:
   # pushes frontend code to gh-pages branch
-  client-integration:
-    name: integrate-client
+  build:
     runs-on: ubuntu-latest
 
     steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
-
-      # building the website
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '18'
-      - name: build site
+      # Checks out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
         run: |
-          npm ci
-          npm run build
-          npm run export
-          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 my [personal-website repository!](https://github.com/samuel-ping/personal-website)!" >> out/README.md
-          echo "#### Note - This message was automatically generated." >> out/README.md
-        working-directory: ./
-
-      - name: push build artifacts to samuel-ping.github.io
-        uses: s0/git-publish-subdir-action@develop
-        env:
-          REPO: git@github.com:samuel-ping/samuel-ping.github.io.git
-          BRANCH: gh-pages
-          FOLDER: ./out
-          SSH_PRIVATE_KEY: ${{ secrets.DEPLOY_PRIVATE_KEY }}
+          echo "manager=npm" >> $GITHUB_OUTPUT
+          echo "command=ci" >> $GITHUB_OUTPUT
+          echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+          exit 0
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: npm
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
+      - name: Install dependencies
+        run: npm ci
+      - name: Build with Next.js
+        run: npx next build
+      - name: Static HTML export with Next.js
+        run: npx next export
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -6,6 +6,9 @@ This is my personal website's repository! Hopefully you're here because you like
 
 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

app/about/page.js

@@ -0,0 +1,17 @@
+import { getMDXComponent } from 'mdx-bundler/client';
+
+import { Components as MDXComponents } from '@components/mdx/components';
+
+import { GetAboutMDX } from '@utils/mdxUtils';
+
+export default async function Page() {
+  const { code } = await GetAboutMDX('about');
+  const Component = getMDXComponent(code);
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <span className="text-4xl font-medium">About me</span>
+      <Component components={MDXComponents} />
+    </div>
+  );
+}

app/error.js

@@ -0,0 +1,7 @@
+'use client';
+
+import NotFound from '@components/notFound';
+
+export default function Error() {
+  return <NotFound />;
+}

app/layout.js

@@ -0,0 +1,26 @@
+import Navbar from '@components/navbar';
+import Footer from '@components/footer';
+
+import NavbarButtons from '@config/navbarButtons.config';
+
+import './styles/globals.css';
+
+export const metadata = {
+  title: {
+    default: 'Samuel Ping',
+    template: '%s | Sam Ping',
+  },
+  description: 'Welcome to Next.js',
+};
+
+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-100">
+        <Navbar navbarButtons={NavbarButtons} />
+        <main className="flex flex-col flex-grow gap-y-14">{children}</main>
+        <Footer navbarButtons={NavbarButtons} />
+      </body>
+    </html>
+  );
+}

app/not-found.js

@@ -0,0 +1,5 @@
+import NotFound from '@components/notFound';
+
+export default function Error() {
+  return <NotFound />;
+}

app/page.js

@@ -0,0 +1,56 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import Button from '@components/rightArrowButton';
+import { ProjectCardCarousel } from '@components/projectCardCarousel';
+
+import profilePic from '@public/assets/sam.jpg';
+
+import { GetProjectDetails } from '@utils/mdxUtils';
+
+export default async function Page() {
+  const projects = await GetProjectDetails(4);
+
+  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">
+          <span className="text-4xl font-medium">
+            Hey! I&apos;m Sam Ping, 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.
+          </span>
+          <Button text={'more about me'} url={'/about'} />
+        </div>
+
+        <Image
+          src={profilePic}
+          alt="Photo of Sam"
+          placeholder="blur"
+          priority
+          className="w-48 h-48 md:w-64 md:h-64 rounded-full object-cover"
+        />
+      </div>
+
+      {/* projects section */}
+      <div className="flex flex-col gap-y-8">
+        <div className="flex flex-col gap-y-2">
+          <span className="text-4xl font-medium">Projects</span>
+          <span className="text-base font-light">
+            Here are some of my recent projects that I&apos;ve been working on!
+            Or,{' '}
+            <Link href="/projects" className="underline">
+              see all my projects
+            </Link>
+            .
+          </span>
+        </div>
+        <ProjectCardCarousel projects={projects} />
+      </div>
+    </>
+  );
+}

app/projects/[slug]/page.js

@@ -0,0 +1,65 @@
+import { getMDXComponent } from 'mdx-bundler/client';
+
+import { CodeBracketsIcon, ExternalLinkIcon } from '@components/icons';
+import Chip from '@components/chip';
+import BackButton from '@components/leftArrowButton';
+import { Components as MDXComponents } from '@components/mdx/components';
+import IconButton from '@components/iconButton';
+
+import { GetProject, GetProjectDetails } from '@utils/mdxUtils';
+
+export async function generateStaticParams() {
+  const projects = await GetProjectDetails();
+
+  return projects.props.projects.map((project) => ({
+    slug: project.title,
+  }));
+}
+
+export default async function Page({ params }) {
+  const { code, details } = await GetProject(`projects/${params.slug}`);
+  const Component = getMDXComponent(code);
+
+  const tags = details.tags;
+
+  return (
+    <div className="flex flex-col gap-y-10">
+      <div className="flex flex-col gap-y-2">
+        <BackButton text="all projects" url="/projects" />
+        <span className="text-4xl font-medium">{details.title}</span>
+        <span className="text-xl font-light italic">{details.dates}</span>
+        <div className="flex flex-row gap-1">
+          {details.repo ? (
+            <IconButton
+              text="view code"
+              icon={<CodeBracketsIcon className={''} />}
+              url={details.repo}
+            />
+          ) : (
+            <></>
+          )}
+
+          {details.website ? (
+            <IconButton
+              text="view site"
+              icon={<ExternalLinkIcon className={''} />}
+              url={details.website}
+            />
+          ) : (
+            <></>
+          )}
+        </div>
+      </div>
+      <Component components={MDXComponents} />
+      {/* tags */}
+      <div className="w-full flex flex-row flex-wrap gap-1">
+        <span>tags:</span>
+        {tags === undefined || tags.length == 0 ? (
+          <></>
+        ) : (
+          tags.map((tag) => <Chip text={tag} key={tag} />)
+        )}
+      </div>
+    </div>
+  );
+}

app/projects/page.js

@@ -0,0 +1,26 @@
+import ProjectCard from '@components/projectCard';
+
+import { GetProjectDetails } from '@utils/mdxUtils';
+
+export default async function Page() {
+  const projects = await GetProjectDetails();
+
+  return (
+    <div className="flex flex-col gap-y-4">
+      <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">
+        {projects.props.projects.map((project) => {
+          return (
+            <ProjectCard
+              key={project.details.title}
+              title={project.details.title}
+              dates={project.details.dates}
+              gist={project.details.gist}
+              tags={project.details.tags}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

components/Chip.js

@@ -0,0 +1,13 @@
+'use client';
+
+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="text-sm font-normal leading-none max-w-full flex-initial">
+        {text}
+      </div>
+    </div>
+  );
+};
+
+export default Chip;

components/Footer.js

@@ -0,0 +1,53 @@
+'use client';
+
+import Link from 'next/link';
+
+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>
+      </div>
+    </div>
+  </footer>
+);
+
+export default Footer;