Started working on the profile pages

src/components/MDX.tsx

@@ -28,7 +28,7 @@ const components = {
   ),
   blockquote: (props: Tag<HTMLQuoteElement>) => (
     <blockquote
-      className="rounded border-l-4 border-fg-700 pl-4 italic"
+      className="my-4 rounded border-l-4 border-fg-700 pl-4 italic"
       {...props}
     />
   ),
@@ -41,17 +41,17 @@ const components = {
     <hr className="my-4 rounded border-2 border-fg-700" {...props} />
   ),
   img: (props: Tag<HTMLImageElement>) => (
-    <img className="max-w-full" {...props} />
+    <img className="my-4 max-w-full rounded" {...props} />
   ),
   li: (props: Tag<HTMLLIElement>) => <li className="ml-4" {...props} />,
   ol: (props: Tag<HTMLOListElement>) => (
-    <ol className="ml-4 list-decimal" {...props} />
+    <ol className="my-2 ml-4 list-decimal" {...props} />
   ),
   ul: (props: Tag<HTMLUListElement>) => (
-    <ul className="ml-4 list-disc" {...props} />
+    <ul className="my-2 ml-4 list-disc" {...props} />
   ),
   pre: (props: Tag<HTMLPreElement>) => (
-    <pre className="overflow-auto rounded" {...props} />
+    <pre className="my-4 overflow-auto rounded" {...props} />
   ),
   strong: (props: HTMLTag) => <strong className="font-bold" {...props} />,
 };

src/components/layouts/MainLayout.tsx

@@ -5,7 +5,7 @@ export const MainLayout: React.FC<Children> = ({ children }) => {
   return (
     <div className="min-w-screen flex h-screen flex-row">
       <SidePanel />
-      <main className="w-full overflow-y-scroll">{children}</main>
+      <main className="flex-grow overflow-y-scroll">{children}</main>
     </div>
   );
 };

src/components/projects/ProjectCards.tsx

@@ -89,8 +89,8 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
               alt={title}
             />
           </div>
-          <div className="mx-4 my-4 flex flex-grow flex-col justify-between gap-y-2 overflow-hidden overflow-ellipsis transition-all">
+          <div className="mx-4 flex flex-grow flex-col justify-between gap-y-2 overflow-hidden overflow-ellipsis transition-all">
-            <label className="block overflow-x-clip overflow-ellipsis whitespace-nowrap text-left font-bold text-r-xl">
+            <label className="mt-4 block overflow-x-clip overflow-ellipsis whitespace-nowrap text-left font-bold text-r-xl">
               {title}
             </label>
             {showMore && (
@@ -100,7 +100,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
                 </p>
               </WithScroll>
             )}
-            <div className="flex flex-row items-center gap-x-3">
+            <div className="mb-4 flex flex-row items-center gap-x-3">
               <ProjectLifecycleIndicator state={state} />
               <p className="overflow-ellipsis">
                 {/* TODO: Change to time last updated */}

src/pages/profile/[username].tsx

@@ -22,12 +22,20 @@ const Profile: NextPage<
         <p>{data?.bio}</p>
       </div>
       <Divider className="my-11" />
-      <h3 className="mx-11 font-bold text-r-3xl">My Projects</h3>
+      <h2 className="mx-11 font-bold text-r-4xl">My Projects</h2>
-      <ProjectCardList projects={data?.authoredProjects} />
+      {data && data.authoredProjects.length > 0 ? (
-      <h3 className="mx-11 font-bold text-r-3xl">
+        <ProjectCardList projects={data?.authoredProjects} />
+      ) : (
+        <p className="mx-11">There are no projects here yet.</p>
+      )}
+      <h2 className="mx-11 font-bold text-r-4xl">
         Projects I{"'"}ve Worked On
-      </h3>
+      </h2>
-      <ProjectCardList projects={data?.projects} />
+      {data && data.projects.length > 0 ? (
+        <ProjectCardList projects={data?.projects} />
+      ) : (
+        <p className="mx-11">There are no projects here yet.</p>
+      )}
     </MainLayout>
   );
 };

src/pages/projects/[projectId].tsx

@@ -57,43 +57,13 @@ const SpecificProject: NextPage<
 
   return (
     <MainLayout>
-      <article className="mx-11">
+      <article className="mx-11 max-w-4xl flex-grow">
         <h1 className="mb-6 mt-8 font-bold text-primary text-r-5xl">
           {data?.title}
         </h1>
         <MDX {...description} />
       </article>
-      {/* {!data ? (
+      {/* Right side panel */}
-        <p>Loading...</p>
-      ) : (
-        <>
-          <p>{data.title}</p>
-          <p>{formatDate(data.createdAt)}</p>
-          <p>{data.description}</p>
-          <p>ID: {data.id}</p>
-          <p>State: {data.state}</p>
-          <div className="flex flex-row gap-x-4">
-            <Button
-              variant={{ size: "small" }}
-              disabled={
-                data.state === "PROPOSAL" || isUpdatingState || isRefetching
-              }
-              onClick={() => changeState(-1)}
-            >
-              Prev State
-            </Button>
-            <Button
-              variant={{ size: "small" }}
-              disabled={
-                data.state === "COMPLETE" || isUpdatingState || isRefetching
-              }
-              onClick={() => changeState(1)}
-            >
-              Next State
-            </Button>
-          </div>
-        </>
-      )} */}
     </MainLayout>
   );
 };
@@ -129,56 +99,12 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   const projectId = Array.isArray(ctx.params.projectId)
     ? ctx.params.projectId.join("")
     : ctx.params.projectId;
-  // const project = await ssg.projects.getProjectById.fetch({ projectId });
-  // const projectDescription = project?.description ?? "";
-  // const mdxSource = await serialize(projectDescription);
 
-  const mdxSource = await serialize(
+  const project = await ssg.projects.getProjectById.fetch({ projectId });
-    `
+  const projectDescription = project?.description ?? "";
-# Heading 1
+  const mdxSource = await serialize(projectDescription, {
-
+    mdxOptions: { rehypePlugins: [rehypeHighlight] },
-## Heading 2
+  });
-
-### Heading 3
-
-#### Heading 4
-
-##### Heading 5
-
-###### Heading 6
-
-Paragraph text.
-
-[Link](#)
-
-> Blockquote text
-
-Some \`inline code\` example.
-
----
-
-![Image](#)
-
-- List item 1
-- List item 2
-- List item 3
-
-1. Ordered item 1
-2. Ordered item 2
-3. Ordered item 3
-
-\`\`\`javascript
-function greet() {
-  console.log("Hello, world!");
-}
-\`\`\`
-
-*Emphasized* text.
-
-**Strong** text.
-      `,
-    { mdxOptions: { rehypePlugins: [rehypeHighlight] } }
-  );
 
   return { props: { projectId, description: mdxSource } };
 };

src/utils/styles/globals.css

@@ -1,6 +1,4 @@
 @tailwind base;
-@tailwind components;
-@tailwind utilities;
 
 html,
 body {
@@ -13,6 +11,13 @@ a {
   @apply text-r-lg;
 }
 
+::selection {
+  @apply bg-[#504945];
+}
+
+@tailwind components;
+@tailwind utilities;
+
 /* Special  */
 
 .custom-home-bg {