feat(artboard): implement 8 new templates

.env.example

@@ -8,10 +8,14 @@ PORT=3000
 __DEV__CLIENT_PORT=5173 # Only used in development
 __DEV__CLIENT_URL=http://localhost:5173 # Only used in development
 
+# Artboard Port & URL (for development)
+__DEV__ARTBOARD_PORT=6173 # Only used in development
+__DEV__ARTBOARD_URL=http://localhost:6173 # Only used in development
+
 # URLs
-PUBLIC_URL=http://localhost:3000 # This must reference a publicly accessible domain or IP address, not a docker container ID
-STORAGE_URL=http://localhost:9000 # This must reference a publicly accessible domain or IP address, not a docker container ID
-CHROME_URL=ws://localhost:8080
+# These URLs must reference a publicly accessible domain or IP address, not a docker container ID (depending on your compose setup)
+PUBLIC_URL=http://localhost:3000
+STORAGE_URL=http://localhost:9000
 
 # Database (Prisma/PostgreSQL)
 # This can be swapped out to use any other database, like MySQL
@@ -33,6 +37,7 @@ REFRESH_TOKEN_SECRET=refresh_token_secret
 # generated with `openssl rand -hex 32`
 CHROME_PORT=8080
 CHROME_TOKEN=chrome_token
+CHROME_URL=ws://localhost:8080
 
 # Mail Server (for e-mails)
 # For testing, you can use https://ethereal.email/create

CONTRIBUTING.md

@@ -0,0 +1,86 @@
+# Contributing to Reactive Resume
+
+## Getting the project set up locally
+
+There are a number of Docker Compose examples that are suitable for a wide variety of deployment strategies depending on your use-case. All of the examples can be found in the `tools/compose` folder.
+
+To run the development environment of the application locally on your computer, please follow these steps:
+
+#### Requirements
+
+- Docker (with Docker Compose)
+- Node.js 18 or higher (with pnpm)
+
+### 1. Fork and Clone the Repository
+
+```sh
+git clone https://github.com/{your-github-username}/Reactive-Resume.git
+cd Reactive-Resume
+```
+
+### 2. Install dependencies
+
+```sh
+pnpm install
+```
+
+### 3. Copy .env.example to .env
+
+```sh
+cp .env.example .env
+```
+
+Please have a brief look over the environment variables and change them if necessary, for example, change the ports if you have a conflicting service running on your machine already.
+
+### 4. Fire up all the required services through Docker Compose
+
+```sh
+docker compose -f tools/compose/development.yml --env-file .env -p reactive-resume up -d
+```
+
+It should take just under half a minute for all the services to be booted up correctly. You can check the status of all services by running `docker compose -p reactive-resume ps`
+
+### 5. Run the development server
+
+```sh
+pnpm dev
+```
+
+If everything went well, the frontend should be running on `http://localhost:5173` and the backend api should be accessible through `http://localhost:3000`. There is a proxy present to also route all requests to `http://localhost:5173/api` directly to the API. If you need to change the `PORT` environment variable for the server, please make sure to update the `apps/client/proxy.conf.json` file as well with the new endpoint.
+
+You can also visit `http://localhost:3000/api/health`, the health check endpoint of the server to check if the server is running correctly, and it is able to connect to all it's dependent services. The output of the health check endpoint should look like this:
+
+```json
+{
+  "status": "ok",
+  "info": {
+    "database": { "status": "up" },
+    "storage": { "status": "up" },
+    "browser": { "status": "up", "version": "Chrome/119.0.6045.9" },
+    "redis": { "status": "up" }
+  },
+  "error": {},
+  "details": {
+    "database": { "status": "up" },
+    "storage": { "status": "up" },
+    "browser": { "status": "up", "version": "Chrome/119.0.6045.9" },
+    "redis": { "status": "up" }
+  }
+}
+```
+
+---
+
+## Pushing changes to the app
+
+Firstly, ensure that there is a GitHub Issue created for the feature or bugfix you are working on. If it does not exist, create an issue and assign it to yourself.
+
+Once you are happy with the changes you've made locally, commit it to your repository. Note that the project makes use of Conventional Commits, so commit messages would have to be in a specific format for it to be accepted. For example, a commit message to fix the translation on the homepage could look like:
+
+```
+git commit -m "fix(homepage): fix typo on homepage in the faq section"
+```
+
+It helps to be as decriptive as possible in commit messages so that users can be aware of the changes made by you.
+
+Finally, create a pull request to merge the changes on your forked repository to the original repository hosted on AmruthPillai/Reactive-Resume. I can take a look at the changes you've made when I have the time and have it merged onto the app.

apps/artboard/index.html

@@ -1,10 +1,15 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <title>Artboard | Reactive Resume</title>
     <base href="/" />
 
+    <!-- SEO -->
+    <title>Reactive Resume - A free and open-source resume builder</title>
+    <meta
+      name="description"
+      content="A free and open-source resume builder that simplifies the process of creating, updating, and sharing your resume."
+    />
+
     <!-- Meta -->
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -29,6 +34,7 @@
   <body>
     <div id="root"></div>
 
+    <!-- Scripts -->
     <script type="module" src="/src/main.tsx"></script>
 
     <!-- Phosphor Icons -->

apps/artboard/src/components/page.tsx

@@ -24,8 +24,8 @@ export const Page = ({ mode = "preview", pageNumber, children }: Props) => {
       style={{
         fontFamily,
         padding: page.margin,
-        width: `${pageSizeMap[page.format].width * MM_TO_PX * window.devicePixelRatio}px`,
-        minHeight: `${pageSizeMap[page.format].height * MM_TO_PX * window.devicePixelRatio}px`,
+        width: `${pageSizeMap[page.format].width * MM_TO_PX}px`,
+        minHeight: `${pageSizeMap[page.format].height * MM_TO_PX}px`,
       }}
     >
       {mode === "builder" && page.options.pageNumbers && (
@@ -40,7 +40,7 @@ export const Page = ({ mode = "preview", pageNumber, children }: Props) => {
         <div
           className="absolute inset-x-0 border-b border-dashed"
           style={{
-            top: `${pageSizeMap[page.format].height * MM_TO_PX * window.devicePixelRatio}px`,
+            top: `${pageSizeMap[page.format].height * MM_TO_PX}px`,
           }}
         />
       )}

apps/artboard/src/components/picture.tsx

@@ -1,8 +1,12 @@
-import { isUrl } from "@reactive-resume/utils";
+import { cn, isUrl } from "@reactive-resume/utils";
 
 import { useArtboardStore } from "../store/artboard";
 
-export const Picture = () => {
+type PictureProps = {
+  className?: string;
+};
+
+export const Picture = ({ className }: PictureProps) => {
   const picture = useArtboardStore((state) => state.resume.basics.picture);
 
   if (!isUrl(picture.url) || picture.effects.hidden) return null;
@@ -11,7 +15,7 @@ export const Picture = () => {
     <img
       src={picture.url}
       alt="Profile"
-      className="object-cover"
+      className={cn("relative z-20 object-cover", className)}
       style={{
         maxWidth: `${picture.size}px`,
         aspectRatio: `${picture.aspectRatio}`,

apps/artboard/src/pages/artboard.tsx

@@ -30,6 +30,19 @@ export const ArtboardPage = () => {
   useEffect(() => {
     document.documentElement.style.setProperty("font-size", `${metadata.typography.font.size}px`);
     document.documentElement.style.setProperty("line-height", `${metadata.typography.lineHeight}`);
+
+    document.documentElement.style.setProperty("--font-size", `${metadata.typography.font.size}px`);
+    document.documentElement.style.setProperty(
+      "--line-height",
+      `${metadata.typography.lineHeight}`,
+    );
+
+    document.documentElement.style.setProperty("--color-text", `${metadata.theme.text}`);
+    document.documentElement.style.setProperty("--color-primary", `${metadata.theme.primary}`);
+    document.documentElement.style.setProperty(
+      "--color-background",
+      `${metadata.theme.background}`,
+    );
   }, [metadata]);
 
   // Underline Links

apps/artboard/src/pages/builder.tsx

@@ -1,17 +1,20 @@
 import { SectionKey } from "@reactive-resume/schema";
-import { pageSizeMap } from "@reactive-resume/utils";
-import { useEffect, useRef } from "react";
+import { pageSizeMap, TemplateKey } from "@reactive-resume/utils";
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useMemo, useRef } from "react";
 import { ReactZoomPanPinchRef, TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 
 import { MM_TO_PX, Page } from "../components/page";
 import { useArtboardStore } from "../store/artboard";
-import { Rhyhorn } from "../templates/rhyhorn";
+import { getTemplate } from "../templates";
 
 export const BuilderLayout = () => {
   const transformRef = useRef<ReactZoomPanPinchRef>(null);
   const format = useArtboardStore((state) => state.resume.metadata.page.format);
   const layout = useArtboardStore((state) => state.resume.metadata.layout);
-  const template = useArtboardStore((state) => state.resume.metadata.template);
+  const template = useArtboardStore((state) => state.resume.metadata.template as TemplateKey);
+
+  const Template = useMemo(() => getTemplate(template), [template]);
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
@@ -50,13 +53,21 @@ export const BuilderLayout = () => {
           gridTemplateColumns: `repeat(${layout.length}, 1fr)`,
         }}
       >
-        {layout.map((columns, pageIndex) => (
-          <Page key={pageIndex} mode="builder" pageNumber={pageIndex + 1}>
-            {template === "rhyhorn" && (
-              <Rhyhorn isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
-            )}
-          </Page>
-        ))}
+        <AnimatePresence>
+          {layout.map((columns, pageIndex) => (
+            <motion.div
+              layout
+              key={pageIndex}
+              initial={{ opacity: 0, x: -200 }}
+              animate={{ opacity: 1, x: 0, transition: { delay: pageIndex * 0.3 } }}
+              exit={{ opacity: 0, x: -200 }}
+            >
+              <Page mode="builder" pageNumber={pageIndex + 1}>
+                <Template isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
+              </Page>
+            </motion.div>
+          ))}
+        </AnimatePresence>
       </TransformComponent>
     </TransformWrapper>
   );

apps/artboard/src/pages/preview.tsx

@@ -1,20 +1,22 @@
 import { SectionKey } from "@reactive-resume/schema";
+import { TemplateKey } from "@reactive-resume/utils";
+import { useMemo } from "react";
 
 import { Page } from "../components/page";
 import { useArtboardStore } from "../store/artboard";
-import { Rhyhorn } from "../templates/rhyhorn";
+import { getTemplate } from "../templates";
 
 export const PreviewLayout = () => {
   const layout = useArtboardStore((state) => state.resume.metadata.layout);
-  const template = useArtboardStore((state) => state.resume.metadata.template);
+  const template = useArtboardStore((state) => state.resume.metadata.template as TemplateKey);
+
+  const Template = useMemo(() => getTemplate(template), [template]);
 
   return (
     <>
       {layout.map((columns, pageIndex) => (
         <Page key={pageIndex} mode="preview" pageNumber={pageIndex + 1}>
-          {template === "rhyhorn" && (
-            <Rhyhorn isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
-          )}
+          <Template isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
         </Page>
       ))}
     </>

apps/artboard/src/providers/index.tsx

@@ -1,3 +1,4 @@
+import { sampleResume } from "@reactive-resume/schema";
 import { useEffect } from "react";
 import { Outlet } from "react-router-dom";
 
@@ -30,9 +31,9 @@ export const Providers = () => {
   }, [setResume]);
 
   // Only for testing, in production this will be fetched from window.postMessage
-  // useEffect(() => {
-  //   setResume(sampleResume);
-  // }, [setResume]);
+  useEffect(() => {
+    setResume(sampleResume);
+  }, [setResume]);
 
   if (!resume) return null;
 

apps/artboard/src/styles/main.css

@@ -15,5 +15,5 @@
 }
 
 .wysiwyg {
-  @apply prose max-w-none text-current prose-headings:my-1.5 prose-p:my-1.5 prose-ul:my-1.5 prose-li:my-1.5 prose-ol:my-1.5 prose-img:my-1.5 prose-hr:my-1.5;
+  @apply prose max-w-none text-current prose-headings:mt-0 prose-headings:mb-2 prose-p:mt-0 prose-p:mb-2 prose-ul:mt-0 prose-ul:mb-2 prose-li:mt-0 prose-li:mb-2 prose-ol:mt-0 prose-ol:mb-2 prose-img:mt-0 prose-img:mb-2 prose-hr:mt-0 prose-hr:mb-2 prose-p:leading-normal;
 }

apps/artboard/src/templates/azurill.tsx

@@ -0,0 +1,506 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl, linearTransform } from "@reactive-resume/utils";
+import get from "lodash.get";
+import React, { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="flex flex-col items-center justify-center space-y-2 pb-2 text-center">
+      <Picture />
+
+      <div>
+        <div className="text-2xl font-bold">{basics.name}</div>
+        <div className="text-base">{basics.headline}</div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-sm">
+        {basics.location && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-map-pin text-primary" />
+            <div>{basics.location}</div>
+          </div>
+        )}
+        {basics.phone && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-phone text-primary" />
+            <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+              {basics.phone}
+            </a>
+          </div>
+        )}
+        {basics.email && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-at text-primary" />
+            <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+              {basics.email}
+            </a>
+          </div>
+        )}
+        <Link url={basics.url} />
+        {basics.customFields.map((item) => (
+          <div key={item.id} className="flex items-center gap-x-1.5">
+            <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+            <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <div className="mb-2 hidden font-bold uppercase text-primary group-[.main]:block">
+        <h4>{section.name}</h4>
+      </div>
+
+      <div className="mb-2 hidden items-center gap-x-2 text-center font-bold uppercase text-primary group-[.sidebar]:flex">
+        <div className="h-1.5 w-1.5 rounded-full border border-primary" />
+        <h4>{section.name}</h4>
+        <div className="h-1.5 w-1.5 rounded-full border border-primary" />
+      </div>
+
+      <main className={cn("relative space-y-2", "border-l border-primary pl-4")}>
+        <div className="absolute left-[-4.5px] top-[8px] hidden h-[8px] w-[8px] rounded-full bg-primary group-[.main]:block" />
+
+        <div
+          className="wysiwyg"
+          style={{ columns: section.columns }}
+          dangerouslySetInnerHTML={{ __html: section.content }}
+        />
+      </main>
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="relative h-1 w-[128px] group-[.sidebar]:mx-auto">
+    <div className="absolute inset-0 h-1 w-[128px] rounded bg-primary opacity-25" />
+    <div
+      className="absolute inset-0 h-1 rounded bg-primary"
+      style={{ width: linearTransform(level, 0, 5, 0, 128) }}
+    />
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <div className="mb-2 hidden font-bold uppercase text-primary group-[.main]:block">
+        <h4>{section.name}</h4>
+      </div>
+
+      <div className="mx-auto mb-2 hidden items-center gap-x-2 text-center font-bold uppercase text-primary group-[.sidebar]:flex">
+        <div className="h-1.5 w-1.5 rounded-full border border-primary" />
+        <h4>{section.name}</h4>
+        <div className="h-1.5 w-1.5 rounded-full border border-primary" />
+      </div>
+
+      <div
+        className="grid gap-3 group-[.sidebar]:mx-auto group-[.sidebar]:text-center"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div
+                key={item.id}
+                className={cn(
+                  "relative space-y-2",
+                  "border-primary group-[.main]:border-l group-[.main]:pl-4",
+                  className,
+                )}
+              >
+                <div className="leading-snug">{children?.(item as T)}</div>
+
+                {summary && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level && level > 0 && <Rating level={level} />}
+
+                {keywords && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+
+                {url && <Link url={url} />}
+
+                <div className="absolute left-[-4.5px] top-px hidden h-[8px] w-[8px] rounded-full bg-primary group-[.main]:block" />
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div className="leading-snug">
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.company}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+          <div className="font-bold italic">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.institution}</div>
+          <div>{item.area}</div>
+          <div>{item.score}</div>
+          <div>{item.studyType}</div>
+          <div className="font-bold italic">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.title}</div>
+          <div>{item.awarder}</div>
+          <div className="font-bold italic">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.issuer}</div>
+          <div className="font-bold italic">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.publisher}</div>
+          <div className="font-bold italic">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.organization}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+          <div className="font-bold italic">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="fluencyLevel">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.fluency}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div>
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+
+            <div className="font-bold italic">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div>
+          <div>
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+
+            <div className="font-bold italic">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles":
+      return <Profiles />;
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Azurill = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="space-y-3">
+      {isFirstPage && <Header />}
+
+      <div className="grid grid-cols-3 gap-x-4">
+        <div className="sidebar group col-span-1 space-y-4">
+          {sidebar.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+
+        <div className="main group col-span-2 space-y-4">
+          {main.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/bronzor.tsx

@@ -0,0 +1,513 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="flex flex-col items-center space-y-2 text-center">
+      <Picture />
+
+      <div>
+        <div className="text-2xl font-bold">{basics.name}</div>
+        <div className="text-base">{basics.headline}</div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+        {basics.location && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-map-pin text-primary" />
+            <div>{basics.location}</div>
+          </div>
+        )}
+        {basics.phone && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-phone text-primary" />
+            <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+              {basics.phone}
+            </a>
+          </div>
+        )}
+        {basics.email && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-at text-primary" />
+            <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+              {basics.email}
+            </a>
+          </div>
+        )}
+        <Link url={basics.url} />
+        {basics.customFields.map((item) => (
+          <div key={item.id} className="flex items-center gap-x-1.5">
+            <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+            <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id} className="grid grid-cols-5 border-t pt-2.5">
+      <div className="col-span-1">
+        <h4 className="text-base font-bold">{section.name}</h4>
+      </div>
+
+      <div
+        className="wysiwyg col-span-4"
+        style={{ columns: section.columns }}
+        dangerouslySetInnerHTML={{ __html: section.content }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("h-2 w-2 rounded-full border border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid grid-cols-5 border-t pt-2.5">
+      <div className="col-span-1">
+        <h4 className="text-base font-bold">{section.name}</h4>
+      </div>
+
+      <div
+        className="col-span-4 grid gap-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div className="leading-snug">
+                  {children?.(item as T)}
+                  {url && <Link url={url} />}
+                </div>
+
+                {summary && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level && level > 0 && <Rating level={level} />}
+
+                {keywords && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div className="leading-snug">
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div className="space-y-0.5">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="fluencyLevel">
+      {(item) => (
+        <div className="space-y-0.5">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.fluency}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles":
+      return <Profiles />;
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Bronzor = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="space-y-4">
+      {isFirstPage && <Header />}
+
+      <div className="space-y-4">
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/chikorita.tsx

@@ -0,0 +1,516 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+  const profiles = useArtboardStore((state) => state.resume.sections.profiles);
+
+  return (
+    <div className="grid grid-cols-3">
+      <div className="col-span-2 flex items-center gap-x-4">
+        <Picture />
+
+        <div className="space-y-2">
+          <div>
+            <div className="text-2xl font-bold">{basics.name}</div>
+            <div className="text-base">{basics.headline}</div>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+            {basics.location && (
+              <div className="flex items-center gap-x-1.5">
+                <i className="ph ph-bold ph-map-pin text-primary" />
+                <div>{basics.location}</div>
+              </div>
+            )}
+            {basics.phone && (
+              <div className="flex items-center gap-x-1.5">
+                <i className="ph ph-bold ph-phone text-primary" />
+                <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                  {basics.phone}
+                </a>
+              </div>
+            )}
+            {basics.email && (
+              <div className="flex items-center gap-x-1.5">
+                <i className="ph ph-bold ph-at text-primary" />
+                <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                  {basics.email}
+                </a>
+              </div>
+            )}
+            <Link url={basics.url} />
+            {basics.customFields.map((item) => (
+              <div key={item.id} className="flex items-center gap-x-1.5">
+                <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              </div>
+            ))}
+          </div>
+
+          {profiles.visible && profiles.items.length > 0 && (
+            <div className="flex items-center gap-x-3 gap-y-0.5">
+              {profiles.items
+                .filter((item) => item.visible)
+                .map((item) => (
+                  <div key={item.id} className="flex items-center gap-x-2">
+                    <Link
+                      url={item.url}
+                      label={item.username}
+                      className="text-sm"
+                      icon={
+                        <img
+                          width="12"
+                          height="12"
+                          alt={item.network}
+                          src={`https://cdn.simpleicons.org/${item.icon}`}
+                        />
+                      }
+                    />
+                  </div>
+                ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold uppercase">{section.name}</h4>
+
+      <div
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+        dangerouslySetInnerHTML={{ __html: section.content }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn(
+          "h-2 w-2 rounded-full border border-primary group-[.sidebar]:border-background",
+          level > index && "bg-primary group-[.sidebar]:bg-background",
+        )}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold uppercase">{section.name}</h4>
+
+      <div
+        className="grid gap-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div className="leading-snug">
+                  {children?.(item as T)}
+                  {url && <Link url={url} />}
+                </div>
+
+                {summary && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level && level > 0 && <Rating level={level} />}
+
+                {keywords && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="fluencyLevel">
+      {(item) => (
+        <div className="space-y-0.5">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.fluency}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Chikorita = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const margin = useArtboardStore((state) => state.resume.metadata.page.margin);
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="space-y-4">
+      {isFirstPage && <Header />}
+
+      <div className="relative z-10 grid grid-cols-3 space-x-8">
+        <div className="main group col-span-2 space-y-4">
+          {main.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+
+        <div className="sidebar group col-span-1 space-y-4 text-background">
+          {sidebar.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+      </div>
+
+      <div className="absolute inset-0 grid grid-cols-3" style={{ top: -margin }}>
+        <div className="col-span-1 col-start-3 ml-2 bg-primary"></div>
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/ditto.tsx

@@ -0,0 +1,546 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="relative z-20 grid grid-cols-3 space-x-4">
+      <div className="col-span-1 mx-auto">
+        <Picture />
+      </div>
+
+      <div className="col-span-2 space-y-0.5 text-background">
+        <h2 className="min-h-[30px] text-4xl font-bold">{basics.name}</h2>
+        <p className="min-h-[24px]">{basics.headline}</p>
+
+        <div className="text-text !mt-10">
+          <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+            {basics.location && (
+              <>
+                <div className="flex items-center gap-x-1.5">
+                  <i className="ph ph-bold ph-map-pin text-primary" />
+                  <div>{basics.location}</div>
+                </div>
+                <div className="bg-text h-1 w-1 rounded-full last:hidden" />
+              </>
+            )}
+
+            {basics.phone && (
+              <>
+                <div className="flex items-center gap-x-1.5">
+                  <i className="ph ph-bold ph-phone text-primary" />
+                  <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                    {basics.phone}
+                  </a>
+                </div>
+                <div className="bg-text h-1 w-1 rounded-full last:hidden" />
+              </>
+            )}
+            {basics.email && (
+              <>
+                <div className="flex items-center gap-x-1.5">
+                  <i className="ph ph-bold ph-at text-primary" />
+                  <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                    {basics.email}
+                  </a>
+                </div>
+                <div className="bg-text h-1 w-1 rounded-full last:hidden" />
+              </>
+            )}
+            {isUrl(basics.url.href) && (
+              <>
+                <Link url={basics.url} />
+                <div className="bg-text h-1 w-1 rounded-full last:hidden" />
+              </>
+            )}
+            {basics.customFields.map((item) => (
+              <>
+                <div key={item.id} className="flex items-center gap-x-1.5">
+                  <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+                  <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+                </div>
+                <div className="bg-text h-1 w-1 rounded-full last:hidden" />
+              </>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="mb-2 text-base font-bold uppercase">{section.name}</h4>
+
+      <div
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+        dangerouslySetInnerHTML={{ __html: section.content }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("h-2 w-4 border border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 text-base font-bold uppercase">{section.name}</h4>
+
+      <div
+        className="grid gap-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div
+                key={item.id}
+                className={cn("relative space-y-2 pl-4 group-[.sidebar]:pl-0", className)}
+              >
+                <div className="relative -ml-4 group-[.sidebar]:ml-0">
+                  <div className="pl-4 leading-snug group-[.sidebar]:pl-0">
+                    {children?.(item as T)}
+                    {url && <Link url={url} />}
+                  </div>
+
+                  <div className="absolute inset-y-0 -left-px border-l-[4px] border-primary group-[.sidebar]:hidden" />
+                </div>
+
+                {summary && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level && level > 0 && <Rating level={level} />}
+
+                {keywords && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+
+                <div className="absolute inset-y-0 left-0 border-l border-primary group-[.sidebar]:hidden" />
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div className="leading-snug">
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} className="space-y-0" keywordsKey="keywords">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="fluencyLevel">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.fluency}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles":
+      return <Profiles />;
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Ditto = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="space-y-4">
+      {isFirstPage && <div className="absolute inset-x-0 top-0 z-10 h-32 bg-primary" />}
+
+      {isFirstPage && <Header />}
+
+      <div className="grid grid-cols-3 space-x-4">
+        <div className="sidebar group col-span-1 space-y-4">
+          {sidebar.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+
+        <div className="main group col-span-2 space-y-4">
+          {main.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/index.tsx

@@ -0,0 +1,33 @@
+import { TemplateKey } from "@reactive-resume/utils";
+
+import { Azurill } from "./azurill";
+import { Bronzor } from "./bronzor";
+import { Chikorita } from "./chikorita";
+import { Ditto } from "./ditto";
+import { Kakuna } from "./kakuna";
+import { Onyx } from "./onyx";
+import { Pikachu } from "./pikachu";
+import { Rhyhorn } from "./rhyhorn";
+
+export const getTemplate = (template: TemplateKey) => {
+  switch (template) {
+    case "onyx":
+      return Onyx;
+    case "kakuna":
+      return Kakuna;
+    case "rhyhorn":
+      return Rhyhorn;
+    case "azurill":
+      return Azurill;
+    case "ditto":
+      return Ditto;
+    case "chikorita":
+      return Chikorita;
+    case "bronzor":
+      return Bronzor;
+    case "pikachu":
+      return Pikachu;
+    default:
+      return Onyx;
+  }
+};

apps/artboard/src/templates/kakuna.tsx

@@ -0,0 +1,467 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import React, { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+  const profiles = useArtboardStore((state) => state.resume.sections.profiles);
+
+  return (
+    <div className="flex flex-col items-center justify-center space-y-2 pb-2 text-center">
+      <Picture />
+
+      <div>
+        <div className="text-2xl font-bold">{basics.name}</div>
+        <div className="text-base">{basics.headline}</div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-sm">
+        {basics.location && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-map-pin text-primary" />
+            <div>{basics.location}</div>
+          </div>
+        )}
+        {basics.phone && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-phone text-primary" />
+            <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+              {basics.phone}
+            </a>
+          </div>
+        )}
+        {basics.email && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-at text-primary" />
+            <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+              {basics.email}
+            </a>
+          </div>
+        )}
+        <Link url={basics.url} />
+        {basics.customFields.map((item) => (
+          <div key={item.id} className="flex items-center gap-x-1.5">
+            <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+            <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+          </div>
+        ))}
+      </div>
+
+      {profiles.visible && profiles.items.length > 0 && (
+        <div className="flex items-center gap-x-3 gap-y-0.5">
+          {profiles.items
+            .filter((item) => item.visible)
+            .map((item) => (
+              <div key={item.id} className="flex items-center gap-x-2">
+                <Link
+                  url={item.url}
+                  label={item.username}
+                  className="text-sm"
+                  icon={
+                    <img
+                      width="12"
+                      height="12"
+                      alt={item.network}
+                      src={`https://cdn.simpleicons.org/${item.icon}`}
+                    />
+                  }
+                />
+              </div>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="mb-2 border-b border-primary text-center font-bold uppercase text-primary">
+        {section.name}
+      </h4>
+
+      <div
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+        dangerouslySetInnerHTML={{ __html: section.content }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("h-3 w-5 rounded border-2 border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 border-b border-primary text-center font-bold uppercase text-primary">
+        {section.name}
+      </h4>
+
+      <div
+        className="grid gap-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div className="leading-snug">{children?.(item as T)}</div>
+
+                {summary && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level && level > 0 && <Rating level={level} />}
+
+                {keywords && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+
+                {url && <Link url={url} />}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.company}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+          <div className="font-bold italic">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.institution}</div>
+          <div>{item.area}</div>
+          <div>{item.score}</div>
+          <div>{item.studyType}</div>
+          <div className="font-bold italic">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.title}</div>
+          <div>{item.awarder}</div>
+          <div className="font-bold italic">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.issuer}</div>
+          <div className="font-bold italic">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.publisher}</div>
+          <div className="font-bold italic">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.organization}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+          <div className="font-bold italic">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="fluencyLevel">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.fluency}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div>
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+            <div className="font-bold italic">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div>
+          <div>
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+            <div>{item.location}</div>
+            <div className="font-bold italic">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Kakuna = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="space-y-4">
+      {isFirstPage && <Header />}
+
+      <div className="space-y-4">
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/onyx.tsx

@@ -0,0 +1,505 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import React, { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+  const profiles = useArtboardStore((state) => state.resume.sections.profiles);
+
+  return (
+    <div className="flex items-center justify-between space-x-4 border-b border-primary pb-5">
+      <Picture />
+
+      <div className="flex-1 space-y-2">
+        <div>
+          <div className="text-2xl font-bold">{basics.name}</div>
+          <div className="text-base">{basics.headline}</div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+          {basics.location && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-map-pin text-primary" />
+              <div>{basics.location}</div>
+            </div>
+          )}
+          {basics.phone && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-phone text-primary" />
+              <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                {basics.phone}
+              </a>
+            </div>
+          )}
+          {basics.email && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-at text-primary" />
+              <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                {basics.email}
+              </a>
+            </div>
+          )}
+          <Link url={basics.url} />
+          {basics.customFields.map((item) => (
+            <div key={item.id} className="flex items-center gap-x-1.5">
+              <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {profiles.visible && profiles.items.length > 0 && (
+        <div
+          className="grid gap-x-4 gap-y-1 self-end text-right"
+          style={{ gridTemplateColumns: `repeat(${profiles.columns}, auto)` }}
+        >
+          {profiles.items
+            .filter((item) => item.visible)
+            .map((item) => (
+              <div key={item.id} className="flex items-center gap-x-2">
+                <Link
+                  url={item.url}
+                  label={item.username}
+                  className="text-sm"
+                  icon={
+                    <img
+                      width="12"
+                      height="12"
+                      alt={item.network}
+                      src={`https://cdn.simpleicons.org/${item.icon}`}
+                    />
+                  }
+                />
+              </div>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="mb-1 font-bold uppercase text-primary">{section.name}</h4>
+
+      <div
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+        dangerouslySetInnerHTML={{ __html: section.content }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("h-3 w-3 rounded border-2 border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-1 font-bold uppercase text-primary">{section.name}</h4>
+
+      <div
+        className="grid gap-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div className="leading-snug">
+                  {children?.(item as T)}
+                  {url && <Link url={url} />}
+                </div>
+
+                {summary && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level && level > 0 && <Rating level={level} />}
+
+                {keywords && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="fluencyLevel">
+      {(item) => (
+        <div className="space-y-0.5">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.fluency}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Onyx = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="space-y-4">
+      {isFirstPage && <Header />}
+
+      <div className="space-y-4">
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/pikachu.tsx

@@ -0,0 +1,546 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+  const borderRadius = useArtboardStore((state) => state.resume.basics.picture.borderRadius);
+
+  return (
+    <div
+      className="summary group bg-primary px-6 pb-7 pt-6 text-background"
+      style={{ borderRadius: `calc(${borderRadius}px - 2px)` }}
+    >
+      <div className="col-span-2 space-y-4">
+        <div className="leading-tight">
+          <h2 className="text-2xl font-bold">{basics.name}</h2>
+          <p>{basics.headline}</p>
+        </div>
+
+        <hr className="border-background opacity-50" />
+
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+          {basics.location && (
+            <>
+              <div className="flex items-center gap-x-1.5">
+                <i className="ph ph-bold ph-map-pin" />
+                <div>{basics.location}</div>
+              </div>
+              <div className="h-1 w-1 rounded-full bg-background last:hidden" />
+            </>
+          )}
+          {basics.phone && (
+            <>
+              <div className="flex items-center gap-x-1.5">
+                <i className="ph ph-bold ph-phone" />
+                <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                  {basics.phone}
+                </a>
+              </div>
+              <div className="h-1 w-1 rounded-full bg-background last:hidden" />
+            </>
+          )}
+          {basics.email && (
+            <>
+              <div className="flex items-center gap-x-1.5">
+                <i className="ph ph-bold ph-at" />
+                <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                  {basics.email}
+                </a>
+              </div>
+              <div className="h-1 w-1 rounded-full bg-background last:hidden" />
+            </>
+          )}
+          {isUrl(basics.url.href) && (
+            <>
+              <Link url={basics.url} />
+              <div className="h-1 w-1 rounded-full bg-background last:hidden" />
+            </>
+          )}
+          {basics.customFields.map((item) => (
+            <>
+              <div key={item.id} className="flex items-center gap-x-1.5">
+                <i className={cn(`ph ph-bold ph-${item.icon}`)} />
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              </div>
+              <div className="h-1 w-1 rounded-full bg-background last:hidden" />
+            </>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="mb-2 text-base font-bold uppercase">{section.name}</h4>
+
+      <div
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+        dangerouslySetInnerHTML={{ __html: section.content }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <i
+        key={index}
+        className={cn(
+          "ph ph-diamond text-primary",
+          level > index && "ph-fill",
+          level <= index && "ph-bold",
+        )}
+      />
+      // <div
+      //   key={index}
+      //   className={cn("h-2 w-4 border border-primary", level > index && "bg-primary")}
+      // />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary group-[.summary]:text-background" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 border-b border-primary text-base font-bold uppercase">{section.name}</h4>
+
+      <div
+        className="grid gap-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div className="leading-snug">
+                  {children?.(item as T)}
+                  {url && <Link url={url} />}
+                </div>
+
+                {summary && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level && level > 0 && <Rating level={level} />}
+
+                {keywords && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div className="leading-snug">
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} className="space-y-0" keywordsKey="keywords">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="fluencyLevel">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.fluency}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-center justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles":
+      return <Profiles />;
+    case "summary":
+      return <Summary />;
+    case "experience":
+      return <Experience />;
+    case "education":
+      return <Education />;
+    case "awards":
+      return <Awards />;
+    case "certifications":
+      return <Certifications />;
+    case "skills":
+      return <Skills />;
+    case "interests":
+      return <Interests />;
+    case "publications":
+      return <Publications />;
+    case "volunteer":
+      return <Volunteer />;
+    case "languages":
+      return <Languages />;
+    case "projects":
+      return <Projects />;
+    case "references":
+      return <References />;
+    default:
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+  }
+};
+
+export const Pikachu = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-3 space-x-6">
+        <div className="sidebar group col-span-1 space-y-4">
+          {isFirstPage && <Picture className="w-full !max-w-none" />}
+
+          {sidebar.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+
+        <div className="main group col-span-2 space-y-4">
+          {isFirstPage && <Header />}
+
+          {main.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/rhyhorn.tsx

@@ -1,13 +1,30 @@
-import { SectionKey } from "@reactive-resume/schema";
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
 import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
 import { Fragment } from "react";
 
 import { Picture } from "../components/picture";
 import { useArtboardStore } from "../store/artboard";
 import { TemplateProps } from "../types/template";
 
-const fieldDisplay = cn("flex items-center gap-x-1.5 border-r pr-2 last:border-r-0 last:pr-0");
-
 const Header = () => {
   const basics = useArtboardStore((state) => state.resume.basics);
 
@@ -16,43 +33,39 @@ const Header = () => {
       <Picture />
 
       <div className="space-y-0.5">
-        <div className="text-2xl font-bold leading-tight">{basics.name}</div>
+        <div className="text-2xl font-bold">{basics.name}</div>
         <div className="text-base">{basics.headline}</div>
 
         <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
           {basics.location && (
-            <div className={cn(fieldDisplay)}>
-              <i className="ph ph-map-pin" />
+            <div className="flex items-center gap-x-1.5 border-r pr-2 last:border-r-0 last:pr-0">
+              <i className="ph ph-bold ph-map-pin text-primary" />
               <div>{basics.location}</div>
             </div>
           )}
           {basics.phone && (
-            <div className={cn(fieldDisplay)}>
-              <i className="ph ph-phone" />
+            <div className="flex items-center gap-x-1.5 border-r pr-2 last:border-r-0 last:pr-0">
+              <i className="ph ph-bold ph-phone text-primary" />
               <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
                 {basics.phone}
               </a>
             </div>
           )}
           {basics.email && (
-            <div className={cn(fieldDisplay)}>
-              <i className="ph ph-envelope" />
+            <div className="flex items-center gap-x-1.5 border-r pr-2 last:border-r-0 last:pr-0">
+              <i className="ph ph-bold ph-at text-primary" />
               <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
                 {basics.email}
               </a>
             </div>
           )}
-          {isUrl(basics.url.href) && (
-            <div className={cn(fieldDisplay)}>
-              <i className="ph ph-globe" />
-              <a href={basics.url.href} target="_blank" rel="noreferrer">
-                {basics.url.label || basics.url.href}
-              </a>
-            </div>
-          )}
+          <Link url={basics.url} />
           {basics.customFields.map((item) => (
-            <div key={item.id} className={cn(fieldDisplay)}>
-              <i className={`ph ph-${item.icon}`} />
+            <div
+              key={item.id}
+              className="flex items-center gap-x-1.5 border-r pr-2 last:border-r-0 last:pr-0"
+            >
+              <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
               <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
             </div>
           ))}
@@ -62,580 +75,384 @@ const Header = () => {
   );
 };
 
-const sectionHeading = cn("mb-1.5 mt-3 border-b pb-0.5 text-sm font-bold uppercase");
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
 
-const Profiles = () => {
-  const section = useArtboardStore((state) => state.resume.sections.profiles);
-
-  if (!section.visible || !section.items.length) return null;
+  if (!section.visible || isEmptyString(section.content)) return null;
 
   return (
     <section id={section.id}>
-      <h4 className={cn(sectionHeading)}>{section.name}</h4>
+      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold uppercase">{section.name}</h4>
 
       <div
-        className="mt-2 grid items-center"
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+        dangerouslySetInnerHTML={{ __html: section.content }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("h-2 w-2 rounded-full border border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label || url.label || url.href}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || !section.items.length) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold uppercase">{section.name}</h4>
+
+      <div
+        className="grid gap-3"
         style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
       >
-        {section.items.map((item) => (
-          <div key={item.id} className="flex items-center gap-x-3">
-            <img
-              width="16"
-              height="16"
-              alt={item.network}
-              src={`https://cdn.simpleicons.org/${item.icon}`}
-            />
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
 
-            <div className="leading-tight">
-              {isUrl(item.url.href) ? (
-                <a href={item.url.href} target="_blank" rel="noreferrer" className="font-medium">
-                  {item.url.label || item.username}
-                </a>
-              ) : (
-                <span className="font-medium">{item.username}</span>
-              )}
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div className="leading-snug">
+                  {children?.(item as T)}
+                  {url && <Link url={url} />}
+                </div>
 
-              <p className="text-sm">{item.network}</p>
-            </div>
-          </div>
-        ))}
+                {summary && !isEmptyString(summary) && (
+                  <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
+                )}
+
+                {level && level > 0 && <Rating level={level} />}
+
+                {keywords && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
       </div>
     </section>
   );
 };
 
-const Summary = () => {
-  const section = useArtboardStore((state) => state.resume.sections.summary);
-
-  if (!section.visible || !section.content) return null;
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
 
   return (
-    <section id={section.id}>
-      <h4 className={cn(sectionHeading)}>{section.name}</h4>
-
-      {!isEmptyString(section.content) && (
-        <main>
-          <div
-            className="wysiwyg"
-            style={{ columns: section.columns }}
-            dangerouslySetInnerHTML={{ __html: section.content }}
-          />
-        </main>
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div className="leading-snug">
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
       )}
-    </section>
+    </Section>
   );
 };
 
 const Experience = () => {
   const section = useArtboardStore((state) => state.resume.sections.experience);
 
-  if (!section.visible || !section.items.length) return null;
-
   return (
-    <section id={section.id}>
-      <h4 className={cn(sectionHeading)}>{section.name}</h4>
-
-      <div
-        className="grid items-start gap-x-4 gap-y-2"
-        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
-      >
-        {section.items.map((item) => (
-          <div key={item.id}>
-            <header className="mb-2 flex items-center justify-between">
-              <div className="text-left">
-                <div className="font-bold">{item.company}</div>
-                <div>{item.position}</div>
-                {isUrl(item.url.href) && (
-                  <div>
-                    <a href={item.url.href} target="_blank" rel="noreferrer">
-                      {item.url.label || item.url.href}
-                    </a>
-                  </div>
-                )}
-              </div>
-
-              <div className="shrink-0 text-right">
-                <div className="font-bold">{item.date}</div>
-                <div>{item.location}</div>
-              </div>
-            </header>
-
-            {!isEmptyString(item.summary) && (
-              <main>
-                <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: item.summary }} />
-              </main>
-            )}
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
           </div>
-        ))}
-      </div>
-    </section>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
   );
 };
 
 const Education = () => {
   const section = useArtboardStore((state) => state.resume.sections.education);
 
-  if (!section.visible || !section.items.length) return null;
-
   return (
-    <section id={section.id}>
-      <h4 className={cn(sectionHeading)}>{section.name}</h4>
-
-      <div
-        className="grid items-start gap-x-4 gap-y-2"
-        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
-      >
-        {section.items.map((item) => (
-          <div key={item.id}>
-            <header className="mb-2 flex items-center justify-between">
-              <div className="text-left">
-                <div className="font-bold">{item.institution}</div>
-                <div>{item.area}</div>
-                {isUrl(item.url.href) && (
-                  <div>
-                    <a href={item.url.href} target="_blank" rel="noreferrer">
-                      {item.url.label || item.url.href}
-                    </a>
-                  </div>
-                )}
-              </div>
-
-              <div className="shrink-0 text-right">
-                <div className="font-bold">{item.date}</div>
-                <div>{item.studyType}</div>
-                <div>{item.score}</div>
-              </div>
-            </header>
-
-            {!isEmptyString(item.summary) && (
-              <main>
-                <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: item.summary }} />
-              </main>
-            )}
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
           </div>
-        ))}
-      </div>
-    </section>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
   );
 };
 
 const Awards = () => {
   const section = useArtboardStore((state) => state.resume.sections.awards);
 
-  if (!section.visible || !section.items.length) return null;
-
   return (
-    <section id={section.id}>
-      <h4 className={cn(sectionHeading)}>{section.name}</h4>
-
-      <div
-        className="grid items-start gap-x-4 gap-y-2"
-        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
-      >
-        {section.items.map((item) => (
-          <div key={item.id} className="space-y-2">
-            <header className="flex items-center justify-between">
-              <div className="text-left">
-                <div className="font-bold">{item.title}</div>
-                <div>{item.awarder}</div>
-              </div>
-
-              <div className="shrink-0 text-right">
-                <div className="font-bold">{item.date}</div>
-                {isUrl(item.url.href) && (
-                  <div>
-                    <a href={item.url.href} target="_blank" rel="noreferrer">
-                      {item.url.label || item.url.href}
-                    </a>
-                  </div>
-                )}
-              </div>
-            </header>
-
-            {!isEmptyString(item.summary) && (
-              <main>
-                <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: item.summary }} />
-              </main>
-            )}
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
           </div>
-        ))}
-      </div>
-    </section>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
   );
 };
 
 const Certifications = () => {
   const section = useArtboardStore((state) => state.resume.sections.certifications);
 
-  if (!section.visible || !section.items.length) return null;
-
   return (
-    <section id={section.id}>
-      <h4 className={cn(sectionHeading)}>{section.name}</h4>
-
-      <div
-        className="grid items-start gap-x-4 gap-y-2"
-        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
-      >
-        {section.items.map((item) => (
-          <div key={item.id} className="space-y-2">
-            <header className="flex items-center justify-between">
-              <div className="text-left">
-                <div className="font-bold">{item.name}</div>
-                <div>{item.issuer}</div>
-              </div>
-
-              <div className="shrink-0 text-right">
-                <div className="font-bold">{item.date}</div>
-                {isUrl(item.url.href) && (
-                  <div>
-                    <a href={item.url.href} target="_blank" rel="noreferrer">
-                      {item.url.label || item.url.href}
-                    </a>
-                  </div>
-                )}
-              </div>
-            </header>
-
-            {!isEmptyString(item.summary) && (
-              <main>
-                <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: item.summary }} />
-              </main>
-            )}
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
           </div>
-        ))}
-      </div>
-    </section>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
   );
 };
 
 const Skills = () => {
   const section = useArtboardStore((state) => state.resume.sections.skills);
 
-  if (!section.visible || !section.items.length) return null;
-
   return (
-    <section id={section.id}>
-      <h4 className={cn(sectionHeading)}>{section.name}</h4>
-
-      <div
-        className="grid items-start gap-x-4 gap-y-2"
-        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
-      >
-        {section.items.map((item) => (
-          <div key={item.id} className="space-y-2">
-            <header className="flex items-center justify-between">
-              <div className="text-left">
-                <div className="font-bold">{item.name}</div>
-                <div>{item.description}</div>
-              </div>
-            </header>
-
-            {item.keywords.length > 0 && (
-              <footer>
-                <p className="text-sm">{item.keywords.join(", ")}</p>
-              </footer>
-            )}
-          </div>
-        ))}
-      </div>
-    </section>
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div className="leading-tight">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
   );
 };
 
 const Interests = () => {
   const section = useArtboardStore((state) => state.resume.sections.interests);
 
-  if (!section.visible || !section.items.length) return null;
-
   return (
-    <section id={section.id}>
-      <h4 className={cn(sectionHeading)}>{section.name}</h4>
-
-      <div
-        className="grid items-start gap-x-4 gap-y-2"
-        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
-      >
-        {section.items.map((item) => (
-          <div key={item.id}>
-            <header className="flex items-center justify-between">
-              <div className="text-left">
-                <div className="font-bold">{item.name}</div>
-              </div>
-            </header>
-
-            {item.keywords.length > 0 && (
-              <footer>
-                <p className="text-sm">{item.keywords.join(", ")}</p>
-              </footer>
-            )}
-          </div>
-        ))}
-      </div>
-    </section>
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
   );
 };
 
 const Publications = () => {
   const section = useArtboardStore((state) => state.resume.sections.publications);
 
-  if (!section.visible || !section.items.length) return null;
-
   return (
-    <section id={section.id}>
-      <h4 className={cn(sectionHeading)}>{section.name}</h4>
-
-      <div
-        className="grid items-start gap-x-4 gap-y-2"
-        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
-      >
-        {section.items.map((item) => (
-          <div key={item.id} className="space-y-2">
-            <header className="flex items-center justify-between">
-              <div className="text-left">
-                <div className="font-bold">{item.name}</div>
-                <div>{item.publisher}</div>
-              </div>
-
-              <div className="shrink-0 text-right">
-                <div className="font-bold">{item.date}</div>
-                {isUrl(item.url.href) && (
-                  <div>
-                    <a href={item.url.href} target="_blank" rel="noreferrer">
-                      {item.url.label || item.url.href}
-                    </a>
-                  </div>
-                )}
-              </div>
-            </header>
-
-            {!isEmptyString(item.summary) && (
-              <main>
-                <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: item.summary }} />
-              </main>
-            )}
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
           </div>
-        ))}
-      </div>
-    </section>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
   );
 };
 
 const Volunteer = () => {
   const section = useArtboardStore((state) => state.resume.sections.volunteer);
 
-  if (!section.visible || !section.items.length) return null;
-
   return (
-    <section id={section.id}>
-      <h4 className={cn(sectionHeading)}>{section.name}</h4>
-
-      <div
-        className="grid items-start gap-x-4 gap-y-2"
-        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
-      >
-        {section.items.map((item) => (
-          <div key={item.id}>
-            <header className="mb-2 flex items-center justify-between">
-              <div className="text-left">
-                <div className="font-bold">{item.organization}</div>
-                <div>{item.position}</div>
-                {isUrl(item.url.href) && (
-                  <div>
-                    <a href={item.url.href} target="_blank" rel="noreferrer">
-                      {item.url.label || item.url.href}
-                    </a>
-                  </div>
-                )}
-              </div>
-
-              <div className="shrink-0 text-right">
-                <div className="font-bold">{item.date}</div>
-                <div>{item.location}</div>
-              </div>
-            </header>
-
-            {!isEmptyString(item.summary) && (
-              <main>
-                <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: item.summary }} />
-              </main>
-            )}
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
           </div>
-        ))}
-      </div>
-    </section>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
   );
 };
 
 const Languages = () => {
   const section = useArtboardStore((state) => state.resume.sections.languages);
 
-  if (!section.visible || !section.items.length) return null;
-
   return (
-    <section id={section.id}>
-      <h4 className={cn(sectionHeading)}>{section.name}</h4>
-
-      <div
-        className="grid items-start gap-x-4 gap-y-2"
-        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
-      >
-        {section.items.map((item) => (
-          <div key={item.id} className="space-y-2">
-            <header className="flex items-center justify-between">
-              <div className="text-left">
-                <div className="font-bold">{item.name}</div>
-                <div>{item.fluency}</div>
-              </div>
-            </header>
-          </div>
-        ))}
-      </div>
-    </section>
+    <Section<Language> section={section} levelKey="fluencyLevel">
+      {(item) => (
+        <div className="space-y-0.5">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.fluency}</div>
+        </div>
+      )}
+    </Section>
   );
 };
 
 const Projects = () => {
   const section = useArtboardStore((state) => state.resume.sections.projects);
 
-  if (!section.visible || !section.items.length) return null;
-
   return (
-    <section id={section.id}>
-      <h4 className={cn(sectionHeading)}>{section.name}</h4>
-
-      <div
-        className="grid items-start gap-x-4 gap-y-2"
-        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
-      >
-        {section.items.map((item) => (
-          <div key={item.id} className="space-y-2">
-            <header className="flex items-center justify-between">
-              <div className="text-left">
-                <div className="font-bold">{item.name}</div>
-                <div>{item.description}</div>
-              </div>
-
-              <div className="shrink-0 text-right">
-                <div className="font-bold">{item.date}</div>
-                {isUrl(item.url.href) && (
-                  <div>
-                    <a href={item.url.href} target="_blank" rel="noreferrer">
-                      {item.url.label || item.url.href}
-                    </a>
-                  </div>
-                )}
-              </div>
-            </header>
-
-            {!isEmptyString(item.summary) && (
-              <main>
-                <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: item.summary }} />
-              </main>
-            )}
-
-            {item.keywords.length > 0 && (
-              <footer>
-                <p className="text-sm">{item.keywords.join(", ")}</p>
-              </footer>
-            )}
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
           </div>
-        ))}
-      </div>
-    </section>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
   );
 };
 
 const References = () => {
   const section = useArtboardStore((state) => state.resume.sections.references);
 
-  if (!section.visible || !section.items.length) return null;
-
   return (
-    <section id={section.id}>
-      <h4 className={cn(sectionHeading)}>{section.name}</h4>
-
-      <div
-        className="grid items-start gap-x-4 gap-y-2"
-        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
-      >
-        {section.items.map((item) => (
-          <div key={item.id} className="space-y-2">
-            <header className="flex items-center justify-between">
-              <div className="text-left">
-                <div className="font-bold">{item.name}</div>
-                <div>{item.description}</div>
-                {isUrl(item.url.href) && (
-                  <div>
-                    <a href={item.url.href} target="_blank" rel="noreferrer">
-                      {item.url.label || item.url.href}
-                    </a>
-                  </div>
-                )}
-              </div>
-            </header>
-
-            {!isEmptyString(item.summary) && (
-              <main>
-                <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: item.summary }} />
-              </main>
-            )}
-          </div>
-        ))}
-      </div>
-    </section>
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
   );
 };
 
 const Custom = ({ id }: { id: string }) => {
   const section = useArtboardStore((state) => state.resume.sections.custom[id]);
 
-  if (!section || !section.visible || !section.items.length) return null;
-
   return (
-    <section id={section.id}>
-      <h4 className={cn(sectionHeading)}>{section.name}</h4>
-
-      <div
-        className="grid items-start gap-x-4 gap-y-2"
-        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
-      >
-        {section.items.map((item) => (
-          <div key={item.id} className="space-y-2">
-            <header className="flex items-center justify-between">
-              <div className="text-left">
-                <div className="font-bold">{item.name}</div>
-                <div>{item.description}</div>
-                {isUrl(item.url.href) && (
-                  <div>
-                    <a href={item.url.href} target="_blank" rel="noreferrer">
-                      {item.url.label || item.url.href}
-                    </a>
-                  </div>
-                )}
-              </div>
-
-              <div className="shrink-0 text-right">
-                <div className="font-bold">{item.date}</div>
-                <div>{item.location}</div>
-              </div>
-            </header>
-
-            {!isEmptyString(item.summary) && (
-              <main>
-                <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: item.summary }} />
-              </main>
-            )}
-
-            {item.keywords.length > 0 && (
-              <footer>
-                <p className="text-sm">{item.keywords.join(", ")}</p>
-              </footer>
-            )}
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-center justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
           </div>
-        ))}
-      </div>
-    </section>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
   );
 };
 
@@ -670,7 +487,7 @@ const mapSectionToComponent = (section: SectionKey) => {
     default:
       if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
 
-      return <p>{section}</p>;
+      return null;
   }
 };
 
@@ -681,7 +498,7 @@ export const Rhyhorn = ({ columns, isFirstPage = false }: TemplateProps) => {
     <div className="space-y-4">
       {isFirstPage && <Header />}
 
-      <div className="space-y-2">
+      <div className="space-y-4">
         {main.map((section) => (
           <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
         ))}

apps/artboard/tailwind.config.js

@@ -8,6 +8,21 @@ module.exports = {
     join(__dirname, "{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}"),
     ...createGlobPatternsForDependencies(__dirname),
   ],
-  theme: {},
+  theme: {
+    extend: {
+      colors: {
+        text: "var(--color-text)",
+        primary: "var(--color-primary)",
+        background: "var(--color-background)",
+      },
+      lineHeight: {
+        tight: "calc(var(--line-height) - 0.5)",
+        snug: "calc(var(--line-height) - 0.3)",
+        normal: "var(--line-height)",
+        relaxed: "calc(var(--line-height) + 0.3)",
+        loose: "calc(var(--line-height) + 0.5)",
+      },
+    },
+  },
   plugins: [require("@tailwindcss/typography")],
 };

apps/artboard/vite.config.ts

@@ -2,20 +2,24 @@
 
 import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
 import react from "@vitejs/plugin-react-swc";
-import { defineConfig, searchForWorkspaceRoot } from "vite";
+import { defineConfig, searchForWorkspaceRoot, splitVendorChunkPlugin } from "vite";
 
 export default defineConfig({
   base: "/artboard/",
 
   cacheDir: "../../node_modules/.vite/artboard",
 
+  build: {
+    sourcemap: true,
+  },
+
   server: {
     host: true,
-    port: 6173,
+    port: +(process.env.__DEV__ARTBOARD_PORT ?? 6173),
     fs: { allow: [searchForWorkspaceRoot(process.cwd())] },
   },
 
-  plugins: [react(), nxViteTsPaths()],
+  plugins: [react(), nxViteTsPaths(), splitVendorChunkPlugin()],
 
   resolve: {
     alias: {

apps/client/index.html

@@ -39,5 +39,8 @@
 
     <!-- Scripts -->
     <script type="module" src="/src/main.tsx"></script>
+
+    <!-- Phosphor Icons -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
   </body>
 </html>

apps/client/src/pages/builder/sidebars/left/index.tsx

@@ -2,7 +2,7 @@ import { Plus, PlusCircle } from "@phosphor-icons/react";
 import {
   Award,
   Certification,
-  CustomSectionItem,
+  CustomSection,
   Education,
   Experience,
   Interest,
@@ -172,7 +172,7 @@ export const LeftSidebar = () => {
             <Fragment key={section.id}>
               <Separator />
 
-              <SectionBase<CustomSectionItem>
+              <SectionBase<CustomSection>
                 id={`custom.${section.id}`}
                 title={(item) => item.name}
                 description={(item) => item.description}

apps/client/src/pages/builder/sidebars/right/sections/template.tsx

@@ -19,7 +19,7 @@ export const TemplateSection = () => {
       </header>
 
       <main className="grid grid-cols-2 gap-4">
-        {templatesList.map(({ id, name, image }) => (
+        {templatesList.map(({ id, name }) => (
           <HoverCard key={id} openDelay={0} closeDelay={0}>
             <HoverCardTrigger asChild>
               <Button
@@ -35,7 +35,12 @@ export const TemplateSection = () => {
             </HoverCardTrigger>
 
             <HoverCardContent className="max-w-xs overflow-hidden border-none bg-white p-0">
-              <img alt={name} src={image} loading="lazy" className="aspect-[1/1.4142]" />
+              <img
+                alt={name}
+                loading="lazy"
+                src="/templates/sample.jpg"
+                className="aspect-[1/1.4142]"
+              />
             </HoverCardContent>
           </HoverCard>
         ))}

apps/client/src/pages/builder/sidebars/right/sections/typography.tsx

@@ -75,6 +75,8 @@ export const TypographySection = () => {
               disabled={typography.font.family === font}
               onClick={() => {
                 setValue("metadata.typography.font.family", font);
+                setValue("metadata.typography.font.subset", "latin");
+                setValue("metadata.typography.font.variants", ["regular"]);
               }}
               className={cn(
                 "flex h-12 items-center justify-center overflow-hidden rounded border text-center text-sm ring-primary transition-colors hover:bg-secondary-accent focus:outline-none focus:ring-1 disabled:opacity-100",

apps/client/src/stores/resume.ts

@@ -1,6 +1,6 @@
 import { createId } from "@paralleldrive/cuid2";
 import { ResumeDto } from "@reactive-resume/dto";
-import { CustomSection, defaultSection, SectionKey } from "@reactive-resume/schema";
+import { CustomSectionGroup, defaultSection, SectionKey } from "@reactive-resume/schema";
 import { removeItemInLayout } from "@reactive-resume/utils";
 import _set from "lodash.set";
 import { temporal, TemporalState } from "zundo";
@@ -38,7 +38,7 @@ export const useResumeStore = create<ResumeStore>()(
         });
       },
       addSection: () => {
-        const section: CustomSection = {
+        const section: CustomSectionGroup = {
           ...defaultSection,
           id: createId(),
           name: "Custom Section",

libs/schema/src/sample.ts

@@ -14,8 +14,8 @@ export const sampleResume: ResumeData = {
     customFields: [],
     picture: {
       url: "https://res.cloudinary.com/amruth-pillai/image/upload/v1699362669/reactive-resume/sample-resume/sample-picture_iitowc.jpg",
-      size: 64,
-      aspectRatio: 0.75,
+      size: 128,
+      aspectRatio: 1,
       borderRadius: 6,
       effects: {
         hidden: false,
@@ -35,7 +35,7 @@ export const sampleResume: ResumeData = {
     },
     awards: {
       name: "Awards",
-      columns: 2,
+      columns: 1,
       visible: true,
       id: "awards",
       items: [
@@ -204,7 +204,7 @@ export const sampleResume: ResumeData = {
     },
     languages: {
       name: "Languages",
-      columns: 2,
+      columns: 1,
       visible: true,
       id: "languages",
       items: [
@@ -240,7 +240,7 @@ export const sampleResume: ResumeData = {
     },
     profiles: {
       name: "Profiles",
-      columns: 5,
+      columns: 2,
       visible: true,
       id: "profiles",
       items: [
@@ -331,7 +331,7 @@ export const sampleResume: ResumeData = {
     },
     references: {
       name: "References",
-      columns: 2,
+      columns: 1,
       visible: true,
       id: "references",
       items: [
@@ -453,21 +453,24 @@ export const sampleResume: ResumeData = {
   },
   metadata: {
     locale: "en",
-    template: "rhyhorn",
+    template: "pikachu",
     layout: [
-      [["profiles", "summary", "experience"], []],
-      [["custom.juryi0w9w9jabsgorks0bixq", "education", "certifications", "awards"], []],
       [
-        ["skills", "interests", "publications", "volunteer", "languages", "projects", "references"],
-        [],
+        ["summary", "experience"],
+        ["profiles", "skills", "awards", "certifications"],
       ],
+      [
+        ["custom.juryi0w9w9jabsgorks0bixq", "education"],
+        ["interests", "languages"],
+      ],
+      [["publications", "volunteer", "projects", "references"], []],
     ],
     css: {
       value: ".section {\n\toutline: 1px solid #000;\n\toutline-offset: 4px;\n}",
       visible: false,
     },
     page: {
-      margin: 18,
+      margin: 24,
       format: "a4",
       options: {
         breakLine: true,
@@ -477,16 +480,16 @@ export const sampleResume: ResumeData = {
     theme: {
       background: "#ffffff",
       text: "#000000",
-      primary: "#78716c",
+      primary: "#DC1A4E",
     },
     typography: {
       font: {
         family: "IBM Plex Serif",
         subset: "latin",
-        variants: ["regular", "italic", "600", "600italic"],
-        size: 14,
+        variants: ["regular", "italic", "500", "600", "600italic"],
+        size: 13,
       },
-      lineHeight: 1.5,
+      lineHeight: 2,
       underlineLinks: true,
     },
     notes:

libs/schema/src/sections/index.ts

@@ -92,8 +92,7 @@ export type Sections = z.infer<typeof sectionsSchema>;
 export type SectionKey = "basics" | keyof Sections | `custom.${string}`;
 export type SectionWithItem<T = unknown> = Sections[FilterKeys<Sections, { items: T[] }>];
 export type SectionItem = SectionWithItem["items"][number];
-export type CustomSection = z.infer<typeof customSchema>;
-export type CustomSectionItem = CustomSection["items"][number];
+export type CustomSectionGroup = z.infer<typeof customSchema>;
 
 // Defaults
 export const defaultSection: Section = {

libs/utils/src/index.ts

@@ -3,9 +3,11 @@ export * from "./namespaces/cefr";
 export * from "./namespaces/csv";
 export * from "./namespaces/date";
 export * from "./namespaces/fonts";
+export * from "./namespaces/number";
 export * from "./namespaces/object";
 export * from "./namespaces/page";
 export * from "./namespaces/promise";
 export * from "./namespaces/string";
 export * from "./namespaces/style";
+export * from "./namespaces/template";
 export * from "./namespaces/types";

libs/utils/src/namespaces/number.ts

@@ -0,0 +1,7 @@
+export const linearTransform = (
+  value: number,
+  inMin: number,
+  inMax: number,
+  outMin: number,
+  outMax: number,
+) => ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;

libs/utils/src/namespaces/page.ts

@@ -1,5 +1,3 @@
-import { Template } from "./types";
-
 export const pageSizeMap = {
   a4: {
     width: 210,
@@ -10,12 +8,3 @@ export const pageSizeMap = {
     height: 279,
   },
 };
-
-export const templatesList: Template[] = [
-  {
-    id: "rhyhorn",
-    name: "Rhyhorn",
-    image:
-      "https://res.cloudinary.com/amruth-pillai/image/upload/v1699370067/reactive-resume/templates/482-2480x3508_vuf5ev.jpg",
-  },
-];

libs/utils/src/namespaces/template.ts

@@ -0,0 +1,46 @@
+export type TemplateKey =
+  | "onyx"
+  | "kakuna"
+  | "rhyhorn"
+  | "azurill"
+  | "ditto"
+  | "chikorita"
+  | "bronzor"
+  | "pikachu";
+
+export type Template = { id: TemplateKey; name: string };
+
+export const templatesList: Template[] = [
+  {
+    id: "onyx",
+    name: "Onyx",
+  },
+  {
+    id: "kakuna",
+    name: "Kakuna",
+  },
+  {
+    id: "rhyhorn",
+    name: "Rhyhorn",
+  },
+  {
+    id: "azurill",
+    name: "Azurill",
+  },
+  {
+    id: "ditto",
+    name: "Ditto",
+  },
+  {
+    id: "chikorita",
+    name: "Chikorita",
+  },
+  {
+    id: "bronzor",
+    name: "Bronzor",
+  },
+  {
+    id: "pikachu",
+    name: "Pikachu",
+  },
+];

libs/utils/src/namespaces/types.ts

@@ -1,7 +1,5 @@
 export type Json = Record<string, unknown>;
 
-export type Template = { id: string; name: string; image: string };
-
 export type LayoutLocator = { page: number; column: number; section: number };
 
 export type DeepPartial<T> = T extends object ? { [P in keyof T]?: DeepPartial<T[P]> } : T;

package.json

@@ -25,8 +25,8 @@
     "prepare": "pnpm dlx husky install"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
+    "@babel/core": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
     "@commitlint/cli": "^18.2.0",
     "@commitlint/config-conventional": "^18.1.0",
     "@nestjs/schematics": "^10.0.3",
@@ -50,29 +50,29 @@
     "@tailwindcss/forms": "^0.5.6",
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/eslint-plugin-query": "^5.6.0",
-    "@testing-library/react": "14.0.0",
+    "@testing-library/react": "14.1.0",
     "@types/async-retry": "^1.4.8",
     "@types/bcryptjs": "^2.4.6",
     "@types/cookie-parser": "^1.4.6",
     "@types/express": "^4.17.21",
     "@types/file-saver": "^2.0.7",
-    "@types/jest": "^29.5.7",
+    "@types/jest": "^29.5.8",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.get": "^4.4.9",
     "@types/lodash.set": "^4.3.9",
     "@types/multer": "^1.4.10",
-    "@types/node": "20.8.10",
-    "@types/nodemailer": "^6.4.13",
+    "@types/node": "20.9.0",
+    "@types/nodemailer": "^6.4.14",
     "@types/papaparse": "^5.3.11",
     "@types/passport": "^1.0.15",
     "@types/passport-github2": "^1.2.9",
     "@types/passport-google-oauth20": "^2.0.14",
     "@types/passport-local": "^1.0.38",
-    "@types/react": "18.2.36",
-    "@types/react-dom": "18.2.14",
-    "@types/react-is": "18.2.3",
-    "@types/retry": "^0.12.4",
-    "@types/webfontloader": "^1.6.36",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "@types/react-is": "18.2.4",
+    "@types/retry": "^0.12.5",
+    "@types/webfontloader": "^1.6.37",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "@vitejs/plugin-react": "~4.1.1",
@@ -80,7 +80,7 @@
     "@vitest/coverage-v8": "^0.34.6",
     "@vitest/ui": "~0.34.6",
     "autoprefixer": "^10.4.16",
-    "cypress": "^13.4.0",
+    "cypress": "^13.5.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "~8.53.0",
     "eslint-config-prettier": "^9.0.0",
@@ -125,11 +125,11 @@
     "@nestjs/common": "^10.2.8",
     "@nestjs/config": "^3.1.1",
     "@nestjs/core": "^10.2.8",
-    "@nestjs/jwt": "^10.1.1",
+    "@nestjs/jwt": "^10.2.0",
     "@nestjs/passport": "^10.0.2",
     "@nestjs/platform-express": "^10.2.8",
     "@nestjs/serve-static": "^4.0.0",
-    "@nestjs/swagger": "^7.1.14",
+    "@nestjs/swagger": "^7.1.15",
     "@nestjs/terminus": "^10.1.1",
     "@paralleldrive/cuid2": "^2.2.2",
     "@pdf-lib/fontkit": "^1.1.1",
@@ -158,11 +158,11 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@sentry/node": "^7.77.0",
+    "@sentry/node": "^7.80.0",
     "@songkeys/nestjs-redis": "^10.0.0",
     "@songkeys/nestjs-redis-health": "^10.0.0",
     "@swc/helpers": "~0.5.3",
-    "@tanstack/react-query": "^5.7.2",
+    "@tanstack/react-query": "^5.8.1",
     "@tiptap/extension-highlight": "^2.1.12",
     "@tiptap/extension-image": "^2.1.12",
     "@tiptap/extension-link": "^2.1.12",
@@ -173,7 +173,7 @@
     "@types/passport-jwt": "^3.0.13",
     "async-retry": "^1.3.3",
     "await-to-js": "^3.0.0",
-    "axios": "^1.6.0",
+    "axios": "^1.6.1",
     "axios-auth-refresh": "^3.3.6",
     "bcryptjs": "^2.4.3",
     "cache-manager": "^5.2.4",
@@ -199,7 +199,7 @@
     "nestjs-prisma": "^0.22.0",
     "nestjs-zod": "^3.0.0",
     "nodemailer": "^6.9.7",
-    "openai": "^4.16.1",
+    "openai": "^4.17.0",
     "otplib": "^12.0.1",
     "papaparse": "^5.4.1",
     "passport": "^0.6.0",
@@ -208,14 +208,14 @@
     "passport-jwt": "^4.0.1",
     "passport-local": "^1.0.0",
     "pdf-lib": "^1.17.1",
-    "puppeteer": "^21.5.0",
+    "puppeteer": "^21.5.1",
     "qrcode.react": "^3.1.0",
     "react": "18.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "18.2.0",
     "react-helmet-async": "^1.3.0",
     "react-hook-form": "^7.48.2",
-    "react-parallax-tilt": "^1.7.172",
+    "react-parallax-tilt": "^1.7.173",
     "react-resizable-panels": "^0.0.55",
     "react-router-dom": "6.18.0",
     "react-zoom-pan-pinch": "^3.3.0",