Restructured with PageBody and PageHeading components

src/app/(pages)/experience/page.tsx

@@ -1,16 +1,25 @@
-import FadeIn from '@/components/root/FadeIn';
-import ExperienceHeading from '@/components/experience/ExperienceHeading';
-import ExperienceBody from '@/components/experience/ExperienceBody';
+import PageHeading from '@/components/root/PageHeading';
+import PageBody from '@/components/root/PageBody';
+import Link from 'next/link';
+import { Fragment } from 'react';
 
 export default function Experience(): JSX.Element {
   return (
-    <div>
-      <FadeIn>
-        <ExperienceHeading />
-      </FadeIn>
-      <FadeIn order={1}>
-        <ExperienceBody />
-      </FadeIn>
-    </div>
+    <Fragment>
+      <PageHeading title='Experience.'>
+        <h2 className='text-2xl text-light font-thin pb-8'>
+          Things I did.
+        </h2>
+      </PageHeading>
+      <PageBody>
+        <p>
+          More functionality coming soon!&nbsp;
+          <Link href='assets/resume.pdf' className='transition font-bold text-light hover:text-lighter'>
+            Refer to my resume for now
+          </Link>
+          &nbsp;:)
+        </p>
+      </PageBody>
+    </Fragment>
   );
 }

src/app/(pages)/more/page.tsx

@@ -0,0 +1,26 @@
+import PageBody from '@/components/root/PageBody';
+import PageHeading from '@/components/root/PageHeading';
+import Link from 'next/link';
+import { Fragment } from 'react';
+
+// Future: talk about design, leadership, and favorites (music, movies, books, food, games)
+export default function More(): JSX.Element {
+  return (
+    <Fragment>
+      <PageHeading title='More of me.'>
+        <h2 className='text-2xl text-light font-thin pb-8'>
+          Other things I do!
+        </h2>
+      </PageHeading>
+      <PageBody>
+        <p>
+          More functionality coming soon!&nbsp;
+          <Link href='assets/resume.pdf' className='transition font-bold text-light hover:text-lighter'>
+            Refer to my resume for now
+          </Link>
+          &nbsp;:)
+        </p>
+      </PageBody>
+    </Fragment>
+  );
+}

src/app/(pages)/page.tsx

@@ -1,4 +1,4 @@
-import Hero from '../../components/home/hero';
+import Hero from '../../components/home/Hero';
 
 export default function Home() {
   return (

src/app/(pages)/projects/page.tsx

@@ -1,21 +1,25 @@
-import FadeIn from '@/components/root/FadeIn';
+import PageBody from '@/components/root/PageBody';
+import PageHeading from '@/components/root/PageHeading';
 import Link from 'next/link';
+import { Fragment } from 'react';
 
-export default function Skills(): JSX.Element {
+export default function Projects(): JSX.Element {
   return (
-    <FadeIn>
-      <div className='max-w-2xl'>
-        <div className='font-display'>
-          <h1 className='text-4xl pb-2'>Projects.</h1>
-          <h2 className='text-2xl text-light font-thin pb-8'>
-            Things I made.
-          </h2>
-        </div>
-        <div className='font-thin'>
-          <p>More functionality coming soon!&nbsp;
-            <Link href='assets/resume.pdf' className='transition font-bold text-light hover:text-lighter'>Refer to my resume for now</Link> :)</p>
-        </div>
-      </div>
-    </FadeIn>
+    <Fragment>
+      <PageHeading title='Projects.'>
+        <h2 className='text-2xl text-light font-thin pb-8'>
+          Things I made.
+        </h2>
+      </PageHeading>
+      <PageBody>
+        <p>
+          More functionality coming soon!&nbsp;
+          <Link href='assets/resume.pdf' className='transition font-bold text-light hover:text-lighter'>
+            Refer to my resume for now
+          </Link>
+          &nbsp;:)
+        </p>
+      </PageBody>
+    </Fragment>
   );
 }

src/app/(pages)/skills/page.tsx

@@ -1,21 +1,25 @@
-import FadeIn from '@/components/root/FadeIn';
+import PageHeading from '@/components/root/PageHeading';
+import PageBody from '@/components/root/PageBody';
 import Link from 'next/link';
+import { Fragment } from 'react';
 
 export default function Skills(): JSX.Element {
   return (
-    <FadeIn>
-      <div className='max-w-2xl'>
-        <div className='font-display'>
-          <h1 className='text-4xl pb-2'>Skills.</h1>
-          <h2 className='text-2xl text-light font-thin pb-8'>
-            Things I know.
-          </h2>
-        </div>
-        <div className='font-thin'>
-          <p>More functionality coming soon!&nbsp;
-            <Link href='assets/resume.pdf' className='transition font-bold text-light hover:text-lighter'>Refer to my resume for now</Link> :)</p>
-        </div>
-      </div>
-    </FadeIn>
+    <Fragment>
+      <PageHeading title='Skills.'>
+        <h2 className='text-2xl text-light font-thin pb-8'>
+          Things I know.
+        </h2>
+      </PageHeading>
+      <PageBody>
+        <p>
+          More functionality coming soon!&nbsp;
+          <Link href='assets/resume.pdf' className='transition font-bold text-light hover:text-lighter'>
+            Refer to my resume for now
+          </Link>
+          &nbsp;:)
+        </p>
+      </PageBody>
+    </Fragment>
   );
 }

src/components/experience/ExperienceCard.tsx

@@ -0,0 +1,6 @@
+export default function ExperienceCard(): JSX.Element {
+  return (
+    <div className='font-thin'>
+    </div>
+  );
+}

src/components/root/PageBody.tsx

@@ -0,0 +1,15 @@
+import FadeIn from './FadeIn';
+
+export default function PageBody({
+  children,
+}: {
+  children: React.ReactNode
+}): JSX.Element {
+  return (
+    <FadeIn order={2}>
+      <div className='font-thin'>
+        {children}
+      </div>
+    </FadeIn>
+  );
+}

src/components/root/PageHeading.tsx

@@ -0,0 +1,23 @@
+import FadeIn from './FadeIn';
+
+export default function PageHeading({
+  children,
+  title,
+}: {
+  children: React.ReactNode,
+  title: string,
+}): JSX.Element {
+  return (
+    <div className='max-w-2xl font-display'>
+      <FadeIn>
+        <h1 className='text-4xl pb-2'>{title}</h1>
+      </FadeIn>
+      <FadeIn order={1}>
+        <span>{children}</span>
+      </FadeIn>
+      {/* <h2 className='text-2xl text-light font-thin pb-8'>
+        Things I made.
+      </h2> */}
+    </div>
+  );
+}