Project content refresh (#51)

* Content refresh and small style tweaks

* Add new project

content/projects/css-snes-controller.mdx

@@ -1,6 +1,6 @@
 ---
 title: CSS SNES Controller
-summary: Recreating the SNES controller with pure CSS 🎮
+summary: Recreating the SNES controller with pure CSS.
 category: sideproject
 repoUrl: https://github.com/melanieseltzer/css-snes-controller
 demoUrl: https://melanieseltzer.github.io/css-snes-controller/

content/projects/mels-toolkit.mdx

@@ -1,6 +1,6 @@
 ---
 title: '@mels/toolkit'
-summary: Tools and configs for speedy development ⚡️
+summary: Collection of tools and configs for speedy development.
 category: oss
 repoUrl: https://github.com/melanieseltzer/toolkit
 repoLang: javascript

content/projects/react-use-caret-position.mdx

@@ -10,10 +10,10 @@ tech:
   - typescript
 ---
 
-## Motivation
-
 [![npm (scoped)](https://img.shields.io/npm/v/react-use-caret-position.svg)](https://www.npmjs.com/package/react-use-caret-position)
 
+## Motivation
+
 If there is some side effect/async code in an input's `onChange` event handler (e.g. dispatching a Redux action without doing anything else, format text in some way like uppercase, etc), the caret will annoyingly be booted to the end of the input after each keystroke.
 
 `react-use-caret-position` fixes this undesirable behavior by keeping track of the caret position and setting it on render.

content/projects/sara-diercks-portfolio.mdx

@@ -0,0 +1,29 @@
+---
+title: GIS portfolio of Sara Diercks
+summary: Showcasing projects from UCLA Extension's GIS and Geospatial Technology certificate program.
+category: sideproject
+repoUrl: https://github.com/melanieseltzer/saradiercks.com
+demoUrl: https://saradiercks.vercel.app
+repoLang: javascript
+tech:
+  - react
+  - nextjs
+  - tailwind
+  - Hygraph
+---
+
+## Key Features
+
+- Easy updates to projects + "about me" content with Hygraph CMS
+- Responsive/optimized project images using `next/image` and [custom Hygraph image component](https://github.com/melanieseltzer/saradiercks.com/blob/main/src/components/HygraphImage/HygraphImage.js) ✨
+  - Utilizes `srcset` and `sizes` for the right image size
+  - `webp` enabled when supported by the browser
+  - Fancy blur placeholder while loading
+  - Preload LCP image above the fold
+
+## Tech Stack
+
+- Framework: [Next.js](https://nextjs.org/)
+- Deployment: [Vercel](https://vercel.com/)
+- CMS: [Hygraph](https://hygraph.com/)
+- Styling: [Tailwind](https://tailwindcss.com/)

src/content/project/components/ProjectsList.tsx

@@ -32,19 +32,22 @@ export function ProjectsList({ projects }: Props) {
                 </Heading>
 
                 <Paragraph className="whitespace-break-spaces mb-2">
-                  {summary}{' '}
-                  {hasProjectArticle && (
+                  {summary}
+                </Paragraph>
+
+                {hasProjectArticle && (
+                  <Paragraph>
                     <Link
                       href={`/projects/${slug}`}
-                      className="hover:underline"
+                      className="font-semibold hover:underline"
                     >
                       <GradientText>
                         Read more <span aria-hidden="true">&rarr;</span>
                         <span className="sr-only">about this project</span>
                       </GradientText>
                     </Link>
-                  )}
-                </Paragraph>
+                  </Paragraph>
+                )}
 
                 <Spacer size="4" />
               </div>

src/pages/projects/[slug].tsx

@@ -1,9 +1,10 @@
 import { ParsedUrlQuery } from 'querystring';
 
-import { RxDividerVertical as Separator } from 'react-icons/rx';
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
 
+import { Heading } from '~/components/Heading';
 import { MDXComponent } from '~/components/MDXComponent';
+import { Paragraph } from '~/components/Paragraph';
 import { Prose } from '~/components/Prose';
 import { SEO } from '~/components/seo';
 import { Spacer } from '~/components/Spacer';
@@ -26,22 +27,22 @@ export default function ProjectPage({
       <Spacer size="8" />
 
       <Prose autoLinkHeadings as="article" className="mx-auto">
-        <header className="mb-12 border-b dark:border-gray-700">
-          <h1>{title}</h1>
+        <header className="mb-12 border-b pb-8 dark:border-gray-700">
+          <div className="not-prose">
+            <Heading>{title}</Heading>
 
-          <div className="not-prose -mt-4 flex flex-wrap items-center gap-4">
+            <Paragraph lead>{summary}</Paragraph>
+          </div>
+
+          <div className="not-prose flex flex-wrap items-center gap-4">
             <div className="flex flex-wrap gap-2">
               {demoUrl && <DemoButton href={demoUrl} />}
 
               <SourceCodeButton href={repoUrl} />
             </div>
 
-            <Separator aria-hidden="true" size={15} className="text-gray-400" />
-
             <TechStack list={tech} size="lg" showLabel />
           </div>
-
-          <p className="lead">{summary}</p>
         </header>
 
         <MDXComponent source={project.body.code} />